L'écran Couleur et Style permet de personnaliser l'apparence du widget de consentement Axeptio. Les modifications sont sauvegardées automatiquement et appliquées à la prochaine publication.

En haut de l'écran, un sélecteur permet de basculer entre le Design classique et le Nouveau design, et de prévisualiser chaque version indépendamment.

Style du bouton

Utiliser un bouton personnalisé

Par défaut, c'est le bouton jaune Axeptio qui s'affiche. En activant cette option, vous pouvez le remplacer par un bouton avec un visuel et/ou un texte personnalisés. Vous pouvez également personnaliser la taille et l'apparence du bouton, du visuel et du texte.

Option	Description
Taille de l'image	Largeur de l'image affichée dans le bouton (en px).
Label	Texte affiché dans le bouton.
Hauteur du bouton (Padding Y)	Espacement vertical interne du bouton (en px).
Largeur du bouton (Padding X)	Espacement horizontal interne du bouton (en px).
Taille de la police (Font size)	Taille du texte du bouton (en px).
Épaisseur de la police (Font weight)	Graisse de la police (ex : 400 = normal, 700 = gras).
Interlignage (Line height)	Hauteur de ligne, sans unité (ex : 1.25).
Border radius	Arrondi des coins du bouton (en px). Une valeur élevée donne un bouton en forme de pilule.
Couleur du texte	Couleur du texte du bouton.
Couleur du fond	Couleur de fond du bouton.
Utiliser un fond transparent	Rend le fond du bouton transparent.
Ajouter une ombre portée	Ajoute une ombre portée sous le bouton.

Position du widget

Par défaut, le bandeau s'affiche en bas à gauche. Mais vous pouvez le déplacer sur la droite si vous préférez.

Décalage horizontal du bouton (offset X)

Vous pouvez décaler le bouton vers la gauche ou la droite. Utile pour éviter que le bouton empiète sur d'autres éléments de votre interface.

Décalage vertical du bouton (offset Y)

Vous pouvez décaler le bouton vers le haut ou le bas. Utile pour éviter que le bouton empiète sur d'autres éléments de votre interface.

Détournement du défilement du navigateur sur mobile

Par défaut, Axeptio contrôle le scroll (défilement) de la page lorsque le widget est affiché, afin de rester visible et d'éviter des effets d'affichage gênants.

Le plus souvent, c'est pratique et nous conseillons donc de laisser cette option désactivée si vous ne rencontrez pas de problèmes particuliers. Mais sur certains sites, cela peut au contraire être gênant. Vous pouvez essayer d'activer cette option si vous observez les comportements indésirables typiques suivants :

impossibilité de faire défiler la page, en particulier sur mobile, où le scroll peut être bloqué tant que le bandeau est affiché
comportement avec des éléments du site comme des menus, pop-ins ou modales

Lorsque cette option est activée, Axeptio ne contrôle plus le défilement de la page et laisse le navigateur gérer le scroll normalement.

Position dans le body de la racine du widget

Définit à quel endroit du code HTML de la page Axeptio insère le widget : au début ou à la fin de la balise <body>.

Par défaut, le widget est inséré à la fin du <body>. Ce positionnement est recommandé dans la plupart des cas.

Il est toutefois possible d'insérer le widget au début du <body> si vous rencontrez des problèmes de compatibilité avec la structure du site, certains styles CSS globaux ou des scripts JavaScript. Cette option est principalement destinée à des cas spécifiques et n'a généralement pas d'impact visible pour les internautes.

Overlay

L'overlay est un fond semi-transparent affiché derrière le widget Axeptio lorsque celui-ci est ouvert. Il permet de mettre en évidence le bandeau de consentement et de réduire les distractions liées au contenu de la page.

Les paramètres disponibles dans cette section permettent uniquement de personnaliser l'apparence de l'overlay (opacité, couleurs, style). Le fait de renseigner ces valeurs n'active pas à lui seul l'affichage de l'overlay.

Pour que l'overlay soit affiché, l'une des fonctionnalités suivantes doit être activée :

le consent wall contextuel, qui peut être ajouté depuis une configuration existante
l'option Afficher le widget au centre de l'écran (comme le consent wall), disponible dans une configuration via Intégrer sur votre site

Les couleurs de l'overlay (dégradé ou couleur unie) peuvent être personnalisées plus bas sur la page, dans Couleurs > Overlay.

Opacité du fond de l'overlay

Définit le niveau de transparence de l'arrière-plan affiché derrière le widget.

La valeur attendue est une valeur décimale comprise entre 0 et 1, où :

0 correspond à un fond totalement transparent
1 correspond à un fond totalement opaque

Style du remplissage de l'overlay

Permet de choisir le type de fond utilisé :

Radial : un dégradé centré autour du widget, avec un effet plus doux et progressif
Couleur unie : un fond uniforme sur toute la page

Couleurs

La section Couleurs permet de personnaliser l'ensemble des couleurs utilisées par le widget Axeptio.

