/* Feuille de style du runtime — **une seule**, pour tous les thèmes. * * Tout ce qui varie d'une marque à l'autre passe par les jetons `--f6-*`, servis par * `GET /api/v1/themes/{id}/theme.css`. C'est ce qui remplace les 27 feuilles de thème de * form6, dont plusieurs étaient des copies divergentes les unes des autres * (`theme_concerto`, `_2`, `_ia`, `_ia_v2`, `_ia_v2.old`, `_v2_a`, `_v2_b`). * * Les valeurs de repli ci-dessous ne sont pas un thème : elles rendent le runtime * présentable si aucun thème n'est chargé, ce qui arrive en développement et dans les * tests. * * **Et elles sont celles d'AI6, pas celles d'un client.** Elles ont porté le teal d'IMH * pendant tout le temps où IMH était le seul client, ce qui rendait un repli * *indétectable* : un déploiement Generali dont le thème ne charge pas s'affichait en * vert IMH — plausible, donc pris pour le rendu voulu. Le bleu AI6 dit ce qu'il est, * c'est-à-dire un parcours **non habillé**. Relevé sur « Preven6 Brand AI6 Technologies » * (Figma `6yMigBB33XH5sV9KrEE8pl`, section `12047:5364`). */ /* `border-box` partout dans le runtime. Sans lui, la marge intérieure s'ajoute à la * largeur : un élément à 100 % dépassait de sa colonne, et l'étape gagnait une barre de * défilement horizontale de quelques pixels — assez pour qu'on ne comprenne pas d'où elle * vient, jamais assez pour qu'on la cherche. * * Portée à l'hôte et à ses descendants, pas à la page : le runtime s'insère dans le site * d'un intégrateur, et n'a pas à lui imposer son modèle de boîte. */ f6-chatbot, f6-chatbot *, f6-chatbot *::before, f6-chatbot *::after, .f6-preview, .f6-preview * { box-sizing: border-box; } /* `.f6-preview` reçoit les mêmes jetons que le runtime. * * C'est ce qui permet à l'aperçu de l'éditeur de montrer **ce que l'assuré verra**, en * lisant cette feuille-ci plutôt qu'une copie. L'éditeur affichait des boutons verts là * où le parcours rend des tuiles grises à icône : l'auteur réglait donc une apparence * qu'il n'a jamais vue, et découvrait la vraie à l'aperçu — quand il y pensait. */ f6-chatbot, .f6-preview { --f6-color-primary: #001dfc; --f6-color-primary-strong: #000f85; --f6-color-primary-subtle: #e6e9ff; --f6-color-text: #181c34; --f6-color-text-strong: #000f85; --f6-color-text-muted: #707070; --f6-color-surface: #ffffff; --f6-color-surface-sunken: #f5f7f9; --f6-color-surface-muted: #cccccc; --f6-color-border: #e6ebf0; --f6-color-error: #ff4d4f; --f6-color-on-primary: #ffffff; /* Le primaire **sur fond sombre** — cadres de visée, jauges et accents posés sur les * voiles sombres de la caméra. Un primaire foncé (marine, rouge sombre) y devient * illisible : chaque marque en fournit donc une **teinte claire** (jeton * `primary-on-dark`, comme `primary-subtle`). Ce repli neutre tient tant qu'aucun thème * n'est chargé. */ --f6-color-primary-on-dark: #8f9bff; /* Le bleu **du repère cartographique** — le point « vous êtes ici » et le tracé du * trajet. Il ne suit **pas** la marque : c'est une convention de carte (le bleu Google), * lue comme « ma position » partout, et la reteindre à la couleur de la compagnie ferait * lire une position là où il y a une marque. Seul le **pin du logement** prend le * primaire ; le fond de carte reste neutre. Voir l'extension `trajet` (Lot 6). */ --f6-color-map-you: #4285f4; --f6-font-title: system-ui, sans-serif; --f6-font-body: system-ui, sans-serif; --f6-font-size-h1: 24px; --f6-font-size-body: 16px; --f6-font-size-h2: 20px; --f6-font-size-small: 14px; --f6-space-1: 4px; --f6-space-2: 8px; --f6-space-4: 16px; --f6-space-6: 24px; --f6-space-8: 32px; --f6-radius-default: 5px; --f6-radius-pill: 999px; --f6-layout-max-width: 480px; display: block; font-family: var(--f6-font-body); font-size: var(--f6-font-size-body); color: var(--f6-color-text); background: var(--f6-color-surface); /* **Le plancher qui manquait, et il tenait toute la page.** * * La page hôte pose `display: flex` sur `` : la coquille en est un élément flex, et * un élément flex a `min-width: auto` — c'est-à-dire la largeur de son **contenu** pour * plancher. Un texte long quelque part dedans ne débordait donc pas *dans* la coquille : * il l'élargissait, elle et tout ce qu'elle porte. * * Mesuré sur AI-1041, un nom d'assuré de 44 caractères dans le bandeau de dossier : * `f6-chatbot` passait à 418 px sur un écran de 390, et l'en-tête, le contenu et la barre * d'action se décalaient ensemble — 28 px de défilement horizontal sur toute la page. * * Aucun `min-width: 0` en aval ne pouvait rattraper ça : `.f6-shell`, `__top` et `__aside` * en portaient déjà un, sans effet. Une chaîne de flex ne rétrécit qu'aussi loin que son * maillon le plus rigide, et celui-là était le premier de tous. * * Ce n'est pas une correction de bandeau : n'importe quel contenu long — une adresse, un * libellé de garantie, une réponse d'assuré — aurait produit le même écran. */ min-width: 0; } /* **Masqué au démarrage, le temps que le thème arrive.** Le runtime pose ses jetons neutres * (le repli dé-brandé ci-dessus) dès le premier octet ; sans ce voile, la coquille * s'afficherait en neutre puis se recolorerait à la marque — le clignotement signalé. Le * pilote retire `f6-booting` une fois le thème appliqué et la première étape peinte (ou au * bout du garde-fou). * * `opacity: 0`, **et pas `visibility: hidden`** : ce dernier fait mesurer **zéro** à ce qui * se monte dessous, et le calendrier `flatpickr`, monté pendant ce voile, se plaçait à des * dimensions nulles dont il ne se remettait pas une fois révélé. L'opacité laisse la mise en * page intacte — tout a ses dimensions, seul le rendu est transparent —, ce qui masque le * clignotement sans casser ce qui se mesure. `pointer-events: none` le temps du voile : rien * à cliquer sur un écran qu'on ne voit pas encore. */ f6-chatbot.f6-booting { opacity: 0; pointer-events: none; } /* La coquille occupe **exactement** la hauteur disponible, et c'est ce qui garde les * actions au bas de l'écran. En `min-height`, un contenu plus long que l'écran poussait * la barre d'action vers le bas et laissait des champs *sous* elle : sur un écran de * téléphone, les dernières questions d'une étape devenaient invisibles, et le bouton * « Suivant » paraissait être la fin de l'étape alors qu'il en restait la moitié. */ .f6-shell { display: flex; flex-direction: column; height: 100%; max-width: var(--f6-layout-max-width); margin: 0 auto; overflow: hidden; } /* Le contenu défile, la barre d'action ne bouge pas. `min-height: 0` est obligatoire : * sans lui, un élément flex refuse de rétrécir sous la taille de son contenu, et le * défilement n'a jamais lieu. */ .f6-step { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--f6-space-4); } .f6-transcript { flex: 0 1 auto; min-height: 0; } .f6-actions { flex: 0 0 auto; } /* En mode formulaire, le conteneur de défilement est **transparent** : `display: * contents` rend ses enfants directement enfants de la coquille, et la disposition est * exactement celle d'avant — une étape entière s'affiche d'un coup, il n'y a rien à * suivre. */ .f6-scroll { display: contents; } /* En conversation, il devient le **seul** conteneur qui défile. Il y en avait deux, * empilés — la transcription et l'étape — chacun défilant dans son coin : amener une * bulle au bord de la transcription ne déplaçait donc pas la vue, et la question qui * venait d'apparaître restait sous la barre d'action. */ .f6-mode-chat .f6-scroll { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* --- L'en-tête **par-dessus le fil** --------------------------------------- * * L'en-tête était un frère du conteneur de défilement, donc au-dessus de lui dans la * colonne : rien ne passait jamais derrière, et le fil s'arrêtait net à son bord. Sorti du * flux, il le recouvre — les bulles montent **sous** le portrait et s'y dissolvent dans son * fondu (voir `.f6-chat-portrait`). C'est ce qui donne à la conversation sa profondeur : on * voit ce qui s'en va, au lieu de le voir disparaître d'un coup. * * **Le fil doit alors commencer plus bas**, d'exactement la hauteur de l'en-tête — et * aucune règle CSS ne peut la connaître : elle change avec le portrait (absent sans * assistante), avec le bouton de parole (offert ou non) et avec la caméra. Elle est donc * **mesurée** et publiée dans `--f6-header-height` (`chatbot.js`, `#watchHeaderHeight`). Le * repli, 150 px, est la hauteur nominale de `HeaderJulia` : il ne sert qu'au premier * rendu et aux navigateurs sans `ResizeObserver`. * * **Pas caméra allumée** : l'en-tête s'y replie en une ligne posée sur la vidéo, la scène * filmée occupe l'arrière-plan, et il n'y a plus de fil à faire passer dessous. */ .f6-mode-chat:not(.f6-camera-active) .f6-shell { position: relative; } .f6-mode-chat:not(.f6-camera-active) .f6-header { position: absolute; top: 0; left: 0; right: 0; /* Au-dessus du fil, sous la surcouche modale — un panneau qui attend une réponse coiffe tout, y compris le visage de celle qui l'a posée. */ z-index: 5; pointer-events: none; } /* L'en-tête ne prend plus les clics **du vide qui l'entoure** : le portrait ne remplit pas toute sa largeur, et un bloc invisible en travers du fil empêcherait de toucher la bulle qui passe dessous. Ce qui se clique dedans les reprend, un par un. */ .f6-mode-chat:not(.f6-camera-active) .f6-chat-header, .f6-mode-chat:not(.f6-camera-active) .f6-chat__avatar, .f6-mode-chat:not(.f6-camera-active) .f6-brand-header { pointer-events: auto; } .f6-mode-chat:not(.f6-camera-active) .f6-scroll { padding-top: var(--f6-header-height, 150px); } /* `flex: 0 0 auto` pour la transcription, `1 0 auto` pour l'étape : la conversation * garde sa hauteur, et c'est la zone de réponse qui absorbe la place restante. Les * pastilles se posent ainsi contre la barre d'action quand l'échange est court, sans * cesser de descendre quand il s'allonge. */ .f6-mode-chat .f6-scroll > .f6-transcript { flex: 0 0 auto; overflow: visible; } .f6-mode-chat .f6-scroll > .f6-step { flex: 1 0 auto; overflow: visible; } /* La réserve de défilement : sa hauteur est posée par le runtime, et vaut zéro la plupart du temps. `flex: 0 0 auto` pour qu'elle ne se laisse ni étirer ni comprimer — une réserve que la disposition rognerait ne réserverait rien. Hors conversation, elle n'existe pas : le mode formulaire ne cadre aucune question. */ .f6-mode-chat .f6-scroll > .f6-scroll__reserve { flex: 0 0 auto; } .f6-scroll__reserve { height: 0; } /* **Et elle disparaît caméra ouverte — `display: none`, pas une hauteur nulle.** * * Ce mode pose `justify-content: space-between` sur le conteneur (voir plus bas). Avec deux * enfants, il colle la transcription en haut et l'étape en bas, contre la barre d'action : * c'est ce qui met les pastilles sous le pouce et laisse le centre de l'écran à l'image. * Un **troisième** enfant, fût-il haut de zéro, change la répartition — l'étape devient * l'élément du milieu et se pose au centre, à 286 px de la barre, en plein dans le flux. * * Une hauteur nulle ne suffit donc pas : ce qui gêne ici n'est pas sa taille, c'est sa * présence dans le compte. */ f6-chatbot.f6-camera-active .f6-scroll__reserve { display: none; } .f6-step__title { margin: 0 0 var(--f6-space-6); font-family: var(--f6-font-title); font-size: var(--f6-font-size-h1); } .f6-step__errors { margin-top: var(--f6-space-4); padding: var(--f6-space-2) var(--f6-space-4); border-left: 3px solid var(--f6-color-error); background: color-mix(in srgb, var(--f6-color-error) 8%, transparent); color: var(--f6-color-error); } .f6-errors { margin: 0; padding-left: var(--f6-space-4); } /* --- Actions ------------------------------------------------------------ */ .f6-actions { display: flex; gap: var(--f6-space-2); align-items: center; padding: var(--f6-space-4); /* **La marge du système remplace la nôtre, elle ne s'y ajoute pas.** Sur un téléphone à encoche, `env(safe-area-inset-bottom)` vaut ~34 px ; posée en plus du rembourrage, elle donnait un vide sous la barre — l'« espace perdu en bas » relevé le 28/08. `max()` prend le plus grand des deux : le creux du système là où il existe, le nôtre ailleurs. Sur un écran sans encoche, `env()` vaut 0 et rien ne change. */ padding-bottom: max(var(--f6-space-4), env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--f6-color-border); position: sticky; bottom: 0; background: var(--f6-color-surface); } /* **Le seuil mobile — et c'est l'espacement qui rend la hauteur, pas les polices.** * * Mesuré avant d'y toucher : le corps de texte est à 16 px, c'est-à-dire le `body-large` de * Material et un point sous le `Body` d'iOS. Le descendre mettrait la question posée à * l'assuré sous le corps de texte de toutes les applications qu'il utilise par ailleurs — * sur l'écran où il doit comprendre ce qui sera couvert. Ce qui coûtait la hauteur est * ailleurs : une échelle d'espacement de 16/24/32 pensée pour une page, pas pour un * téléphone tenu à une main. * * Les jetons, donc, et **seulement** les jetons : une règle qui coderait sa taille en dur * ferait régler la suivante à trois endroits. * * **Deux sélecteurs, et c'est ce qui fait que ce bloc s'applique.** Il ne s'appliquait pas. * La feuille de thème déclare les mêmes jetons — `--f6-space-4: 16px`, `--f6-font-size-h1: * 24px` — dans `[data-theme=""]`, l'enveloppe que `catalog.py` pose à l'injection. Cela * fait **(0,1,0)** contre le **(0,0,1)** d'un `f6-chatbot` nu, sur le même élément (c'est * `chatbot.js` qui pose `data-theme` sur l'hôte lui-même), et la feuille est chargée après. * Une `@media` n'ajoute aucune spécificité, et la feuille de thème n'en contient aucune : * le thème gagnait à toutes les largeurs. Le seuil mobile était mort sur tout parcours * thémé, c'est-à-dire sur tous — 16/24/32 restaient 16/24/32 sous 480 px, et le `h1` à * 24 px, là où ce bloc croyait poser 12/16/24 et 20 px. * * `f6-chatbot[data-theme]` vaut (0,1,1) et passe devant ; le premier sélecteur de la liste * garde le repli non thémé (l'éditeur, un parcours sans marque). **Et non un `!important`** : * un thème a le droit de régler ses jetons, c'est sa raison d'être — ce qui doit passer * devant lui, c'est la *variante responsive*, qui est de la mise en page et vit donc ici. * Un thème qui voudrait vraiment imposer sa propre échelle mobile le peut encore : il lui * suffit d'une `@media` chez lui, qui gagnerait par l'ordre. */ @media (max-width: 480px) { f6-chatbot, f6-chatbot[data-theme] { --f6-space-4: 12px; --f6-space-6: 16px; --f6-space-8: 24px; /* **L'échelle descend d'un cran, et pas du même cran partout.** * * Ce bloc avait délibérément laissé le corps à 16 px — le `body-large` de Material, un * point sous le `Body` d'iOS — et pris la hauteur sur l'espacement seul. L'argument * tenait ; l'écran a changé depuis, il porte un en-tête, une bande de prise de vue et * une pilule à libellé. * * Les titres perdent 2 px, le corps aussi, et le petit texte **reste à son plancher**. * * L'échelle a bougé trois fois, et ce que cette histoire apprend vaut d'être gardé. Le * corps était à 16 px — le `body-large` de Material, un point sous le `Body` d'iOS —, * puis 15, et maintenant 14 : l'écran s'est chargé depuis (en-tête, portrait, bande de * prise de vue, barre d'action), et la place manque là où elle compte, sous la question. * Ce qu'on rend en corps de texte, on le gagne en lignes lues. * * **Le petit texte, lui, ne descend pas.** Un passage à 12 px a été essayé le 07/09 et * repris le jour même : le petit texte est le **détail d'une question**, celui qui cadre * la réponse attendue — le seul texte du parcours sur lequel on ne veut pas économiser. * 13 px est le plancher, il l'était déjà, et l'essai n'a fait que le confirmer. * * L'écart entre corps et détail se resserre donc à 1 px. C'est voulu : ce qui distingue * les deux à l'écran est la couleur et la place, pas la taille. */ --f6-font-size-h1: 18px; --f6-font-size-h2: 16px; --f6-font-size-body: 14px; --f6-font-size-small: 13px; /* **Point 5 — le portrait de Julia, à la mesure d'un téléphone.** * * 85 px de boîte et 53 px d'image, quel que soit l'écran : ni l'une ni l'autre n'était * reprise ici. Le jeton existe désormais pour que les trois cotes — la boîte, l'aura et * l'image — se règlent d'un seul endroit ; elles étaient écrites trois fois et se * déréglaient séparément. * * **65 px et non 72, pour la même raison que le corps de texte descend** : le portrait * est en tête de conversation, donc il prend sa place sur celle de la première question. * Il doit rester reconnaissable — c'est l'interlocutrice —, pas occuper le haut de * l'écran. Sept pixels de boîte rendent une ligne au fil. */ --f6-avatar-size: 65px; } /* La barre se resserre plus encore que le jeton : elle porte des commandes de 41 px, qui font déjà leur propre hauteur de touche, et c'est la seule bande fixe de l'écran. */ .f6-actions { /* 12 px en littéral : `--f6-space-3` n'existe pas dans l'échelle (1/2/4/6/8) et retombait sur 0 ailleurs dans ce fichier — un jeton fantôme se propage. */ padding: var(--f6-space-2) 12px; padding-bottom: max(var(--f6-space-2), env(safe-area-inset-bottom, 0px)); } } /* `display` l'emporte sur la règle par défaut du navigateur pour `[hidden]` : sans cette ligne, poser `els.actions.hidden = true` (clôture réussie, plus rien à faire) ne cachait pas la barre — même piège que `.f6-voice-controls[hidden]` et `.f6-button--icon[hidden]` ci-dessous. Les boutons Précédent/Terminer restaient visibles et cliquables, avec des gestionnaires qui ne faisaient plus rien une fois le parcours terminé (AI-1011, O4). */ .f6-actions[hidden] { display: none; } .f6-button { flex: 1; min-height: 44px; /* cible tactile : la déclaration se remplit au téléphone */ padding: 0 var(--f6-space-4); border-radius: var(--f6-radius-default); border: 1px solid var(--f6-color-primary); background: var(--f6-color-surface); color: var(--f6-color-primary); font: inherit; cursor: pointer; } .f6-button--primary { background: var(--f6-color-primary); color: var(--f6-color-on-primary); } .f6-button--ghost { border-color: var(--f6-color-border); color: var(--f6-color-text-muted); } .f6-button--icon { flex: 0 0 auto; min-width: 44px; } .f6-button:disabled { opacity: .45; cursor: not-allowed; } /* --- Mode conversationnel ---------------------------------------------- */ .f6-transcript { display: flex; flex-direction: column; gap: var(--f6-space-2); padding: var(--f6-space-4); overflow-y: auto; } /* **Un `display` d'auteur l'emporte sur le `[hidden]` du navigateur** — troisième fois * que le dépôt s'y fait prendre, après les commandes de voix et les boutons d'icône. Le * défaut ne s'était pas encore vu ici parce que `hidden` n'était posé que sur une * transcription **vide** : une boîte flex sans enfant ne se remarque pas. Depuis qu'une * étape formulaire la masque alors qu'elle est pleine, la règle ci-dessus la rouvrait, * et l'écran de confirmation restait empilé sous la conversation. */ .f6-transcript[hidden] { display: none; } /* Les bulles, relevées au composant sur les maquettes. * * Le coin **carré du côté de l'interlocuteur** est ce qui donne à l'échange son sens de * lecture : Julia parle depuis la gauche, l'assuré répond depuis la droite. Quatre coins * arrondis rendraient les deux bulles interchangeables. */ .f6-chat__bubble { max-width: 88%; padding: 10px 15px; font-size: var(--f6-font-size-body); line-height: 1.3; filter: drop-shadow(0 0 5px rgba(0, 0, 0, .15)); } .f6-chat__bubble--question { align-self: stretch; max-width: 100%; background: var(--f6-color-primary); color: var(--f6-color-on-primary); border-radius: 0 8px 8px 8px; } .f6-chat__bubble--answer { align-self: flex-end; background: var(--f6-color-surface-sunken); color: var(--f6-color-text-strong, var(--f6-color-text)); border-radius: 8px 0 8px 8px; } /* La seconde ligne d'une question — la `description` du composant. La maquette s'en sert * pour cadrer la réponse attendue (« Répondez simplement “oui” ou “non” »), et c'est bien * une précision, pas une seconde question : elle se lit plus petite. */ /* **Le détail se replie.** Il fait souvent plus de lignes que la question qu'il précise — trois de plus sur la question photo du DDE —, et à 390 px les deux ensemble prenaient la moitié de l'écran, choix de réponse compris. On garde donc la question entière et l'on met le détail à un geste : c'est de la place rendue sans rien rapetisser. */ .f6-chat__bubble-pli { display: block; } /* **La poignée est un bouton, et elle en a l'air.** * * Elle était « … » suivi d'un chevron : un signe qui ne dit pas ce qu'il ouvrirait. Elle * prend le style des autres commandes du parcours — une pilule discrète, un contour, une * hauteur de touche — et le mot « Plus de détails » à côté d'une icône. C'est ce qui a été * demandé le 31/08. * * Elle reste un `` : le pliage, le clavier et l'état annoncé aux lecteurs d'écran * viennent avec `
`, et rien n'est à tenir en JavaScript. La maquiller en bouton * est du ressort de cette feuille, pas du balisage. */ .f6-chat__bubble-plus { display: inline-flex; align-items: center; gap: var(--f6-space-1); margin-top: var(--f6-space-2); padding: 6px var(--f6-space-2); /* 32 px et non 44 : ce n'est pas une commande du parcours mais une commande *dans* une bulle, et une pilule de 44 px y ferait un second bouton principal. La cible reste confortable — le mot en fait la largeur. */ min-height: 32px; font-size: var(--f6-font-size-small); color: var(--f6-color-text-strong, var(--f6-color-text)); background: var(--f6-color-surface); border: 1px solid var(--f6-color-border); border-radius: var(--f6-radius-pill); cursor: pointer; /* Le marqueur natif est un triangle plein, différent d'un navigateur à l'autre. On le retire ; le chevron ci-dessous est le nôtre. */ list-style: none; } .f6-chat__bubble-plus:hover { background: var(--f6-color-surface-sunken); } /* **Caméra éteinte, il n'y a rien à replier.** * * Le repli n'achète de la place que sous la bande de capture : c'est elle qui prend le bas * de l'écran pendant que le détail de la question photo fait trois lignes de plus que la * question. Sans elle, la place ne manque pas — et un détail à un geste est un détail que * personne ne lit, alors que c'est lui qui cadre la réponse attendue. * * **C'est ici que ça se décide, et pas dans le JavaScript.** L'assuré ouvre et ferme la * caméra en cours de question ; un choix figé au moment du rendu serait faux la seconde * d'après. Ces deux règles suivent `f6-camera-active`, que l'hôte pose et retire. * * `display: block` sur le détail **contredit délibérément** la feuille du navigateur, qui * masque tout enfant d'un `
` fermé sauf son ``. C'est ce qui permet de * garder la sémantique du pliage — clavier, lecteurs d'écran — tout en montrant le contenu * là où le pliage n'a plus de raison d'être. */ f6-chatbot:not(.f6-camera-active) .f6-chat__bubble-plus { display: none; } f6-chatbot:not(.f6-camera-active) .f6-chat__bubble-pli > .f6-chat__bubble-detail { display: block; } .f6-chat__bubble-plus::-webkit-details-marker { display: none; } /* L'icône ne rétrécit pas quand le mot pousse : un « i » écrasé en ovale se lit comme un défaut d'affichage. */ .f6-chat__bubble-plus-icone { flex: 0 0 auto; } /* Le chevron, tracé au trait plutôt qu'en caractère : une police peut ne pas l'avoir, et il se tourne alors que « ▾ » se remplacerait. */ .f6-chat__bubble-plus::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 160ms ease; } .f6-chat__bubble-pli[open] .f6-chat__bubble-plus::after { transform: translateY(1px) rotate(-135deg); } /* **Déplié, le bouton se répond à lui-même.** « Réduire » ne le faisait pas : on ne réduit pas « Plus de détails », on en demande moins. Les deux mots sont dans le DOM et `[open]` choisit lequel s'affiche — attribut que `
` pose et retire tout seul. Un `content:` de pseudo-élément aurait fait le même effet en apparence, mais un texte qui n'existe que dans la feuille de style n'est ni traduisible, ni relu, ni annoncé de façon fiable par un lecteur d'écran. */ .f6-chat__bubble-plus-mot[data-pli="ouvert"] { display: none; } .f6-chat__bubble-pli[open] .f6-chat__bubble-plus-mot[data-pli="ferme"] { display: none; } .f6-chat__bubble-pli[open] .f6-chat__bubble-plus-mot[data-pli="ouvert"] { display: inline; } @media (prefers-reduced-motion: reduce) { .f6-chat__bubble-plus::after { transition: none; } } /* Le détail, désormais lu d'un trait sur toutes les questions sauf la prise de vue. Il reste plus petit et légèrement en retrait : c'est une précision, pas une seconde question. */ .f6-chat__bubble-detail { display: block; margin-top: var(--f6-space-1); font-size: var(--f6-font-size-small); opacity: .9; } /* L'avatar et son aura — l'aura tourne doucement, ce qui signale « Julia écoute » sans * qu'aucun texte n'ait à le dire. Immobile si l'utilisateur a demandé moins d'animation. */ /* Le voile clair derrière l'en-tête et l'avatar : il décolle la conversation du haut de * l'écran sans y poser de trait. La maquette l'appelle « FondgrisBackgroundBlur ». */ .f6-chat-active .f6-transcript { background: linear-gradient( to bottom, color-mix(in srgb, var(--f6-color-border) 37%, transparent) 0, transparent 148px ); } /* **`transcript: current` ne montre que la question courante.** L'historique de l'échange * reste masqué — un écran plus sobre, une question à la fois. C'est le parcours qui le * décide, à son manifeste, et non le lien qui l'ouvre : le réglage a d'abord vécu sur * l'URL (`?transcript`), où personne ne le relisait, si bien que deux assurés du même * parcours n'avaient pas le même écran selon le lien reçu. Le défaut reste `full` — tout * le fil, comme une messagerie. * * Les bulles ne sont pas retirées, seulement masquées : le DOM survit, donc le retour * arrière reste juste (même politique que le mode caméra, qui force la question courante * seule — là, le fil couvrirait la vidéo qu'on demande à l'assuré de cadrer). */ f6-chatbot.f6-mode-chat.f6-transcript-compact .f6-transcript .f6-chat__bubble:not(.f6-chat__bubble--current) { display: none; } /* --- Le portrait de Julia et son aura ------------------------------------- * * `Aura Julia` de la maquette (`I7904:98234;6009:61676`) : **dix anneaux concentriques** * pleins, de 85 px à 52,749 px, soit un pas constant de 3,58 px de diamètre — 1,79 px en * rayon. Le motif était déjà obtenu par un `repeating-radial-gradient`, à un pas de 4 px * relevé à l'œil ; il est ici celui de la maquette. Dix `` empilés seraient dix * nœuds et dix requêtes pour le même dessin. * * **Ce que l'aura dit, et ce qu'elle ne disait pas.** Elle tournait — douze secondes par * tour, sur un motif à symétrie de révolution, c'est-à-dire une animation qui ne se voit * pas et un calcul qui, lui, se paie. Elle est maintenant **muette au repos et vivante * quand Julia parle** : `--f6-level-out` (0 à 1) est posé sur `f6-chatbot` à chaque trame * d'analyse par l'extension `assistant-live`, et c'est le niveau réel de **sa** voix. * * **Sa voix, et pas n'importe laquelle.** La mesure de l'assuré (`--f6-level-in`) va au * halo du micro, sous le portrait. Les fondre en une seule ferait respirer le visage de * Julia pendant que c'est l'assuré qui parle — le contresens exact que ces animations sont * censées lever. * * Quatre états, et c'est le visage qui les porte : * - **pas d'entretien** — l'aura est là, pâle et immobile : c'est le dessin de la * maquette, et il ne prétend rien ; * - **liaison ouverte, personne ne parle** — un anneau s'échappe lentement du portrait * (`::after`), assez pour dire « la ligne est ouverte », trop lent pour distraire ; * - **Julia parle** — l'aura respire à l'amplitude de sa voix ; * - **l'assuré parle** — l'aura se **pose**, très légèrement resserrée : Julia écoute. * C'est le seul état où l'immobilité veut dire quelque chose. * ------------------------------------------------------------------------ */ /* **Une seule cote, et deux qui en dérivent.** La boîte, l'aura et le portrait valaient 85 / 85 / 53 px, écrits en trois endroits : trois nombres qu'il fallait penser ensemble et que rien n'obligeait à le rester. Le jeton les tient. Il vaut 85 px par défaut et descend à 72 px sous 480 px (voir le seuil mobile plus haut) — l'ensemble prenait un huitième de la hauteur d'un téléphone. */ .f6-chat__avatar { position: relative; align-self: center; display: grid; place-items: center; width: var(--f6-avatar-size, 85px); height: var(--f6-avatar-size, 85px); } .f6-chat__avatar::before { content: ''; grid-area: 1 / 1; width: var(--f6-avatar-size, 85px); height: var(--f6-avatar-size, 85px); border-radius: 50%; background: repeating-radial-gradient( circle, color-mix(in srgb, var(--f6-color-primary) 70%, transparent) 0 .9px, transparent .9px 1.79px ); /* L'amplitude **et** la présence suivent la voix de Julia. `90ms` : assez court pour que l'aura colle à la syllabe, assez long pour qu'elle ne clignote pas d'une trame à l'autre — une aura qui suit la trame brute vibre au lieu de respirer. */ opacity: calc(.42 + var(--f6-level-out, 0) * .58); transform: scale(calc(1 + var(--f6-level-out, 0) * .07)); transition: opacity 140ms ease-out, transform 140ms ease-out; } /* **L'assuré parle : Julia écoute.** L'aura se resserre d'un cheveu et s'assombrit à peine — un mouvement qu'on ne remarque pas en le regardant, mais qui rend le tour de parole lisible du coin de l'œil. C'est l'inverse exact de l'état précédent, et c'est pour cela qu'il tient en deux lignes. Aucune onde ici : c'est l'immobilité qui dit l'écoute, et le halo du micro, en bas, qui porte alors le mouvement. */ f6-chatbot[data-speaking="user"] .f6-chat__avatar::before { opacity: .5; transform: scale(.97); } /* L'anneau qui s'échappe : **seulement quand la liaison est ouverte, et que personne ne parle**. C'est le seul signe que l'entretien est en cours pendant un silence, et il ne coûte qu'un pseudo-élément — pas un second dessin d'aura. Il se retire dès que Julia prend la parole : les ondes, plus bas, disent alors la même chose en mieux, et deux pulsations de périodes différentes autour du même visage se lisent comme un défaut. */ .f6-chat__avatar::after { content: ''; grid-area: 1 / 1; /* Le même jeton que la boîte et l'aura : l'anneau naît **au bord** du portrait et son départ est une échelle (`.62` dans `f6-aura-onde`), donc relative. Laissé à 85 px pendant que la boîte descend à 72, il aurait débordé du cadre au lieu de l'épouser. */ width: var(--f6-avatar-size, 85px); height: var(--f6-avatar-size, 85px); border-radius: 50%; border: 1px solid var(--f6-color-primary); opacity: 0; pointer-events: none; } f6-chatbot[data-live]:not([data-speaking="assistant"]) .f6-chat__avatar::after { animation: f6-aura-onde 2.6s cubic-bezier(.22, .61, .36, 1) infinite; } @keyframes f6-aura-onde { 0% { transform: scale(.66); opacity: .5; } 70% { opacity: 0; } 100% { transform: scale(1.12); opacity: 0; } } /* --- Les ondes sonores : **Julia parle** ---------------------------------- * * Trois anneaux qui s'échappent du portrait, décalés d'un tiers de période. Ce que l'aura * seule ne pouvait pas rendre : elle *respire* — elle grossit et pâlit avec l'amplitude —, * et une respiration dit « ce visage est vivant », pas « un son sort d'ici ». Un son qui * sort se voit à ce qu'il **s'éloigne** : il faut un mouvement qui parte du centre et * traverse le bord, donc plusieurs anneaux en file, jamais un seul qui pulse sur place. * * Elles ne paraissent **que** quand Julia parle (`data-speaking="assistant"`, posé par * `_paintLevel` au-dessus du seuil de parole). Pendant un silence, l'anneau lent de * `::after` suffit ; quand c'est l'assuré qui parle, le visage se pose — l'écoute est * l'immobilité, et c'est le halo du micro, en bas, qui bouge alors. * * **L'amplitude passe par `--f6-level-out`**, la voix de Julia mesurée à chaque trame — la * même source que l'aura, jamais un second détecteur. Elle ne pilote pas l'animation * elle-même (une durée qui change à chaque trame saccade), mais **sa portée** : l'anneau va * plus loin sur une syllabe forte. C'est délibérément grossier — on ne lit pas un niveau * sonore sur un anneau, on voit seulement que ça parle. * ------------------------------------------------------------------------ */ .f6-chat__ondes { grid-area: 1 / 1; /* Derrière le portrait, avec l'aura : les anneaux naissent **sous** le visage et en sortent. Nés au-dessus, ils passeraient devant lui à chaque tour. */ z-index: 0; position: relative; display: block; width: 100%; height: 100%; pointer-events: none; } .f6-chat__ondes i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--f6-color-primary); opacity: 0; } f6-chatbot[data-speaking="assistant"] .f6-chat__ondes i { animation: f6-onde-sonore 1.8s cubic-bezier(.22, .61, .36, 1) infinite; } /* Décalés d'un tiers : trois anneaux en file, et non trois anneaux qui battent ensemble. */ f6-chatbot[data-speaking="assistant"] .f6-chat__ondes i:nth-child(2) { animation-delay: .6s; } f6-chatbot[data-speaking="assistant"] .f6-chat__ondes i:nth-child(3) { animation-delay: 1.2s; } @keyframes f6-onde-sonore { /* Il part **au ras du portrait** (53 px sur 85, soit .62) : une onde qui naîtrait au bord de l'aura ne viendrait de nulle part. */ 0% { transform: scale(.62); opacity: 0; } 15% { opacity: .55; } 100% { transform: scale(calc(1.25 + var(--f6-level-out, 0) * .35)); opacity: 0; } } /* **Sans liaison, le portrait se met en retrait.** Il reste parfaitement lisible — c'est toujours l'interlocutrice —, mais il cesse de se présenter comme actif : c'est ce qui rend le bouton « Parler à Julia » juste en dessous lisible comme une invitation, et non comme une commande redondante. */ f6-chatbot[data-assistant]:not([data-live]) .f6-chat__avatar::before { opacity: .3; } f6-chatbot[data-assistant]:not([data-live]) .f6-chat__avatar img { filter: saturate(.7); } /* La photo est **au-dessus** de l'aura, et le `z-index` est explicite : les trois occupent * la même cellule de grille, si bien que leur ordre de peinture dépendrait sinon de leur * ordre dans le DOM — et un `::before` est engendré *avant* le contenu. Une règle de * thème qui poserait une position sur l'aura suffirait à la faire passer devant, et le * portrait disparaîtrait sans qu'aucune erreur ne le signale. */ .f6-chat__avatar::before { z-index: 0; } .f6-chat__avatar::after { z-index: 2; } .f6-chat__avatar img { position: relative; z-index: 1; grid-area: 1 / 1; /* 52,749 px dans la maquette sur une aura de 85 : le portrait **est** le dixième anneau, il n'y a pas de blanc entre lui et l'aura. Le rapport (0,6235) compte donc plus que le nombre — le figer à 53 px pendant que l'aura rétrécit ferait apparaître le dixième anneau, c'est-à-dire un liseré clair autour du visage. `calc()` le tient à toutes les tailles : 53 px sur 85, 45 px sur 72. */ width: calc(var(--f6-avatar-size, 85px) * 0.6235); height: calc(var(--f6-avatar-size, 85px) * 0.6235); border-radius: 50%; object-fit: cover; transition: filter 200ms ease; } @media (prefers-reduced-motion: reduce) { .f6-chat__avatar::before { transition: none; transform: none; } f6-chatbot[data-live]:not([data-speaking="assistant"]) .f6-chat__avatar::after { animation: none; } /* Les ondes s'arrêtent, mais ne disparaissent pas : un anneau posé dit encore « ça parle » à qui a demandé qu'on ne l'anime pas. */ f6-chatbot[data-speaking="assistant"] .f6-chat__ondes i { animation: none; opacity: .35; } f6-chatbot[data-speaking="assistant"] .f6-chat__ondes i:nth-child(2) { transform: scale(1.12); } f6-chatbot[data-speaking="assistant"] .f6-chat__ondes i:nth-child(3) { transform: scale(1.24); } } /* --- Le bandeau de marque et de dossier ---------------------------------- * * Structure ici, habillage dans le thème. Il apparaît sur **tous** les écrans et dans * les deux modes : c'est ce que montre la maquette, et c'est aussi ce qui permet à * l'assuré de vérifier d'un coup d'œil que le dossier ouvert est bien le sien. */ .f6-brand-header { flex: 0 0 auto; } .f6-brand-header__top { display: flex; align-items: center; justify-content: space-between; gap: var(--f6-space-4); padding: var(--f6-space-2) var(--f6-space-4); } .f6-brand-header__logo { display: block; height: 28px; width: auto; } .f6-brand-header__help { color: var(--f6-color-primary); font-size: var(--f6-font-size-small); } /* Le bouton « Aide » d'un parcours porte la même classe que le lien statique du thème * qu'il remplace (`chatbot.js#renderBrandHeader`) — même place, même rôle. Un `