Apparence

L’apparence se règle dans le back-office du restaurant. Votre page décide où le widget se place et de quelle place il dispose, et de rien d’autre.

Cette séparation est imposée par le DOM et non par convention : le widget est rendu dans un shadow root, où le CSS de votre page ne peut pas sélectionner.

Réglé dans le back-office

Réglage	Effet
Couleur de marque	Boutons, jour sélectionné, créneau actif.
Logo	Remplace le nom du restaurant dans l’en-tête.
En-tête restaurant	Désactivé, il masque le nom du restaurant — pour une surface de groupe.
Hériter de la typographie	Désactivé par défaut. Activé, le widget utilise la police de votre page.

Les trois derniers existent pour les groupes : un hôtel avec huit restaurants peut présenter une seule surface de réservation qui parle du groupe plutôt que du restaurant sur lequel le client est arrivé.

La couleur est une couleur de marque unique, et le texte tracé dessus est calculé pour le contraste plutôt que configuré. Une couleur de marque claire donne du texte foncé, et non du blanc illisible.

Isolation des styles

Les styles du widget sont adoptés par son shadow root sous forme de feuille de style constructible. Deux conséquences à connaître :

Votre CSS n’atteint pas le widget. Une règle button { … } globale, un reset CSS ou les classes utilitaires d’un framework n’ont aucun effet à l’intérieur.
Le CSS du widget n’atteint pas votre page. Rien de ce que le widget embarque ne peut restyler la page qui l’accueille.

Comme la feuille de style est adoptée via le CSSOM plutôt qu’injectée sous forme d’élément <style>, un style-src strict sur votre page ne la bloque pas. Une page à Content-Security-Policy stricte n’a besoin d’aucune entrée style-src pour le widget.

Une exception mérite d’être connue : la couleur de marque est appliquée par un attribut style en ligne. Une page dont la politique définit style-src sans style-src-attr 'unsafe-inline' bloque cet attribut, et le widget s’affiche alors dans sa couleur par défaut plutôt que dans celle du restaurant.

Ce qui traverse quand même la frontière

Les propriétés CSS héritées traversent une frontière de shadow DOM — c’est le fonctionnement de l’héritage, et l’isolation n’y change rien.

La feuille de style du widget définit ce dont il a besoin : cela ne compte donc qu’à un endroit, font-family, lorsque hériter de la typographie est activé. L’option est désactivée par défaut, car une police d’affichage choisie pour une bannière et appliquée à un formulaire de réservation est le seul réglage d’apparence capable de rendre le widget illisible — et une police que le restaurant n’a pas choisie est un plus mauvais défaut que celle qu’il a choisie.

Activée, le widget utilise font-family: inherit plutôt qu’un nom de police recopié depuis la page. Il reprend donc ce que votre page utilise réellement, polices web comprises.

Taille et emplacement

`inline`

Le widget occupe son conteneur jusqu’à 440 px, est centré dedans, et ne descend pas sous 320 px. Un conteneur plus étroit sera débordé plutôt que respecté.

Sous une fenêtre de 640 px, ces limites disparaissent : le widget prend toute la largeur, perd ses coins arrondis et son ombre, et occupe au moins une hauteur d’écran — une réservation sur téléphone se lit ainsi comme une page et non comme une carte.

`popover` et `sticky`

Les deux sont montés à la fin de <body>, dans leur propre contexte d’empilement, au-dessus de toute la page — le portail du popover au z-index maximal, le bouton flottant juste en dessous. Le popover est plafonné à 420 px et passe pleine page sur téléphone.

position (ou data-position) ancre le bouton flottant et le popover : bottom-right par défaut, parmi six ancrages — trois en haut, trois en bas. Sous 640 px, l’ancrage est ignoré et le popover devient une feuille plein écran.

En mode popover, l’élément déclencheur vous appartient : [data-service-widget-open] est un point d’accroche, pas un style. Rien ne lui est appliqué.

La surcouche de paiement

Lorsqu’une réservation exige une empreinte bancaire, l’étape de paiement s’affiche dans une surcouche au niveau du body plutôt que dans le widget : l’élément de paiement de Stripe ne peut pas être monté dans un shadow root.

Elle embarque ses propres jetons de design, cantonnés à son conteneur, si bien qu’intégrer le widget ne change jamais l’apparence de votre page — pas même pendant que la surcouche est ouverte.

Un seul thème

Le widget s’affiche dans un unique thème clair. Il ne suit pas prefers-color-scheme, et il n’existe pas de variante sombre.