Éditeur d'emails

TimePick envoie neuf emails différents (invitation, connexion, confirmations, notifications système…). Le contenu de huit d'entre eux se personnalise depuis un éditeur visuel intégré à l'application, sans toucher au code. Cette fiche décrit cet éditeur : où l'ouvrir, comment est structuré un email, ce qui est libre et ce qui est verrouillé, les variables à ne pas supprimer, la surcharge par événement, l'envoi d'un test et la compatibilité avec les clients de messagerie.

Cette fiche ne couvre pas :

• le logo, les couleurs, la police et l'arrondi des boutons (réglages d'identité visuelle communs à toute l'instance) — voir Identité visuelle des emails ;
• la liste des neuf emails, leurs déclencheurs et leur contenu par défaut — voir Emails automatiques.

Accès à l'éditeur

L'éditeur s'ouvre depuis Paramètres → onglet Modèle d'email. Un sélecteur propose les huit modèles personnalisables : Invitation, Connexion, Confirmation, Création de compte, Annulation, Désinscription, Promotion admin, Retour membre. Choisir un modèle affiche une carte d'aperçu (variables disponibles, avertissement de compatibilité éventuel) ; le bouton Personnaliser avec l'éditeur ouvre l'éditeur plein écran sur ce modèle.

Le neuvième email, envoyé lors de la modification d'un créneau, n'apparaît pas dans ce sélecteur : son contenu est composé dynamiquement à partir du diff des changements et n'est pas personnalisable depuis cet éditeur — voir Emails automatiques.

Accès réservé aux administrateurs

L'écran Paramètres, y compris l'éditeur d'emails, n'est accessible qu'aux comptes ayant le rôle admin — voir Sécurité.

L'éditeur demande un écran d'au moins 800 × 600 points

L'édition se fait au glisser-déposer, un geste que le moteur de l'éditeur ne sait pas rendre au doigt. Sur un appareil dont l'écran est plus petit que 800 × 600 points dans sa meilleure orientation — la quasi-totalité des téléphones —, le bouton Personnaliser avec l'éditeur n'est pas affiché : une explication le remplace, sur les fiches de Paramètres comme sur celle d'un événement. Pivoter l'appareil ne change rien, le critère est insensible à l'orientation.

Le reste des fiches reste consultable : variables disponibles, badge « Personnalisé / Défaut » et aperçu de l'email s'affichent normalement. Le critère porte sur la taille de l'écran, jamais sur celle de la fenêtre : réduire une fenêtre sur un ordinateur ne retire jamais l'éditeur, et un éditeur déjà ouvert le reste quoi qu'il arrive. Sur ordinateur, un zoom de navigateur très élevé réduit la taille utile mesurée — le baisser rétablit le bouton.

Un éditeur par blocs pensé pour l'email

L'éditeur repose sur un moteur d'édition visuelle par blocs (GrapesJS) associé à un langage de mise en page dédié à l'email (MJML) : plutôt que d'écrire du HTML, l'administrateur glisse-dépose des blocs dans le canvas, et ce qu'il voit à l'écran correspond à ce que reçoit le destinataire. Cinq types de blocs sont disponibles dans le corps d'un email libre : Image, Texte, Bouton, Séparateur, Espace. Ce choix technique (plutôt que du HTML libre) garantit que tout email produit reste lisible dans les principaux clients de messagerie, y compris ceux qui interprètent mal le CSS moderne — voir la section Compatibilité avec les clients de messagerie plus bas.

Vue d'ensemble de la barre d'outils

De gauche à droite, la barre d'outils de l'éditeur propose :

• le titre du modèle en cours d'édition (ou le nom de l'événement, en mode surcharge par événement) ; un nom long est raccourci par des points de suspension pour ne jamais repousser les boutons hors du cadre — le nom complet s'affiche au survol à la souris ;
• Identité visuelle — logo, couleurs, police, arrondi (voir Identité visuelle des emails) ;
• Envoyer un test (voir plus bas) ;
• le sélecteur de modèle, pour passer d'un modèle à l'autre sans quitter l'éditeur (uniquement dans l'éditeur ouvert depuis Paramètres) ;
• à droite : Revenir au modèle par défaut (uniquement dans l'éditeur d'un événement, et seulement quand une personnalisation existe), Enregistrer, Fermer.

