# 🧭 Guide d'entretien du site MERKANTO

Ce guide est écrit pour une personne **non développeuse**. Il explique où trouver
les choses et comment faire les modifications les plus courantes, en toute sécurité.

> 🔑 **La règle d'or** : dans le code, on ne modifie **que le texte entre les
> guillemets** `'...'` ou `"..."`. On ne touche **jamais** aux symboles autour
> (`{ } < > = ;`). Si un doute : ne touchez à rien et demandez-moi. 🙂

---

## 1. Lancer le site sur votre ordinateur

Ouvrez le **Terminal** dans le dossier du projet (`merkantosite`), puis :

```
npm install      # à faire UNE SEULE FOIS (installe les outils)
npm run dev      # démarre le site → ouvrez http://localhost:5173
```

- Pour **arrêter** le site : cliquez dans le Terminal et faites **Ctrl + C**.
- Tant que `npm run dev` tourne, chaque modification enregistrée s'affiche
  automatiquement dans le navigateur.

👉 Il faut avoir **Node.js** installé (https://nodejs.org).
👉 Pour modifier les fichiers, utilisez un éditeur gratuit : **VS Code**
(https://code.visualstudio.com).

---

## 2. La carte du projet : quel fichier = quoi

Tout le site est dans le dossier **`src`**.

### 📄 `src/pages/` — le contenu de chaque page (là où on va le plus souvent)

| Fichier             | Page du site                  |
| ------------------- | ----------------------------- |
| `Home.jsx`          | Accueil                       |
| `About.jsx`         | À propos                      |
| `Services.jsx`      | Services                      |
| `ServiceDetail.jsx` | Les 3 fiches services         |
| `Solutions.jsx`     | Solutions                     |
| `Contact.jsx`       | Contact                       |
| `Charte.jsx`        | La charte graphique           |

### 🧩 `src/components/` — les éléments répétés partout

| Fichier             | Élément                                   |
| ------------------- | ----------------------------------------- |
| `Header.jsx`        | Le menu du haut                           |
| `Footer.jsx`        | Le pied de page                           |
| `Logo.jsx`          | Le logo                                   |
| `illustrations.jsx` | Les dessins + **les personnages d'équipe**|
| `ui.jsx`            | Petits éléments réutilisés                |

### 🎨 Le reste

- `src/styles.css` → les **couleurs** et le style général.
- `public/` → le favicon (et vos vraies photos un jour).
- Fichiers à la racine (`package.json`, `vite.config.js`…) → **configuration technique, NE PAS TOUCHER**.

---

## 3. Modifier un texte

1. Ouvrez le fichier de la page concernée (voir le tableau ci-dessus).
2. Cherchez le texte à changer (dans VS Code : **Cmd + F** pour rechercher).
3. Modifiez **uniquement** ce qui est entre les guillemets, puis enregistrez (**Cmd + S**).

**Exemple** — changer la phrase d'accroche de l'accueil, dans `src/pages/Home.jsx` :

```js
heroTitle: 'Au service de vos ambitions',   // ← changez le texte ici
```

> ⚠️ Le site est **bilingue**. Beaucoup de textes existent en **deux versions** :
> une dans la partie `fr:` (français) et une dans la partie `en:` (anglais).
> Pensez à modifier les deux si vous voulez que ce soit cohérent.

---

## 4. Changer une couleur

Les couleurs de la marque sont définies une seule fois dans `src/styles.css`,
tout en haut. Exemple :

```css
--mk-blue: #0E7CC7;   /* le bleu principal (boutons, accents) */
--mk-gold: #D4A017;   /* l'or (puces, traits) */
```

Changez le code couleur (ex. `#0E7CC7`) et toute la couleur du site suit.

---

## 5. Modifier l'équipe (ajouter / supprimer / changer un membre)

Un membre ressemble à ceci :

```js
{ name: 'Samira Derres', pole: 'Finance & Fiscalité', role: 'Avocate fiscaliste' }
```

- `name` = le nom · `pole` = la pastille bleue · `role` = la fonction.

📌 **Important à savoir aujourd'hui** : la liste de l'équipe est écrite à
**deux endroits** — dans `src/pages/Home.jsx` ET dans `src/pages/About.jsx` —
et chaque fois en **deux langues** (`fr:` et `en:`). Cherchez le mot `TEAM`
dans ces fichiers pour la trouver.

### Supprimer un membre
Effacez son bloc `{ … },` (aux 4 endroits : Home + About, fr + en).

### Ajouter un membre
Copiez un bloc existant, collez-le à la suite, changez `name` / `pole` / `role`
(aux 4 endroits également).

### Le visage (personnage illustré)
Le dessin est choisi **par position** : le 1er membre prend le 1er personnage,
le 2e le 2e, etc. Les 6 visages disponibles sont dans
`src/components/illustrations.jsx` (cherchez `PEOPLE`) :
`long`, `barbe (short)`, `foulard (scarf)`, `afro`, `dégradé (fade)`, `lunettes (glasses)`.

> 💬 **Le plus simple** : cette partie est un peu délicate (4 endroits à
> synchroniser). Donnez-moi simplement la nouvelle liste de l'équipe et je
> fais la modification pour vous proprement. Je peux aussi tout regrouper dans
> **un seul fichier** pour que ce soit beaucoup plus facile à l'avenir.

---

## 6. Changer l'email, les villes, les liens du pied de page

- **Email** `contact@mercanto.biz` → présent dans `Footer.jsx`, `Contact.jsx`, `Home.jsx`.
- **Villes** `Cotonou · Abidjan · Aix-en-Provence` → dans `Footer.jsx`, `Home.jsx`,
  `About.jsx`, `Contact.jsx`.
- **Liens / colonnes du pied de page** → `src/components/Footer.jsx`.

(Cherchez le mot avec **Cmd + F** pour le retrouver vite.)

---

## 7. Publier une nouvelle version du site

Quand vos modifications sont prêtes et que le site est déjà en ligne :

```
npm run build
```

Cela crée un dossier `dist/` : c'est **ce dossier** qu'on envoie à l'hébergeur
(Netlify, Vercel, ou votre hébergeur actuel). Si vous voulez, je vous guiderai
pas à pas pour la mise en ligne le moment venu.

---

## 8. Me demander de l'aide

Vous n'êtes pas obligé(e) de coder vous-même. **Vous décrivez, je code.**

- Dites-moi en français ce que vous voulez (« change ce texte », « ajoute une
  page Actualités », « mets le bleu un peu plus foncé », « remplace un membre »…).
- Si besoin, partagez-moi votre dossier (le ZIP) pour que je reparte de votre
  dernière version, puis je vous renvoie le `src` mis à jour.
- Ou installez **Claude Code** sur votre Mac, ouvrez-le dans le dossier du
  projet, et parlez-moi directement là-bas : je modifie les fichiers sur place.

---

*Astuce : gardez ce fichier `GUIDE.md` dans le dossier du projet pour l'avoir
toujours sous la main.*
