# milpat.pt — Site statique prêt à déployer

Site one-page bilingue PT/EN pour **Milpat Portugal**. Stack : HTML / CSS / JS vanilla, zéro dépendance, zéro build step.

## Structure

```
site-milpat/
├── index.html              PT - home (one-page)
├── privacidade.html        PT - politique de confidentialité
├── en/
│   ├── index.html          EN - home (one-page)
│   └── privacy.html        EN - privacy policy
├── css/styles.css          Design system complet (Milpat palette)
├── js/main.js              Nav sticky, burger, smooth scroll, forms, cookie banner
├── assets/
│   ├── logo.svg            Logo texte Milpat · Portugal
│   └── favicon.svg         Favicon navy + accent orange
├── robots.txt              Index + sitemap
├── sitemap.xml             Sitemap avec hreflang PT/EN
└── README.md               Ce document
```

**Poids total : ~150 Ko** (dont ~30 Ko CSS, ~4 Ko JS). Ultra léger.

## Aperçu local avant déploiement

```bash
cd site-milpat
python3 -m http.server 8000
# Ouvre http://localhost:8000 dans ton navigateur
```

Ou double-clique sur `index.html` (fonctionne aussi, mais http-server est plus fidèle).

## Déploiement — 3 options selon hébergeur

### Option 1 — Hébergeur classique (OVH, IONOS, hébergeur PT) via FTP

1. Connecte-toi en FTP/SFTP avec ton client (FileZilla, Cyberduck, Transmit...).
2. Va dans le dossier racine du domaine `milpat.pt` (généralement `/www/` ou `/public_html/`).
3. Upload **tout le contenu de `site-milpat/`** (pas le dossier lui-même, juste son contenu).
4. Vérifie que `index.html` est bien à la racine du domaine.
5. Ouvre https://milpat.pt — ça doit fonctionner immédiatement.

Durée typique : 5-10 minutes selon la vitesse de l'upload.

### Option 2 — Netlify (gratuit, 2 minutes)

1. Crée un compte sur [netlify.com](https://netlify.com).
2. Drag-and-drop le dossier `site-milpat/` sur l'interface Netlify.
3. Dans les settings du site, ajoute le domaine custom `milpat.pt` (Netlify te donne les enregistrements DNS à configurer chez le registrar).
4. HTTPS automatique, CDN global, 100 % gratuit jusqu'à ~100 Go/mois.

### Option 3 — GitHub Pages (si tu veux versionner)

1. Crée un repo `milpat-site` sur GitHub, pousse le contenu.
2. Settings → Pages → branch `main` / root.
3. Ajoute le domaine custom `milpat.pt`.

## Configuration Formspree (obligatoire avant prod)

Les 2 formulaires (devis + intervention) utilisent [Formspree](https://formspree.io) comme backend. Setup en 5 minutes :

1. Crée un compte gratuit sur [formspree.io](https://formspree.io).
2. Crée **2 forms distincts** :
   - `milpat-quote` → destiné à `comercial@milpat.pt`
   - `milpat-booking` → destiné à `servico@milpat.pt`
3. Formspree te donne 2 endpoints : `https://formspree.io/f/xyz123` (copie-colle l'ID).
4. Dans `index.html` et `en/index.html`, cherche et remplace :
   - `YOUR_FORMSPREE_ID_QUOTE` → ton ID du form `milpat-quote`
   - `YOUR_FORMSPREE_ID_BOOKING` → ton ID du form `milpat-booking`

Plan gratuit : 50 soumissions/mois. Plan basique 10 €/mois pour 1000/mois + webhook vers ton CRM. Tu peux aussi configurer un webhook vers n8n quand ta stack agentique sera prête pour déclencher l'Agent Devis automatiquement.

## Domaines email à créer

Le site référence 3 adresses. Provisionnez-les dans Google Workspace, Microsoft 365 ou équivalent :

- `comercial@milpat.pt` — demandes d'orçamento
- `servico@milpat.pt` — demandes d'intervention
- `rgpd@milpat.pt` — demandes RGPD (droit d'accès, rectification, etc.)

**Avant d'envoyer des emails** depuis ces adresses : configurer **SPF + DKIM + DMARC** dans ton DNS (cf. cahier des charges intégrateur, section 6).

## Placeholders à remplir avant publication

Dans les fichiers HTML, chercher et remplacer les 5 placeholders :

| Placeholder | Où | Quoi |
|---|---|---|
| `NIF [a preencher]` | footer index.html, footer EN, privacidade.html, privacy.html | NIF Milpat Portugal |
| `[endereço a preencher]` | privacidade.html, privacy.html | Adresse siège social PT |
| `+351 [em breve]` / `+351 [à venir]` | pitch deck, footer | Numéro de téléphone PT |
| `YOUR_FORMSPREE_ID_QUOTE` | index.html, en/index.html | Endpoint Formspree form devis |
| `YOUR_FORMSPREE_ID_BOOKING` | index.html, en/index.html | Endpoint Formspree form intervention |

## Design — palette & typo

- **Palette** : Midnight Executive + accent orange Milpat
  - Navy primary `#1E2761`, navy dark `#111A4C`
  - Orange accent `#C65011`, orange hover `#A8430E`
  - Background soft `#F7F9FC`
  - Ice blue (sur navy) `#CADCFC`
- **Typographie** :
  - Titres : Playfair Display 700 (serif élégant)
  - Corps : Inter 400/500/600 (sans-serif moderne)
- **Tokens CSS** : voir `css/styles.css` section 2 (`:root`) — tout est paramétrable en une variable.

## Accessibilité

- Contraste WCAG AA sur tous les textes (navy sur blanc, white sur navy, etc.).
- Focus visible (outline orange) pour navigation clavier.
- Attributs ARIA sur la navigation, les formulaires, les FAQ details, le cookie banner.
- Labels explicites sur tous les champs de formulaire.
- Alt text + role=img sur SVG.
- Structure sémantique HTML5 (header, main, section, article, nav, footer, aside).

## SEO

- Meta title/description optimisés par page, PT et EN distincts.
- Canonical + hreflang `pt-PT`, `en`, `x-default`.
- Schema.org `LocalBusiness` en JSON-LD sur la home.
- Open Graph + Twitter cards.
- `robots.txt` + `sitemap.xml` prêts.

À faire après mise en ligne :
1. Ajouter le site dans [Google Search Console](https://search.google.com/search-console) (sitemap : `https://milpat.pt/sitemap.xml`).
2. Ajouter le site dans [Bing Webmaster Tools](https://www.bing.com/webmasters).

## Performance

- Pas de framework JS, pas de build, pas de bundle.
- Fonts chargés depuis Google Fonts avec `preconnect`. Pour encore plus de perf : self-host les 2 fonts dans `/assets/fonts/` et retirer les links Google.
- Images : aucune pour le moment. Quand tu ajouteras des photos d'intervention, optimise-les en WebP ≤ 200 Ko.
- Lighthouse attendu : 95+ perf / 100 a11y / 100 best-practices / 100 SEO en l'état.

## Évolution

Pour ajouter du contenu (cas clients, blog...) :
- Dupliquer la structure d'une section existante dans `index.html`
- Ou créer un nouveau fichier HTML qui importe `css/styles.css`
- Le design system est suffisamment riche pour couvrir la plupart des besoins

Pour passer à un framework (Astro, Next.js) plus tard : tout le contenu est déjà dans des HTML sémantiques, migration facile.

## Contact

Questions techniques ? Tout est documenté dans le cahier des charges intégrateur (`Milpat PT - Cahier des charges intégrateur v1.docx`).