La barre s'adapte à la largeur de la fenêtre pour rester sur une seule ligne. Elle ne raccourcit rien tant qu'il reste de la place : à chaque changement de largeur, elle regarde si son contenu rentre, et ne cède un cran que lorsqu'il ne rentre plus. Il n'y a donc pas de largeur unique à retenir — le moment où la barre change dépend de ce qu'elle porte, et une barre légère garde ses libellés bien plus longtemps qu'une barre chargée.

Ce que la barre affiche	Quand
tous les libellés en entier	tant que tout rentre
les libellés raccourcis — Identité visuelle devient Identité, Envoyer un test devient Tester, Revenir au modèle par défaut devient Réinitialiser ; le badge de sélection est abrégé	quand les libellés entiers ne rentrent plus
le sélecteur de modèle réduit à son icône — sa valeur est de toute façon reprise par le titre, juste à gauche ; tous les libellés de boutons restent	quand les libellés raccourcis ne rentrent plus
plus que les icônes — tous les boutons, y compris Enregistrer et Fermer	quand même le sélecteur réduit ne suffit plus

Aucun bouton ne fait exception : à l'étage des icônes, plus aucun ne porte de texte. Un bouton en toutes lettres au milieu de quatre icônes se lirait comme un défaut d'affichage.

Le titre suit la même règle. Un nom d'événement long n'est raccourci que s'il déborde vraiment : il occupe toute la place que la barre lui laisse, et l'ellipse recule à mesure que la fenêtre s'élargit. Le nom complet reste affiché au survol à la souris, et lu en entier par les lecteurs d'écran.

Rien ne se perd en chemin. Les libellés masqués restent lus par les lecteurs d'écran, Revenir au modèle par défaut conserve son infobulle au survol, et la demande de confirmation reste toujours formulée en entier (« Revenir au modèle par défaut ? »). La pastille qui signale des modifications non enregistrées suit Enregistrer jusque dans son icône. Sur une fenêtre extrêmement étroite — plus étroite qu'un téléphone tenu à la verticale — la barre finit par passer à la ligne : c'est une sécurité, aucun bouton ne disparaît jamais.

La ligne Objet

Juste sous la barre d'outils, une ligne affiche en permanence l'objet de l'email tel qu'il partira — variables déjà remplacées par des valeurs d'exemple. C'est la seule ligne que le destinataire lit avant de décider d'ouvrir, et jusqu'ici la seule que l'administrateur ne pouvait pas toucher. Quand l'objet est trop long pour tenir sur la largeur disponible, la ligne le tronque visuellement ; survoler la ligne à la souris affiche l'objet complet en infobulle.

Cliquer la ligne ouvre la fenêtre d'édition de l'objet, qui contient tout ce qui ne sert que pendant la frappe : le champ, un bouton ＋ Variable qui insère un jeton à l'endroit du curseur, un aperçu du résultat, et un compteur de caractères. Le compteur signale le passage des 50 caractères — au-delà, la plupart des messageries tronquent l'objet dans la liste des messages. C'est un repère, pas une limite : rien n'empêche d'aller plus loin.

Le champ de saisie est lui-même plafonné à 255 caractères : au-delà, l'enregistrement est refusé, l'éditeur l'indiquant clairement. Cette limite porte sur le texte tapé, jetons de variable compris — pas sur l'objet une fois les variables remplacées. Une fois interpolé au moment de l'envoi, l'objet réellement expédié obéit à une seconde limite, bien plus large : 512 caractères. Un objet qui la dépasserait (un nom d'événement inhabituellement long combiné à d'autres variables, par exemple) est raccourci à l'envoi, jamais rejeté — l'email part toujours. TimePick retire aussi de l'objet expédié les caractères invisibles qui pourraient s'y glisser (caractères de contrôle, marques de direction de texte, espaces de largeur nulle) : seul du texte lisible atteint la boîte du destinataire.

Un objet réenregistré identique à l'objet par défaut n'est jamais conservé comme personnalisation, à quelque niveau que ce soit (modèle ou événement) : TimePick reconnaît l'égalité et continue de suivre les évolutions futures du niveau parent. Ce comportement, déjà vrai depuis l'éditeur, est désormais garanti côté serveur quelle que soit la façon dont l'objet est enregistré.

Ce que la ligne signale sans qu'on l'ouvre :

