Identité visuelle des emails

TimePick permet d'habiller tous les emails sortants (invitations, connexion, confirmations, notifications système) aux couleurs de l'organisation : logo, couleur des boutons, police. Cette fiche décrit ces réglages d'identité visuelle — leur emplacement dans l'interface, les contraintes techniques du logo, et où ils sont stockés.

Elle ne couvre pas la personnalisation du contenu des modèles (texte de l'en-tête, du corps, du pied de page par modèle ou par événement) : voir Éditeur d'emails. Elle ne couvre pas non plus la compatibilité entre clients de messagerie, traitée dans la même fiche.

Ce que recouvre l'identité visuelle

Cinq réglages, communs à l'ensemble de l'instance :

Réglage	Description	Valeur d'usine
Logo	Image affichée dans l'en-tête des emails	aucun (repli sur un en-tête texte)
Couleur primaire (boutons)	Couleur de fond des boutons d'action (« Répondre », « Voir l'événement »…)	#18181b
Couleur du texte des boutons	Couleur du texte affiché sur ces boutons	#ffffff
Police	Police du corps de l'email, choisie dans une liste de familles compatibles email (avec repli générique)	Inter, Arial, sans-serif
Bordure arrondie (boutons)	Rayon des coins des boutons, de 0 à 32 pixels	4 px

Les deux couleurs se saisissent au format hexadécimal #RRGGBB (ex. #ff0000) ; une saisie mal formée est refusée avec le message « Format invalide (ex: #ff0000) ». La police se choisit dans une liste fermée de polices courantes en email (Arial, Helvetica, Georgia, Verdana, Tahoma, Trebuchet MS, Courier New…), chacune avec son repli générique — pas de saisie libre, pour éviter une police non supportée par les clients de messagerie.

Compatibilité Outlook

Un arrondi supérieur à 8 pixels s'affiche correctement dans Gmail, Apple Mail et Outlook.com, mais retombe sur des coins carrés dans Outlook 2016 et antérieur (dégradation documentée, sans impact fonctionnel).

La couleur de fond du corps de l'email (le « cadre » visuel autour du contenu) n'est pas un réglage d'identité de marque : elle se règle bloc par bloc, directement dans l'éditeur de modèle — voir Éditeur d'emails.

Où régler l'identité visuelle

L'identité visuelle se règle depuis n'importe quel éditeur de modèle d'email, pas depuis un écran dédié :

1. Paramètres → onglet Modèles d'email.
2. Ouvrir n'importe quel modèle (Invitation ou l'un des modèles système : Connexion, Confirmation, Création de compte, Annulation, Désinscription, Promotion admin, Retour membre).
3. Dans la barre d'outils de l'éditeur, cliquer sur Identité visuelle pour ouvrir le formulaire (logo, couleurs, police, arrondi).

Accès réservé aux administrateurs

L'écran Paramètres, y compris le formulaire « Identité visuelle », n'est accessible qu'aux comptes ayant le rôle admin — voir Sécurité.

Le bouton Réinitialiser l'identité visuelle ramène les cinq réglages à leur valeur d'usine ; il est désactivé quand ils y sont déjà.

Les modifications apparaissent immédiatement dans l'aperçu de l'éditeur ouvert, avant tout enregistrement — ce qui permet de juger un choix de couleur ou de logo sur un email réel avant de le valider.

Un seul réglage pour toute l'instance

Contrairement au contenu des modèles (en-tête, corps, pied), l'identité visuelle n'a pas de niveau de personnalisation : pas de variante par modèle, pas de variante par événement. Le formulaire est accessible depuis n'importe quel éditeur de modèle, mais il modifie toujours la même donnée unique, appliquée à tous les emails. Modifier le logo depuis l'éditeur « Invitation » ou depuis l'éditeur « Connexion » a exactement le même effet.

Personnalisation à 3 niveaux : ce qui s'applique, et ce qui ne s'applique pas

TimePick personnalise les emails selon trois niveaux : la marque (toute l'instance), le modèle (un type d'email, ex. « Invitation ») et l'événement (un événement précis). Au sein d'un même bloc, le niveau le plus spécifique défini gagne ; un niveau laissé vide retombe sur le niveau au-dessus.

