# Emails

Point de départ : [`assets/modeles/email.html`](../assets/modeles/email.html). Envoi par Mailgun avec [`scripts/envoyer_email.py`](../scripts/envoyer_email.py).

## Ce qui change par rapport au web

Une messagerie n'est pas un navigateur : Outlook pour Windows rend le HTML avec le moteur de Word, Gmail retire une partie du CSS. La charte y tient par les couleurs, la graisse, la diagonale et le bandeau encre.

- **Construction** : tableaux et styles en ligne, 600 px de large, une colonne sous 620 px. Pas de variables CSS : les couleurs s'écrivent en dur, avec les valeurs du tableau des couleurs de `SKILL.md`.
- **Polices** : Mona Sans et Monaspace Neon se chargent dans Apple Mail et sur iOS. Gmail et Outlook les remplacent par Helvetica ou Arial, et la largeur des lettres (`font-stretch`) n'y joue pas. On ne compense pas avec une autre police.
- **Diagonale** : `border-radius` en diagonale sur chaque surface (28 / 6 px pour la carte, 44 / 6 px pour le bloc encre, 18 / 5 px pour les encadrés, 12 / 4 px pour le bouton). Outlook pour Windows les affiche carrés : c'est accepté.
- **Profondeur** : pas d'ombre ni de filet en ombre interne, que Gmail retire. Les surfaces se distinguent par leur fond : lavande, papier, ink-50, pêche claire, encre.
- **Courbes de niveau** : uniquement dans le bandeau du bloc encre (`assets/email/bandeau.jpg`), qui porte aussi le logotype blanc et se fond dans l'encre.
- **Icônes** : pas de SVG ni d'icône Lucide. La flèche « → » en texte suffit pour un bouton ou un lien de suite.
- **Mode sombre** : Apple Mail suit les classes `bg-*`, `t-*` et `btn-ink` du `<style>` (papier encre, textes clairs, bouton blanc). Gmail et Outlook inversent eux-mêmes les couleurs ; le bloc encre et les images restent lisibles dans tous les cas.

## Images intégrées au message

Les images partent avec l'email, en pièces jointes intégrées : `<img src="cid:bandeau.jpg">` renvoie au fichier `assets/email/bandeau.jpg`, que le script joint au message. Aucun lien vers une image en ligne : Outlook bloque les images distantes tant que le destinataire ne les a pas autorisées.

- Pas d'image en base64 dans le HTML : Gmail la retire.
- Pas d'image en fond CSS : Gmail ne l'affiche pas et la montre en pièce jointe. Un motif passe par une image `<img>`, comme le bandeau.
- Pas de SVG : ni Gmail ni Outlook ne le lisent. Les logos sont en PNG ou intégrés au bandeau.
- Une nouvelle image : PNG ou JPEG à deux fois sa taille d'affichage, dans `assets/email/` (ou un autre dossier passé avec `--images`), légère. Le modèle pèse environ 64 Ko par message, images comprises.
- `assets/email/logo.png` est le pictogramme (signature et pied). Le logotype n'existe que dans le bandeau, à 150 px de large : environ 90 px sur un téléphone, au-dessus du seuil de lisibilité de 80 px.

## Les blocs du modèle

Chaque bloc est délimité par un commentaire `<!-- bloc · … -->` ; on retire ceux qui ne servent pas. Le script retire ces commentaires à l'envoi.

| Bloc | Rôle |
|---|---|
| Texte d'aperçu | Ce que la messagerie montre sous l'objet : 90 caractères au plus, il complète l'objet sans le répéter |
| Ligne du haut | Le type d'envoi en Monaspace (invitation, lettre, annonce) |
| Temps fort encre | Bandeau, sur-titre pêche, titre (un mot en pêche), chapeau ink-200 |
| Carte papier | Salutation et texte, liste à puces en diagonale, encadré pratique, appel à l'action, encadré pêche, signature |
| Pied | Pictogramme, « AI Driven Insight », adresse, contact, désinscription |