Ce qui s'affiche	Ce que ça veut dire
aucun badge	l'objet d'origine du modèle, inchangé
Personnalisé	un objet propre à ce modèle (ou à cet événement) a été enregistré
Hérité du modèle (éditeur d'un événement)	cet événement suit l'objet du modèle général, et suivra ses modifications futures
2 variantes (modèle « Connexion » seul)	deux objets coexistent, un par rôle de destinataire ; la ligne montre celui des membres
une icône d'alerte et un message à la place de l'aperçu	l'objet ne peut pas être enregistré en l'état — le message nomme ce qu'il faut corriger

Dans l'éditeur d'un événement qui n'a pas encore d'objet propre, la fenêtre ne présente pas de champ : elle montre l'objet hérité et un bouton Personnaliser. Tant qu'on ne l'a pas cliqué, il n'y a rien à modifier — donc rien qui ressemble à un champ désactivé. Une fois personnalisé, un bouton Revenir à l'objet du modèle rend l'événement à l'héritage.

Toutes les variables ne sont pas admises dans un objet

Les liens, les blocs mis en forme et la description d'événement en sont exclus, et chaque modèle n'accepte que les variables qu'il fournit réellement. Le bouton ＋ Variable ne propose donc que les variables valables pour le modèle ouvert, et l'enregistrement est refusé si l'objet en contient une autre — le message nomme le jeton fautif. Une variable écrite avec des espaces intérieurs ({{ event_name }}) n'est pas reconnue et compte comme invalide.

Un second aperçu pour les destinataires sans nom de famille

Certains comptes sont enregistrés sous un seul nom (mononymes) : leur nom de famille est vide. Si l'objet personnalisé ne repose que sur des variables de nom ({{user_last_name}}, {{user_full_name}}…), la fenêtre d'édition affiche alors un second aperçu, Destinataire sans nom de famille, qui montre ce que ce même objet donnerait pour un tel destinataire. Quand ce résultat serait vide, le texte le dit explicitement : « l'objet part vide et retombe sur l'objet par défaut. » — c'est le filet de sécurité décrit plus loin (voir Emails automatiques — L'objet des emails) qui s'annonce à l'avance, pas une erreur à corriger. Cet aperçu ne s'affiche que lorsqu'il diffère de l'aperçu habituel.

Structure d'un email : trois zones fixes

Chaque email généré par TimePick est composé de trois zones fixes, dans cet ordre : en-tête, corps, pied de page. Ces trois zones ne peuvent être ni ajoutées, ni supprimées, ni réordonnées, quel que soit le modèle ouvert : dans l'éditeur, chacune porte une étiquette permanente (« En-tête », « Corps », « Pied ») et, à la sélection, un badge « Élément structurel — modifiable, non supprimable » rappelle que seule la structure est figée — le contenu, lui, reste librement personnalisable (couleurs, textes, images, boutons). Sur une fenêtre étroite, ce badge s'abrège en « Structurel — non supprimable » (ou « Hérité — pas encore personnalisé » pour un bloc hérité) : la fin de la phrase, celle qui distingue les deux cas, est toujours conservée.

Le contenu de ces zones se personnalise à trois niveaux qui se superposent :

1. La marque — l'identité de toute l'instance (le point de départ de tous les emails).
2. Le modèle — un type d'email donné (Invitation, Connexion, Confirmation…).
3. L'événement — uniquement pour l'email d'invitation, propre à un événement précis.

Le niveau le plus spécifique défini l'emporte ; une zone laissée vide à un niveau retombe sur le niveau juste au-dessus, jusqu'au contenu livré par défaut avec l'application (le filet de sécurité).

Particularité : l'en-tête est partagé entre les 8 modèles

L'en-tête (et le fond général de l'email) du modèle Invitation sert de référence commune aux sept modèles système. Modifier l'en-tête depuis l'onglet Invitation se répercute donc automatiquement sur les emails de connexion, de confirmation, de création de compte, etc. — sauf si l'un d'eux dispose déjà de sa propre personnalisation. C'est pourquoi l'en-tête et le pied de page ne sont modifiables que depuis l'onglet Invitation : dans les sept autres éditeurs (Connexion, Confirmation…), ils apparaissent verrouillés en lecture seule et non interactifs, sans aucun panneau d'explication — cette information contextuelle sur l'origine du contenu hérité n'existe que dans l'éditeur ouvert au niveau d'un événement (voir ci-dessous).

