# 🌿 Landing Page Devis Pergola - Guide d'Installation

## 📋 Contenu du Package

Vous avez reçu 3 fichiers :
1. **devis-pergola-moderne.html** - La landing page complète
2. **send-devis.php** - Le script d'envoi d'email
3. **README.md** - Ce fichier d'instructions

---

## ✨ Fonctionnalités

✅ **Design moderne et responsive** - Magnifique sur tous les appareils
✅ **Animations fluides** - Expérience utilisateur premium
✅ **Formulaire complet** - Tous les champs nécessaires avec validation
✅ **Champs obligatoires** - Impossible de soumettre sans remplir tous les champs requis
✅ **Envoi d'email automatique** - À jfduro@gmail.com avec toutes les informations
✅ **Email de confirmation** - Le client reçoit une confirmation automatique
✅ **Logo intégré** - Votre logo Conseil Artisan est utilisé
✅ **Conformité CNIL/RGPD** - Mention légale complète en bas de page
✅ **Lien vers la politique de confidentialité** - Intégré dans le formulaire

---

## 🚀 Installation

### Méthode 1 : Serveur avec PHP (RECOMMANDÉ)

1. **Téléchargez les fichiers** sur votre serveur web
2. **Placez les fichiers** dans le dossier de votre site :
   ```
   /votre-site/devis/devis-pergola/
   ├── devis-pergola-moderne.html
   └── send-devis.php
   ```

3. **Renommez le fichier HTML** (optionnel) :
   - Vous pouvez renommer `devis-pergola-moderne.html` en `index.html`
   - Ainsi l'URL sera : `https://www.conseil-artisan.fr/devis/devis-pergola/`

4. **Vérifiez les permissions** :
   ```bash
   chmod 644 devis-pergola-moderne.html
   chmod 755 send-devis.php
   ```

5. **Testez l'envoi d'email** :
   - Remplissez le formulaire sur votre site
   - Vérifiez que vous recevez bien l'email à jfduro@gmail.com

### Méthode 2 : Sans serveur PHP (Solution alternative)

Si votre hébergeur ne supporte pas PHP, vous pouvez utiliser **Formspree** (gratuit) :

