/* ============================================================================
   BIBLIOTHEQUE UI JABS  -  ia.css
   Depend de : theme.css, buttons.css, forms.css

   Les interfaces qui exposent un modele de langage. Elles se sont stabilisees
   vite, et un utilisateur qui a deja vu ChatGPT ou Perplexity attend les memes
   reperes.

   Quatre regles tenues partout dans ce fichier :
   1. La reponse arrive en continu. Une reponse qui apparait d'un bloc apres
      dix secondes est lue comme une panne, meme si elle est plus rapide.
   2. Toute affirmation factuelle porte sa source. Sans source, l'utilisateur
      ne peut pas verifier, et ne peut donc pas faire confiance.
   3. Le chat n'est pas la seule forme. Une action en ligne, une suggestion
      dans un champ ou un bouton unique valent souvent mieux qu'une
      conversation : c'est le schema le plus sur-applique de 2026.
   4. On dit toujours ce qui a ete genere. Un texte produit par un modele est
      signale comme tel, sans exception.
   ========================================================================= */

/* ===========================================================================
   FAMILLE A  -  CONVERSATION
   ======================================================================== */

/* @v IA-A1
@nom Fil de conversation
@usage 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.
@large
@html
<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> &mdash; de 3 000 a 5 000 EUR selon le revenu fiscal de reference du foyer.</li>
      <li><strong>Certificats d'economie d'energie</strong> &mdash; environ 400 a 800 EUR, verses par le fournisseur.</li>
      <li><strong>TVA a 5,5 %</strong> &mdash; 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">{{icon:copy}}</button><button class="btn btn--icone btn--fantome btn--sm" aria-label="Reponse utile">{{icon:check}}</button><button class="btn btn--icone btn--fantome btn--sm" aria-label="Reponse a revoir">{{icon:alerte}}</button><button class="btn btn--fantome btn--sm">{{icon:rotation}} Regenerer</button></div>
    </div>
  </div>
</div>
@tw les messages du modele n'ont pas de bulle : c'est du texte, il doit se lire comme tel
@end */
.ia-fil { display: flex; flex-direction: column; gap: var(--sp-5); width: 100%; max-width: 720px; }
.ia-msg { display: flex; gap: var(--sp-3); }
.ia-msg--moi { justify-content: flex-end; }
.ia-msg--moi > div {
  max-width: 78%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
  background: var(--c-primary-soft);
  color: var(--c-text);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.ia-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-md);
  background: var(--c-text);
  color: var(--c-surface);
  font-size: 10.5px; font-weight: var(--fw-bold);
}
.ia-msg > div { min-width: 0; }
.ia-msg p { margin: 0 0 var(--sp-3); font-size: var(--fs-md); line-height: 1.65; color: var(--c-text); }
.ia-msg ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.ia-msg li { margin-bottom: 6px; font-size: var(--fs-md); line-height: 1.6; color: var(--c-text-soft); }
.ia-msg li strong { color: var(--c-text); }
.ia-actions { display: flex; flex-wrap: wrap; gap: 2px; margin-top: var(--sp-2); opacity: .55; transition: opacity var(--t-fast); }
.ia-msg:hover .ia-actions { opacity: 1; }
/* @endv */

/* @v IA-A2
@nom Reponse en cours de generation
@usage 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.
@large
@html
<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">{{icon:x}} Arreter la generation</button>
    </div>
  </div>
</div>
@tw un curseur en ::after clignotant + un bouton d'arret toujours accessible
@end */
.ia-curseur {
  display: inline-block;
  width: 8px; height: 1em;
  margin-left: 2px;
  vertical-align: -.14em;
  background: var(--c-primary);
  border-radius: 1px;
  animation: ia-clignote 1s steps(2) infinite;
}
@keyframes ia-clignote { 50% { opacity: 0; } }
/* @endv */