Le corps, en revanche, reste toujours strictement propre à chaque modèle : personnaliser le corps de l'invitation ne modifie jamais le corps de l'email de confirmation, et réciproquement.

Ce qui s'affiche quand un contenu est hérité, au niveau d'un événement

Ce panneau d'information n'existe que dans l'éditeur ouvert au niveau d'un événement précis (voir plus bas, section « Personnaliser l'invitation pour un événement précis ») : cliquer sur un en-tête ou un pied de page non personnalisé pour cet événement (donc hérité d'un niveau supérieur) y ouvre un panneau Bloc verrouillé avec un texte du type : « Ce contenu est défini au niveau supérieur. » suivi de la précision de l'origine — « Ce contenu est défini au niveau du modèle d'invitation. », « Ce contenu est défini au niveau de la marque (Paramètres > Email). » ou « Ce contenu est le contenu d'origine fourni avec l'application. » selon le cas. Le panneau porte un bouton Personnaliser ce bloc, qui crée la personnalisation pour cet événement (voir plus bas). Ce panneau remplace toute tentative d'édition silencieuse : TimePick n'accepte jamais une modification sur un contenu qui ne serait pas réellement sauvegardé. Ailleurs (les sept éditeurs système, l'onglet Invitation lui-même), un contenu verrouillé reste simplement non interactif, sans ce panneau.

Un bloc encore hérité se reconnaît sans rien lire : son contenu est estompé, son liseré passe à l'ambre, et une pastille ambre en haut à droite nomme sa provenance — « Hérité du modèle », « Hérité de la marque » ou « Contenu d'origine ». Un bloc personnalisé au niveau courant ne porte aucune de ces marques : il garde son liseré gris et sa seule étiquette de structure (« En-tête », « Corps », « Pied »), qui indique que le bloc est fixé en place — pas que son contenu serait interdit.

Réinitialiser tous les modèles d'emails

Dans l'onglet Modèle d'email (en dehors de l'éditeur, à côté du sélecteur de modèle), le bouton Réinitialiser tous les modèles d'emails ramène l'en-tête et le fond partagés ainsi que le contenu des huit modèles à leur valeur d'usine, en une seule opération transactionnelle.

Action destructive et immédiate

« Le design partagé (en-tête, fond, marges) et le contenu des 8 modèles reviendront à l'usine. Les événements et l'identité visuelle sont préservés. Cette action est immédiate et écrase le contenu courant. » (texte affiché dans la boîte de confirmation). Les personnalisations créées au niveau d'un événement précis, ainsi que le logo/couleurs/police (identité visuelle), ne sont pas concernés.

Cette action est limitée à 10 requêtes par minute et par compte admin ; au-delà, l'interface affiche « Trop de requêtes. Veuillez patienter avant de réessayer. »

Mode système : personnalisation restreinte

Les sept modèles système (Connexion, Confirmation, Création de compte, Annulation, Désinscription, Promotion admin, Retour membre) s'ouvrent dans un éditeur en mode contraint : seules deux zones de texte, à l'intérieur du corps, sont éditables — une accroche (le texte d'introduction, juste après la salutation « Bonjour {{user_first_name}}, ») et une signature (le texte de fin, sous le bouton d'action). Contrairement au modèle Invitation, ces deux zones n'acceptent que du texte brut : pas de mise en forme riche, pas de blocs à glisser-déposer, pas d'image, pas de bouton additionnel. Le bouton d'action (« Voir les créneaux disponibles », « Se connecter »…) et le reste de la mise en page restent figés — seul leur emplacement varie selon le modèle.

Le canvas affiche malgré tout l'en-tête et le pied de page hérités (verrouillés, voir ci-dessus) pour que l'admin visualise l'email complet ; mais comme le corps ne propose aucune zone de dépôt libre, la palette de blocs n'y a aucune utilité pratique.

Signaler une variable indispensable manquante

Si l'accroche ou la signature d'un modèle système ne contient plus une variable jugée indispensable (par exemple {{event_name}} sur l'email de confirmation), l'enregistrement affiche un avertissement non bloquant — l'email reste envoyable, mais son contenu peut être incomplet pour le destinataire.

Variables {{...}} : le contenu qui vient d'ailleurs

Chaque modèle expose une liste de variables — des jetons {{nom_variable}} remplacés automatiquement par le serveur au moment de l'envoi (prénom du destinataire, nom de l'événement, lien de connexion…). Elles sont visibles dans le panneau « Variables disponibles » de chaque carte de modèle, et peuvent être insérées dans le corps de l'invitation en glissant le bloc correspondant depuis la palette (catégorie « Variables »).

Ne jamais supprimer une variable indispensable

Retirer une variable marquée indispensable (colonne ci-dessous) casse la fonction de l'email : un lien de connexion sans {{magic_link}}, une confirmation sans {{event_name}}/{{slot_date}}/{{slot_time}} prive le destinataire de l'information essentielle. L'éditeur avertit à l'enregistrement, mais n'empêche pas la sauvegarde.

Variable	Signification	Admise dans l'objet
{{user_first_name}}	Prénom du destinataire	Oui
{{user_last_name}}	Nom de famille du destinataire (peut être vide)	Oui
{{user_full_name}}	Prénom et nom du destinataire	Oui
{{event_name}}	Nom de l'événement concerné	Oui
{{event_description}}	Description de l'événement concerné	Non — longueur non maîtrisable
{{slot_date}}	Date du créneau réservé	Oui
{{slot_time}}	Heure du créneau réservé	Oui
{{magic_link}}	Lien de connexion sécurisé, généré automatiquement	Non — c'est une URL
{{expiration_date}}	Date et heure d'expiration du lien de connexion	Non — n'aide pas à décider d'ouvrir l'e-mail ; sa place est dans le corps
{{login_url}}	Lien de connexion à l'espace, généré automatiquement	Non — c'est une URL
{{cancellation_reason}}	Motif d'annulation pré-formaté (peut être vide)	Non — contient de la mise en forme
{{calendar_url}}	Lien vers la page de l'événement pour gérer la réservation	Non — c'est une URL

« Admise dans l'objet » vaut pour la ligne Objet décrite plus haut. Une variable admise en principe ne l'est pour un modèle donné que s'il la fournit : l'objet du modèle Création de compte n'accepte que les trois variables de nom, puisque cet email ne reçoit aucun événement ni aucun créneau. Le bouton ＋ Variable de la fenêtre d'édition ne propose que celles du modèle ouvert — c'est la liste qui fait foi. Sur le nom du destinataire, {{user_full_name}} est le choix sûr : {{user_last_name}} est vide pour les personnes enregistrées sous un seul nom.

Variables disponibles par modèle (* = indispensable ; les variables portées par le bouton d'action figé des modèles système ne peuvent pas être retirées, elles ne sont donc pas comptées comme indispensables côté éditeur) :

Modèle	Variables disponibles
Invitation	{{user_first_name}}, {{event_name}}, {{event_description}}, {{magic_link}}*, {{expiration_date}}*
Connexion	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{magic_link}} (bouton figé), {{expiration_date}}*
Confirmation	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{event_name}}*, {{slot_date}}*, {{slot_time}}*, {{calendar_url}} (bouton figé)
Création de compte	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{login_url}} (bouton figé)
Annulation	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{event_name}}, {{slot_date}}, {{slot_time}}, {{cancellation_reason}}, {{calendar_url}} (bouton figé)
Désinscription	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{event_name}}*, {{slot_date}}*, {{slot_time}}*, {{calendar_url}} (bouton figé)
Promotion admin	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{login_url}} (bouton figé)
Retour membre	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{login_url}} (bouton figé)