1. **Créez un compte sur** [Formspree.io](https://formspree.io)
2. **Créez un nouveau formulaire** avec l'email jfduro@gmail.com
3. **Récupérez l'URL du formulaire** (ex: https://formspree.io/f/xxxxxx)
4. **Modifiez la ligne 590** du fichier HTML :
   ```javascript
   // Remplacez cette ligne :
   const response = await fetch('send-devis.php', {
   
   // Par :
   const response = await fetch('https://formspree.io/f/VOTRE_ID_ICI', {
   ```

---

## 📧 Configuration de l'Email

### Email de destination
L'email est configuré pour être envoyé à : **jfduro@gmail.com**

Si vous souhaitez le changer, modifiez la ligne 27 du fichier `send-devis.php` :
```php
$to = 'jfduro@gmail.com';  // Changez ici
```

### Format de l'email reçu

Vous recevrez un email au format HTML professionnel contenant :
- ✅ Informations client (nom, prénom, email, téléphone, ville, code postal)
- ✅ Détails du projet (type de pergola, surface, délai, budget)
- ✅ Description complète du projet
- ✅ Date et heure de la demande

### Email de confirmation client

Le client recevra automatiquement un email de confirmation avec :
- ✅ Accusé de réception de sa demande
- ✅ Récapitulatif de son projet
- ✅ Informations sur les prochaines étapes

---

## 🎨 Personnalisation

### Couleurs

Les couleurs sont définies au début du CSS (lignes 14-20) :
```css
:root {
    --primary-color: #2c5f2d;    /* Vert foncé */
    --secondary-color: #97bc62;   /* Vert clair */
    --accent-color: #ff6b35;      /* Orange */
    --dark: #1a1a1a;             /* Noir */
    --light: #f8f9fa;            /* Gris clair */
    --white: #ffffff;            /* Blanc */
}
```

### Logo

Le logo est chargé depuis :
```html
https://www.conseil-artisan.fr/images/logoca.png
```

Si vous souhaitez utiliser un autre logo, remplacez cette URL aux lignes 309 et 551.

### Textes

Vous pouvez modifier tous les textes directement dans le fichier HTML :
- Titre principal (ligne 310)
- Sous-titre (ligne 311)
- Textes des features (lignes 317-334)
- Contenu informatif (lignes 454-482)

---

## ✅ Champs du Formulaire

Tous les champs marqués d'un **astérisque rouge (*)** sont **OBLIGATOIRES** :

1. **Prénom** *
2. **Nom** *
3. **Email** * (avec validation du format)
4. **Téléphone** *
5. **Code Postal** * (validé en 5 chiffres)
6. **Ville** *
7. **Type de pergola** * (menu déroulant)
8. **Surface estimée** * (menu déroulant)
9. **Délai de réalisation** * (menu déroulant)
10. **Budget estimé** * (menu déroulant)
11. **Description du projet** (optionnel)
12. **Consentement RGPD** * (case à cocher obligatoire)

### Validation automatique

- ✅ Email : vérifie le format (ex: nom@domaine.fr)
- ✅ Code postal : accepte uniquement 5 chiffres
- ✅ Téléphone : accepte uniquement les chiffres et + 
- ✅ Tous les champs requis doivent être remplis

---

## 🔒 Conformité CNIL / RGPD

La page intègre :

1. **Mention CNIL complète** en bas de page (footer)
2. **Lien vers la politique de confidentialité** : https://www.conseil-artisan.fr/politique-de-confidentialite/
3. **Case de consentement obligatoire** dans le formulaire
4. **Information sur les partenaires** (maison.fr, devisplus, hello artisan, devisprox)
5. **Droit d'opposition** (Bloctel)
6. **Droits RGPD** (accès, rectification, suppression)

---

## 🛠️ Dépannage

### L'email n'est pas reçu

1. **Vérifiez le dossier spam/courrier indésirable**
2. **Vérifiez que PHP mail() fonctionne** sur votre serveur
3. **Contactez votre hébergeur** pour activer la fonction mail()
4. **Alternative** : Utilisez Formspree (voir Méthode 2)

### Le formulaire ne se soumet pas

1. **Ouvrez la console du navigateur** (F12)
2. **Vérifiez les erreurs JavaScript**
3. **Vérifiez que tous les champs obligatoires sont remplis**

### Problème d'affichage

1. **Videz le cache du navigateur** (Ctrl + F5)
2. **Testez sur un autre navigateur**
3. **Vérifiez que le fichier HTML est complet**

---

## 📱 Support

Pour toute question ou problème :
- 📧 Email : jfduro@gmail.com
- 🌐 Site : https://www.conseil-artisan.fr

---

## 🎯 Prochaines Étapes Recommandées

1. **Testez le formulaire** avec des données réelles
2. **Vérifiez la réception des emails**
3. **Ajustez les couleurs** si nécessaire
4. **Connectez Google Analytics** pour suivre les conversions
5. **Configurez un pixel Facebook** si vous faites de la pub
6. **Optimisez le SEO** (balises meta, title, etc.)

---

## ⚡ Points Forts de cette Landing Page

✨ **Design Premium** - Gradient moderne, animations fluides
🎨 **Expérience utilisateur** - Interface intuitive et engageante
📱 **100% Responsive** - Parfait sur mobile, tablette et desktop
🚀 **Performance optimale** - Chargement rapide, code optimisé
🔒 **Sécurisé** - Protection contre les injections et spam
📧 **Emails professionnels** - Format HTML élégant
✅ **Conversion optimisée** - Call-to-action clairs et visibles

---

## 🎉 C'est Prêt !

Votre nouvelle landing page est prête à générer des leads de qualité pour vos devis de pergola !

**Astuce Pro** : Ajoutez cette page à vos campagnes Google Ads et Facebook Ads pour maximiser vos conversions ! 🚀

---

*Développé avec ❤️ pour Conseil Artisan*
*Version 1.0 - Février 2026*