- Un seul titre `h1`, dans le bloc encre. Les intertitres de la carte sont des `h2` de 23 px, 720.
- Un seul bouton plein (encre) ; une action secondaire passe en lien de suite.
- L'encadré pratique met ses libellés en Monaspace capitales et ses valeurs en Mona Sans 620 : il passe en une colonne sur téléphone.
- L'encadré pêche porte la phrase humaine : une invitation à répondre, une précision.
- Le lien de désinscription reste dans tout envoi à une liste.

## Écrire l'email

Mêmes règles que tout support adalan : français direct, phrases courtes, typographie française (espace insécable avant `:`, espace fine avant `?` `!` `;`), « adalan » en minuscules. Pas de témoignage, de chiffre ni de résultat client inventés.

- **Objet** : 50 caractères au plus, concret, sans capitales ni point d'exclamation.
- **Variables** : `{{prenom}}`, `{{lien_inscription}}`… viennent d'une colonne de la liste des destinataires ou de `--var nom=valeur`. `{{lien_desinscription}}` devient le lien de désinscription de Mailgun (`%unsubscribe_url%`).
- **Crochets** : `[Jeudi 00 mois]`, `[Prénom Nom]`… marquent ce qu'il reste à compléter. Le script refuse d'envoyer tant qu'il en reste.

## Envoyer avec Mailgun

Une seule fois, dans Mailgun :

- un domaine d'envoi vérifié (SPF, DKIM), avec une politique DMARC sur le domaine principal ;
- le suivi des désinscriptions activé dans les réglages du domaine, avec le pied automatique vidé : le lien du modèle le remplace, sinon l'email en porte deux ;
- une clé d'API d'envoi, gardée hors du dépôt.

À chaque envoi :

1. Copier le modèle, écrire le texte, compléter les crochets, retirer les blocs inutiles.
2. Préparer la liste des destinataires en CSV UTF-8 : une colonne `email` et une colonne par variable (`prenom`…). Excel : « CSV UTF-8 (délimité par des virgules) ».
3. Vérifier, sans rien envoyer : le script contrôle les variables, les crochets et les images, puis écrit `apercu.eml`, le message du premier destinataire, à ouvrir dans Apple Mail ou Outlook.

   ```bash
   python3 scripts/envoyer_email.py matinale.html --objet "Matinale IA : passer de l’essai à l’usage" \
     --de "adalan <invitations@mg.adalan.fr>" --repondre-a contact@adalan.fr \
     --destinataires invites.csv --var lien_inscription=https://… --tag matinale-ia
   ```

4. S'envoyer l'email à soi-même : remplacer `--destinataires invites.csv` par `--a moi@adalan.fr --var prenom=…`, et ajouter `--envoyer`.
5. Envoyer à la liste : la commande de l'étape 3 avec `--envoyer`. `--test` en plus fait accepter les messages par Mailgun sans les distribuer.

- Variables d'environnement : `MAILGUN_API_KEY`, `MAILGUN_DOMAIN`, et `MAILGUN_REGION=eu` pour un domaine créé dans la région Europe (`us` par défaut).
- `--repondre-a` : l'adresse qui reçoit les réponses, quand l'expéditeur est une adresse du domaine d'envoi qui ne reçoit rien.
- Le script envoie un message par destinataire, avec une version texte tirée du HTML. En cas d'échec, il s'arrête et dit qui a déjà reçu l'email : on retire ces adresses de la liste avant de relancer.
- Python 3.9 ou plus, bibliothèque standard seulement.

## Vérification

- [ ] Plus aucun crochet ; l'objet et le texte d'aperçu sont écrits.
- [ ] L'aperçu `.eml` s'ouvre avec ses images, sur ordinateur et sur téléphone.
- [ ] Un envoi à soi-même est arrivé dans la boîte de réception, pas dans les indésirables, dans Gmail et dans Outlook.
- [ ] Le lien de désinscription mène à la page de Mailgun.
- [ ] Un seul bouton plein ; tous les liens mènent au bon endroit.