/* @v IA-A3
@nom Sources citees
@usage 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.
@large
@html
<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>
@tw le renvoi est un lien inline en exposant, la source porte son domaine
@end */
.ia-renvoi {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  margin-left: 2px;
  padding: 0 4px;
  border-radius: var(--r-xs);
  background: var(--c-primary-soft);
  color: var(--c-primary-ink);
  font-size: 10px; font-weight: var(--fw-bold);
  text-decoration: none;
  vertical-align: super;
}
.ia-renvoi:hover { background: var(--c-primary); color: var(--c-primary-text); }
.ia-sources { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.ia-sources > span { font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-muted); }
.ia-sources a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-surface);
  text-decoration: none;
  max-width: 260px;
}
.ia-sources a:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.ia-sources b { font-size: 10px; color: var(--c-primary); flex: none; }
.ia-sources a > span { display: flex; flex-direction: column; min-width: 0; }
.ia-sources a span span, .ia-sources a > span { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-sources small { font-size: 10px; font-weight: var(--fw-normal); color: var(--c-text-muted); }
/* @endv */

/* @v IA-A4
@nom Raisonnement depliable
@usage Le detail du cheminement, replie par defaut. Il rassure ceux qui veulent verifier sans encombrer la lecture de ceux qui veulent la reponse.
@large
@html
<div class="ia-fil">
  <div class="ia-msg">
    <span class="ia-avatar">IA</span>
    <div>
      <details class="ia-raison">
        <summary>{{icon:rotation}} Raisonnement <em>4 etapes &mdash; 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>
@tw un <details> natif, replie, avec la duree du raisonnement en resume
@end */
.ia-raison { margin-bottom: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.ia-raison summary {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--c-text-soft);
  cursor: pointer;
  list-style: none;
}
.ia-raison summary::-webkit-details-marker { display: none; }
.ia-raison summary svg { width: 14px; height: 14px; }
.ia-raison summary em { margin-left: auto; font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--c-text-muted); }
.ia-raison ol { margin: 0; padding: 0 var(--sp-4) var(--sp-3) var(--sp-8); }
.ia-raison li { margin-bottom: 5px; font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.5; }
/* @endv */

/* @v IA-A5
@nom Zone de saisie
@usage 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.
@large
@html
<div class="ia-saisie">
  <div class="ia-saisie__jointes">
    <span class="btn-etiquette">{{icon:f-pdf}} Devis LTP-2026-103.pdf <button aria-label="Retirer">{{icon:x}}</button></span>
  </div>
  <textarea class="ia-saisie__champ" rows="2" placeholder="Posez une question sur ce dossier">Quelles aides pour ce client ?</textarea>
  <div class="ia-saisie__pied">
    <span class="ia-saisie__outils">
      <button class="btn btn--icone btn--fantome btn--sm" aria-label="Joindre un fichier">{{icon:upload}}</button>
      <button class="btn btn--fantome btn--sm">{{icon:file}} Contexte : dossier 2026-103</button>
    </span>
    <span class="ia-saisie__droite">
      <em>Entree pour envoyer, Maj+Entree pour aller a la ligne</em>
      <button class="btn btn--plein btn--icone btn--sm" aria-label="Envoyer">{{icon:arrow-right}}</button>
    </span>
  </div>
</div>
@tw field-sizing: content fait grandir le champ sans JavaScript
@end */
.ia-saisie {
  width: 100%; max-width: 720px;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-2);
}
.ia-saisie:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent); }
.ia-saisie__jointes { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ia-saisie__champ {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.55;
  resize: none;
  outline: none;
  /* Le champ grandit avec son contenu, sans mesure JavaScript. */
  field-sizing: content;
  max-height: 180px;
}
.ia-saisie__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); flex-wrap: wrap; }
.ia-saisie__outils, .ia-saisie__droite { display: flex; align-items: center; gap: var(--sp-2); }
.ia-saisie__droite em { font-style: normal; font-size: 10.5px; color: var(--c-text-muted); }
@media (max-width: 620px) { .ia-saisie__droite em { display: none; } }
/* @endv */

