# Cahier des Charges - Site Leifo

## 1. Contexte & Objectifs

### Présentation
- **Nom** : Leifo
- **Nature** : Auto-entreprise spécialisée dans la création de sites web
- **Zone** : Hérimoncourt et alentours
- **Positionnement** : Agence créative proposant des solutions web modernes et performantes

### Objectifs principaux
1. Acquisition clients via formulaire de contact
2. Démonstration de compétences avec portfolio de qualité
3. Référencement local (dominer "création site web Hérimoncourt")
4. Crédibilité et valeurs de qualité/innovation
5. Conversion : transformer visiteurs en leads qualifiés

### Public cible
- **Primaire** : PME, entreprises locales, commerçants (20-300 salariés)
- **Secondaire** : Auto-entrepreneurs, artisans, petits commerces en ligne
- **Décideurs** : Responsables marketing, gérants, propriétaires (35-60 ans)

## 2. Charte Graphique & Identité Visuelle

### Logo
- Icône graphique : courbes analytiques (croissance et performance)
- Symbole caméra/globe : création multimédia et portée globale
- Typographie sans-serif moderne, géométrique, accueillante
- Style : minimaliste, épuré, high-tech avec chaleur humaine

### Palette de couleurs
- **Primaire (Taupe/Beige chaleureux)** : #A89968 (RGB: 168, 153, 104)
  - Usage : Logo, titres H1, boutons principaux, accents
- **Secondaire (Gris neutre)** : #6B7078 (RGB: 107, 112, 120)
  - Usage : Corps de texte, sous-titres, bordures
- **Blancs et neutres** :
  - Fond blanc : #FFFFFF
  - Gris très clair : #F5F5F5 (zones de contraste léger)