Personnaliser l'invitation pour un événement précis

Le modèle d'invitation peut être surchargé pour un événement donné, sans toucher au modèle général ni aux autres événements : depuis la fiche de l'événement, onglet Template.

Cet écran affiche :

• un badge Personnalisé ou Défaut à côté du titre, selon qu'une personnalisation existe déjà pour cet événement ;
• l'objet de l'email, interpolé, avec son propre badge Personnalisé ou Hérité du modèle — l'objet a son héritage à lui, distinct de celui du contenu ;
• un aperçu de l'email tel qu'il sera envoyé aux participants (iframe), avant toute ouverture de l'éditeur ;
• le bouton Personnaliser avec l'éditeur, qui ouvre le même éditeur plein écran, cette fois scopé à cet événement.

Dans cet éditeur, le corps de l'invitation est librement personnalisable pour cet événement (mêmes blocs, mêmes variables que le modèle général). L'en-tête et le pied de page s'affichent d'abord selon la cascade décrite plus haut, estompés et marqués « Hérité de… » ; ils peuvent aussi recevoir leur propre version pour cet événement. Pour cela, cliquez sur l'en-tête ou le pied, puis sur Personnaliser ce bloc dans le panneau qui s'ouvre : TimePick copie le contenu hérité tel quel au niveau de l'événement, le bloc cesse d'être estompé et devient éditable immédiatement, sans fermer l'éditeur. Dans l'éditeur, donc, quelque chose change : le bloc perd ses marques d'héritage. Mais l'email envoyé, lui, reste identique à cet instant — la personnalisation ne fait que créer le point d'accroche, elle ne modifie aucun contenu ; les modifications que vous faites ensuite dans le bloc sont enregistrées par le bouton Enregistrer, comme pour le corps. Un bloc ainsi personnalisé n'est plus affecté par les changements du modèle général ou de la marque : il ne suit plus la cascade.