/* @v IA-A6
@nom Suggestions de depart
@usage Un ecran de conversation vide ne dit pas ce qu'on peut demander. Quatre exemples concrets, tires du contexte reel, valent mieux qu'un champ seul.
@large
@html
<div class="ia-vide">
  <span class="ia-avatar ia-avatar--gros">IA</span>
  <strong>Assistant du dossier 2026-103</strong>
  <p>Il connait le client, les operations, les documents et l'historique de ce dossier.</p>
  <div class="ia-suggestions">
    <button>{{icon:file}} Quelles aides pour ce client ?<small>Calcule d'apres le revenu fiscal saisi</small></button>
    <button>{{icon:mail}} Rediger la relance du devis<small>Ton professionnel, 5 lignes</small></button>
    <button>{{icon:alerte}} Que manque-t-il au dossier ?<small>Verifie les pieces obligatoires</small></button>
    <button>{{icon:archive}} Resumer l'historique<small>12 evenements depuis le 5 aout</small></button>
  </div>
</div>
@tw des suggestions tirees du contexte, pas des exemples generiques
@end */
.ia-vide { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); width: 100%; text-align: center; padding: var(--sp-6) 0; }
.ia-avatar--gros { width: 48px; height: 48px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.ia-vide strong { margin-top: var(--sp-2); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.ia-vide p { margin: 0; max-width: 44ch; font-size: var(--fs-md); color: var(--c-text-soft); }
.ia-suggestions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-2); width: 100%; max-width: 620px; margin-top: var(--sp-4); }
.ia-suggestions button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-family: var(--font-ui);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.ia-suggestions button svg { width: 15px; height: 15px; color: var(--c-primary); }
.ia-suggestions small { font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--c-text-muted); }
.ia-suggestions button:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
/* @endv */

/* ===========================================================================
   FAMILLE B  -  AU-DELA DE LA CONVERSATION
   Le chat est le schema le plus sur-applique de 2026. Souvent, un bouton
   suffit.
   ======================================================================== */

/* @v IA-B1
@nom Action en ligne
@usage 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.
@large
@html
<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">{{icon:rotation}} 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">{{icon:rotation}} Autre proposition</button>
      </div>
    </div>
  </div>
</div>
@tw le texte propose ne remplace jamais l'original sans un clic explicite
@end */
.ia-inline { position: relative; }
.ia-inline__outils { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.ia-propose {
  padding: var(--sp-3);
  border: 1px solid var(--c-primary);
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
}
.ia-propose p { margin: 0 0 var(--sp-3); font-size: var(--fs-md); line-height: 1.6; color: var(--c-text); }
.ia-propose__pied { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ia-marque {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--c-accent);
  color: #fff;
  font-size: 9.5px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .05em;
}
/* @endv */

/* @v IA-B2
@nom Suggestion dans le champ
@usage 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.
@large
@html
<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 &mdash; 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>
@tw le texte propose est dans le meme flux, en couleur attenuee, non selectionnable
@end */
.ia-fantome {
  display: flex; align-items: center;
  min-height: var(--h-md);
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-primary);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-size: var(--fs-md);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 16%, transparent);
}
.ia-fantome__saisi { color: var(--c-text); }
.ia-fantome__propose { color: var(--c-text-muted); user-select: none; }
.ia-fantome kbd { margin-left: auto; }
/* @endv */

/* @v IA-B3
@nom Resume genere
@usage 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.
@large
@html
<div class="ia-resume">
  <div class="ia-resume__tete"><span class="ia-marque">{{icon:rotation}} Resume genere</span><small>a partir de 12 evenements &mdash; 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">{{icon:oeil}} Voir les 12 evenements</button>
    <span class="cat-head__spacer"></span>
    <button class="btn btn--icone btn--fantome btn--sm" aria-label="Resume utile">{{icon:check}}</button>
    <button class="btn btn--icone btn--fantome btn--sm" aria-label="Resume a revoir">{{icon:alerte}}</button>
  </div>
</div>
@tw un liser lateral et une mention explicite : jamais de texte genere anonyme
@end */
.ia-resume {
  width: 100%; max-width: 640px;
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.ia-resume__tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ia-resume__tete small { font-size: var(--fs-xs); color: var(--c-text-muted); }
.ia-resume p { margin: 0 0 var(--sp-3); font-size: var(--fs-md); line-height: 1.65; color: var(--c-text); }
.ia-resume__pied { display: flex; align-items: center; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--c-border); }
/* @endv */