- **Accents optionnels (appels à l'action)** :
  - Teal/Turquoise : #2BA8A3 (émergence, conversion)
  - Usage : Boutons CTA, hover states

### Typographies
**Principale (Titres & UI)** :
- Police : Inter, Poppins ou Ubuntu (sans-serif géométrique)
- Poids : 600-700 (Semi-bold / Bold)
- Usage : H1, H2, H3, boutons, navigation

**Secondaire (Corps de texte)** :
- Police : Inter, OpenSans ou Lato (sans-serif lisible)
- Poids : 400-500 (Regular / Medium)
- Usage : Paragraphes, descriptions, contenu détaillé
- Taille : 16px minimum mobile, 18px desktop

**Complémentaire (Données, tarifs)** :
- Police : IBM Plex Mono ou Courier Prime
- Usage : Citations, statistiques, tarification

### Style visuel & ton
- **Modernité** : Design épuré, pas de décoration superflue
- **Confiance** : Élégance subtile, professionnalisme assumé
- **Accessibilité** : Contraste suffisant (AA minimum WCAG 2.1)
- **Motion** : Transitions fluides (300-400ms), animations sobres
- **Imagerie** : Photos de qualité, mockups élégants, illustrations stylisées

## 3. Arborescence & Structure

### Pages principales
1. **Accueil** (/)
2. **À propos** (/a-propos)
3. **Services** (/services)
   - Sites Web Vitrine (/services/sites-vitrine)
   - E-commerce (/services/e-commerce)
   - Web App (/services/web-app)
4. **Portfolio** (/portfolio)
   - Projet individuel (/portfolio/[slug])
5. **Blog** (/blog)
   - Article individuel (/blog/[slug])
6. **Contact** (/contact)
7. **Mentions légales** (/mentions-legales)
8. **Politique de confidentialité** (/politique-confidentialite)
9. **Conditions générales** (/cgu)
10. **Plan du site** (/sitemap)

## 4. Structure Détaillée par Page

### ACCUEIL

#### 1. Hero/Header (Full screen)
- Baseline : "Créer votre présence web exceptionnelle"
- Sous-titre : "Nous transformons vos idées en sites web performants et magnifiques"
- CTA primaire : "Demander un devis" (bouton turquoise)
- CTA secondaire : "Voir nos réalisations" (lien)
- Fond : Dégradé subtil taupe/blanc avec accent graphique

#### 2. Bande value proposition (4 colonnes)
- Rapidité : "Délais respectés"
- Qualité : "Designs modernes"
- SEO : "Optimisé moteurs"
- Support : "Accompagnement continu"
- Format : Chiffres + icons + courte description

#### 3. Section Services (3 colonnes)
- Service 1 : Sites vitrines
- Service 2 : E-commerce
- Service 3 : Web apps
- Format : Card avec icône, titre, description, lien

#### 4. Section Portfolio (Showcase)
- Titre : "Nos réalisations"
- Affichage : 3 projets phares en grid
- Format : Image + logo client + titre + badges (secteur)
- CTA : "Voir tous les projets"

#### 5. Témoignages clients
- Format : Carousel 3 témoignages
- Contenu : Citation + nom + fonction + logo entreprise
- Note : *****

#### 6. Section Processus
- Étape 1 : Échange initial
- Étape 2 : Conception
- Étape 3 : Développement
- Étape 4 : Tests & mise en ligne
- Format : Timeline horizontale ou colonnaire

#### 7. Blog Highlights
- Titre : "Nos derniers articles"
- Affichage : 3 articles récents
- Format : Image + catégorie + titre + date + lien "Lire plus"

#### 8. CTA Final (Avant footer)
- Titre : "Vous avez un projet web ?"
- Sous-titre : "Contactez-nous pour discuter de votre vision"
- CTA : "Prendre rendez-vous" (grand bouton turquoise)

#### 9. Footer
- Logo + ligne descriptif
- Liens rapides (5 liens principaux)
- Formulaire newsletter (optionnel)
- Réseaux sociaux (LinkedIn, Instagram)
- Mentions légales / Politique de confidentialité
- Copyright

### À PROPOS

#### 1. Hero de page
- Titre : "Qui sommes-nous ?"
- Sous-titre : "Passionnés par la création web, au service de votre croissance"

#### 2. Histoire & valeurs
- Section narrative : Histoire d'origine, mission
- Format : Texte + illustration ou fond coloré
- Valeurs clés : 5 piliers (Qualité, Innovation, Écoute, Performance, Transparence)

#### 3. Expertise
- Titre : "Notre expertise"
- Liste : Technologies maîtrisées (React, Node.js, etc.)
- Domaines : Design, développement frontend/backend, SEO, maintenance

#### 4. Équipe (optionnel si pertinent)
- Si solo entrepreneur : "À propos du fondateur"
- Carte mentale : photo + biographie + compétences clés

#### 5. Chiffres clés
- Format : 4 statistiques (Projets réalisés, clients satisfaits, années d'expérience, délai moyen)

#### 6. Certification & partenariats (s'il y a lieu)
- Logos partenaires, certifications, memberships

### SERVICES

#### Page principale Services
1. Hero
   - Titre : "Nos services"
   - Sous-titre : "Solutions web adaptées à vos besoins"

2. Grid 3 colonnes
   - Service 1 : Sites vitrines
   - Service 2 : E-commerce
   - Service 3 : Applications web
   - Format : Carte avec icône, titre, description courte, lien détaillé

#### Pages détaillées (ex: /services/sites-vitrine)
1. Hero + breadcrumb
2. Présentation du service
   - Description détaillée (3-4 paragraphes)
   - Cas d'usage typiques
   - Bénéfices

3. Caractéristiques principales
   - Format : 4-6 points clés avec icônes
   - Exemple : Responsive, SEO-ready, Sécurisé, Performance, Maintenance incluse

4. Processus de création
   - Format : Timeline ou étapes numérotées
   - Durée moyenne, livrables attendus

5. Packages/Tarification (optionnel)
   - Starter / Standard / Premium
   - Inclusions détaillées
   - CTA : "Demander devis"

6. Portfolio filtré
   - Projets similaires (2-3 exemples)

7. CTA Final
   - "Vous avez besoin de ce service ?" → Formulaire contact

### PORTFOLIO

#### Page principale
1. Hero
   - Titre : "Notre portfolio"
   - Sous-titre : "Découvrez nos réalisations"

2. Filtres optionnels
   - Par catégorie (Vitrine / E-commerce / Web app)
   - Par secteur (Retail / B2B / Services)

3. Grid responsif (3 colonnes desktop, 2 mobile)
   - Format : Cartes avec image, logo client, titre, secteur, badges
   - Hover : Overlay avec description courte + lien "Voir le projet"

#### Pages projet (/portfolio/[slug])
1. Hero
   - Grande image/mockup du site
   - Titre du projet
   - Logo client + nom

2. Présentation
   - Client : Secteur, contexte
   - Objectifs : Challenges identifiés
   - Solutions : Approche proposée, technologies

3. Galerie visuelle
   - 4-6 screenshots du site
   - Format : Alternance grands/petits visuels
   - Description des sections

4. Résultats & métriques
   - Exemple : "Augmentation du trafic : +250%"
   - Format : Chiffres clés avec icons
   - Note : à adapter selon données disponibles

5. Détails techniques
   - Stack utilisée (Frontend, Backend, Services)
   - Performance (Lighthouse scores)
   - Délai de réalisation

6. Testimonial du client (s'il existe)

7. CTA
   - "Vous avez un projet similaire ?" → Contact

### BLOG

#### Page archive
1. Hero
   - Titre : "Blog"
   - Sous-titre : "Conseils et actualités web"

2. Barre recherche + filtres
   - Recherche par keyword
   - Filtres : Catégories, date

3. Liste articles
   - Format : Grille 3 colonnes
   - Par article : Thumbnail, catégorie, date, titre, excerpt, lien "Lire plus"

#### Page article (/blog/[slug])
1. Header
   - Titre H1
   - Meta : Auteur, date publication, temps de lecture
   - Image hero (1200x600px)

2. Table des matières (optionnel si article long)

3. Corps de l'article
   - Format : Texte structuré avec H2, H3
   - Images intégrées (avec légendes)
   - Citations de référence
   - Listes numérotées/à puces

4. Section "Plus d'articles"
   - 3 articles similaires ou récents

5. Section commentaires (optionnel ou modérés)

6. Form newsletter

### CONTACT

1. Hero
   - Titre : "Nous contacter"
   - Sous-titre : "Prêt à démarrer votre projet ?"

2. Formulaire de contact
   - Champs : Nom, Email, Téléphone, Type de projet, Message
   - Honeypot (anti-spam)
   - Validation côté client + serveur
   - Recaptcha v3 (invisible)
   - CTA : "Envoyer ma demande"

3. Informations de contact
   - Email principal
   - Formulaire de prise de rendez-vous (Calendly intégré, optionnel)
   - Localisation (carte Google Maps)
   - Réseaux sociaux

4. FAQ rapide
   - Questions fréquentes avec accordéon
   - Délai réponse, tarification, processus

### MENTIONS LÉGALES, CGU, POLITIQUE CONFIDENTIALITÉ
- Pages statiques, contenus légaux complets
- Conforme RGPD français

## 5. Spécifications Fonctionnelles

### 5.1 Formulaire de contact

**Champs** :
- Nom complet (requis, text, min 3 caractères)
- Email (requis, email, validé)
- Téléphone (optionnel, pattern français)
- Type de projet (requis, select : Vitrine, E-commerce, Web app, Autre)
- Message (requis, textarea, min 20 caractères)
- Checkbox consentement RGPD (requis)
- Checkbox newsletter (optionnel)

**Comportement** :
- Validation client instantanée avec feedback visuel
- Validation serveur obligatoire
- Message de confirmation après envoi
- Email transactionnel au client + notification interne
- Honeypot anti-spam
- Recaptcha v3

**Intégration** :
- Envoi email via service SMTP sécurisé
- Stockage optionnel en base de données (avec consentement)
- Intégration CRM (optionnel : Brevo, HubSpot)

### 5.2 Portfolio dynamique

**Fonctionnalités** :
- Affichage dynamique des projets (base de données)
- Filtrage par catégorie / secteur (frontend JavaScript)
- Pagination (10-12 projets par page)
- Recherche simple (titre/description)

**Structure de données** :
```
{
  id: uuid,
  titre: string,
  slug: string,
  description_courte: string,
  description_longue: text,
  categorie: enum[vitrine, ecommerce, webapp],
  secteurs: array[string],
  logo_client: image_url,
  images: array[image_urls],
  date_realisation: date,
  technos: array[string],
  lien_site: url,
  testimonial: text,
  metrics: object
}
```

### 5.3 Blog

**Fonctionnalités** :
- Liste articles paginée
- Filtre par catégorie
- Recherche texte
- Articles "similaires" basés sur tags
- Pagination automatique (10 articles/page)
- Table des matières auto-générée (si article long > 5 sections)

**Structure article** :
```
{
  id: uuid,
  titre: string,
  slug: string,
  contenu: rich_text (markdown/HTML),
  excerpt: string(160 caractères),
  date_publication: date,
  date_modification: date,
  auteur: string,
  categories: array[string],
  tags: array[string],
  image_hero: image_url,
  temps_lecture: integer,
  seo_meta_description: string,
  seo_keywords: array[string]
}
```

### 5.4 Newsletter

**Fonctionnalités** :
- Formulaire d'inscription minimaliste (email + checkbox RGPD)
- Inscription double opt-in (confirmation email)
- Intégration Brevo ou MailChimp
- Gestion de liste de diffusion

## 6. Exigences UX/UI

### Principes directeurs
1. **Mobile-first** : Design prioritairement mobile, évolution desktop
2. **Accessibilité** : WCAG 2.1 niveau AA minimum
3. **Performance** : <3s Time To Interactive sur mobile 4G
4. **Clarté** : Hiérarchie visuelle évidente, CTA clairs
5. **Trustworthiness** : Éléments de confiance visibles (témoignages, logos clients)

### Navigation
- Menu sticky/permanent sur desktop
- Menu hamburger responsive sur mobile (< 768px)
- Breadcrumb sur pages secondaires
- Lien "haut de page" (ou smooth scroll)
- Active state visible sur lien courant

### Boutons & CTA
- Boutons principaux (turquoise #2BA8A3)
- Boutons secondaires (taupe #A89968 outlinés)
- États : Normal, Hover, Active, Disabled
- Taille min : 48x48px sur mobile (accessibilité)
- Feedback : Feedback visuel immédiat (animation, tooltip)

### Formulaires
- Labels explicites et rattachées aux inputs
- Placeholders informatifs mais pas de labels visuels
- Messages d'erreur en rouge clair, positionnés sous le champ
- Feedback validation en temps réel (vert clair)
- Focus visible avec outline turquoise

### Cartes & Sections
- Espace blanc généreux (whitespace)
- Bordures subtiles (gris clair #F5F5F5)
- Ombre légère pour profondeur (box-shadow: 0 2px 8px rgba(0,0,0,0.08))
- Padding cohérent : 24px desktop, 16px mobile

### Images & Visuels
- Compression optimisée (Next.js Image ou équivalent)
- Formats modernes (WebP avec fallback JPG)
- Lazy loading sur images hors-vue
- Alt text descriptif sur tous les images (SEO + a11y)
- Aspect ratio cohérent dans grids

### Typographie
- H1 : 2.5rem (40px) / H2 : 2rem (32px) / H3 : 1.5rem (24px)
- Corps : 1rem (16px) min, 1.125rem (18px) recommandé
- Hauteur ligne : 1.6 pour corps, 1.2 pour titres
- Largeur ligne max : 65 caractères idéalement

### Animations
- Transitions fluides : 300-400ms ease-out
- Hover states subtils (opacité ou déplacement léger)
- Loading states clairs (spinner ou skeleton)
- Pas d'auto-play vidéo (accessibilité)

### Responsive Design
- **Desktop** : 1024px à +
- **Tablet** : 768px à 1023px
- **Mobile** : 320px à 767px
- Points de rupture : 320px, 768px, 1024px, 1440px
- Tests sur vrais appareils (iOS + Android)

## 7. Spécifications Techniques

### Stack technique
- **Frontend** : React 19 + Tailwind CSS 4
- **Backend** : Express 4 + tRPC 11
- **Base de données** : MySQL/TiDB (Drizzle ORM)
- **Auth** : Manus OAuth (déjà configuré)
- **Hébergement** : Manus (built-in hosting)

### Performance
- Lighthouse score > 90 sur toutes les métriques
- Time to Interactive < 3s sur mobile 4G
- Images optimisées (WebP, lazy loading)
- Code splitting et tree shaking

### SEO
- Meta tags dynamiques par page
- Open Graph et Twitter Cards
- Sitemap XML généré automatiquement
- Robots.txt configuré
- Schema.org markup (Organization, LocalBusiness)
- URLs propres et descriptives

### Sécurité
- HTTPS obligatoire
- Protection CSRF
- Validation serveur sur tous les formulaires
- Honeypot + Recaptcha v3 anti-spam
- Headers de sécurité (CSP, X-Frame-Options, etc.)

### Accessibilité
- Contraste minimum WCAG 2.1 AA
- Navigation au clavier complète
- ARIA labels appropriés
- Alt text sur toutes les images
- Focus visible sur tous les éléments interactifs