Emails

Point de départ : assets/modeles/email.html. Envoi par Mailgun avec 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.

• 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.