# Site 143 Agency — mode d'emploi

## Ce que contient le dossier

```
143-agency-site/
├── index.html              → Accueil
├── qui-sommes-nous.html    → Le duo
├── notre-methode.html      → Ce que nous faisons + la méthode
├── nos-offres.html         → Formules + configurateur de devis
├── nos-references.html     → Galerie des projets
├── contact.html            → Formulaire + coordonnées
├── merci.html              → Page affichée après l'envoi d'une demande
├── envoi.php               → Reçoit les formulaires et te les envoie par e-mail
├── assets/
│   ├── styles.css          → TOUTE l'apparence du site (couleurs, tailles, mise en page)
│   └── script.js           → TOUTES les animations et interactions
└── images/                 → Toutes les photos + le logo
```

Les pages sont **identiques à la version que tu as validée**. Rien n'a changé
visuellement : le code a simplement été rangé dans des fichiers séparés.

---

## Mettre en ligne chez OVH

1. Espace client OVH → **Hébergements** → ton hébergement → onglet **FTP-SSH**.
2. Ouvre l'**Explorateur FTP** (ou FileZilla avec les identifiants affichés).
3. Entre dans le dossier **www**.
4. Supprime ou renomme les fichiers WordPress qui s'y trouvent
   (`index.php`, `wp-admin`, `wp-content`, `wp-includes`, `.htaccess`).
5. Envoie le **contenu** de ce dossier dans `www` : les fichiers `.html`,
   `envoi.php`, le dossier `assets` et le dossier `images`.
   Attention : le contenu, pas le dossier `143-agency-site` lui-même,
   sinon le site serait sur `143agency.fr/143-agency-site/`.
6. Ouvre `https://143agency.fr` — c'est en ligne.

Pour tester sans toucher à WordPress : crée un dossier `site` dans `www`,
mets tout dedans, et regarde `143agency.fr/site/`.

---

## Le formulaire et le configurateur

Les deux formulaires (page Contact et configurateur de devis) envoient
**directement** la demande sur contact@143agency.fr. Le visiteur ne voit
aucune fenêtre de messagerie : il clique, il arrive sur `merci.html`,
et tu reçois l'e-mail.

C'est `envoi.php` qui fait ce travail. Il doit rester à la racine du site,
à côté des fichiers `.html`. Rien à configurer : l'adresse de réception est
en haut du fichier si tu veux la changer un jour. En répondant à l'e-mail
reçu, tu réponds directement au visiteur (son adresse est en « répondre à »).

**Cela ne fonctionne que sur un hébergement PHP comme OVH.** Si tu héberges
ailleurs (Netlify, GitHub Pages), PHP n'existe pas : il faudra créer un compte
gratuit sur formspree.io et remplacer, dans `contact.html` et `nos-offres.html`,
`action="envoi.php"` par l'adresse fournie par Formspree.

Premier test après la mise en ligne : remplis le formulaire toi-même et vérifie
que l'e-mail arrive (regarde aussi les indésirables la première fois).

---

## Modifier le site

### Changer un texte
Ouvre la page concernée avec un éditeur de texte (VS Code, gratuit — pas Word).
Cherche la phrase, remplace-la, enregistre, renvoie le fichier par FTP.
Ne touche pas à ce qui est entre `<` et `>`.

### Remplacer une photo
Donne à la nouvelle photo **exactement le même nom** que l'ancienne
(ex. `duo.webp`) et écrase le fichier dans `images/`. Rien d'autre à faire.

| Fichier | Où il apparaît |
|---|---|
| `logo-143.png` | Accueil, grand logo animé |
| `duo.webp` | Qui sommes-nous, photo cliquable |
| `yohan-crico.webp` / `sephora-patient.webp` | Qui sommes-nous, fiches individuelles |
| `ref-*.webp` | Nos références + accueil |

### Ajouter une référence
Dans `nos-references.html`, copie un bloc complet qui commence par
`<button class="projet"` et se termine par `</button>`, colle-le juste après,
puis remplace le nom de l'image, le titre, la ligne de rôle et la description.
La valeur `data-categorie` doit être `entreprise`, `institution` ou `artistique`
pour que les filtres fonctionnent.

### Changer une couleur
Tout est en haut de `assets/styles.css`, dans le bloc `:root` :

```
--or:#C9A961;        couleur dorée principale
--or-clair:#E8D5A3;  doré clair
--ivoire:#F2E9DC;    couleur des textes clairs
--noir:#000;         fond du site
```

Change la valeur, enregistre, renvoie le fichier : toutes les pages suivent.

### Ajouter le téléphone, le SIRET, l'assurance
Ces trois informations affichent « à venir » en bas de `contact.html`.
Quand tu les auras :

- `<span>Téléphone : à venir</span>` devient
  `<a href="tel:+594XXXXXXXXX">+594 XX XX XX XX</a>`
- `SIRET : à venir` → ton numéro
- `Assurance RC Professionnelle événementielle : à venir` → ton contrat

Tu peux mettre le site en ligne sans attendre : ces mentions se modifient
à tout moment, il suffit de renvoyer `contact.html` par FTP.

---

## Avant de montrer le site

- [ ] Tester le formulaire une fois en ligne et vérifier la réception de l'e-mail
- [ ] Relire les textes « Ce que vous avez en main » de `notre-methode.html` :
      ce sont des engagements pris devant le client
- [ ] Vérifier les tarifs affichés dans `nos-offres.html`

## Quand tu auras les informations manquantes

- [ ] Téléphone, SIRET et assurance RC Pro dans `contact.html`