Cette cascade à 3 niveaux régit le contenu de l'en-tête, du corps et du pied de page (textes, mise en page) — elle est détaillée dans Éditeur d'emails. Elle ne concerne pas l'identité visuelle traitée dans cette fiche : logo, couleurs et police restent le même réglage unique quel que soit le modèle ou l'événement ouvert dans l'éditeur.

Le logo : contraintes et traitement automatique

Le logo est téléversé depuis le formulaire « Identité visuelle », bouton Téléverser un logo.

Contraintes à l'upload

• Formats acceptés : PNG, JPEG, WebP.
• Taille maximale du fichier envoyé : 5 Mo. Au-delà, le serveur rejette l'upload (Fichier trop volumineux (max 5 MB)).
• Résolution maximale décodable : 50 mégapixels (protection contre les fichiers compressés qui décompressent en image démesurée).

Traitement automatique côté serveur

Chaque image envoyée est retraitée avant stockage, sans intervention de l'opérateur :

1. Rotation automatique selon les métadonnées EXIF (une photo prise en orientation portrait ne s'affiche pas de travers).
2. Redimensionnement à une largeur maximale de 1200 pixels — un logo déjà plus petit n'est pas agrandi.
3. Conversion au format WebP, qualité 85, quel que soit le format d'origine (PNG, JPEG ou WebP en entrée).

Le même traitement s'applique aux images insérées dans le contenu

Ce pipeline (limite de 5 Mo, redimensionnement, conversion WebP) n'est pas spécifique au logo : il s'applique à toute image envoyée via l'éditeur d'emails, y compris les illustrations insérées dans le corps d'un modèle. Voir Éditeur d'emails pour l'insertion d'images dans le contenu.

Pourquoi WebP

Ce traitement garantit un poids de fichier réduit et un format supporté par les principaux clients de messagerie, sans que l'opérateur ait à optimiser son logo en amont.

Stockage sur disque

Le fichier converti est enregistré sur le disque du serveur sous :

server/uploads/emails/AAAA/MM/<identifiant>.webp

AAAA/MM correspond à l'année et au mois de l'upload (UTC), <identifiant> est généré automatiquement.

Volume persistant obligatoire en production

En déploiement Docker, ce répertoire vit à l'intérieur du conteneur : sans volume monté dessus, le logo (et toute image de contenu uploadée dans les modèles) disparaît au prochain redéploiement. Voir la section « Volume persistant pour les uploads » de Installation en production avec Docker.

Limites et erreurs courantes

• Format non supporté (SVG, GIF animé, BMP…) : le fichier est rejeté avant tout traitement (« Format d'image non supporté »). Convertir en PNG, JPEG ou WebP avant de réessayer.
• Fichier corrompu ou en-têtes illisibles : rejeté avec le message « Image illisible ou corrompue ».
• Trop d'envois en peu de temps : les uploads d'images (logo et illustrations de contenu confondus) sont limités à 30 requêtes par minute par compte admin, au-delà desquelles le serveur répond « Trop de requêtes, réessayez dans une minute ». Cette limite ne concerne que le rythme d'envoi, pas le nombre total d'images stockées.

Où ces réglages vivent, et qui les voit

Les cinq réglages d'identité visuelle sont stockés dans une table dédiée en base de données (une seule ligne, distincte des paramètres applicatifs de app_config couverts par Paramètres in-app). Ils sont lus par le serveur à chaque envoi d'email, quel que soit le déclencheur : invitation, magic link de connexion, confirmation de réservation, création de compte, annulation, désinscription, promotion ou rétrogradation d'un rôle. Modifier le logo ou la couleur primaire change donc l'apparence de tous les emails sortants de l'instance, immédiatement, sans redémarrage du serveur.

Voir aussi

• Paramètres in-app — vue d'ensemble de l'écran Paramètres et des réglages stockés en base.
• Éditeur d'emails — personnalisation du contenu (en-tête, corps, pied) par modèle et par événement, compatibilité clients mail.
• Installation en production avec Docker — volume persistant pour les uploads.