/**
* Tunnel de réservation web — v0.6, habillage « application ».
*
* Relevé le 18/08 sur le parcours RÉEL de rdv.welcome-app.com (12 captures) :
* accordéons par catégorie, `+` noir rond, pilule panier TAN, Suivant noir,
* créneaux en chips grises à badge « +N € », étapes numérotées à barre
* segmentée, récap à bande « Durée » grise et « Nouveau total » gras.
* Palette = thème de l'app (LightModeTheme) : noir accent, tan #E8D9C4,
* gris #F5F5F5, filets #ECECEC. Rouge réservé à l'erreur.
*
* ARCHITECTURE (décision du 18/08, arbitrée « stable d'abord ») :
* page dédiée PLEIN ÉCRAN qui glisse depuis la droite — pas de bottom sheet :
* une feuille + clavier iOS + scroll interne est le trio le plus fragile du
* web mobile, et la page réplique un comportement déjà éprouvé par les
* clientes sur rdv.welcome-app.com.
*/
/* 0.33.0 (09/10) — LA POLICE DE L'APP. La fiche ne charge qu'Archivo : le tunnel
demandait Poppins et Playfair Display sans que personne ne les serve, et
s'affichait dans la police du téléphone, ses titres en Georgia gras — le
« style IA » que Nicolas relevait. Poppins vient maintenant de l'extension
(`polices/`, sous-ensemble latin, ~12 Ko par graisse), sous un nom à elle :
seule la page de réservation l'emploie, et le navigateur ne la télécharge
qu'à son ouverture — la fiche et sa barre « Réserver » n'en paient rien. */
@font-face { font-family: "WT Poppins"; font-style: normal; font-weight: 400; font-display: swap;
src: url("polices/poppins-400.woff") format("woff"); }
@font-face { font-family: "WT Poppins"; font-style: normal; font-weight: 500; font-display: swap;
src: url("polices/poppins-500.woff") format("woff"); }
@font-face { font-family: "WT Poppins"; font-style: normal; font-weight: 600; font-display: swap;
src: url("polices/poppins-600.woff") format("woff"); }
.wt-lanceur, .wt-page {
--wt-noir:#1A1A1A; --wt-gris:#8A8A8A; --wt-gris-t:#5F5F63; --wt-filet:#ECECEC;
--wt-gris-c:#F5F5F5; --wt-tan:#E8D9C4; --wt-creme:#F9F5F0; --wt-erreur:#E31111;
font-family: var(--welcome-sans, "Poppins", -apple-system, sans-serif);
color: var(--wt-noir);
font-size: 15px; line-height: 1.5;
/* ⚠️ 07/09 — Retour de Nicolas : « les textes du tunnel sont écrits
beaucoup trop fins ». Mesuré en production sur la fiche : le tunnel
calculait `font-weight: 300`. Il n'avait JAMAIS posé sa graisse et
héritait donc du Poppins Light du thème, choisi pour de grands titres
éditoriaux — illisible à 13-15 px dans une interface. On la pose ici,
une fois, à la racine des deux îlots. */
font-weight: 400;
}
.wt-page [hidden] { display: none !important; }
/* ⚠️ LE THÈME DU SITE HABILLE TOUS LES BOUTONS, ET PAS QU'EN COULEUR
`button, [type="button"] { color:#CC3366; padding:.5rem 1rem;
border:1px solid #CC3366; border-radius:3px }`.
Deux dégâts constatés EN PROD (jamais sur un banc : une page nue n'a pas
ces feuilles) — ① 20/08 : chevron de retour et chips de créneaux en ROSE ;
② 20/08, signalé par Nicolas : les `+` et `✓` des prestations **décalés**.
Cause du ② mesurée : le padding 8/16 imposé laissait 2 px de large de boîte
de contenu dans un bouton de 34 px — le glyphe sortait 7,1 px à droite du
centre. D'où un RESET complet ici plutôt qu'un rustinage couleur.
Spécificité 0,1,1 : passe devant `[type="button"]` (0,1,0). Tout bouton du
tunnel qui veut son propre fond/padding est donc préfixé `.wt-page` ou
`.wt-lanceur` plus bas (0,2,0) pour rester au-dessus du filet.
NE PAS retirer sans revérifier EN PROD. */
.wt-page button, .wt-lanceur button {
color: var(--wt-noir); padding: 0; border: 0; border-radius: 0; background: none;
}
/* ═══════════ LA BARRE COLLANTE SUR LA FICHE ═══════════ */
.wt-lanceur {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
display: flex; align-items: center; gap: 12px;
/* 18 px en haut, pas 10 : le bouton touchait presque le bord (20/08). */
padding: 18px 16px calc(14px + env(safe-area-inset-bottom, 0px));
/* ⚠️ FOND PLEIN, PAS UN DÉGRADÉ (retour de Nicolas, 21/08 : « le bouton
n'est pas bien contenu dans le dialogue en bas et dépasse »).
Le dégradé `to top, crème 72%, transparent` laissait les 24 px du HAUT
quasi transparents — or le bouton commence à 18 px du haut. Son bord
supérieur flottait donc sur le fond de la page : à l'œil, il sortait de
la barre. Mesuré : bouton à 18 px du haut, opacité du fond à cet
endroit ≈ 0,76. Le fond plein règle ça, et rejoint le traitement déjà
retenu sur ordinateur. */
background: var(--welcome-creme, #FAF6F1);
border-top: 1px solid var(--wt-filet);
box-shadow: 0 -6px 24px rgba(26, 26, 26, .10);
}
.wt-lanceur .wt-resume { flex: 1; min-width: 0; font-size: 12.5px; color: var(--wt-gris-t); line-height: 1.35; }
.wt-lanceur .wt-resume b { display: block; font-size: 14.5px; color: var(--wt-noir); font-weight: 600; }
.wt-lanceur .wt-btn-lanceur {
background: var(--wt-noir); color: #fff; border: 0; border-radius: 999px;
padding: 15px 26px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
@media (min-width: 900px) {
/* Sur ordinateur la barre flotte au-dessus d'une page claire : le dégradé
ne suffisait pas à la détacher (20/08). Fond plein blanc cassé, filet et
ombre portée pour qu'on la lise comme un élément posé. */
.wt-lanceur { left: 50%; right: auto; transform: translateX(-50%); width: 560px;
background: #FCFAF7; border: 1px solid var(--wt-filet); border-bottom: 0;
border-radius: 18px 18px 0 0; box-shadow: 0 -6px 28px rgba(0,0,0,.14); }
}
/* ═══════════ LA PAGE DE RÉSERVATION ═══════════ */
.wt-page {
position: fixed; inset: 0; z-index: 100; background: #fff;
transform: translateX(103%); transition: transform .28s ease;
overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
body.wt-resa-ouverte .wt-page { transform: translateX(0); }
body.wt-resa-ouverte { overflow: hidden; }
@media (min-width: 900px) {
.wt-page { left: 50%; right: auto; transform: translate(-50%, 0);
/* 07/09 — `bottom: 3vh` imposait 94 vh de hauteur quel que soit le
contenu : 411 px de blanc mesurés sous le bouton de l'écran Adresse.
Le panneau épouse maintenant son contenu et plafonne à 94 vh. Il
reste accroché par le HAUT : centré, il sauterait verticalement à
chaque changement d'écran. */
top: 3vh; bottom: auto; height: auto; max-height: 94vh; width: 480px;
border-radius: 18px; opacity: 0; pointer-events: none; transition: opacity .2s ease;
box-shadow: 0 20px 60px rgba(0,0,0,.35); }
/* La règle mobile `translateX(0)` gagnerait en spécificité et décentrerait
le panneau : on la neutralise ici. */
body.wt-resa-ouverte .wt-page { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
body.wt-resa-ouverte::after { content:""; position: fixed; inset: 0; z-index: 99; background: rgba(0,0,0,.4); }
}
/* — en-tête : mini hero comme rdv.welcome-app — */
.wt-entete { position: relative; border-bottom: 1px solid var(--wt-filet); padding: 14px 58px 12px 16px; }
/* Croix de fermeture À DROITE (20/08) : la flèche ‹ à gauche se lisait
« étape précédente » alors qu'elle fermait tout le tunnel. */
.wt-page .wt-croix {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--wt-gris-c);
font-size: 14px; cursor: pointer; display: grid; place-items: center;
color: var(--wt-noir);
}
.wt-entete b { font-family: inherit; font-weight: 600; font-size: 18px; display: block; }
.wt-entete small { color: var(--wt-gris); font-size: 11.5px; }
/* — étapes : barre segmentée + titre numéroté — */
.wt-prog { display: flex; }
.wt-prog i { flex: 1; height: 2px; background: #E3E3E3; }
.wt-prog i.fait { background: var(--wt-noir); }
.wt-etape-titre { text-align: center; font-size: 14.5px; font-weight: 600; padding: 12px 0 4px; }
.wt-sous { text-align: center; margin: 0 16px 10px; font-size: 13px; color: var(--wt-gris); }
/* — écrans — */
.wt-ecran { display: none; padding-bottom: 8px; }
.wt-ecran.est-visible { display: block; }
.wt-ecran > h3 { font-family: inherit; font-size: 14px; font-weight: 500; color: var(--wt-gris-t);
text-align: center; margin: 2px 16px 12px; }
/* — accordéons (catégories, jours) — */
.wt-acc { margin: 8px 14px; border: 1px solid var(--wt-filet); border-radius: 12px; background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow: hidden; }
/* Le nom du jour est un REPÈRE de navigation, pas du texte courant : il
porte un cran de plus que le reste (07/09). */
.wt-acc-tete { position: relative; padding: 14px; text-align: center; font-size: 15.5px;
font-weight: 500; cursor: pointer; user-select: none; }
.wt-acc-tete::after { content: "▾"; position: absolute; right: 14px; color: #666; transition: transform .2s; }
.wt-acc.ouvert > .wt-acc-tete::after { transform: rotate(180deg); }
.wt-acc-corps { display: none; }
.wt-acc.ouvert > .wt-acc-corps { display: block; }
/* — lignes prestation — */
.wt-presta { padding: 10px 14px; border-top: 1px solid var(--wt-filet); display: flex; align-items: center; gap: 10px; }
.wt-presta .wt-titre { flex: 1; min-width: 0; cursor: pointer; }
.wt-presta .wt-titre b { font-size: 14.5px; font-weight: 600; display: block; }
.wt-presta .wt-titre small { color: var(--wt-gris); font-size: 13px; }
/* ⚠️ 07/09 — Retour de Nicolas : « les icônes plus ne sont pas bien
centrées ». `place-items: center` centrait bien la BOÎTE de la ligne — mais
le glyphe « + » de Poppins n'est pas centré dans la sienne : il s'appuie
sur l'axe mathématique, plus haut que le centre optique. Aucun réglage de
`line-height` ne rattrape ça proprement d'une police à l'autre.
Les deux glyphes sont donc devenus des SVG, géométriquement centrés dans
leur viewBox — la question ne se repose plus. */
.wt-page .wt-plus { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
background: var(--wt-noir); color: #fff; line-height: 1; cursor: pointer;
flex: 0 0 auto; display: grid; place-items: center; }
.wt-page .wt-plus svg, .wt-page .wt-moins svg { display: block; }
.wt-vign { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px;
background: var(--wt-gris-c) center/cover no-repeat; }
.wt-vign-vide { display: grid; place-items: center; font-family: inherit; font-weight: 500;
font-size: 19px; color: #B9A88F; background: var(--wt-creme); }
.wt-cat-lab { margin: 12px 16px 2px; font-size: 12.5px; color: var(--wt-gris);
text-align: left; }
.wt-note-filtre { margin: 8px 14px; }
/* Le pas de quantité. ⚠️ Ce n'est PAS le sélecteur ×1..×5 retiré en v0.2.1 :
celui-là envoyait `quantity: N`, que `create_web_appointment.js:940` refuse.
Ici chaque unité part comme sa PROPRE ligne `quantity: 1` — exactement ce
que fait `_model.addToItems(...)` dans l'app, appelé une fois par tap. */
.wt-pas { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.wt-page .wt-moins { width: 28px; height: 28px; padding: 0; border: 1.5px solid var(--wt-filet);
border-radius: 50%; background: #fff; color: var(--wt-noir); line-height: 1;
cursor: pointer; display: grid; place-items: center; }
.wt-nb { min-width: 14px; text-align: center; font-size: 14.5px; font-weight: 600; }
/* — cartes cadeaux : bannières, relevé sur `shop_page` le 20/08 — */
.wt-carte { margin: 10px 14px; border-radius: 12px; overflow: hidden;
background: var(--wt-creme) center/cover no-repeat; }
.wt-carte-nue { background: linear-gradient(135deg, #F3E6D2, #E8D9C4); }
/* Le voile : sans lui, un intitulé sombre sur une photo sombre devient
illisible — et la CF ne sert pas la couleur d'encre du modèle. */
.wt-carte-voile { display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 16px 14px;
/* Voile LÉGER, dégradé vers le bas : à 0,62 d'opacité il effaçait le doré
et la soie, c'est-à-dire tout l'intérêt de la carte. Ici le haut de
l'image reste net et le texte gagne son contraste par l'ombre blanche
ci-dessous plutôt qu'en noyant la photo. */
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.34)); }
.wt-carte b, .wt-carte em, .wt-carte small {
text-shadow: 0 1px 3px rgba(255,255,255,.95), 0 0 10px rgba(255,255,255,.7); }
.wt-carte-pro { border: 1px solid rgba(90,65,34,.45); border-radius: 999px;
padding: 2px 12px; font-size: 11.5px; color: #5B4122; background: rgba(255,255,255,.5); }
.wt-carte b { font-size: 16px; font-weight: 600; color: #4A3A28; margin-top: 6px; }
.wt-carte em { font-style: normal; font-size: 21px; font-weight: 700; color: #4A3A28; }
.wt-carte small { font-size: 11.5px; color: #6B5B45; }
.wt-carte .wt-pas { margin-top: 10px; }
/* Sur un fond photographique, un petit rond noir se perd : l'app utilise un
bouton blanc plein, on fait pareil. */
.wt-page .wt-ajouter { background: #fff; color: var(--wt-noir); border: 0; border-radius: 999px;
padding: 10px 26px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,.16); }
.wt-pas-carte .wt-nb { color: var(--encre, #4A3A28); }
.wt-page .wt-pas-carte .wt-moins { background: rgba(255,255,255,.92); border-color: rgba(255,255,255,.92); }
/* Quand le modèle porte sa couleur d'encre (`text_color`, servie validée) :
comme l'app — texte dans cette couleur, à même l'image, sans voile ni
ombre. Le voile ne reste que pour les cartes SANS couleur définie. */
.wt-carte.a-encre .wt-carte-voile { background: none; backdrop-filter: none; }
.wt-carte.a-encre b, .wt-carte.a-encre em, .wt-carte.a-encre small {
color: var(--encre); text-shadow: none; }
.wt-carte.a-encre .wt-carte-pro { color: var(--encre); border-color: currentColor;
background: none; }
/* — options lieu / conditions : cartes radio — */
.wt-options { display: grid; gap: 10px; margin: 8px 14px; }
/* ═════════════════════════════════════════════════════════════════════
v0.24 — LES ADRESSES LONGUES NE POUSSENT PLUS LE TUNNEL DE CÔTÉ
═════════════════════════════════════════════════════════════════════
Défaut signalé le 26/08 sur « 2 Impasse de la Sauge, 11200
Saint-André-de-Roquelongue, France » : une barre de défilement
HORIZONTALE apparaissait sur tout le tunnel, et le détail de la carte
« Chez moi » se coupait au bord.
Mesuré en production : `.wt-options` faisait **507 px dans 452**, et
`.wt-page` 521 dans 480.
La cause n'est pas le texte, c'est une valeur par défaut de CSS :
un enfant de grille (comme un enfant de flex) vaut `min-width: auto`,
c'est-à-dire « je ne me rétrécis JAMAIS sous la largeur de mon
contenu ». Une longue chaîne insécable élargit donc la piste, qui
élargit la grille, qui élargit le tunnel. `min-width: 0` rend le droit
de rétrécir ; `overflow-wrap: anywhere` donne au texte le droit d'aller
à la ligne au lieu de forcer le passage.
⚠️ Le banc sur `faux-wp/page.html` NE reproduisait PAS le défaut : il
n'a pas la feuille du thème. C'est la mesure sur la page réelle qui
l'a montré. Correctif éprouvé en direct : 521 → 480, plus un seul
élément en dépassement. */
.wt-options > *,
.wt-opt-groupe,
.wt-option > span,
.wt-adresse-bloc,
.wt-adresse-suggs { min-width: 0; }
.wt-option b,
.wt-option small { overflow-wrap: anywhere; }
.wt-option { display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
background: #fff; border: 1px solid var(--wt-filet); border-radius: 12px; padding: 14px 16px; }
.wt-option.est-choisie { border-color: var(--wt-noir); background: var(--wt-creme); }
.wt-option input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--wt-noir); flex: 0 0 auto; }
/* Cartes de lieu enrichies (v0.18) — la photo de l'établissement, comme
dans l'application. 54 px : assez pour reconnaître la devanture, pas assez
pour déséquilibrer la carte. */
.wt-lieu-photo { width: 54px; height: 54px; border-radius: 10px; object-fit: cover;
flex: 0 0 auto; background: var(--wt-gris-c); border: 1px solid var(--wt-filet); }
/* 0.25.2 — l'épingle du carré sans photo était le caractère 📍 dans le JS.
`wp-emoji-release.min.js` le convertit en hérite parfois du `nowrap` d'une
feuille tierce — sur une page WordPress il y en a une trentaine. On le
pose explicitement plutôt que d'espérer. */
.wt-page .wt-adresse-suggs button { text-align: left; padding: 11px 12px; font-size: 13.5px;
background: #fff; border: 1px solid var(--wt-filet); border-top: 0; cursor: pointer;
white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.wt-page .wt-adresse-suggs button:first-child { border-top: 1px solid var(--wt-filet);
border-radius: 10px 10px 0 0; margin-top: 8px; }
.wt-page .wt-adresse-suggs button:last-child { border-radius: 0 0 10px 10px; }
.wt-page .wt-adresse-suggs button:hover { background: var(--wt-gris-c); }
.wt-adresse-etat { display: block; margin-top: 6px; font-size: 12px; color: var(--wt-gris-t); }
/* Parité 33 (point b) : l'adresse au-dessus des lieux, alignée sur eux. */
#wt-e0 > .wt-adresse-bloc { margin: 8px 14px; }
/* Parité 33 (41-B5) : hors zone, « Voir les pros qui viennent à … » et
« Changer d'adresse », sous le message. */
.wt-hors-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.wt-hors-zone .wt-btn { margin: 0; }
/* v0.22 — Le champ est en LECTURE SEULE pendant qu'on localise l'adresse
(idem `readOnly: _resolving` du picker de l'application) : sans repère
visuel, on croit à un champ gelé. */
.wt-page #wt-adresse-q.est-occupe { background: var(--wt-gris-c); color: var(--wt-gris-t); }
/* Le repli quand l'autocomplétion ne donne rien : demander le numéro de rue,
ou basculer en saisie libre. */
.wt-adresse-aide {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 10px 12px; border: 1px solid var(--wt-filet); border-radius: 10px;
background: #fff; font-size: 12.5px; color: var(--wt-gris-t);
}
.wt-adresse-aide span { flex: 1 1 160px; }
.wt-page .wt-adresse-aide button {
font: inherit; font-size: 12.5px; font-weight: 600; color: var(--wt-noir);
text-decoration: underline; cursor: pointer; background: none; padding: 0;
}
.wt-page .wt-adresse-aide .wt-btn {
flex: 1 1 100%; text-decoration: none; color: #fff;
}
/* v0.21 — Le verdict de zone se pose ICI, sous le champ d'adresse. Un simple
état de recherche reste en gris ; un blocage prend la crème et le tan, et
assez de place pour se lire. */
.wt-adresse-etat.est-bloquant {
margin-top: 8px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px;
line-height: 1.45; background: var(--wt-creme); border: 1px solid var(--wt-tan);
}
.wt-option b { display: block; font-size: 15px; font-weight: 600; }
.wt-option small { display: block; margin-top: 2px; font-size: 13px; color: var(--wt-gris-t); }
/* ═══════════════════════════════════════════════════════════════════════
LA LIGNE D'ADRESSE D'UN ÉTABLISSEMENT (0.25.2)
═══════════════════════════════════════════════════════════════════════
Retour de Nicolas, 31/08 : « la ligne "adresse communiquée après
confirmation" ne se distingue pas assez ». Elle sortait dans le MÊME gris
et la MÊME taille que la description écrite par la pro, juste en dessous —
deux lignes grises empilées, dont l'œil ne sait pas laquelle porte le fait
et laquelle porte l'argument de vente.
Ce n'est pas une question de nuance de gris : deux gris qui se distinguent
assez pour être lus se distinguent aussi mal l'un de l'autre, et l'un des
deux tombe sous le seuil de contraste. C'est la FORME qui sépare ici.
L'adresse devient une pastille ; la description reste une ligne de texte.
⚠️ Le pictogramme est une image CSS (masque SVG en data-URI), pas un
caractère : `wp-emoji-release.min.js` convertit les emoji du DOM en
` (seul élément admis dans un ) : on annule
donc le style des intitulés `.wt-champ span`. */
.wt-champ .wt-tel-ligne { display: flex; gap: 8px; margin: 0; font-size: inherit; color: inherit; }
.wt-champ .wt-tel-ligne select { flex: 0 0 auto; width: auto; padding: 12px 10px; }
.wt-champ .wt-tel-ligne input { flex: 1 1 auto; min-width: 0; }
/* Questions de prestation (v0.12) — mêmes gabarits que `.wt-champ` : c'est
le même geste pour la cliente, il n'y a pas de raison que ça n'en ait pas
l'air. `font-size: 16px` n'est pas décoratif : en dessous, iOS zoome
automatiquement à la mise au point et le tunnel se retrouve décadré. */
.wt-question { margin: 0 16px 14px; }
.wt-question label { display: block; font-size: 13px; color: var(--wt-gris-t);
margin-bottom: 6px; line-height: 1.35; }
.wt-question textarea {
width: 100%; padding: 12px 14px; background: #fff; border: 1px solid #DBDBDB;
border-radius: 12px; color: var(--wt-noir); font-family: inherit; font-size: 16px;
line-height: 1.4; box-sizing: border-box; resize: vertical; min-height: 62px; }
.wt-question textarea:focus { outline: 2px solid var(--wt-noir); outline-offset: 1px;
border-color: transparent; }
.wt-question small { display: block; text-align: left; margin: 6px 0 0; }
.wt-requis { color: var(--wt-erreur); }
/* Photo d'une question (v0.13) — le bouton reprend le gabarit du `+` des
prestations : fond clair, bord fin, coin arrondi. Volontairement DISCRET :
la photo est facultative dans la règle de l'app (texte OU photo), et un
bouton noir plein la ferait passer pour l'action principale de l'écran. */
.wt-photo { margin-top: 8px; }
.wt-page .wt-photo-btn { display: inline-flex; align-items: center; gap: 7px;
background: var(--wt-gris-c); border: 1px solid var(--wt-filet); border-radius: 999px;
padding: 8px 15px; font-size: 13.5px; font-weight: 600; color: var(--wt-noir); cursor: pointer; }
.wt-photo-vue { position: relative; display: inline-block; margin-top: 4px; }
.wt-photo-vue img { display: block; width: 82px; height: 82px; object-fit: cover;
border-radius: 12px; border: 1px solid var(--wt-filet); background: var(--wt-gris-c); }
/* La croix chevauche le coin de la vignette : à l'intérieur elle masquerait
la photo, à l'extérieur elle décalerait la ligne. */
.wt-page .wt-photo-retirer { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px;
padding: 0; border-radius: 50%; background: var(--wt-noir); color: #fff; font-size: 12px;
line-height: 1; cursor: pointer; display: grid; place-items: center;
box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.wt-photo-etat { display: block; margin-top: 6px; font-size: 12px; color: var(--wt-gris); }
.wt-photo-etat.est-ok { color: #1E7F4F; }
.wt-photo-etat.est-ko { color: var(--wt-erreur); }
/* Acompte (v0.14) — le champ de carte est un iframe servi par Stripe : on ne
peut pas l'habiller de l'extérieur, seulement lui donner de l'air et lui
passer une `appearance` à la construction (cf. reservation.js). */
#wt-carte { margin: 14px 16px 4px; min-height: 44px; }
.wt-mini { font-size: 11.5px; margin-top: 10px; }
/* Le détail de l'acompte reprend le gabarit du récapitulatif, sans sa marge
basse : le champ de carte vient juste dessous et doit s'y rattacher. */
#wt-paiement-detail { margin-bottom: 4px; }
/* Retour du 22/08 : « le solde se règle… » était collé à la ligne en
surbrillance juste au-dessus. Un filet pointillé + de l'air : la phrase
est une INFORMATION sur la suite, pas une ligne du décompte. */
#wt-paiement-detail .wt-mini { margin-top: 14px; padding-top: 12px;
border-top: 1px dashed var(--wt-filet); }
/* L'attente du champ de carte (v0.17) */
.wt-attente { display: flex; align-items: center; justify-content: center; gap: 9px;
margin: 18px 16px 6px; padding: 16px 14px; border: 1px dashed var(--wt-filet);
border-radius: 12px; background: var(--wt-gris-c);
font-size: 13px; color: var(--wt-gris-t); }
.wt-attente[hidden] { display: none; }
/* Variante sombre du sablier : le blanc de `.wt-tourne` (fait pour les
boutons noirs) serait invisible sur ce fond clair. */
.wt-tourne-sombre { display: inline-block; width: 15px; height: 15px; flex: 0 0 auto;
border: 2px solid var(--wt-gris); border-top-color: transparent; border-radius: 50%;
animation: wt-rotation .8s linear infinite; }
/* La bande « à régler en ligne » du récapitulatif : elle se détache des
totaux (fond crème, filet haut) parce qu'elle ne dit pas la même chose —
les totaux disent ce que coûte la prestation, celle-ci ce qui part
maintenant de la carte. */
.wt-acompte { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--wt-filet); }
.wt-acompte .wt-ligne b { font-size: 15px; }
.wt-acompte .wt-ligne span { color: var(--wt-gris-t); }
/* L'annonce d'acompte (v0.16) — ton informatif, pas alarmant : fond crème du
thème, pas de rouge. Le rouge du tunnel est réservé aux erreurs, et un
acompte n'en est pas une : c'est une condition, annoncée tôt pour qu'elle
ne surprenne pas au moment de payer. */
.wt-acompte-note { margin: 0 16px 10px; padding: 10px 12px; border-radius: 10px;
background: var(--wt-creme); border: 1px solid var(--wt-tan);
font-size: 12.5px; line-height: 1.4; color: var(--wt-gris-t); text-align: left; }
.wt-acompte-note b { color: var(--wt-noir); font-weight: 600; }
/* Dans la feuille du panier, la note est déjà dans une boîte : pas de marge
latérale, et un peu d'air au-dessus du bouton « Terminer la sélection ». */
#wt-panier-acompte .wt-acompte-note { margin: 10px 0 0; }
.wt-onglets { display: flex; gap: 8px; margin: 4px 16px 16px; }
/* Les trois onglets du catalogue (Prestations / Boutique / Cartes cadeaux) :
mêmes chips segmentées que `shop_page`. Vides = masqués par le JS. */
.wt-onglets-cat { margin: 2px 14px 6px; }
.wt-onglets-cat:empty { display: none; }
.wt-onglets button { flex: 1; background: #EFEFEF; color: #9B9B9B; border: 0; border-radius: 999px;
padding: 10px; font: inherit; font-size: 13.5px; cursor: pointer; }
.wt-onglets button.est-actif { background: var(--wt-noir); color: #fff; font-weight: 500; }
/* — barre du bas (dans la page) — */
/* Deux rangées, et ce n'est pas un choix esthétique : à 390 px, pilule +
« Retour » + « Continuer » réclament ~413 px et la pilule se coupait en deux
lignes. La pilule prend donc toute la largeur, les deux boutons se rangent
dessous à droite. */
.wt-actions { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px;
justify-content: flex-end; flex-wrap: wrap;
padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(to top, #fff 75%, rgba(255,255,255,0)); }
/* ⚠️ PLUS AUCUN BOUTON FANTÔME (demande de Nicolas, 20/08).
Relevé sur `shop_page` le même jour : l'app, elle, met bien un « Retour » en
texte nu à côté d'un « Suivant » plein — c'est donc un ÉCART VOULU, pas un
oubli. Ne pas le « corriger » en revenant au texte seul sous prétexte de
coller à l'app. Le secondaire est un bouton plein gris, même gabarit que le
primaire, pour que les deux se touchent aussi facilement du pouce. */
.wt-page .wt-lien { background: var(--wt-gris-c); color: var(--wt-noir); border: 0;
border-radius: 14px; padding: 14px 22px; font: inherit; font-size: 14.5px;
font-weight: 500; cursor: pointer; }
.wt-page .wt-cumul { flex: 1 0 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
white-space: nowrap; font: inherit; cursor: pointer; border: 0; color: var(--wt-noir);
background: var(--wt-tan); border-radius: 999px; padding: 13px 10px;
font-size: 13.5px; font-weight: 500; min-height: 46px; }
.wt-page .wt-cumul:empty { visibility: hidden; }
.wt-page .wt-btn { background: var(--wt-noir); color: #fff; border: 0; border-radius: 14px;
padding: 14px 22px; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.wt-btn:disabled { background: #E4E4E4; color: #A5A5A5; cursor: not-allowed; }
/* — connexion Google — */
/* Bouton PLEIN blanc, comme la carte cadeau déployée de l'app : la consigne du
20/08 est « toujours des boutons pleins », et le blanc est aussi ce que
demandent les règles d'image de Google pour son bouton clair. Préfixé
`.wt-page` (0,2,0) pour passer devant le filet anti-thème. */
.wt-page .wt-btn-google {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: calc(100% - 32px); margin: 0 16px 4px;
background: #fff; color: var(--wt-noir); border: 1px solid var(--wt-filet);
border-radius: 14px; padding: 13px 18px;
font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.wt-page .wt-btn-google:disabled { color: #A5A5A5; cursor: not-allowed; box-shadow: none; }
.wt-btn-google .wt-g { flex: 0 0 auto; }
/* Le séparateur « ou » : un filet de chaque côté, sans image ni pseudo-contenu
décoratif lu par les lecteurs d'écran. */
.wt-ou { display: flex; align-items: center; gap: 12px; margin: 12px 16px 14px;
color: var(--wt-gris-t); font-size: 12.5px; }
.wt-ou::before, .wt-ou::after { content: ""; flex: 1; height: 1px; background: var(--wt-filet); }
.wt-ou[hidden] { display: none; }
/* — messages — */
.wt-msg { margin: 10px 16px; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; border: 1px solid; }
.wt-msg.est-ko { background: #FDF2F2; border-color: rgba(227,17,17,.28); color: #9B1C1C; }
.wt-msg.est-ok { background: var(--wt-creme); border-color: var(--wt-tan); color: var(--wt-noir); }
.wt-msg.est-note { background: var(--wt-gris-c); border-color: var(--wt-filet); color: var(--wt-gris-t); }
/* — récapitulatif — */
.wt-recap { margin: 10px 14px; border: 1px solid var(--wt-filet); border-radius: 12px; padding: 14px; background: #fff; }
.wt-recap .wt-lab { color: #9B9B9B; font-size: 12.5px; margin-top: 10px; }
.wt-recap .wt-lab:first-child { margin-top: 0; }
.wt-recap .wt-val { font-size: 14.5px; font-weight: 600; }
.wt-recap .wt-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; }
.wt-recap .wt-bande { background: var(--wt-gris-c); margin: 10px -14px; padding: 10px 14px;
display: flex; justify-content: space-between; font-weight: 600; }
.wt-recap .wt-totaux { background: var(--wt-gris-c); margin: 0 -14px -14px; padding: 10px 14px 14px; }
.wt-recap .wt-totaux .wt-ligne { color: #8A8A8A; }
.wt-recap .wt-totaux .wt-ligne.grand { color: var(--wt-noir); font-weight: 700; font-size: 15px; }
/* — consentements (#wt-conditions est un .wt-options) — */
#wt-conditions .wt-option b { font-weight: 500; font-size: 13.5px; }
#wt-conditions .wt-option small { font-size: 12px; }
#wt-conditions a { color: var(--wt-noir); }
/* — fin — */
.wt-fin { text-align: center; padding: 26px 20px 10px; }
.wt-fin h3 { font-family: inherit; font-weight: 600; font-size: 22px; margin: 8px 0; }
.wt-fin .wt-sous { text-align: center; }
/* Parité 33 (phase 2) — le chemin vers la page du rendez-vous. */
.wt-fin-suivi { margin: 16px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wt-fin-suivi .wt-btn { text-decoration: none; display: inline-block; }
.wt-fin-suivi small { font-size: 12.5px; color: var(--wt-gris-t); max-width: 300px; }
.wt-appli { margin: 18px 14px 6px; border: 1px solid var(--wt-filet); border-radius: 14px;
background: var(--wt-creme); padding: 16px 14px; text-align: center; }
.wt-appli b { display: block; font-size: 15px; margin-bottom: 4px; }
.wt-appli small { display: block; color: var(--wt-gris-t); font-size: 13px; margin-bottom: 12px; }
/* Les deux magasins, de même poids, côte à côte (retour du 22/08 : le lien
« Aussi sur Google Play » ne se voyait pas). `flex-wrap` plutôt qu'une
média query : sur un écran étroit les deux boutons passent l'un sous
l'autre tout seuls, et gardent la même largeur qu'à deux. */
.wt-appli .wt-stores { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* ⚠️ `box-sizing: border-box` n'est PAS global dans cette feuille : sans lui,
`flex-basis` et `max-width` portent sur la boîte de CONTENU, et les 28 px de
padding s'ajoutent par-dessus. Mesuré le 22/08 : des boutons annoncés à
220 px en occupaient 248, d'où deux lignes là où deux colonnes tenaient.
Base à 140 px + `min-width: 0` : les deux boutons tiennent côte à côte dès
~310 px de large, c'est-à-dire sur tous les téléphones courants. */
.wt-appli .wt-store { box-sizing: border-box; flex: 1 1 140px; min-width: 0; max-width: 230px;
display: flex; align-items: center; justify-content: center; gap: 9px;
background: var(--wt-noir); color: #fff;
border-radius: 12px; padding: 9px 12px; text-decoration: none; }
/* `nowrap` : sans lui, « Google Play » se coupait en deux sur un écran de
320 px et le bouton doublait de hauteur. Avec, le flex préfère renvoyer le
second bouton à la ligne — deux boutons pleine largeur, lisibles, plutôt
que deux boutons hauts au texte cassé. */
.wt-appli .wt-store span { display: block; text-align: left; line-height: 1.15; white-space: nowrap; }
/* `!important` : `.wt-appli small` impose un `display:block` centré avec une
marge basse, qui décollerait le nom du magasin de son intitulé. */
.wt-appli .wt-store small { display: block !important; color: rgba(255,255,255,.78);
font-size: 10.5px; margin: 0 !important; letter-spacing: .01em; }
.wt-appli .wt-store b { display: block; color: #fff; font-size: 15px; margin: 0;
font-weight: 600; letter-spacing: -.01em; }
.wt-logo-store { width: 22px; height: 22px; flex: 0 0 auto; }
/* Sur un téléphone étroit (360 px et moins), le bloc perdait 96 px en marges
et paddings empilés — `.wt-fin` (20+20), `.wt-appli` (14+14 de marge et
14+14 de padding) —, et les deux boutons ne tenaient plus côte à côte à
3 px près. On récupère ces pixels ici plutôt que de rétrécir le texte des
magasins, qui doit rester lisible. */
@media (max-width: 420px) {
.wt-fin { padding-left: 12px; padding-right: 12px; }
.wt-appli { margin-left: 8px; margin-right: 8px; padding-left: 10px; padding-right: 10px; }
.wt-appli .wt-stores { gap: 8px; }
.wt-appli .wt-store { flex-basis: 120px; padding-left: 10px; padding-right: 10px; gap: 8px; }
}
/* — panier dépliable : la feuille « Récapitulatif » de l'app —
`position: fixed` s'ancre ici sur .wt-page (elle porte un transform, qui
fait d'elle le bloc conteneur) : plein écran sur mobile, bas du panneau
sur desktop — exactement ce qu'on veut, sans média query. */
.wt-panier-voile { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.4); }
/* Dialogue CENTRÉ (20/08) : en feuille du bas, un panier de 3-4 lignes
laissait une bande vide sous le total et rognait le titre en haut. Centré,
la boîte fait la taille de son contenu — ce qui est justement ce qu'on veut
pour un récapitulatif dont la longueur varie. */
.wt-panier-feuille { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
z-index: 111; background: #fff; width: min(92%, 420px);
border-radius: 18px; padding: 14px 16px 16px;
max-height: 78%; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.wt-page .wt-panier-croix { position: absolute; right: 10px; top: 10px; }
.wt-panier-feuille h4 { font-family: inherit;
font-size: 17px; font-weight: 600; text-align: center; margin: 0 0 10px; }
.wt-panier-ligne { display: flex; align-items: center; gap: 10px; padding: 9px 0;
border-bottom: 1px solid var(--wt-filet); font-size: 14.5px; }
.wt-panier-ligne .wt-pl-titre { flex: 1; min-width: 0; }
.wt-page .wt-pl-retirer { width: 28px; height: 28px; padding: 0; border: 1.5px solid var(--wt-filet);
border-radius: 50%; background: #fff; color: var(--wt-noir); font-size: 12px;
cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.wt-panier-total { display: flex; justify-content: space-between; padding: 12px 0;
font-weight: 700; font-size: 15.5px; }
.wt-page .wt-panier-fin { display: block; width: 100%; }
/* — signal bref, l'équivalent de la SnackBar de l'app — */
.wt-signal {
position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px);
background: #1A1A1A; color: #fff; border-radius: 10px; padding: 11px 18px;
font-size: 13.5px; max-width: 84%; text-align: center; pointer-events: none;
opacity: 0; transition: opacity .18s ease, transform .18s ease; z-index: 120;
}
.wt-signal.est-vu { opacity: 1; transform: translate(-50%, 0); }
/* — journal (?tunnel_debug=1) — */
.wt-journal { margin: 14px; }
.wt-journal pre { background: #111; color: #D8DEE9; border-radius: 12px; padding: 12px; font-size: 11px;
line-height: 1.5; max-height: 220px; overflow: auto; margin: 0; white-space: pre-wrap; word-break: break-word; }
.wt-journal .j-ok { color: #8EE0B4; } .wt-journal .j-ko { color: #FF9A8F; } .wt-journal .j-app { color: #8AB4FF; }
.wt-remplace { display: none !important; }
/* 0.28 — la barre du lanceur avant le verdict du serveur. Elle est dans le
DOM dès le chargement (les branchements en dépendent) mais elle ne dit
RIEN tant qu'on ne sait pas si la boutique réserve vraiment. */
.wt-lanceur.wt-avant-verdict { display: none !important; }
/* La section « Réserver avec X » du thème, une fois le tunnel monté : elle ne
sert plus qu'à trois choses invisibles — point de montage, source du prénom,
ancre du repli. On masque donc son CONTENU, jamais l'élément lui-même
(`#rdv` disparu = tunnel non monté du tout, cf. reservation.js:28). */
.wt-monte > * { display: none !important; }
.wt-monte { padding: 0 !important; margin: 0 !important; background: none !important; }
/* ⭐ 0.28 — L'EXCEPTION QUI MANQUAIT : le bandeau de retour du formulaire de
demande. `capture_lead_web_v2` renvoie la visiteuse sur `?demande=envoyee#rdv`
et le thème rend la confirmation À L'INTÉRIEUR de `#rdv` — donc la règle
ci-dessus la masquait. Conséquence, depuis la Phase 4D : sur une fiche
RÉSERVABLE, une femme qui envoyait sa demande depuis le bloc « Vous ne
trouvez pas votre créneau ? » revenait sur une page où rien, nulle part, ne
lui disait que c'était parti. Elle recommençait, ou elle partait.
Le bandeau reste visible, et la carte retrouve ses marges quand il est là. */
.wt-monte > .wp-bandeau { display: block !important; }
.wt-monte:has(> .wp-bandeau) { padding: 20px 24px !important; background: var(--welcome-creme, #FAF6F1) !important; }
/* ═══════════ COHABITATION AVEC COMPLIANZ ═══════════
Le bouton flottant « Gérer le consentement » recouvrait le lanceur (vu
mobile 20/08, navigateur Messenger). On ne le SUPPRIME pas — c'est
l'affordance RGPD de retrait du consentement — on le remonte au-dessus de
la barre, et on le masque quand la page de résa est ouverte : son z-index
(9998) passerait sinon PAR-DESSUS le tunnel (z 100).
⚠️ 0.28 — CETTE RÈGLE ÉTAIT PORTÉE PAR `body` SEUL, et son commentaire
d'origine disait « cette feuille n'est chargée que sur les fiches à
tunnel ». Ce n'est plus vrai : depuis 0.28 elle est chargée sur les ~595
fiches. Telle quelle, elle aurait remonté le bouton de consentement de
96 px sur 500 pages où aucun lanceur ne le gêne. Elle est donc conditionnée
au MONTAGE RÉEL du tunnel (`wt-tunnel-monte`, posé par `poserDansLaPage`). */
body.wt-tunnel-monte .cmplz-manage-consent { bottom: 96px !important; }
body.wt-resa-ouverte .cmplz-manage-consent { display: none !important; }
/* ═══════════ QUE L'ATTENTE SE VOIE (20/08) ═══════════
Connexion (~5 s) et recherche de créneaux (balayage de 14 jours) sont les
deux temps morts du parcours. Sans repère, la cliente croit à un blocage. */
.wt-tourne { display: inline-block; width: 14px; height: 14px; margin-right: 8px;
vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent;
border-radius: 50%; animation: wt-rotation .7s linear infinite; }
@keyframes wt-rotation { to { transform: rotate(360deg); } }
/* Squelette des créneaux : la forme de ce qui arrive, pas un sablier. */
.wt-squelette { padding: 4px 14px 8px; }
.wt-sq-jour { display: block; height: 46px; border-radius: 12px; margin: 8px 0;
background: var(--wt-gris-c); animation: wt-pulse 1.2s ease-in-out infinite; }
.wt-sq-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.wt-sq-chips i { display: block; width: 100px; height: 52px; border-radius: 12px;
background: var(--wt-gris-c); animation: wt-pulse 1.2s ease-in-out infinite; }
.wt-sq-chips i:nth-child(2) { animation-delay: .15s; }
.wt-sq-chips i:nth-child(3) { animation-delay: .3s; }
.wt-sq-chips i:nth-child(4) { animation-delay: .45s; }
@keyframes wt-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
/* ── v0.19 — QUAND IL N'Y A RIEN ────────────────────────────────────────
Le rouge reste réservé à l'erreur (voir l'en-tête) : « aucun créneau »
n'est pas une panne, c'est une information. D'où la crème et le tan, la
même paire que les cartes de lieu choisies. */
/* L'avertissement porté par l'écran du lieu, avant le catalogue. */
.wt-dispo-alerte {
margin: 0 16px 12px; padding: 10px 12px; border-radius: 12px;
background: var(--wt-creme); border: 1px solid var(--wt-tan);
color: var(--wt-gris-t); font-size: 13px; line-height: 1.45; text-align: left;
}
/* v0.20 — Deux tons pour la ligne de l'écran du lieu : une INFORMATION
(les frais de déplacement, alors qu'il reste de la place) reste discrète ;
un BLOCAGE (hors zone, agenda complet) prend la crème et le tan, comme les
cartes de lieu choisies. Le rouge reste réservé à l'erreur. */
.wt-dispo-alerte { background: var(--wt-gris-c); border-color: var(--wt-filet); }
.wt-dispo-alerte.est-bloquant { background: var(--wt-creme); border-color: var(--wt-tan); }
/* L'écran des créneaux quand la sonde revient vide. */
.wt-rien { margin: 4px 14px 8px; padding: 18px 16px; border-radius: 12px;
background: var(--wt-creme); border: 1px solid var(--wt-tan); text-align: center; }
.wt-rien b { display: block; font-size: 15px; font-weight: 600; color: var(--wt-noir); }
.wt-rien p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--wt-gris-t); }
.wt-rien-actions { display: flex; flex-direction: column; align-items: center;
gap: 6px; margin-top: 16px; }
.wt-page .wt-rien-actions .wt-btn { width: 100%; max-width: 260px; }
/* Respect de « je ne veux pas d'animations » (réglage système). */
@media (prefers-reduced-motion: reduce) {
.wt-tourne, .wt-tourne-sombre, .wt-sq-jour, .wt-sq-chips i { animation: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
LES EMOJI DU CONTENU DES PROS (0.25.1)
═══════════════════════════════════════════════════════════════════════
Les descriptions de lieux et de prestations sont saisies par les pros et
contiennent des emoji. `wp-emoji-release.min.js` les remplace par des