Tache de peinture

La tache de peinture est l'élément graphique en forme de cercle coloré visible en arrière-plan des illustrations du widget. En la modifiant, vous générez automatiquement une palette cohérente pour l'ensemble du widget. Chaque couleur peut ensuite être ajustée individuellement.

Couleurs de base

Ces paramètres permettent de définir les couleurs utilisées pour les éléments généraux du widget :

Option	Description
Principale	Couleur dominante du thème, utilisée pour les accents et les éléments interactifs.
Textes	Couleur des textes standards.
Titres	Couleur des titres.
Fond des widgets	Arrière-plan principal du widget.
Fond des cartes	Arrière-plan des cartes et blocs internes.
Couleur de fond de la checkbox désélectionnée	Couleur des toggles en position OFF.
Couleur de fond de la checkbox sélectionnée	Couleur des toggles en position ON.

Boutons de base

Ces options définissent l'apparence des boutons secondaires (ex : "Tout refuser", "Personnaliser") :

Option	Description
Texte des boutons	Couleur du texte.
Texte des boutons au survol	Couleur du texte au survol.
Bordure des boutons	Couleur de la bordure.
Fond des boutons	Couleur de fond.
Fond des boutons au survol	Couleur de fond au survol.

Bouton Principal

Ces paramètres s'appliquent spécifiquement au bouton d'action principale (ex : "Tout accepter"). Ils permettent de mettre en avant l'action principale proposée à l'utilisateur.

Option	Description
Texte du bouton principal	Couleur du texte.
Texte du bouton principal au survol	Couleur du texte au survol.
Fond du bouton principal	Couleur de fond.
Fond du bouton principal au survol	Couleur de fond au survol.

Bouton de consentement

Ces options contrôlent l'apparence des boutons de consentement affichés dans la liste des vendors. Elles permettent d'ajuster précisément l'apparence des actions de consentement et de refus.

Option	Description
Fond des boutons de consentement	Couleur de fond.
Fond des boutons de consentement au survol	Couleur de fond au survol.
Texte des boutons de consentement	Couleur du texte.
Texte des boutons de consentement au survol	Couleur du texte au survol.
Contour des boutons de consentement	Couleur de la bordure.
Contour des boutons de consentement au survol	Couleur de la bordure au survol.

Overlay

Ces paramètres définissent les couleurs utilisées pour le fond affiché derrière le widget, lorsque le style de remplissage est configuré sur Radial :

Option	Description
Centre du dégradé de l'overlay	Couleur du centre du dégradé.
Extérieur du dégradé de l'overlay	Couleur de l'extérieur du dégradé.

Style du widget

Border Radius (coins arrondis)

Définit le niveau d'arrondi appliqué aux coins du widget, exprimé en pixels.

Une valeur élevée produit des coins plus arrondis, tandis qu'une valeur faible donne un rendu plus anguleux.

Border radius des boutons de consentement

Contrôle l'arrondi des boutons de consentement affichés dans le widget.

Ce réglage permet d'harmoniser l'apparence des boutons avec le style global du site.

Coins arrondis du bouton fermer

Définit l'arrondi du bouton permettant de fermer le widget.

Ce paramètre est indépendant des autres réglages de border radius.

Taille des titres

Définit la taille des titres affichés dans le widget, exprimée en pixels.

Ce réglage a un impact direct sur la hiérarchie visuelle et la lisibilité du contenu.

Taille du corps

Définit la taille du texte principal du widget, exprimée en pixels.

Une taille trop petite peut nuire à la lisibilité, notamment sur mobile.

Ombre portée

Permet de définir le style d'ombre appliqué au widget. L'ombre contribue à détacher visuellement le widget du contenu de la page et à renforcer sa visibilité.

Ombre par défaut : ombre standard appliquée par Axeptio
Aucune : pas d'ombre
Personnalisée : saisie libre d'une valeur CSS box-shadow

Typographie

La section Typographie permet de définir les polices utilisées dans le widget Axeptio, pour les titres et pour les textes.

Ces réglages permettent d'aligner l'apparence du widget avec la typographie du site.

Police de caractère des titres

Permet de définir la police utilisée pour les titres affichés dans le widget.

Il est possible de choisir une police Google ou une autre police en renseignant directement son nom de famille (font-family).

Si la police choisie n'est pas déjà chargée sur la page, l'option Laisser Axeptio charger la police sur le site permet à Axeptio de la charger automatiquement.

Police de caractère des textes

Permet de définir la police utilisée pour les textes du widget, indépendamment de celle des titres. Comme pour les titres, il est possible d'utiliser une police Google ou une police personnalisée via son nom de famille.

Si la police n'est pas déjà disponible sur le site, Axeptio peut la charger automatiquement via Google Fonts en activant l'option correspondante.

Le chargement de polices supplémentaires peut avoir un impact sur les performances et la conformité du site et doit être utilisé avec précaution.