# programme.md — Consignes de production des pages HTML

Ce fichier décrit la manière dont je (Claude) dois construire les pages HTML pour ce projet. Je le relis avant chaque page et je m'y conforme, sauf consigne contraire donnée dans la demande.

## 1. Objectif

Produire des pages HTML/CSS autonomes, propres, sobres et prêtes à présenter : support de cours, livrable pédagogique, mini-outil ou page de restitution. Le rendu doit être professionnel et lisible sur mobile comme sur ordinateur, sans donner l'impression d'une page « générée par une IA ».

## 2. Règles non négociables

- **CSS séparé du HTML.** Le style vit dans un fichier `.css` externe, lié depuis le `<head>` par `<link rel="stylesheet" href="styles.css">`. On n'utilise ni balise `<style>` ni attribut `style="..."` en ligne dans le HTML. Le JavaScript reste dans une balise `<script>` en fin de `<body>` (ou dans un fichier `.js` séparé si la demande le précise).
- **Pas de dépendance externe** par défaut (pas de CDN, pas de police distante) sauf si la demande l'exige explicitement. Les images sont des fichiers liés en chemin relatif.
- **Responsive, conception mobile d'abord.** La page doit être confortable sur un écran de téléphone avant tout, puis s'élargir proprement sur grand écran.
- **Français.** Langue de l'interface et des contenus : français. `<html lang="fr">`, encodage `<meta charset="utf-8">`, balise viewport présente.
- **Accessible.** Contrastes suffisants, structure de titres logique (`h1` unique puis `h2`, `h3`…), attributs `alt` sur les images porteuses de sens, navigation possible au clavier.

## 3. Squelette de départ

Chaque page se compose d'un fichier `.html` (structure) et d'un fichier `.css` lié (mise en forme).

Fichier HTML :

```html
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Titre explicite de la page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- contenu -->
  <script>
    // interactions éventuelles
  </script>
</body>
</html>
```

Fichier CSS (`styles.css`) :

```css
:root {
  /* palette et réglages centralisés ici */
}

/* reset léger */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
```

## 4. Style et mise en forme

- **Centraliser les réglages** dans `:root` avec des variables CSS (couleurs, espacements, rayons, largeur maximale de contenu, ombres). On ne recopie jamais une couleur en dur à plusieurs endroits.
- **Unités relatives** : `rem` pour les tailles de texte et espacements, `%` / `max-width` / `clamp()` pour les largeurs. Éviter les tailles fixes en pixels sur les conteneurs.
- **Largeur de lecture limitée** : un conteneur central (`max-width` de l'ordre de 70–80 rem) pour que le texte ne s'étire pas sur toute la largeur d'un grand écran.
- **Mise en page : flexbox et grid.** Pas de tableaux pour la mise en page (les tableaux servent uniquement à présenter des données).
- **Typographie** : polices système par défaut (`system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif`). Hiérarchie claire, interligne aéré (≈ 1,5 pour le corps), longueur de ligne raisonnable.
- **Sobriété** : espaces blancs généreux, peu de couleurs (une teinte principale, des gris, du blanc), séparateurs discrets. Le design sert le contenu, il ne l'écrase pas.

## 5. Palette et thème

- Définir une palette restreinte et cohérente dans `:root` : une couleur d'accent, des niveaux de gris pour le texte et les fonds, une couleur de fond claire.
- Prévoir, quand c'est pertinent, un thème sombre via `@media (prefers-color-scheme: dark)` en redéfinissant uniquement les variables.
- Ne jamais laisser un fond transparent : `body` a toujours une couleur de fond explicite.

## 6. Composants réutilisables

Réutiliser des motifs cohérents d'une page à l'autre :

- **En-tête** : titre de la page, éventuellement sous-titre ou date.
- **Cartes** : bloc à fond légèrement contrasté, rayon d'angle doux, ombre discrète.
- **Boutons** : zone cliquable large (au moins 44 px de haut), état `:hover` et `:focus-visible` visibles.
- **Tableaux de données** : lignes lisibles, en-têtes distincts (sans aplat de couleur criard), débordement horizontal géré par un conteneur `overflow-x: auto`.
- **Pied de page** : mention discrète (auteur, date, contexte du document).

## 7. Interactivité (JavaScript)

- **JavaScript vanilla uniquement**, sans framework ni bibliothèque externe par défaut.
- Interactions utiles et sobres : ancres de navigation, sections repliables, onglets, animations d'apparition au défilement (via `IntersectionObserver`), retour en haut de page.
- Les animations restent discrètes et respectent `@media (prefers-reduced-motion: reduce)`.
- Le contenu essentiel doit rester lisible même si le JavaScript ne s'exécute pas.

### Options disponibles sur demande

Ces mécanismes existent déjà dans les livrables précédents ; je les ajoute seulement si la demande le précise :

- **Accès par code PIN** : voile de saisie en début de page, contenu masqué tant que le bon code n'est pas entré. À réserver aux documents à diffusion restreinte, en rappelant que ce n'est pas une sécurité réelle (code visible dans la source).
- **Graphiques** : si une page nécessite des graphiques (barres, aires empilées, visualisations financières type prêt/amortissement), le préciser. Par défaut je les dessine en SVG ou `<canvas>` sans dépendance ; si Chart.js est explicitement souhaité, je l'indique et j'utilise un CDN uniquement sur consigne.

## 8. Performance et robustesse

- **Poids maîtrisé** : compresser/optimiser les images, éviter les gros blocs inutiles.
- Le HTML et le CSS sont liés par des **chemins relatifs**, pour que la page fonctionne telle quelle sur le disque comme sur un serveur.
- Testé mentalement sur petit écran, écran large, et avec le thème sombre le cas échéant.

## 9. À éviter (rendu « trop IA »)

- Dégradés violets/roses tape-à-l'œil, ombres exagérées, emoji décoratifs semés dans les titres.
- Empilement de cartes toutes identiques, listes à puces à outrance, texte sur-formaté et gras partout.
- Icônes ou pictogrammes génériques sans fonction.
- Titres et formulations stéréotypés. Le ton et la présentation doivent ressembler à une page conçue à la main par un professionnel.

## 10. Vérification avant livraison

Avant de rendre une page, je vérifie :

- CSS dans un fichier externe lié, aucun `<style>` ni `style="..."` dans le HTML.
- Chemins relatifs corrects (CSS, images), aucune dépendance externe non demandée.
- `lang="fr"`, charset, viewport, title présents et corrects.
- Lisible et confortable sur mobile.
- Hiérarchie de titres cohérente, contrastes suffisants, focus clavier visible.
- Variables CSS centralisées, aucune couleur/valeur dupliquée en dur.
- Animations discrètes et `prefers-reduced-motion` respecté.
- Aucun débordement horizontal de la page.
- Rendu sobre et professionnel, sans marqueurs « IA ».

## 11. Livraison

Noms de fichiers explicites en minuscules avec tirets, HTML et CSS assortis (ex. `restitution-bloc-2.html` + `restitution-bloc-2.css`, ou un `styles.css` commun si plusieurs pages partagent la même mise en forme). Livrer les deux fichiers ensemble et rappeler en une phrase ce que contient la page. Ne pas ajouter de README ni de fichiers annexes sauf demande.