/* @v IA-B4
@nom Etats de generation
@usage Quatre etats a couvrir : attente, generation, resultat, echec. L'echec dit ce qui s'est passe et propose de reessayer, jamais un code d'erreur seul.
@large
@html
<div class="demo-col demo-col--large">
  <div class="ia-etat"><span class="ia-etat__puce">{{icon:rotation}}</span><div><strong>Analyse du dossier</strong><small>Lecture de 12 documents...</small></div></div>
  <div class="ia-etat is-encours"><span class="ia-etat__puce"><span class="btn__spin"></span></span><div><strong>Redaction en cours</strong><small>Environ 8 secondes</small></div><button class="btn btn--fantome btn--dense">Arreter</button></div>
  <div class="ia-etat is-fait"><span class="ia-etat__puce">{{icon:check}}</span><div><strong>Resume genere</strong><small>4 paragraphes &mdash; 6,2 secondes</small></div><button class="btn btn--secondaire btn--dense">Ouvrir</button></div>
  <div class="ia-etat is-echec"><span class="ia-etat__puce">{{icon:alerte}}</span><div><strong>Generation interrompue</strong><small>Le service n'a pas repondu dans le delai. Aucune donnee n'a ete perdue.</small></div><button class="btn btn--secondaire btn--dense">{{icon:rotation}} Reessayer</button></div>
</div>
@tw quatre etats, chacun avec sa suite possible
@end */
.ia-etat {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.ia-etat > div { flex: 1; min-width: 0; }
.ia-etat strong { display: block; font-size: var(--fs-md); font-weight: var(--fw-semi); }
.ia-etat small { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.45; }
.ia-etat__puce {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-full);
  background: var(--c-surface-3);
  color: var(--c-text-soft);
}
.ia-etat__puce svg { width: 16px; height: 16px; }
.ia-etat__puce .btn__spin { width: 15px; height: 15px; border-color: color-mix(in srgb, var(--c-primary) 30%, transparent); border-top-color: var(--c-primary); }
.ia-etat.is-encours { border-color: var(--c-primary); }
.ia-etat.is-fait .ia-etat__puce { background: var(--c-success-soft); color: var(--c-success); }
.ia-etat.is-echec { border-color: var(--c-danger); background: var(--c-danger-soft); }
.ia-etat.is-echec .ia-etat__puce { background: var(--c-danger); color: #fff; }
/* @endv */

/* @v IA-B5
@nom Retour sur une reponse
@usage 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.
@large
@html
<div class="ia-retour">
  <div class="ia-retour__tete">{{icon:alerte}}<strong>Qu'est-ce qui n'allait pas ?</strong><button class="btn btn--fermer" aria-label="Fermer">{{icon:x}}</button></div>
  <div class="demo-row" style="justify-content:flex-start">
    <button class="btn btn--chip" aria-pressed="true">{{icon:check}} Information fausse</button>
    <button class="btn btn--chip" aria-pressed="false">Hors sujet</button>
    <button class="btn btn--chip" aria-pressed="false">Source manquante</button>
    <button class="btn btn--chip" aria-pressed="false">Trop long</button>
  </div>
  <textarea class="saisie" rows="2" placeholder="Precisez si vous le souhaitez (facultatif)"></textarea>
  <div class="ia-retour__pied"><small>Le message et le contexte du dossier seront transmis.</small><button class="btn btn--plein btn--sm">Envoyer</button></div>
</div>
@tw des motifs preremplis : un pouce baisse seul n'est pas exploitable
@end */
.ia-retour { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; max-width: 560px; padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-2); }
.ia-retour__tete { display: flex; align-items: center; gap: var(--sp-2); }
.ia-retour__tete svg { width: 17px; height: 17px; color: var(--c-warn); }
.ia-retour__tete strong { flex: 1; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.ia-retour__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ia-retour__pied small { font-size: var(--fs-xs); color: var(--c-text-muted); }
/* @endv */

/* @v IA-B6
@nom Comparaison de propositions
@usage Deux versions cote a cote quand la reponse est subjective : un ton de courriel, une formulation commerciale. Choisir vaut mieux que regenerer en boucle.
@large
@html
<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>
@tw has-[:checked]:border-blue-600, le choix vaut mieux qu'une regeneration
@end */
.ia-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); width: 100%; }
.ia-option {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.ia-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.ia-option__tete { display: flex; align-items: center; gap: var(--sp-2); }
.ia-option b { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.ia-option em { font-style: normal; font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); padding: 2px 7px; border-radius: var(--r-full); background: var(--c-surface-3); }
.ia-option p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--c-text-soft); }
.ia-option:has(input:checked) { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary-soft) 45%, var(--c-surface)); }
@media (max-width: 640px) { .ia-compare { grid-template-columns: 1fr; } }
/* @endv */