/* La bulle du coaching — voir assets/js/bulle.js pour les règles de fond (où elle paraît, pourquoi elle attend le défilement, et pourquoi le champ de saisie n'est arrivé qu'avec la réponse qui va avec). Dépend de tokens.css pour les couleurs. Rien ici n'est chargé sur les pages où la bulle ne monte pas : le fichier suit bulle.js. */ .bu{ position:fixed; right:16px; bottom:16px; z-index:60; /* Invisible tant que la page n'est pas assez lue. Une transition plutôt qu'une apparition sèche : elle arrive en cours de lecture, et un objet qui surgit fait sursauter. */ opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .45s ease, transform .45s ease; } .bu.est-visible{ opacity:1; transform:none; pointer-events:auto; } /* ── Fermée ─────────────────────────────────────────────────── */ .bu-b{ display:flex; align-items:center; gap:10px; background:rgba(18,18,42,.94); border:1px solid rgba(155,140,255,.42); border-radius:999px; padding:8px 18px 8px 8px; cursor:pointer; box-shadow:0 18px 40px -14px rgba(0,0,0,.75); font-family:inherit; color:inherit; text-align:left; touch-action:manipulation; /* sans quoi le mobile attend 300 ms */ } .bu-b:hover{ border-color:rgba(155,140,255,.7) } .bu-ava{ position:relative; flex:none; display:block } .bu-ava img{ width:42px; height:42px; border-radius:50%; object-fit:cover; display:block; border:1px solid rgba(155,140,255,.5) } /* La pastille verte dit « quelqu'un répond », pas « quelqu'un est en ligne » : c'est la promesse des 2 h qui est vendue, jamais l'instantané. */ .bu-pt{ position:absolute; top:-1px; right:-1px; width:12px; height:12px; border-radius:50%; background:#5BD6A2; border:2px solid #12122A } .bu-t{ line-height:1.25 } .bu-t b{ display:block; font-size:14px; font-weight:700; color:#F4F2FF } .bu-t span{ display:block; font-size:12px; color:#B9B3D8 } /* ── Ouverte ────────────────────────────────────────────────── */ .bu-p{ position:absolute; right:0; bottom:0; width:360px; background:#12122A; border:1px solid rgba(155,140,255,.4); border-radius:22px; overflow:hidden; box-shadow:0 30px 70px -20px rgba(0,0,0,.85); display:none; /* ⚠ IL POUSSE VERS LE HAUT, DEPUIS LE BAS DE L'ÉCRAN. Sans borne, un panneau plus haut que la fenêtre passe AU-DESSUS du bord : l'en-tête et la croix de fermeture sortent de l'écran, et il n'y a plus aucun moyen de le refermer. C'est arrivé dès que l'aperçu et le champ ont cohabité — une fenêtre de navigateur un peu courte suffit. 32px = les 16px de marge du bas, et autant en haut. */ max-height:calc(100vh - 32px); flex-direction:column; } .bu.est-ouverte .bu-p{ display:flex } /* L'en-tête ne défile pas : la croix reste sous le pouce quoi qu'il arrive. */ .bu-h{ flex:none } /* La pastille disparaît quand le panneau est là : elle se retrouverait dessous, et deux boutons qui font la même chose se disputent le pouce. */ .bu.est-ouverte .bu-b{ display:none } .bu-h{ display:flex; align-items:center; gap:11px; padding:14px 16px; background:linear-gradient(135deg,#7A68EC,#5B4BD6); } .bu-h img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.5) } .bu-h b{ display:block; font-size:15px; color:#fff } .bu-h span{ display:block; font-size:12px; color:#E6E1FF } .bu-x{ margin-left:auto; background:none; border:0; cursor:pointer; color:#E6E1FF; font-size:22px; line-height:1; padding:2px 4px; font-family:inherit; touch-action:manipulation; } .bu-x:hover{ color:#fff } /* Le corps prend ce qui reste et défile lui-même. ⚠ min-height:0 EST INDISPENSABLE. Dans une colonne flex, un enfant ne rétrécit pas sous la hauteur de son contenu (min-height:auto par défaut) : sans cette ligne, le panneau reprend la hauteur du texte et déborde exactement comme avant, la borne du parent n'y changeant rien. */ .bu-c{ padding:14px 16px 16px; flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch } .bu-sur{ margin:0 0 6px; font-size:10.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--lav-bright) } .bu-h2{ margin:0 0 5px; font-family:'Fredoka',system-ui,sans-serif; font-weight:600; font-size:19px; line-height:1.2; color:#F4F2FF } .bu-p1{ margin:0 0 12px; font-size:13.5px; line-height:1.55; color:#B9B3D8 } /* ── Le formulaire ────────────────────────────────────────── Les champs sont grands : elle écrit au pouce, souvent la nuit, et un champ de 32 px se rate. 16px de police au minimum — en dessous, iOS zoome sur le champ à la première frappe et la page part de travers. */ .bu-lab{ display:block; margin:0 0 5px; font-size:11.5px; font-weight:600; letter-spacing:.3px; color:#B9B3D8 } .bu-q, .bu-e{ display:block; width:100%; box-sizing:border-box; margin:0 0 12px; background:rgba(255,255,255,.05); color:#F4F2FF; border:1px solid rgba(155,140,255,.35); border-radius:14px; padding:11px 13px; font-family:inherit; font-size:16px; line-height:1.45; } .bu-q{ resize:vertical; min-height:78px } .bu-q::placeholder, .bu-e::placeholder{ color:#8A83AD } .bu-q:focus, .bu-e:focus{ outline:2px solid var(--lav-bright); outline-offset:1px; border-color:transparent } /* Le piège à robots : hors écran, jamais display:none — certains remplisseurs automatiques ignorent ce qui est masqué, et le piège ne prendrait plus rien. */ .bu-pot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden } .bu-err{ margin:0 0 10px; font-size:13px; line-height:1.5; color:#FFC9C9 } /* La capture, coupée en fondu : elle donne à voir sans prendre l'écran. Le fondu descend vers le fond du panneau — changer l'un impose l'autre. */ /* ⚠ ON N'Y VOYAIT PAS LA CONVERSATION (11/08/2026). La capture fait 780 × 1920 : affichée sur les 330 px du panneau, elle mesure 812 px de haut, et la fenêtre de 196 px n'en montrait que le PREMIER QUART — c'est-à-dire l'en-tête et le début de la première bulle, dont le fondu mangeait encore 70 px. Sur téléphone (150 px) il ne restait rien. On cadrait donc sur la seule partie de l'image qui ne prouve rien. `cover` + `object-position` recentrent sur l'échange lui-même : la question de la mère, et le début de la réponse. */ .bu-cap{ position:relative; overflow:hidden; border:1px solid rgba(155,140,255,.25); border-radius:14px } .bu-cap img{ width:100%; display:block; height:196px; object-fit:cover; object-position:50% 16% } .bu-cap::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:70px; background:linear-gradient(rgba(18,18,42,0), #12122A) } .bu-leg{ margin:7px 0 14px; text-align:center; font-size:11px; color:var(--muted-2) } /* Le passage de l'aperçu au champ : un filet au-dessus, pour qu'on voie que le panneau bascule de « voilà ce que c'est » à « écrivez ». */ .bu-bas{ margin:0 0 12px; padding-top:13px; border-top:1px solid rgba(155,140,255,.2); font-size:14px; line-height:1.5; color:#F4F2FF; font-weight:600 } /* ── La confirmation ──────────────────────────────────────── Elle remplace le formulaire dans le même panneau : une bulle qui se refermerait toute seule ferait douter que la question soit partie. */ .bu-ok{ text-align:center; padding:6px 0 2px } .bu-ok-i{ margin:0 auto 10px; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; color:#0F2B20; background:#5BD6A2; } .bu-ok .bu-p1{ margin-bottom:14px } .bu-cta{ display:block; text-align:center; text-decoration:none; font-family:inherit; font-size:15.5px; font-weight:700; color:#1B1738; padding:14px 16px; border-radius:999px; background:linear-gradient(135deg,#C9BEFF,#9B8CFF 55%,#7C6BEE); box-shadow:0 12px 30px -12px rgba(155,140,255,.8); touch-action:manipulation; } .bu-cta:hover{ filter:brightness(1.05) } .bu-cta[aria-busy="true"]{ opacity:.6; pointer-events:none } /* Un bouton de formulaire hérite de la police du navigateur, pas de la page : sans ces deux lignes, « Envoyer ma question » sortait en Times. */ button.bu-cta{ width:100%; border:0; cursor:pointer; font-family:inherit } /* APRÈS .bu-cta, jamais avant : à spécificité égale c'est la dernière règle qui gagne, et le bouton de la confirmation repartait en pilule pleine. */ .bu-cta2{ background:transparent; color:#F4F2FF; box-shadow:none; border:1px solid rgba(155,140,255,.5); font-weight:600; font-size:14.5px } .bu-cta2:hover{ filter:none; border-color:rgba(155,140,255,.85) } /* Ce qui est offert, et ce que coûte la suite — dans la même ligne, sous le bouton. Le prix ne se retire pas : le panneau décrit un service payant. */ /* ⚠ PAS DE display:flex ICI. Le prix est un à l'intérieur de la phrase : en flex il devenait un élément à part, poussé à droite, et la ligne se lisait « … ensuite, c'est » d'un côté et « 39,99 € » de l'autre. La pastille s'aligne en inline-block, la phrase reste une phrase. */ .bu-pl{ margin:10px 0 0; text-align:center; font-size:12px; line-height:1.55; color:#CFC9E8 } .bu-pl i{ display:inline-block; vertical-align:baseline; margin-right:6px; width:7px; height:7px; border-radius:50%; background:var(--wake) } .bu-pl b{ color:var(--wake); white-space:nowrap } @media (max-width:520px){ .bu{ right:12px; bottom:12px } /* Le panneau prend la largeur de l'écran moins les marges : à 360 px fixes, il débordait sur un iPhone SE. */ .bu-p{ width:calc(100vw - 24px); max-width:360px } /* Le clavier monte et mange la moitié de l'écran : la borne générale (100vh) ne suffit plus, le panneau doit tenir dans ce qui reste. */ .bu-p{ max-height:calc(100dvh - 24px) } /* Un peu moins haut que sur grand écran, mais cadré au même endroit : ce qui compte est de voir DEUX bulles, pas d'en voir une en entier. */ .bu-cap img{ height:168px } } /* Quelqu'un qui a demandé moins d'animation ne veut pas d'un objet qui monte : il paraît, simplement. */ @media (prefers-reduced-motion:reduce){ .bu{ transition:none; transform:none } }