# Personnaliser vos pages de connexion

La personnalisation de l'image de marque modifie l'apparence de la connexion hébergée, du portail du compte et des e-mails. Les paramètres sont hérités dans cet ordre : valeur par défaut de la plateforme, environnement, application, organisation. Chaque jeton prend la valeur du niveau le plus spécifique qui le définit.

## Ce que vous pouvez définir

- Couleurs : `color.primary`, `color.primary_contrast`, `color.background`, `color.surface`, `color.text`, `color.text_muted`, `color.border`, `color.link`, `color.focus_ring`, `color.error` et `color.success`, au format hexadécimal sRGB. Les modes clair et sombre ont des valeurs distinctes, et `mode` vaut `light`, `dark` ou `system`.
- Polices : `font.body` et `font.heading` parmi la liste des polices autorisées, ou une police importée ; `font.size_base` de 14 à 18 px.
- Forme : `radius.card` de 0 à 24 px et `radius.control` de 0 à 16 px.
- Mise en page : `center`, `split_left` ou `split_right`.
- Images : `logo`, `logo_height` (de 24 à 80 px), `favicon` et `background_image` (uniquement avec une mise en page `split_*`).

Les organisations ne peuvent remplacer que les jetons `logo` et `color.primary`. La personnalisation d'une organisation n'est affichée que lorsque le contexte de l'organisation est vérifié, par exemple à partir d'une invitation valide ou après le sélecteur d'organisation. Un simple paramètre `organization` ne modifie pas l'apparence de la page.

## Protection du contraste

À l'enregistrement, KeenAuth vérifie ces paires, séparément pour le mode clair et le mode sombre :

| Paire | Ratio minimal |
|---|---|
| Texte sur arrière-plan | 4,5:1 |
| `color.link` sur arrière-plan | 4,5:1 |
| `color.primary_contrast` sur `color.primary` | 4,5:1 |
| Bordure des contrôles sur arrière-plan | 3:1 |
| Anneau de focus (`color.focus_ring`) sur arrière-plan | 3:1 |

Une paire en dessous de son minimum est rejetée par l'API de gestion avec `422 brand_contrast_insufficient` (RFC 9457). Le corps de l'erreur indique le champ concerné et propose la couleur la plus proche qui passe le contrôle ; cette suggestion conserve la teinte et la chroma et ne modifie que la luminosité. Le tableau de bord propose la même suggestion en un clic. Une valeur qui échoue ne peut pas être publiée. Consultez [Publier la personnalisation](/docs/api/management/branding/publish) pour le format des erreurs.

Les CSS personnalisées (offre Startup) peuvent réduire le contraste, et KeenAuth ne le corrige pas. Une analyse de prévisualisation signale les problèmes sous forme d'avertissements dans le tableau de bord, et la conformité des modifications faites avec des CSS personnalisées relève de votre responsabilité.

## Ressources

Importez images et polices avec `POST /v1/branding/assets`. Les images ne doivent pas dépasser 1 Mo et les polices 300 Ko. Les formats PNG, JPEG et WebP sont acceptés, ICO uniquement pour les favicons et WOFF2 uniquement pour les polices. Le SVG est refusé. Les images sont réencodées en PNG, réduites à 1024×1024 px au maximum et débarrassées de leurs métadonnées. Un environnement peut contenir 200 fichiers et 50 Mo.

## Feuilles de style personnalisées et modèles

Sur l'offre Startup et au-delà, vous pouvez ajouter des CSS personnalisées et un modèle de page. Les parties critiques pour la sécurité d'une page sont dessinées dans une couche protégée que vos CSS ne peuvent ni masquer ni recouvrir : le nom de l'application et l'origine vérifiée sur les écrans de consentement, la liste des autorisations demandées, les boutons autoriser et refuser, les avertissements de sécurité, la bannière d'environnement et les liens juridiques. Le JavaScript du client ne s'exécute sur aucune offre.

Utilisez les propriétés CSS logiques (`margin-inline-start`, et non `margin-left`) ; les propriétés physiques sont refusées afin que vos styles fonctionnent aussi dans les langues écrites de droite à gauche. Consultez [Langues et écriture de droite à gauche](/docs/guides/localization).

## Mention KeenAuth

La connexion hébergée, le portail du compte et les e-mails affichent une petite mention « Secured by KeenAuth » dans la couche protégée. Elle n'est pas affichée sur les offres Business et Enterprise, ni dans les environnements `development`. L'offre est vérifiée à chaque affichage d'une page ou d'un e-mail, donc la mention réapparaît si l'offre change. Les CSS personnalisées et les remplacements de textes ne peuvent ni la masquer ni la modifier.

## Publication

Les modifications sont enregistrées en brouillon et entrent en vigueur lorsque vous les publiez. Les versions précédentes peuvent être listées et restaurées. Les pages de l'API se trouvent sous `/docs/api/management/branding/`, à commencer par [Publier la personnalisation](/docs/api/management/branding/publish).