Onze métiers, sans onze développements CSS
Un site médical, un hôtel et une agence immobilière ne partagent pas la même identité. Les codes graphiques d’un secteur donnent souvent une indication immédiate sur son activité. Pourtant, l’interface de consentement conserve fréquemment une apparence générique, sans lien avec le reste de la page.
J’ai conçu onze thèmes métiers pour tarteaucitron.io Pro. Ils offrent des points de départ adaptés à des environnements professionnels variés, sans demander à chaque agence ou administrateur de reprendre l’ensemble des styles CSS.
La collection couvre Campus, Chantier, Hotel, Immobilier, Juridique, Medical, Mode, Optic, Pastry, Restaurant et Spa. Chaque thème adapte les couleurs, les surfaces et les détails graphiques du bandeau, du panneau de gestion et des composants associés.
Hôtellerie et restauration : Hotel, Restaurant et Pastry
Hotel associe des tons marine et crème pour rappeler une hôtellerie classique. Restaurant privilégie des rouges chauds et une ambiance plus conviviale. Pastry joue sur le rose et le brun, avec une référence assumée à la pâtisserie.
Ces trois univers sont voisins, mais leurs codes ne sont pas interchangeables. Une maison d’hôtes, une brasserie et une pâtisserie artisanale ne présentent pas forcément leurs contenus de la même manière. La collection propose donc trois directions distinctes plutôt qu’une unique catégorie « tourisme ».
Sur un site de réservation ou de commande, le bandeau ne doit pas masquer durablement les actions principales. Le comportement mobile et l’ouverture du panneau méritent une vérification particulière.
Medical, Juridique et Immobilier : des présentations plus posées
Medical utilise du turquoise et une organisation clinique, sans prétendre donner une garantie particulière en matière de confidentialité. Juridique associe le bleu nuit et l’ivoire pour une interface plus institutionnelle. Immobilier privilégie une palette vert canard et des surfaces équilibrées.
Pour ces activités, la crédibilité du site repose sur beaucoup plus qu’une palette. Le thème peut accompagner l’identité existante, mais il ne doit pas suggérer une certification, une sécurité accrue ou une conformité juridique qui ne découlerait pas de son apparence.
Les informations de consentement doivent rester claires, notamment lorsque le site utilise plusieurs services tiers. Le panneau de gestion conserve son rôle central : détailler les choix et permettre de les modifier.
Mode, Optic et Spa : trois sensibilités graphiques
Mode est volontairement réduit à une palette noire et blanche. Optic utilise également des contrastes francs, avec des accents rouges plus graphiques. Spa s’oriente vers des verts doux et une ambiance apaisante.
Cette diversité permet de choisir un style sans supposer qu’un secteur entier partage les mêmes goûts. Une boutique de mode peut vouloir une interface expressive, tandis qu’un centre de bien-être peut privilégier une présentation presque neutre.
Dans tous les cas, l’équilibre des actions d’acceptation et de refus doit rester le même. L’esthétique ne doit pas servir à mettre un choix en avant au détriment de l’autre.
Campus et Chantier : deux environnements très différents
Campus adopte des bleus institutionnels et une organisation structurée. Il peut convenir à des sites liés à l’enseignement ou à la vie étudiante, sans prétendre répondre à lui seul aux obligations d’accessibilité d’un établissement public.
Chantier utilise une interface sombre et des accents orange inspirés de la signalisation. Son vocabulaire visuel est plus technique et plus affirmé. Les contrastes et les états des boutons doivent cependant être vérifiés sur le site final.
Ces deux thèmes complètent la collection avec des directions moins attendues. Ils illustrent l’idée générale : offrir plusieurs points de départ graphiques, plutôt que prétendre qu’un seul bandeau convient à tous les secteurs.
Ce qui change, et ce qui ne change pas
Le choix d’un thème agit sur la présentation. Il ne change pas la liste des services configurés, la façon dont tarteaucitron.js bloque les scripts tiers ou les préférences enregistrées par la bibliothèque. Une nouvelle apparence ne doit pas devenir une nouvelle règle de consentement.
Les boutons d’acceptation et de refus doivent conserver une importance comparable. Les commandes présentes dans le panneau doivent rester clairement identifiables, même avec des couleurs ou des décorations très différentes. Cette cohérence est particulièrement importante lorsque les visiteurs souhaitent revenir sur leur décision.
Les thèmes interviennent également sur les détails des services, les cookies et l’icône permanente. C’est un point que les captures limitées au bandeau ne montrent pas toujours : la personnalisation doit rester homogène lorsque l’on ouvre le panneau complet.
Des vérifications nécessaires sur le site final
Un thème ne dispense pas de tester l’intégration. Une feuille CSS globale peut modifier la taille des boutons, la police ou les couleurs. Un élément fixe du site peut masquer une partie du bandeau. Les traductions peuvent également faire varier la longueur des libellés.
Je recommande donc de vérifier l’affichage sur mobile, la navigation au clavier, la visibilité du focus et les différents états des commandes. Les préférences de réduction des animations doivent aussi être respectées lorsque le thème utilise des effets de mouvement.
Il ne faut pas non plus confondre cohérence visuelle et conformité RGAA ou WCAG. Le résultat final dépend de l’ensemble de l’interface et du contexte dans lequel elle est utilisée.
Une option Pro, sans retirer la personnalisation open source
Ces thèmes sont destinés à tarteaucitron.io Pro. Leur sélection depuis le dashboard vise à éviter une intervention manuelle sur les fichiers CSS pour chaque changement d’apparence.
La version open source de tarteaucitron.js reste personnalisable par CSS. La nouvelle collection ne remplace pas cette possibilité et ne modifie pas le fonctionnement de la bibliothèque libre.
Pour comparer les rendus, la galerie interactive des 52 thèmes permet d’appliquer chaque style sur une interface de consentement et d’ouvrir le panneau de gestion. C’est plus représentatif qu’une image isolée.