Le bouton Revenir au modèle par défaut, dans la barre d'outils de l'éditeur, efface en une seule opération toute personnalisation propre à cet événement et fait retomber l'email sur le modèle général (lui-même retombant sur la marque, puis sur le contenu d'origine, selon la même cascade). Il est désactivé tant qu'aucune personnalisation n'existe pour cet événement, et une boîte de confirmation (« Revenir au modèle par défaut ? ») rappelle que les éditions non sauvegardées seront perdues avant de valider. Une fois la réinitialisation effectuée, un message de confirmation (« Événement réinitialisé au modèle. ») s'affiche ; si le canvas ne parvient pas à se rafraîchir automatiquement dans la foulée, un message invite à rouvrir l'éditeur.

L'objet suit la même logique que les blocs, avec un geste plus court : sa fenêtre d'édition affiche d'abord l'objet hérité et un bouton Personnaliser ; une fois cliqué, le champ apparaît, pré-rempli avec l'objet hérité, et Revenir à l'objet du modèle ramène l'événement à l'héritage. Réenregistrer l'objet hérité sans le modifier ne crée pas de personnalisation : l'événement continue de suivre le modèle général et ses évolutions futures. Le bouton Revenir au modèle par défaut de la barre d'outils efface l'objet personnalisé en même temps que le reste.

Insérer une image dans le corps

Le bloc Image de la palette permet de téléverser une illustration directement dans le corps d'un modèle (invitation uniquement — les modèles système n'acceptent pas d'image). Le fichier envoyé passe par le même pipeline de traitement que le logo de l'identité visuelle (limite de taille, redimensionnement, conversion au format WebP) et est soumis aux mêmes contraintes de format — voir Identité visuelle des emails.

Envoyer un email de test

Le bouton Envoyer un test, dans la barre d'outils de l'éditeur, ouvre un petit formulaire :

• une adresse de destination, pré-remplie avec l'adresse email du compte admin connecté, mais modifiable ;
• un bouton Envoyer le test, qui envoie le modèle actuellement affiché avec des données de démonstration — les liens contenus dans l'email (connexion, gestion de réservation…) ne sont pas fonctionnels.

Le bouton est désactivé tant que l'éditeur contient des modifications non enregistrées (« Enregistrez vos modifications avant d'envoyer un test. ») : le test porte toujours sur la version réellement sauvegardée, jamais sur un brouillon en cours d'édition. L'envoi de test est limité à 5 emails par minute et par compte admin.

Compatibilité avec les clients de messagerie

Parce que les blocs de l'éditeur compilent vers un format de mise en page pensé pour l'email plutôt que vers du HTML/CSS libre, chaque email respecte automatiquement un ensemble de contraintes qui garantissent un rendu correct sur les principaux clients :

• couleurs en hexadécimal uniquement (pas de dégradés) ;
• polices choisies dans une liste fermée avec repli générique (jamais de police non standard sans repli) ;
• images en PNG ou JPEG uniquement — le format SVG est refusé, car invisible dans Outlook ;
• largeur de section plafonnée à 600 pixels ;
• arrondi des boutons plafonné à 8 pixels (au-delà, le rendu se déforme dans Outlook) ;
• aucune ombre portée, aucun dégradé, aucun CSS avancé (grille, flexbox, variables CSS) — ces effets sont silencieusement ignorés ou aplatis par les clients les plus stricts, donc refusés à la sauvegarde plutôt que laissés produire un rendu trompeur dans l'aperçu ;
• aucun HTML brut : tout le contenu passe par les blocs validés de l'éditeur.

