/** * VRNQ Chatbot — widget visiteur (Phase 2). * * Charte VeilleRNQ-Facile : navy #223C8F / #172A66 foncé / #3A57C7 clair / #ECEFF8 surface. * ⚠️ Le Bleu France (couleur de l'État, palette DSFR) est PROSCRIT ici comme partout dans * le projet — usurpation. N'introduire aucune teinte hors de la palette ci-dessus. * Police : Inter, avec repli système (aucune dépendance réseau ajoutée). */ .vrnq-cb { --cb-navy: #223C8F; --cb-dark: #172A66; --cb-light: #3A57C7; --cb-surf: #ECEFF8; --cb-ink: #1B1B25; --cb-mute: #5C5C7A; --cb-line: #E6E8F0; /* Coin bas-droite, gouttière standard SaaS. (Le dégagement de 88px qui évitait la barre foncée du pied de page est retiré : le lanceur revient au ras du coin.) */ position: fixed; right: 24px; bottom: 24px; z-index: 99000; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; } /* ── Lanceur : bouton ROND (FAB) ─────────────────────────────────────────── */ /* Le visage EST le bouton. Aucun texte ici : l'invitation vit dans l'accroche. */ .vrnq-cb__bubble { display: block; position: relative; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--cb-navy) 0%, var(--cb-light) 100%); cursor: pointer; box-shadow: 0 8px 24px rgba(34, 60, 143, .35); transition: transform .18s ease, box-shadow .18s ease; animation: vrnq-cb-pulse 2.6s ease-out 1.2s 3; } .vrnq-cb__bubble:hover { transform: scale(1.06); box-shadow: 0 12px 32px rgba(34, 60, 143, .45); } .vrnq-cb__bubble:focus-visible { outline: 3px solid var(--cb-light); outline-offset: 3px; } .vrnq-cb.is-open .vrnq-cb__bubble { display: none; } /* Pulse d'attention : 3 battements puis silence. Une animation infinie serait du harcèlement visuel — on attire, on n'assiège pas. */ @keyframes vrnq-cb-pulse { 0% { box-shadow: 0 8px 24px rgba(34, 60, 143, .35), 0 0 0 0 rgba(58, 87, 199, .45); } 70% { box-shadow: 0 8px 24px rgba(34, 60, 143, .35), 0 0 0 16px rgba(58, 87, 199, 0); } 100% { box-shadow: 0 8px 24px rgba(34, 60, 143, .35), 0 0 0 0 rgba(58, 87, 199, 0); } } /* Avatar : PHOTO (PNG déjà détouré en rond, servi par le plugin). Le monogramme reste en dessous comme repli si l'image ne charge pas. ⚠️ Visage d'une personne réelle → le chip « Assistante IA » de l'en-tête porte seul la transparence. Voir makeAvatar() dans vrnq-chatbot.js. */ /* ⚠️ PAS d'overflow:hidden ici : il clipperait la pastille « en ligne », posée en débord (-1px). L'arrondi est porté par l'image elle-même. */ .vrnq-cb__av { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--cb-navy); font: 800 .82rem/1 inherit; } /* L'illustration est DÉJÀ ronde (fond + anneau inclus) : elle remplit le cercle telle quelle. Position absolue → elle recouvre l'initiale de repli sans la déplacer. */ .vrnq-cb__av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } /* L'en-tête du panneau ouvert garde un avatar plus généreux — il n'y a plus de contrainte d'encombrement une fois le panneau déployé. */ .vrnq-cb__av--head { width: 38px; height: 38px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 1rem; } /* Variante LANCEUR : l'avatar remplit tout le bouton rond. */ .vrnq-cb__av--fab { position: absolute; inset: 0; width: 100%; height: 100%; font-size: 1.5rem; } /* Pastille « en ligne » — posée sur le bord du cercle, liseré blanc pour la détacher de la photo. Taille proportionnée au diamètre : ~17,5 % (12/68 comme 11/62). */ .vrnq-cb__dot { position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px; border-radius: 50%; background: #18753C; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(23, 42, 102, .10); } .vrnq-cb__av--head .vrnq-cb__dot { display: none; } /* ── Accroche ───────────────────────────────────────────────────────────── */ /* À GAUCHE du bouton. Positionnée en ABSOLU dans .vrnq-cb plutôt qu'en flux : le panneau ouvert est le frère de cette bulle, un flux partagé le déplacerait. */ .vrnq-cb__teaser { position: absolute; right: 94px; /* 68px de bouton + 26px de gouttière — à repropager si le bouton change */ bottom: 8px; display: flex; align-items: flex-start; gap: 8px; width: max-content; /* Marge de sécurité à GAUCHE : le conteneur .vrnq-cb n'est large que du bouton, la bulle déborde donc vers la gauche. calc() la borne au viewport pour qu'elle ne colle jamais au bord sur un écran étroit. */ max-width: min(330px, calc(100vw - 120px)); background: #fff; color: var(--cb-ink); border: 1px solid var(--cb-line); border-radius: 12px 12px 4px 12px; padding: 10px 12px; font-size: .8rem; line-height: 1.45; /* La bulle GRANDIT en hauteur, elle ne coupe jamais : ni overflow:hidden, ni ellipsis. text-wrap:pretty évite le mot (ou le « ? ») seul en dernière ligne ; l'espace fine insécable posée côté PHP fait le reste. */ text-wrap: pretty; overflow-wrap: break-word; /* et non « anywhere » : ne casse un mot qu'en dernier recours */ box-shadow: 0 8px 24px rgba(23, 42, 102, .16); cursor: pointer; animation: vrnq-cb-pop .28s ease-out; } .vrnq-cb__teaser:hover { border-color: #C7CEEA; } .vrnq-cb__teaser-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; } /* pre-line : la chaîne porte un vrai \n (rendu en textContent, donc pas de
). */ .vrnq-cb__teaser-txt { white-space: pre-line; } /* Mention de nature — discrète mais lisible : elle doit s'effacer devant le message sans jamais devenir illisible (contraste conservé sur fond blanc). */ /* nowrap : le nom de marque ne doit JAMAIS se couper (le trait d'union de « VeilleRNQ-Facile.fr » est un point de césure naturel pour le navigateur, et la bulle porte overflow-wrap:break-word). La ligne est courte, aucun risque de débord. */ .vrnq-cb__teaser-ia { font-size: .68rem; font-weight: 600; color: var(--cb-mute); letter-spacing: .01em; white-space: nowrap; } /* Croix de l'accroche : elle porte `.vrnq-modal-x`, comme toutes les croix du site. Sur fond CLAIR, donc SANS `--dark` : la variante par defaut donne le navy de la charte, et le survol le rouge commun. Le gris `--cb-mute` qui la peignait ici, et le fond de pastille qui apparaissait sous le curseur, disparaissent : aucune autre croix du site ne prend de fond au survol, seul le glyphe change de couleur. Ne reste ci-dessous que ce qui appartient VRAIMENT a ce contexte. */ .vrnq-cb__teaser .vrnq-modal-x { flex: 0 0 auto; /* BOITE 32 ET GLYPHE 20, ET C'EST UN ECART ASSUME AVEC LES MODALES (28 / 16). Les couleurs, les etats et le survol rouge viennent bien du composant commun : ce qui diverge ici, c'est la TAILLE, et seulement elle. Pourquoi : une croix de modale vit a cote d'une icone de tete de 34px, dans un bandeau large, ou 28px suffisent a se faire voir. Le chatbot n'a ni cette icone ni cette largeur, et sa croix s'y lisait comme trop petite. 32 et 20 sont d'ailleurs les valeurs du bloc commun de la feuille du theme, celles de toutes les croix du site hors modale : le chatbot ne s'invente donc pas un troisieme gabarit, il rejoint le plus repandu. ⚠️ Les DEUX croix du chatbot partagent ces valeurs, celle-ci et celle de l'en-tete plus bas. Si l'une bouge, l'autre bouge avec. */ width: 32px; height: 32px; font-size: 20px; /* ⚠️ PARADE ASTRA, NE PAS RETIRER. Le theme parent peint un fond sur `button:hover` et `button:focus` a (0,1,1) : sans une declaration a specificite superieure, la croix se remplissait d'un carre plein apres un clic. (0,2,0) ici, comme dans le composant. */ background: transparent; border: 0; box-shadow: none; } /* Elle « sort » du bouton, donc par la droite. */ @keyframes vrnq-cb-pop { from { opacity: 0; transform: translateX(10px) scale(.96); } to { opacity: 1; transform: none; } } /* ── Panneau ────────────────────────────────────────────────────────────── */ .vrnq-cb__panel { display: flex; flex-direction: column; width: min(520px, 94vw); /* DEUX plafonds, tous deux nécessaires : - un plafond FIXE (780px), sinon le panneau devient une colonne démesurée sur un très grand écran ; - un plafond VIEWPORT, pour ne JAMAIS déborder. calc(100vh - 40px) laisse exactement 20 px en haut et en bas, puisque le conteneur ouvert est ancré à bottom:20px. La seconde déclaration, en dvh, écrase la première sur les navigateurs qui la connaissent : elle suit la barre d'URL mobile au lieu de la hauteur figée. Les autres l'ignorent et gardent la version vh, qui reste correcte. Sous 640px, la media query de fin de fichier reprend la main avec un plein écran. Ancien réglage : min(700px, 86vh). Le gain de hauteur sert la fiche de contact, qui doit tenir en entier, bouton d'envoi compris. */ height: min(780px, calc(100vh - 40px)); height: min(780px, calc(100dvh - 40px)); background: #fff; border: 1px solid var(--cb-line); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 48px rgba(23, 42, 102, .24); } .vrnq-cb__panel[hidden] { display: none; } /* ── Fiche de capture ouverte : le panneau ÉPOUSE le formulaire ──────────────── La hauteur ci-dessus est faite pour une conversation, qui remplit l'espace. La fiche, elle, est courte : le panneau restait grand et laissait du vide au-dessus ET en dessous. `height: auto` le fait se serrer sur son contenu ; le conteneur étant ancré en bas, il reste collé à la bulle. Le plafond VIEWPORT demeure : si la fiche est plus haute que l'écran, le panneau s'arrête là et c'est le fil qui défile (revealLead montre alors le haut de la fiche en priorité). Sous 640 px, la media query de fin de fichier repasse en plein écran, et c'est voulu : sur mobile une carte flottante de la taille du formulaire serait moins confortable qu'une feuille pleine page. */ .vrnq-cb__panel--lead { height: auto; max-height: calc(100vh - 40px); } .vrnq-cb__panel--lead { max-height: calc(100dvh - 40px); } /* Ouverture/fermeture : fondu + léger glissement vers le haut. L'état de repos est « sorti » ; la classe .is-in, posée après deux rAF, joue l'entrée. Origine en bas à droite = le panneau semble naître du lanceur. */ .vrnq-cb__panel { opacity: 0; transform: translateY(10px) scale(.985); transform-origin: 100% 100%; transition: opacity .18s ease, transform .18s ease; } .vrnq-cb__panel.is-in { opacity: 1; transform: none; } /* Ancrage du panneau ouvert. ⚠️ Cette règle existait pour ANNULER le dégagement de 88px du lanceur, qui cumulé à la hauteur du panneau débordait par le haut sur un écran bas. Ce dégagement est retiré (le conteneur est désormais à bottom:24px) : la règle n'a plus d'utilité fonctionnelle et introduit un décalage de 4px à l'ouverture. Conservée sur demande ; la retirer laisserait le panneau hériter des 24px, sans risque de débord (86vh + 24px ne dépasse 100vh que sous 171px de haut). */ .vrnq-cb.is-open { bottom: 20px; } .vrnq-cb__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--cb-navy); color: #fff; padding: 14px 16px; flex-shrink: 0; } .vrnq-cb__head-txt { flex: 1 1 auto; min-width: 0; } .vrnq-cb__title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.2; } /* Sur UNE ligne : le titre de fonction ne doit ni se couper ni s'élider (ce serait une affirmation tronquée). nowrap + corps réduit ; il reste ~380px utiles dans l'en-tête (480 moins avatar, croix et gouttières), largement suffisant. */ .vrnq-cb__sub { margin: 1px 0 0; font-size: .7rem; font-weight: 500; color: rgba(255, 255, 255, .82); line-height: 1.25; white-space: nowrap; } .vrnq-cb__meta { margin: 5px 0 0; display: flex; align-items: center; gap: 10px; } /* Label « Assistante IA » — obligation de transparence, jamais masqué. */ .vrnq-cb__ia { display: inline-block; background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 2px 9px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; } .vrnq-cb__rgpd, .vrnq-cb__rgpd:link, .vrnq-cb__rgpd:visited { color: rgba(255, 255, 255, .82) !important; font-size: .68rem; text-decoration: none; } /* Lien AUTONOME de la barre d'en-tete, pose a cote de la pastille « Assistante IA » : il ne vit dans aucune phrase, sa position et sa couleur suffisent a le designer. Le survol reste la reponse au geste, en passant au blanc plein. */ .vrnq-cb__rgpd:hover, .vrnq-cb__rgpd:focus { color: #fff !important; text-decoration: none; } /* Bouton FERMER : il porte `.vrnq-modal-x .vrnq-modal-x--dark`, le composant commun a toutes les croix du site. L'en-tete est navy, d'ou la variante sombre : blanche au repos, rouge #E1000F au survol et au focus, exactement comme les dix-sept modales. CE QUI DISPARAIT D'ICI : le glyphe de 24 (`1.5rem`) et le couple `opacity .7 / 1`. Cette croix etait la seule du site a signaler le survol par une OPACITE plutot que par une couleur, et la seule a etre delavee au repos. Elle etait aussi la plus grosse : 24px de glyphe, la ou le reste du site en emploie 20. CE QUI RESTE : la boite de 32, alignee sur les autres croix hors modale, et les deux reglages qui appartiennent vraiment a cet en-tete. */ .vrnq-cb__head .vrnq-modal-x { flex-shrink: 0; /* 32 et 20, les MEMES valeurs que la croix de l'accroche plus haut, ou l'ecart assume avec les modales (28 / 16) est explique. Les deux croix du chatbot bougent ensemble. */ width: 32px; height: 32px; font-size: 20px; /* ⚠️ PARADE ASTRA, NE PAS RETIRER : `button:hover` / `button:focus` du theme parent peignent un fond a (0,1,1), et repeignaient ici un carre plein apres un clic. */ background: transparent; border: 0; box-shadow: none; /* L'en-tête est en align-items:center ; on remonte la croix de 6px pour l'aligner optiquement sur la 1re ligne du bloc titre plutôt que sur son milieu. */ align-self: flex-start; margin-top: -6px; } /* ── Barre de recontact — au-dessus de la saisie, disponible à tout moment ── */ /* Le filet supérieur SÉPARE la conversation de cette action : sans lui, la puce se lisait comme un message de plus dans le fil. Les marges 15/14 la détachent des deux côtés (le formulaire apporte ses propres 12px de padding en dessous). */ .vrnq-cb__leadbar { padding: 15px 16px 14px; background: #FAFBFF; border-top: 1px solid var(--cb-line); flex-shrink: 0; text-align: center; } /* Ce bouton porte desormais `.vrnq-b .vrnq-b--ghost .vrnq-b--sm` : forme, couleurs et QUATRE etats lui viennent du systeme unifie. Les vingt lignes qui les redisaient ici sont retirees, y compris la parade a `button:hover` d'Astra, que l'armure du systeme couvre deja. Ce qui change a l'oeil : la pastille arrondie a 999px devient un rectangle a 8px, comme partout ailleurs sur le site, et le texte passe de #3A57C7 au navy de la charte (5,8:1 contre 9,95:1 sur son fond). */ /* ⚠️ CETTE REGLE EST INDISPENSABLE, NE PAS LA RETIRER AVEC LES AUTRES. Le systeme pose `display:inline-flex` sur `.vrnq-b`, ce qui ECRASE le `display:none` que le navigateur applique a l'attribut `hidden`. Sans elle, le bouton « Être recontacté(e) » resterait AFFICHE pendant que la fiche de capture est ouverte, alors que le script le masque justement pour interdire deux fiches a la fois (`leadLink.hidden = true`). Le JS ferait son travail, l'ecran montrerait le contraire : echec silencieux au sens R26. (0,3,0) avec l'attribut, donc au-dessus de l'armure `.vrnq-b.vrnq-b` a (0,2,0). */ .vrnq-cb__leadbar .vrnq-cb__leadlink[hidden] { display: none; } /* ── `.vrnq-cb__invite-btn` : RETIREE, ELLE N'AVAIT PLUS AUCUN PORTEUR ────────── C'est le bouton que l'audit du systeme designait comme « le survol qui eclaircit » : #223C8F au repos, #3A57C7 au survol, soit un contraste qui TOMBAIT de 9,95 a 6,23 la ou tous les autres foncent. Le defaut etait reel, mais la classe ne s'affichait plus nulle part : verification faite sur tout le plugin et tout le theme, zero occurrence en markup, ni en PHP ni dans le script du widget. L'invitation vit desormais dans la barre de recontact (`.vrnq-cb__leadlink`), juste au-dessus. Retiree plutot que corrigee : laisser en place un habillage sans porteur, c'est offrir un nom tout pret a qui voudra un bouton ici, et reintroduire le survol eclaircissant avec. Un futur bouton d'invitation prendra `.vrnq-b .vrnq-b--primary`, comme partout. */ /* ── Fiche de capture : bulle DU FIL, côté Claire ────────────────────────── */ /* Elle hérite de .vrnq-cb__bulle (fond blanc, bordure, rayons de messagerie) et s'élargit : un formulaire à 82 % de la largeur serait à l'étroit. */ /* ── COMPACITÉ DE LA FICHE ──────────────────────────────────────────────────── Tous les espacements ci-dessous sont resserrés pour que l'ensemble titre, champs, consentement, mention légale ET bouton d'envoi tienne d'un seul écran. C'est un réglage d'ENSEMBLE : desserrer une seule valeur peut suffire à repousser le bouton sous la ligne de flottaison. Aucun contenu n'est retiré, la mention de l'article 13 reste complète. Anciennes valeurs, si le compactage devait être annulé : bulle 14px/15px, titre marge 12px, gap 6px, label marge 6px, champ 10px/12px. */ .vrnq-cb__msg--lead .vrnq-cb__bulle { max-width: 100%; width: 100%; padding: 12px 14px; } /* ── LARGEUR PLEINE, scopée à --lead ────────────────────────────────────────── La bulle était DÉJÀ en width:100% : ce n'est pas elle qui bridait la fiche, mais deux contraintes situées AUTOUR d'elle. 1. L'AVATAR de fil, principal responsable : 26 px, plus 8 px de gouttière flex, pris sur la gauche de chaque message du bot. 2. Le padding latéral du fil, 16 px de chaque côté. On masque le premier et on récupère la moitié du second par des marges négatives, ce qui laisse 8 px de respiration de part et d'autre. Les bulles de conversation ordinaires ne sont pas touchées : elles gardent leur avatar et leur largeur de 82 %. */ .vrnq-cb__msg--lead { margin-left: -8px; margin-right: -8px; } /* display:none et NON visibility:hidden : il faut récupérer les 26 px, pas seulement les vider. Cela corrige au passage une incohérence : la règle de fratrie des bulles bot consécutives (plus bas) rendait déjà cet avatar invisible quand un message du bot précédait la fiche, mais en lui gardant sa place. La fiche changeait donc de largeur selon ce qui la précédait dans le fil. Elle a désormais toujours la même. */ .vrnq-cb__msg--lead .vrnq-cb__av--msg { display: none; } .vrnq-cb__lead-t { margin: 0 0 9px; font-size: .88rem; font-weight: 800; color: var(--cb-navy); line-height: 1.3; } .vrnq-cb__lead-form { display: flex; flex-direction: column; gap: 4px; } /* ── E-mail et téléphone côte à côte ────────────────────────────────────────── Deux champs courts occupaient chacun toute la largeur : une hauteur de champ entière était perdue. La largeur gagnée par la fiche paie donc de la hauteur. RESPONSIVE SANS MEDIA QUERY : `flex-wrap` sur une base de 180 px. Sous environ 370 px de largeur disponible, les deux colonnes ne tiennent plus et repassent l'une sous l'autre, d'elles-mêmes. C'est la largeur RÉELLEMENT disponible qui décide, et non celle de la fenêtre : le panneau peut être étroit sur un grand écran, un point qu'une media query sur le viewport manquerait. ⚠️ `min-width: 0` est OBLIGATOIRE : un élément flex a `min-width:auto` par défaut, et un porte une largeur intrinsèque. Sans cette ligne, les colonnes refusent de se comprimer et débordent de la carte. */ .vrnq-cb__lead-row { display: flex; flex-wrap: wrap; gap: 4px 10px; } .vrnq-cb__lead-col { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; } .vrnq-cb__lead-lab { font-size: .78rem; font-weight: 600; color: var(--cb-mute); margin-top: 4px; } .vrnq-cb__lead-in { -webkit-appearance: none; appearance: none; border: 1.5px solid var(--cb-line); border-radius: 10px; padding: 8px 11px; font: 400 .85rem/1.35 inherit; color: var(--cb-ink); background: #fff; transition: border-color .15s, box-shadow .15s; } .vrnq-cb__lead-in:focus { outline: none; border-color: var(--cb-light); box-shadow: 0 0 0 3px rgba(58, 87, 199, .16); } .vrnq-cb__lead-ta { resize: none; } .vrnq-cb__lead-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; } /* La case reste lisible et cliquable : c'est l'élément juridiquement décisif. */ .vrnq-cb__lead-cb { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--cb-light); cursor: pointer; } .vrnq-cb__lead-cbl { font-size: .76rem; line-height: 1.45; color: var(--cb-ink); cursor: pointer; } /* ⚠ SOULIGNEMENT VOLONTAIRE. NE PAS LE RETIRER en appliquant la regle « pas de lien souligne ». Cette regle ne vise que les liens AUTONOMES, les onglets et les boutons. Celui-ci est un lien INLINE, insere au milieu d'une phrase, la mention d'information article 13 du formulaire de contact. Sans soulignement il ne se distingue du texte qui l'entoure QUE par sa couleur, et l'ecart entre #223C8F et le gris voisin (--cb-mute, #5C5C7A) ne vaut que 1,55:1, la ou WCAG 1.4.1 demande 3:1 pour identifier un lien par la seule couleur DANS un bloc de texte. Le retirer rend donc le lien invisible a qui distingue mal les teintes, sur une mention legale, ce qui est le pire endroit possible. REGLE GENERALE : lien inline dans du texte = souligne. Lien autonome, onglet, bouton = non souligne, et il repond au survol par la couleur. */ .vrnq-cb__lead-pol, .vrnq-cb__lead-pol:link, .vrnq-cb__lead-pol:visited { color: var(--cb-navy) !important; font-weight: 600; text-decoration: underline; } /* Mention d'information art. 13 : discrète mais LISIBLE. Le contraste reste suffisant sur fond blanc, une mention légale illisible ne vaut pas mieux qu'une absente. ⚠️ PLANCHER DE LISIBILITÉ : .70rem vaut environ 11 px, et #5C5C7A sur blanc donne un contraste voisin de 7:1. C'est le plus petit réglage acceptable ici, resserrement d'interligne compris. NE PAS descendre en dessous pour gagner quelques pixels : le texte est intégral, il doit rester lu, pas seulement présent. */ .vrnq-cb__lead-info { margin: 8px 0 0; font-size: .70rem; line-height: 1.42; color: var(--cb-mute); } .vrnq-cb__lead-note { margin: 8px 0 0; font-size: .78rem; line-height: 1.4; color: var(--cb-mute); } .vrnq-cb__lead-note.is-err { color: #C0392B; } .vrnq-cb__lead-acts { display: flex; align-items: center; gap: 10px; margin-top: 12px; } /* « Envoyer » porte `.vrnq-b .vrnq-b--primary .vrnq-b--sm`, « Annuler » porte `.vrnq-b .vrnq-b--lien .vrnq-b--sm` : les deux habillages qui vivaient ici sont retires. CE QUE CELA CORRIGE VRAIMENT, au-dela de l'uniformite : « Envoyer » etait #3A57C7 au repos et fonçait vers #223C8F au survol. Le sens etait bon, le NIVEAU non : il partait de 6,23:1 la ou la charte veut 9,95:1, parce qu'il prenait le bleu clair pour couleur d'action. Sur `--primary` il part du navy #223C8F et fonce vers #172A66 : 9,95 puis 13,47. LA TAILLE `--sm` (32px) EST DELIBEREE, ne pas la passer au gabarit de 44px : cette fiche est compactee pour tenir d'un seul ecran dans un panneau de 380px, et le commentaire de la section previent que desserrer une seule valeur suffit a repousser le bouton d'envoi sous la ligne de flottaison. `--sm` reste au-dessus du minimum AA de 24px. */ /* ⚠️ DEROGATION ASSUMEE AU `:disabled` DU SYSTEME, ET ELLE EST MEILLEURE QUE LUI ICI. Le systeme signale le desactive par `opacity:.55`, la convention usuelle. Mais ce bouton-ci PASSE SA VIE desactive : il ne s'ouvre qu'une fois l'adresse saisie ET le consentement coche. Ce n'est pas un etat de bord, c'est l'etat par defaut de la fiche, celui que le visiteur voit en premier. Un navy delave a 55 % se lit comme un bouton normal un peu terne ; un gris FRANC se lit comme un bouton qui attend quelque chose. `opacity` est donc remise a 1, sans quoi les deux se cumuleraient et donneraient un gris pale. LE SURVOL EST REDIT, ET CE N'EST PAS DU ZELE. `:hover` s'applique en CSS meme sur un controle desactive, alors qu'aucun evenement n'y est declenche. Le systeme declare `.vrnq-b.vrnq-b--primary:hover` a (0,3,0) : a egalite avec un simple `:disabled` scope, et comme ces deux feuilles partent du meme hook au meme rang, RIEN NE GARANTIT laquelle sort en dernier. Le gris franc aurait donc pu virer au navy sous le curseur, sur un bouton qui n'accepte pas le clic. `:disabled:hover` pese (0,4,0) et tranche la question. (C'est aussi ce que faisait l'ancien `:hover:not(:disabled)` d'ici, autrement ecrit.) */ .vrnq-cb__lead-acts .vrnq-b:disabled, .vrnq-cb__lead-acts .vrnq-b:disabled:hover, .vrnq-cb__lead-acts .vrnq-b:disabled:focus, .vrnq-cb__lead-acts .vrnq-b:disabled:active, .vrnq-cb__lead-acts .vrnq-b[aria-disabled="true"] { background-color: #C9CCDA; border-color: #C9CCDA; color: #fff; opacity: 1; cursor: not-allowed; } .vrnq-cb__lead :focus-visible { outline: 2px solid var(--cb-light); outline-offset: 2px; } /* ── Journal ────────────────────────────────────────────────────────────── */ .vrnq-cb__log { flex: 1 1 auto; overflow-y: auto; padding: 16px; background: #FAFBFF; display: flex; flex-direction: column; gap: 10px; } /* Le centrage vertical du fil pendant la fiche de capture a été RETIRÉ : il compensait un panneau resté grand alors que le formulaire est court. Le panneau se serre désormais sur son contenu (.vrnq-cb__panel--lead), il n'y a plus de vide à répartir. Garder les deux dispositifs aurait fait cohabiter deux réponses au même problème, dont une devenue inutile et trompeuse pour la prochaine lecture. */ /* Codes de messagerie : bot à gauche avec avatar, visiteur à droite sans. */ .vrnq-cb__msg { display: flex; align-items: flex-end; gap: 8px; } /* ⚠️ RÈGLE COMPAGNON OBLIGATOIRE de l'attribut `hidden` (même motif qu'au panneau :162, au lien de capture :275 et aux suggestions :384) : la ligne ci-dessus est une CLASSE (0-1-0), elle bat le `[hidden] { display:none }` de la feuille du navigateur. Sans cette règle, masquer une bulle en JS ne masquerait RIEN, en silence. Sert au masquage du fil pendant que la fiche de capture est ouverte. */ .vrnq-cb__msg[hidden] { display: none; } .vrnq-cb__msg--user { justify-content: flex-end; } .vrnq-cb__bulle { max-width: 82%; padding: 10px 13px; border-radius: 16px; font-size: .875rem; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; } .vrnq-cb__msg--bot .vrnq-cb__bulle { background: #fff; border: 1px solid var(--cb-line); color: var(--cb-ink); border-bottom-left-radius: 5px; } /* Visiteur en ACCENT (et non navy) : le navy est réservé aux surfaces de marque (en-tête, boutons) — l'accent distingue mieux la parole du visiteur. */ .vrnq-cb__msg--user .vrnq-cb__bulle { background: var(--cb-light); color: #fff; border-bottom-right-radius: 5px; } /* Avatar de fil : petit, aligné sur le bas de la bulle. */ .vrnq-cb__av--msg { width: 26px; height: 26px; font-size: .74rem; margin-bottom: 2px; } /* Suite de messages du bot : l'avatar ne se répète pas visuellement. */ .vrnq-cb__msg--bot + .vrnq-cb__msg--bot .vrnq-cb__av--msg { visibility: hidden; } /* Liens dans une réponse : whitelistés côté JS, stylés lisiblement ici. */ /* Les liens sont des APPELS À L'ACTION (essai, tarifs) : ils doivent se voir. Puce pastille plutôt que simple souligné — le markup, lui, reste celui de render(). */ .vrnq-cb__msg--bot .vrnq-cb__bulle a, .vrnq-cb__msg--bot .vrnq-cb__bulle a:link, .vrnq-cb__msg--bot .vrnq-cb__bulle a:visited { display: inline-block; color: var(--cb-navy) !important; background: var(--cb-surf); border: 1px solid #C7CEEA; border-radius: 8px; padding: 1px 8px; margin: 1px 0; font-weight: 700; text-decoration: none !important; transition: background-color .15s, border-color .15s; } .vrnq-cb__msg--bot .vrnq-cb__bulle a:hover, .vrnq-cb__msg--bot .vrnq-cb__bulle a:focus { background: #DDE3F5; border-color: var(--cb-light); color: var(--cb-dark) !important; } .vrnq-cb__msg--bot .vrnq-cb__bulle a:focus-visible { outline: 2px solid var(--cb-light); outline-offset: 2px; } .vrnq-cb__msg--bot .vrnq-cb__bulle strong { font-weight: 700; color: var(--cb-navy); } /* ── Suggestions ────────────────────────────────────────────────────────── */ .vrnq-cb__sugg { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; background: #FAFBFF; flex-shrink: 0; } .vrnq-cb__sugg[hidden] { display: none; } /* ⚠️ MÊME correctif de spécificité que la croix de l'en-tête : Astra style les