From b71c845b323dcddc2fc7ee1b49c03e20da914d20 Mon Sep 17 00:00:00 2001
From: Matthieu Reynier
 <matthieureynier@ip-192-168-68-68.eu-west-3.compute.internal>
Date: Tue, 16 Jun 2026 14:37:39 +0200
Subject: [PATCH] Site vitrine FleetZen - enonce HTML/CSS/Git pour stagiaires

Enonce du projet (README) et structure de depart : index.html, css/,
pages/ (services, contact), assets/. Pas de JavaScript.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .gitignore             |   2 +
 README.md              | 156 +++++++++++++++++++++++++++++++++++++++++
 assets/images/.gitkeep |   0
 css/style.css          |   0
 index.html             |   0
 pages/contact.html     |   0
 pages/services.html    |   0
 7 files changed, 158 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 assets/images/.gitkeep
 create mode 100644 css/style.css
 create mode 100644 index.html
 create mode 100644 pages/contact.html
 create mode 100644 pages/services.html

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1062418
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.idea/
+*.iml
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c2381bd
--- /dev/null
+++ b/README.md
@@ -0,0 +1,156 @@
+# 🚚 Projet : Site vitrine "FleetZen" — Gestion de flotte
+
+Bienvenue ! Ce projet est un **exercice de prise en main de HTML, CSS et Git**.
+
+Vous allez construire, à deux, un petit **site vitrine** pour une entreprise fictive de **gestion de flotte de véhicules** (suivi GPS, entretien, optimisation de carburant, etc.). L'entreprise s'appelle **FleetZen**.
+
+> 🎯 **Objectif pédagogique** : savoir structurer une page en HTML, la mettre en forme en CSS, et collaborer proprement avec Git (branches, commits, merge).
+>
+> 🚫 **Aucun JavaScript n'est demandé.** Concentrez-vous sur HTML + CSS uniquement.
+
+---
+
+## 📋 Ce que vous allez apprendre
+
+- Structurer une page web avec du **HTML sémantique** (`header`, `nav`, `main`, `section`, `footer`…)
+- Mettre en page et styliser avec du **CSS** (couleurs, typographie, espacements, flexbox/grid)
+- Travailler à plusieurs avec **Git** : créer une branche, committer, pousser, ouvrir une *Pull Request*
+- Gérer un **conflit de merge** (ça arrivera, c'est normal et formateur !)
+
+---
+
+## 🗂️ Structure attendue du projet
+
+À la fin, le dépôt devra ressembler à ça :
+
+```
+stagiaire/
+├── README.md
+├── index.html          ← page d'accueil (commune, à faire ensemble)
+├── css/
+│   └── style.css        ← feuille de style partagée
+├── pages/
+│   ├── services.html    ← page du Stagiaire 1
+│   └── contact.html     ← page du Stagiaire 2
+└── assets/
+    └── images/          ← vos images / logos
+```
+
+> 💡 Vous pouvez ajouter d'autres dossiers/images si besoin, mais gardez cette base.
+
+---
+
+## 👥 Répartition du travail
+
+Chacun développe **une page du site**, sur **sa propre branche**.
+
+| Stagiaire | Page à développer | Branche Git | Contenu attendu |
+|-----------|-------------------|-------------|-----------------|
+| **Stagiaire 1** | `pages/services.html` | `feature/page-services` | Présentation des services de FleetZen : suivi GPS temps réel, gestion de l'entretien, rapports de consommation. 3 "cartes" minimum. |
+| **Stagiaire 2** | `pages/contact.html` | `feature/page-contact` | Page de contact : coordonnées de l'entreprise, un **formulaire HTML** (nom, email, message — sans JS, juste le HTML/CSS), horaires. |
+
+La page d'accueil `index.html` et le fichier `css/style.css` sont **communs** : démarrez-les ensemble avant de partir chacun sur votre branche.
+
+---
+
+## ✅ Cahier des charges (consignes communes)
+
+Chaque page doit contenir :
+
+1. Un **`<header>`** avec le nom/logo **FleetZen** et une **barre de navigation** (`<nav>`) avec des liens vers : Accueil, Services, Contact.
+2. Un **`<main>`** avec le contenu propre à la page (au moins 2 sections).
+3. Un **`<footer>`** avec les mentions de l'entreprise (copyright, année).
+4. Une **mise en forme CSS** : couleurs cohérentes, police lisible, marges/espacements soignés.
+5. Le site doit rester **lisible sur mobile et sur ordinateur** (utilisez `flexbox` ou `grid`).
+6. Du **HTML valide et indenté** proprement.
+
+### Contraintes techniques
+- HTML5 (`<!DOCTYPE html>`)
+- Encodage UTF-8 (`<meta charset="utf-8">`)
+- Balise `<title>` renseignée sur chaque page
+- **Pas de JavaScript**
+- Les styles vont dans `css/style.css` (pas de `style=""` en ligne dans le HTML, sauf cas exceptionnel justifié)
+
+---
+
+## 🌿 Mode d'emploi Git (à suivre étape par étape)
+
+### 1. Récupérer le projet
+```bash
+git clone <url-du-depot>
+cd stagiaire
+```
+
+### 2. Créer SA branche (avant de coder !)
+```bash
+# Stagiaire 1
+git checkout -b feature/page-services
+
+# Stagiaire 2
+git checkout -b feature/page-contact
+```
+
+### 3. Travailler et committer régulièrement
+Faites des **petits commits** avec des messages clairs.
+```bash
+git add .
+git commit -m "Ajout de la structure HTML de la page services"
+```
+> 📝 Bon message de commit = court, au présent, qui décrit *ce que fait* le commit.
+> Exemples : `"Ajout du header et de la navigation"`, `"Mise en forme CSS des cartes de services"`.
+
+### 4. Envoyer sa branche sur le dépôt distant
+```bash
+git push -u origin feature/page-services   # adaptez le nom de votre branche
+```
+
+### 5. Ouvrir une Pull Request (PR)
+Sur GitHub/GitLab, ouvrez une **Pull Request** de votre branche vers `main`.
+Décrivez ce que vous avez fait. L'autre stagiaire (ou le tuteur) **relit** avant de fusionner.
+
+### 6. Mettre à jour sa branche
+Pour récupérer le travail fusionné par l'autre :
+```bash
+git checkout main
+git pull
+git checkout feature/ma-branche
+git merge main
+```
+👉 Si Git signale un **conflit**, pas de panique : ouvrez le fichier, choisissez le bon contenu entre les marqueurs `<<<<<<<`, `=======`, `>>>>>>>`, puis :
+```bash
+git add <fichier-résolu>
+git commit
+```
+
+---
+
+## 🧭 Déroulé conseillé
+
+1. **Ensemble** : créer `index.html` + `css/style.css` de base sur `main` (squelette commun, charte de couleurs).
+2. **Chacun** : créer sa branche et développer sa page.
+3. **Régulièrement** : commit + push.
+4. **À la fin** : ouvrir vos PR, vous relire mutuellement, fusionner dans `main`.
+5. **Bonus** : régler un conflit de merge proprement si vous en croisez un.
+
+---
+
+## 🎁 Idées bonus (si vous avez fini)
+
+- Ajouter un **logo** FleetZen (image dans `assets/images/`)
+- Effet `:hover` sur les boutons et liens de navigation
+- Une page supplémentaire "À propos" / "Tarifs"
+- Rendre le menu de navigation identique et bien aligné sur toutes les pages
+
+---
+
+## 📚 Ressources utiles
+
+- [MDN — Apprendre le HTML](https://developer.mozilla.org/fr/docs/Learn/HTML)
+- [MDN — Apprendre le CSS](https://developer.mozilla.org/fr/docs/Learn/CSS)
+- [Flexbox en images (Flexbox Froggy)](https://flexboxfroggy.com/#fr)
+- [CSS Grid (Grid Garden)](https://cssgridgarden.com/#fr)
+- [Aide-mémoire Git](https://education.github.com/git-cheat-sheet-education.pdf)
+
+---
+
+Bon courage, et amusez-vous bien ! 🚀
diff --git a/assets/images/.gitkeep b/assets/images/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e69de29
diff --git a/pages/contact.html b/pages/contact.html
new file mode 100644
index 0000000..e69de29
diff --git a/pages/services.html b/pages/services.html
new file mode 100644
index 0000000..e69de29