/* chat-volet.css — Les sections dépliables de la réponse Fichier à part parce que `chat.css` était DÉJÀ à 543 lignes, au-dessus des 500 de la convention : y ajouter soixante lignes aurait aggravé une dette au lieu de la contenir. Le découpage suit une frontière réelle — ici, un seul composant, celui qui range le raisonnement derrière un titre. */ /* ══════════ Les volets dépliables ══════════ L'assistant rend trois phrases lisibles d'un coup d'œil, et range le raisonnement derrière un titre qu'on ouvre si on veut. Mesuré le 20/08/2026 : sa réponse sur « escape game » faisait dix-huit lignes, dont deux que la personne devait vraiment lire. Le volet doit se lire comme une PORTE, pas comme un bloc de plus : pas de fond, pas d'encadré, juste un titre qu'on peut viser au doigt et un filet quand il est ouvert. Un encadré de plus dans une bulle qui en est déjà un, c'est deux boîtes emboîtées et rien de gagné. */ /* CHARGEE AUSSI PAR TRACE depuis le 28/08/2026 : `md()` est partage entre Flair et l'assistant, donc ce qu'il PRODUIT doit l'etre aussi. Un volet sans sa feuille rend le triangle par defaut du navigateur, au milieu d'un panneau qui n'a rien d'un navigateur. `--ch-marque` est defini plus bas, dans ce fichier ; `--ch-fs-sm` vient de `chat.css` et porte donc un repli. C'est ce qui rend cette feuille autonome. */ .ch-volet { margin: 0.5rem 0; border-top: 1px solid var(--mr-border); } .ch-volet:last-child { border-bottom: 1px solid var(--mr-border); } .ch-volet > summary { /* 44 px de haut : c'est le seuil sous lequel on rate la cible au doigt, et ce volet est fait pour être touché. */ display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.35rem 0; font-size: var(--ch-fs-sm, .875rem); font-weight: 600; color: var(--mr-text); cursor: pointer; list-style: none; /* le triangle par défaut, remplacé plus bas */ -webkit-tap-highlight-color: transparent; } .ch-volet > summary::-webkit-details-marker { display: none; } /* Un chevron qui pivote : il dit « il y a autre chose dessous » sans un mot. */ .ch-volet > summary::before { content: ''; flex: 0 0 auto; width: 0; height: 0; border-left: 5px solid var(--mr-text-muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.18s ease; } .ch-volet[open] > summary::before { transform: rotate(90deg); } .ch-volet > summary:hover { color: var(--mr-text-strong); } .ch-volet > summary:focus-visible { outline: 2px solid var(--mr-border-strong); outline-offset: 2px; } .ch-volet > div { padding: 0 0 0.6rem 0.95rem; /* aligné sous le libellé, pas sous le chevron */ color: var(--mr-text-muted); } .ch-volet > div > p:first-child { margin-top: 0; } .ch-volet > div > p:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .ch-volet > summary::before { transition: none; } } /* ══════════ La grammaire typographique ══════════ DEUX marques (cf. `md()` dans chat.js) : le gras pour le chiffre, le pointillé pour le terme de métier qu'on introduit. ── POURQUOI LE GRAS NE SE VOYAIT PAS ────────────────────────────────────── Relevé le 20/08/2026 dans la bulle, Inter à 13,76 px : 400 -> 500 : 1,1 % de largeur en plus 400 -> 600 : 2,1 % <- ce qu'on avait 400 -> 700 : 3,1 % 400 -> 800 : 4,4 % Inter est une grotesque à faible contraste : ses graisses varient en ÉPAISSEUR DE TRAIT, presque pas en largeur. Monter à 700 n'apportait donc qu'un point de pourcentage. Et la couleur n'aidait pas : le texte est `#f7f2e9`, le gras `#ffffff` — contraste 14,86 contre 16,58 sur la carte. Deux blancs. Le gras ne gagnait RIEN en luminance, alors que c'est ce que l'œil lit le plus vite. La parade sur fond sombre n'est pas de monter le gras, c'est de DESCENDRE le texte courant : l'écart se creuse par le bas, sans faire crier le gras. On y ajoute de la taille (le trait est plus lisible à 15 px qu'à 13,8) et de l'air, qui est ce qui fait vraiment lire. ──────────────────────────────────────────────────────────────────────── */ .ch-bulle { /* 14 px et pas 15 : la premiere version montait la taille pour rattraper le manque de contraste. Inutile — c'est la COULEUR qui l'a rattrape (voir plus bas), et agrandir rendait les messages encombrants. On tient donc la densite et on prend le contraste. */ font-size: var(--ch-fs-sm, .875rem); line-height: 1.62; padding: 0.65rem 0.85rem; /* Le texte courant descend d'un cran. C'est LE geste : le gras n'a plus besoin de crier, il suffit qu'il reste en haut. */ color: color-mix(in srgb, var(--mr-text) 80%, var(--mr-surface-card)); } /* De l'air entre les idees : c'est ce qui fait lire, plus surement qu'une graisse de plus. Moins que la premiere version, qui aerait au point de rallonger chaque reponse d'un ecran. */ .ch-bulle p { margin: 0 0 0.7rem; } .ch-bulle p:last-child { margin-bottom: 0; } /* ── LE MESSAGE DE LA PERSONNE ────────────────────────────────────────────── Fond clair, texte sombre : l'inverse exact de la bulle de l'assistant, et l'oeil ne le lit pas pareil. Un texte sombre sur clair paraît PLUS FIN qu'un texte clair sur sombre, a graisse identique — c'est le meme phenomene d'irradiation, dans l'autre sens. D'ou 500 ici la ou l'assistant est a 400 : ce n'est pas du gras, c'est la compensation qui les rend egalement lisibles. Le texte reprend aussi sa couleur pleine : l'attenuation a 80 % est faite pour creuser l'ecart avec le gras, or la personne n'ecrit pas en gras. */ .ch-bulle--moi { font-weight: 500; color: var(--mr-btn-text); padding: 0.6rem 0.9rem; } /* ── LE GRAS ──────────────────────────────────────────────────────────────── DEUX PIEGES, tombes dans les deux le 20/08/2026 : 1. `` vaut 700 PAR DEFAUT dans le navigateur. Ecrire `font-weight: 600` ici, comme on l'avait fait, ALLEGE le gras au lieu de le renforcer. C'est un reglage qui a l'air d'en ajouter et qui en enleve. 2. Le texte courant est attenue a 80 % (voir plus haut) pour creuser l'ecart. Si le gras n'a pas sa propre couleur, il herite de cette attenuation — et l'ecart qu'on vient de creuser se referme sans que rien ne le montre. Les deux lignes ci-dessous sont donc obligatoires ENSEMBLE. Retirer l'une annule l'autre. */ .ch-bulle strong { font-weight: 700; color: var(--mr-text-strong); } /* LES DEUX MARQUES VALENT POUR LES DEUX APPS. `md()` est partage entre Flair et l'assistant de Trace depuis le 28/08/2026 ; les selecteurs ne visaient que `.ch-bulle`, donc `` et `` sortaient sans style dans Trace — un `` sans habillage, c'est le jaune par defaut du navigateur sur un fond sombre. Ce qu'un renderer commun produit doit se peindre au meme endroit. (Dans les volets ils etaient deja couverts : `.ch-volet > div` ne parle pas de l'app qui l'entoure.) */ /* ── LE TERME DE MÉTIER ───────────────────────────────────────────────────── Le pointillé fin était trop discret pour se voir : c'était un signal qu'on ne remarque qu'en le cherchant, donc un signal qui ne sert à rien. Il devient un trait plein de 2 px, dans la couleur d'accent du chat. Toujours pas un lien pour autant : le trait est SOUS la ligne de base, décalé de 3 px, et le mot garde la couleur du texte. Un lien, lui, change de couleur. C'est ce qui évite qu'on clique dessus pour rien. */ .ch-bulle u, .tas-bulle--lui u { text-decoration: none; box-shadow: inset 0 -2px 0 var(--ch-marque); padding-bottom: 1px; } /* ── LA PHRASE À RETENIR ──────────────────────────────────────────────────── Le verdict — celui que la personne répétera à quelqu'un d'autre. UNE par réponse, dit la consigne. Il a été essayé le matin, retiré, et remis l'après-midi. Le détour valait la peine : la première fois il disputait la place au gras, parce que le gras n'avait alors aucun avantage de couleur (600 au lieu de 700, et deux blancs quasi identiques). L'écart creusé, les deux marques ne se marchent plus dessus — le gras porte le CHIFFRE, le surlignage porte la CONCLUSION. Le texte y reprend sa pleine valeur : c'est la seule phrase de la réponse qu'on ne veut pas atténuer. */ .ch-bulle mark, .tas-bulle--lui mark { background: var(--ch-marque-fond); color: var(--mr-text); box-shadow: inset 3px 0 0 var(--ch-marque); padding: 0.15em 0.4em 0.15em 0.55em; border-radius: 0 4px 4px 0; /* Un surlignage qui coupe entre deux lignes doit rester un seul bloc. */ box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* La couleur des deux marques. Le thème du produit n'en a pas — il est en encre, crème et beige, et `--mr-accent-up` est réservé au vert « ça monte ». On pose donc UN ton, tiré de la même famille chaude que la crème, et il ne sert qu'ici : deux marques, une couleur, aucune confusion possible. */ :root { --ch-marque: #b4823f; --ch-marque-fond: rgba(180, 130, 63, 0.13); } :root[data-theme="dark"] { /* Remonté en clarté : sur fond sombre, un ocre foncé disparaît. */ --ch-marque: #d9a75e; --ch-marque-fond: rgba(217, 167, 94, 0.15); } /* ══════════ Le replié se lit comme le déplié ══════════ Le corps d'un volet est atténué (`--mr-text-muted`) : c'est voulu, il passe au second plan. Mais les MARQUES y perdaient leur travail — un chiffre en gras dans un volet ressortait moins qu'un mot courant dans la bulle, et on se retrouvait avec quatre lignes de gris uniforme. L'atténuation reste sur le texte courant ; les trois marques reprennent leur pleine valeur. C'est tout l'objet de la grammaire : le gras porte le chiffre, le pointillé le terme de métier, le surlignage la conclusion. Un volet qui les efface n'a plus qu'un titre pour se distinguer. */ .ch-volet > div strong { font-weight: 700; color: var(--mr-text-strong); } .ch-volet > div u { text-decoration: none; box-shadow: inset 0 -2px 0 var(--ch-marque); padding-bottom: 1px; color: var(--mr-text); } .ch-volet > div mark { background: var(--ch-marque-fond); color: var(--mr-text); box-shadow: inset 3px 0 0 var(--ch-marque); padding: 0.15em 0.4em 0.15em 0.55em; border-radius: 0 4px 4px 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Les puces d'un volet : le point de conduite manquait, et trois lignes d'affilée s'y lisaient comme un paragraphe coupé au hasard. */ .ch-volet > div ul { margin: 0.35rem 0 0.5rem; padding-left: 1.05rem; } .ch-volet > div li { margin: 0.15rem 0; }