# Présentations HTML

Référence : la présentation du séminaire du 24 septembre 2026, « Prendre de la hauteur » (en ligne sur events.adalan.fr/20260924/). Point de départ : [`assets/modeles/presentation.html`](../assets/modeles/presentation.html).

Deux écarts avec cette présentation, décidés pour la charte :

- Les polices passent d'Outfit et DM Mono à **Mona Sans** et **Monaspace Neon**, comme sur le site.
- Les pilules et les cercles (étiquette d'orateur, pastilles numérotées) passent à la **forme en diagonale**.

## La scène

- Scène fixe de **1920 × 1080 px**, mise à l'échelle de la fenêtre par `transform: scale()`. Toutes les tailles s'écrivent en px de scène.
- Zone utile : **92 px** en haut, **120 px** sur les côtés, **124 px** en bas. Rien ne déborde de cette zone, sauf les photos et les motifs de fond.
- Pied de slide à 40 px du bas : logo, signature « AI Driven Insight », nom de la partie, pagination `03 / 12` en Monaspace. Pas de pied sur la couverture ni sur la clôture. Sur une slide photo, le pied ne garde que le logo et la pagination.

## Les types de slides

| Type | Fond | Usage |
|---|---|---|
| Couverture | Photo plein cadre, voile encre à gauche | Logo blanc en haut à gauche, sur-titre avec la date, titre de 168 px avec un mot en pêche, sous-titre de 36 px en graisse 340 |
| Claire | Papier, halo lavande en haut à droite, courbes de niveau à 8 % | Le cas courant : sur-titre, titre, sous-titre, contenu |
| Encre | Encre, halos violets, courbes de niveau lavande | Ouverture de partie, message fort, synthèse |
| Photo | Photo plein cadre, voile encre (à gauche ou plein) | Ouverture de partie, pause, clôture |
| Partagée | Texte sur encre à gauche, photo de 720 px à droite | Un message en deux ou trois phrases, illustré |

Ouverture de partie : numéro géant de 400 px (`01`, `02`…) en dégradé pêche qui s'efface vers le bas, trait pêche de 96 × 8 px en diagonale, titre de 104 px en blanc avec un mot en pêche.

Clôture : « Merci » de 220 px sur photo, point final en pêche, contact en dessous.

## Typographie de scène

| Rôle | Taille | Graisse | Chasse |
|---|---|---|---|
| Titre de couverture | 168 px | 800 | 112 % |
| Numéro de partie | 400 px | 820 | 112 % |
| Titre de partie | 104 px | 780 | 112 % |
| Titre de slide | 66 px (54 px si long) | 760 | 110 % |
| Chiffre clé | 86 px, unité à 50 % | 780 | 108 % |
| Chapeau (lead) | 30 px | 440 | 100 % |
| Sous-titre | 27 px | 420 | 100 % |
| Titre de carte | 31 px | 680 | 106 % |
| Texte de carte | 22 px | 420 | 100 % |
| Sur-titre | 20 px Monaspace, capitales, espacement 0,24 em | 500 | |
| Libellés, pagination | 16 à 17 px Monaspace | 400 | |
| Crédit photo | 13 px Monaspace | 400 | |

Le texte reste lisible au fond d'une salle : jamais moins de 20 px pour du texte courant.

## Composer une slide

- Une idée par slide, dite dans le titre en une phrase. Le sous-titre précise, le contenu prouve.
- Un sur-titre situe la slide (« Les chiffres », « Méthode ») ; il ne répète pas le titre.
- Trois cartes au plus par rangée. Au-delà, découper en deux slides.
- Un encadré (`.note`) porte la phrase à retenir : encre sur slide claire, pêche claire pour une nuance.
- Chaque partie s'ouvre sur une slide encre ou photo. Le reste est clair.
- Une pause ou une transition peut être une photo plein cadre avec un seul mot.

## Chiffres et graphiques

- Barres en dégradé encre (ink-500 vers encre) avec de fines hachures ; la valeur mise en avant, en général la dernière, en dégradé pêche.
- Valeur au-dessus de la barre en Mona Sans 780, unité réduite de moitié ; libellé en Monaspace capitales text-3 ; période en Monaspace peach-700.
- Coin haut-gauche arrondi (26 px), coin haut-droit vif : la diagonale s'applique aussi aux barres.
- Un chiffre vient d'une source. Des données d'exemple portent l'étiquette « données fictives ».
- Les chiffres d'affaires et de croissance d'adalan sont internes : ils ne sortent jamais dans un support externe.

## Mouvement

- Changement de slide : la nouvelle monte de 80 px en 0,8 s, l'ancienne s'efface vers le haut (vers le bas quand on recule).
- Les éléments d'une slide montent de 46 px, décalés de 85 ms (`data-a` et `--i` dans le modèle).
- Photo : léger zoom arrière de 1,16 à 1,02 sur 9 s (effet Ken Burns).
- Les barres poussent depuis leur base en 1,3 s.
- `?static` dans l'adresse fige tout (captures, relecture). `prefers-reduced-motion` réduit les animations à un fondu.

## Commandes du modèle

Flèches, Espace, Entrée, Page suivante et précédente pour naviguer ; Début et Fin ; F pour le plein écran ; `#5` dans l'adresse ouvre la slide 5 ; balayage sur écran tactile. L'impression (ou « Enregistrer en PDF ») sort une slide par page au format 1920 × 1080.