Les interfaces qui exposent un modele de langage. Quatre regles : la reponse arrive en continu (une reponse qui apparait d'un bloc est lue comme une panne), toute affirmation factuelle porte sa source, le chat n'est pas la seule forme — c'est meme le schema le plus sur-applique de 2026 — et un texte genere est toujours signale comme tel.
A. Conversation
Fil, generation en cours, sources citees, raisonnement depliable, zone de saisie, suggestions de depart.
Quelles aides pour remplacer une chaudiere fioul dans une maison de 1978 ?
IA
Trois dispositifs se cumulent pour ce cas :
MaPrimeRenov — de 3 000 a 5 000 EUR selon le revenu fiscal de reference du foyer.
Certificats d'economie d'energie — environ 400 a 800 EUR, verses par le fournisseur.
TVA a 5,5 % — au lieu de 10 %, sur la fourniture et la pose.
Le reste a charge moyen constate se situe entre 1 800 et 3 200 EUR pour une pompe a chaleur air/eau de 11 kW.
Fil de conversation
La forme de base. Les messages de l'utilisateur sont alignes a droite et encadres, ceux du modele a gauche et sans cadre : la reponse doit se lire comme du texte, pas comme une bulle.
Voir le codeMasquer le code
<div class="ia-fil">
<div class="ia-msg ia-msg--moi"><div>Quelles aides pour remplacer une chaudiere fioul dans une maison de 1978 ?</div></div>
<div class="ia-msg">
<span class="ia-avatar">IA</span>
<div>
<p>Trois dispositifs se cumulent pour ce cas :</p>
<ul><li><strong>MaPrimeRenov</strong> — de 3 000 a 5 000 EUR selon le revenu fiscal de reference du foyer.</li>
<li><strong>Certificats d'economie d'energie</strong> — environ 400 a 800 EUR, verses par le fournisseur.</li>
<li><strong>TVA a 5,5 %</strong> — au lieu de 10 %, sur la fourniture et la pose.</li></ul>
<p>Le reste a charge moyen constate se situe entre 1 800 et 3 200 EUR pour une pompe a chaleur air/eau de 11 kW.</p>
<div class="ia-actions"><button class="btn btn--icone btn--fantome btn--sm" aria-label="Copier"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button><button class="btn btn--icone btn--fantome btn--sm" aria-label="Reponse utile"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></button><button class="btn btn--icone btn--fantome btn--sm" aria-label="Reponse a revoir"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg></button><button class="btn btn--fantome btn--sm"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6"/></svg> Regenerer</button></div>
</div>
</div>
</div>
les messages du modele n'ont pas de bulle : c'est du texte, il doit se lire comme tel
IA
Trois dispositifs se cumulent pour ce cas :
Le premier est MaPrimeRenov, dont le montant depend du revenu fiscal de
Reponse en cours de generation
Le curseur clignotant en fin de texte est devenu le signe que le systeme travaille. La hauteur du bloc grandit en continu : le contenu qui suit ne doit jamais sauter d'un coup.
Voir le codeMasquer le code
<div class="ia-fil">
<div class="ia-msg">
<span class="ia-avatar">IA</span>
<div>
<p>Trois dispositifs se cumulent pour ce cas :</p>
<p>Le premier est <strong>MaPrimeRenov</strong>, dont le montant depend du revenu fiscal de<span class="ia-curseur"></span></p>
<button class="btn btn--secondaire btn--sm"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg> Arreter la generation</button>
</div>
</div>
</div>
un curseur en ::after clignotant + un bouton d'arret toujours accessible
IA
MaPrimeRenov couvre de 3 000 a 5 000 EUR pour une pompe a chaleur air/eau selon le revenu du foyer1. La TVA reduite a 5,5 % s'applique si l'attestation est signee avant le debut des travaux2.
Chaque affirmation factuelle porte un renvoi numerote, et les sources sont listees sous la reponse. C'est ce qui separe une reponse verifiable d'une affirmation.
Voir le codeMasquer le code
<div class="ia-fil">
<div class="ia-msg">
<span class="ia-avatar">IA</span>
<div>
<p>MaPrimeRenov couvre de 3 000 a 5 000 EUR pour une pompe a chaleur air/eau selon le revenu du foyer<a href="#" class="ia-renvoi">1</a>. La TVA reduite a 5,5 % s'applique si l'attestation est signee avant le debut des travaux<a href="#" class="ia-renvoi">2</a>.</p>
<div class="ia-sources">
<span>Sources</span>
<a href="#"><b>1</b><span>Bareme MaPrimeRenov 2026<small>anah.gouv.fr</small></span></a>
<a href="#"><b>2</b><span>Article 279-0 bis du CGI<small>legifrance.gouv.fr</small></span></a>
</div>
</div>
</div>
</div>
le renvoi est un lien inline en exposant, la source porte son domaine
IA
Raisonnement 4 etapes — 6 s
Identification du cas : maison individuelle de 1978, chauffage fioul.
Recherche des dispositifs applicables au 6 septembre 2026.
Verification du cumul MaPrimeRenov et CEE : autorise.
Calcul du reste a charge sur la base d'un devis moyen de 4 280 EUR.
Le reste a charge estime se situe entre 1 800 et 3 200 EUR selon votre revenu fiscal de reference.
Raisonnement depliable
Le detail du cheminement, replie par defaut. Il rassure ceux qui veulent verifier sans encombrer la lecture de ceux qui veulent la reponse.
Voir le codeMasquer le code
<div class="ia-fil">
<div class="ia-msg">
<span class="ia-avatar">IA</span>
<div>
<details class="ia-raison">
<summary><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6"/></svg> Raisonnement <em>4 etapes — 6 s</em></summary>
<ol>
<li>Identification du cas : maison individuelle de 1978, chauffage fioul.</li>
<li>Recherche des dispositifs applicables au 6 septembre 2026.</li>
<li>Verification du cumul MaPrimeRenov et CEE : autorise.</li>
<li>Calcul du reste a charge sur la base d'un devis moyen de 4 280 EUR.</li>
</ol>
</details>
<p>Le reste a charge estime se situe entre 1 800 et 3 200 EUR selon votre revenu fiscal de reference.</p>
</div>
</div>
</div>
un <details> natif, replie, avec la duree du raisonnement en resume
Devis LTP-2026-103.pdf
Entree pour envoyer, Maj+Entree pour aller a la ligne
Zone de saisie
Le champ grandit avec le texte, accepte les pieces jointes, et le bouton d'envoi n'est actif que si quelque chose a ete saisi. Entree envoie, Maj+Entree passe a la ligne.
des suggestions tirees du contexte, pas des exemples generiques
B. Au-dela de la conversation
Action en ligne sur un champ, suggestion en gris dans la saisie, resume genere, etats, retour utilisateur motive, comparaison de propositions.
Depose de la chaudiere fioul existante, installation d'une pompe a chaleur air/eau de 11 kW, evacuation et neutralisation de la cuve a fioul selon la reglementation en vigueur.
Action en ligne
Le contraire du chat : un bouton unique sur un champ existant. Pas de conversation, pas de fenetre, un resultat directement utilisable et un retour arriere.
Voir le codeMasquer le code
<div class="demo-col demo-col--large">
<div class="champ">
<label class="champ__label">Description des travaux</label>
<div class="ia-inline">
<textarea class="saisie" rows="3">Depose chaudiere fioul, pose PAC 11kw, evacuation cuve</textarea>
<div class="ia-inline__outils">
<button class="btn btn--secondaire btn--dense"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6"/></svg> Reformuler</button>
<button class="btn btn--secondaire btn--dense">Rallonger</button>
<button class="btn btn--secondaire btn--dense">Corriger</button>
</div>
</div>
</div>
<div class="champ">
<label class="champ__label">Resultat propose <span class="ia-marque">Genere</span></label>
<div class="ia-propose">
<p>Depose de la chaudiere fioul existante, installation d'une pompe a chaleur air/eau de 11 kW, evacuation et neutralisation de la cuve a fioul selon la reglementation en vigueur.</p>
<div class="ia-propose__pied">
<button class="btn btn--plein btn--dense">Remplacer le texte</button>
<button class="btn btn--fantome btn--dense">Garder l'original</button>
<button class="btn btn--fantome btn--dense"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6"/></svg> Autre proposition</button>
</div>
</div>
</div>
</div>
le texte propose ne remplace jamais l'original sans un clic explicite
Relance concernant votre devis du 12 aout — pompe a chaleurTab
La proposition s'appuie sur le dossier ouvert. Tab pour l'accepter.
Suggestion dans le champ
Le texte propose apparait en gris a la suite de la saisie. La touche Tab l'accepte, tout le reste l'ignore : la suggestion ne doit jamais gener la frappe.
Voir le codeMasquer le code
<div class="champ" style="max-width:520px">
<label class="champ__label">Objet du courriel</label>
<div class="ia-fantome">
<span class="ia-fantome__saisi">Relance concernant votre devis</span><span class="ia-fantome__propose"> du 12 aout — pompe a chaleur</span>
<kbd class="btn__kbd">Tab</kbd>
</div>
<span class="champ__aide">La proposition s'appuie sur le dossier ouvert. Tab pour l'accepter.</span>
</div>
le texte propose est dans le meme flux, en couleur attenuee, non selectionnable
Resume generea partir de 12 evenements — il y a 4 minutes
Le dossier a ete signe le 12 aout pour 4 280 EUR TTC. Deux pieces manquent encore, le RIB et un justificatif de domicile de moins de trois mois. La pose est planifiee au 24 septembre avec l'equipe Nord. Un rappel de rehausse pour l'unite exterieure a ete note par Sophie M. le 6 septembre.
Resume genere
Un condense place en tete d'un contenu long. Il porte sa mention, son horodatage, et un lien vers la source : sans quoi on ne sait plus ce qui a ete ecrit par une personne.
Voir le codeMasquer le code
<div class="ia-resume">
<div class="ia-resume__tete"><span class="ia-marque"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6"/></svg> Resume genere</span><small>a partir de 12 evenements — il y a 4 minutes</small></div>
<p>Le dossier a ete signe le 12 aout pour 4 280 EUR TTC. Deux pieces manquent encore, le RIB et un justificatif de domicile de moins de trois mois. La pose est planifiee au 24 septembre avec l'equipe Nord. Un rappel de rehausse pour l'unite exterieure a ete note par Sophie M. le 6 septembre.</p>
<div class="ia-resume__pied">
<button class="btn btn--fantome btn--dense"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg> Voir les 12 evenements</button>
<span class="cat-head__spacer"></span>
<button class="btn btn--icone btn--fantome btn--sm" aria-label="Resume utile"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg></button>
<button class="btn btn--icone btn--fantome btn--sm" aria-label="Resume a revoir"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg></button>
</div>
</div>
Le message et le contexte du dossier seront transmis.
Retour sur une reponse
Le pouce ne suffit pas : un retour negatif sans motif n'apprend rien. Trois motifs preremplis et un champ libre suffisent a rendre le signal exploitable.
des motifs preremplis : un pouce baisse seul n'est pas exploitable
Comparaison de propositions
Deux versions cote a cote quand la reponse est subjective : un ton de courriel, une formulation commerciale. Choisir vaut mieux que regenerer en boucle.
Voir le codeMasquer le code
<div class="ia-compare">
<label class="ia-option">
<input type="radio" name="prop" checked>
<span class="ia-option__tete"><b>Proposition A</b><em>Direct</em></span>
<p>Bonjour, votre devis du 12 aout est toujours en attente. Souhaitez-vous que nous en reparlions cette semaine ?</p>
</label>
<label class="ia-option">
<input type="radio" name="prop">
<span class="ia-option__tete"><b>Proposition B</b><em>Attentionne</em></span>
<p>Bonjour, j'espere que vous allez bien. Je reviens vers vous au sujet du devis transmis le 12 aout. N'hesitez pas si vous avez la moindre question.</p>
</label>
</div>