Dégradations connues et acceptées sur Outlook 2016 et antérieur :

Élément	Rendu Outlook	Sévérité
Coins arrondis sur une image	Coins carrés	Cosmétique
Coins arrondis sur un bouton (≤ 8 px)	Correct (rendu VML)	—
Image au format SVG	Invisible	Bloquant — refusé à la sauvegarde
Police sans repli générique	Repli sur Times New Roman	Cosmétique — refusé à la sauvegarde
Dégradé de couleur	Aplati en couleur unie	Cosmétique — refusé à la sauvegarde
Ombre portée	Ignorée	Cosmétique — refusé à la sauvegarde
Bordure sur une section ou sur le cadre du corps	Invisible	Cosmétique — acceptée

Une tentative de saisir une propriété non autorisée (via le sélecteur de style de l'éditeur) est rejetée à l'enregistrement avec un message explicite.

Le corps est en outre refusé à l'enregistrement s'il contient une construction qu'un client de messagerie pourrait interpréter hors du contrôle de TimePick : un commentaire conditionnel Outlook (<!--[if mso]>…), un commentaire non refermé, une balise script, iframe, object, embed, form ou input, un attribut de gestionnaire d'événement (onclick, onerror…), ou un lien javascript:. Le message d'erreur nomme la construction à retirer. Les blocs de l'éditeur ne produisent jamais rien de tel : ce refus ne se rencontre que si le corps a été écrit hors de l'éditeur (appel direct à l'API, ou contenu importé). Le contenu déjà enregistré n'est jamais modifié à votre place — il est accepté tel quel, ou refusé.

Rendu garanti vs rendu acceptable

Le rendu est garanti identique au pixel près sur Gmail (web, iOS, Android) et Apple Mail (iOS, macOS). Sur Outlook 2016 et antérieur, une dégradation cosmétique est acceptée et documentée : les coins arrondis peuvent devenir carrés, une image peut ne pas s'afficher (SVG), un dégradé peut être aplati en couleur unie. Sur Outlook.com, Yahoo Mail, Orange, Free : rendu au mieux, sans garantie ni test systématique.

Quand l'éditeur détecte un contenu susceptible de mal s'afficher dans Outlook (par exemple un arrondi supérieur à 8 pixels sur l'en-tête, une bordure sur une section), un bandeau Compatibilité Outlook apparaît au-dessus du canvas, listant les éléments concernés (en-tête, corps ou pied) et le problème détecté. Le bouton en haut à droite du bandeau (Masquer l'avertissement de compatibilité Outlook) le referme ; il ne réapparaît pas pour le même ensemble de problèmes sur ce modèle tant que le contenu concerné n'a pas changé.

Enregistrer et fermer

Le bouton Enregistrer n'est actif que lorsque l'éditeur contient des modifications (un point apparaît sur le bouton). Le bouton Fermer (ou le changement de modèle via le sélecteur, quand l'éditeur en propose un) déclenche, s'il reste des modifications non sauvegardées, une boîte de confirmation (« Quitter sans enregistrer ? » / « Changer de modèle sans enregistrer ? ») avant d'abandonner les changements.

Où ces personnalisations sont stockées

Le contenu par défaut des huit modèles vit en base de données (une ligne par modèle) ; les personnalisations de l'en-tête, du corps et du pied à chaque niveau (marque, modèle, événement) sont stockées séparément, ce qui permet à une surcharge de disparaître (bouton de réinitialisation) sans effacer les niveaux au-dessus. Le neuvième email (modification de créneau) n'a pas de ligne dédiée : son texte est assemblé au moment de l'envoi. Détail des tables concernées : Modèle de données.

Voir aussi

• Identité visuelle des emails — logo, couleurs, police, arrondi ; upload d'images.
• Emails automatiques — liste des neuf emails et de leurs déclencheurs, y compris l'email de modification de créneau (non personnalisable).
• Paramètres in-app — vue d'ensemble de l'écran Paramètres.
• Sécurité — rôles et accès à l'écran Paramètres.