/* La réponse MISE EN PAGE (v1.139.0) : ce que le compilateur HTML produit.

   app.css n'habillait que ce que le rendu markdown sait produire — des
   titres h4 et plus petits, des listes, du code. La mise en page, elle,
   ouvre des sections (h2/h3) et dresse des tableaux : sans cette feuille
   ils sortiraient aux tailles par défaut du navigateur, énormes dans une
   bulle de chat. C'était le défaut qu'on voulait corriger, pas l'inverse.

   Les couleurs viennent des variables d'app.css (thème clair/sombre). */

/* Les intertitres parlent dans la voix de l'interface : ils rangent, la
   prose de pepi raconte. */
.msg.bot .body h2,
.msg.bot .body h3 {
  font: 650 16px/1.35 var(--font-ui);
  color: var(--ink);
  margin: 1.2em 0 0.45em;
}
.msg.bot .body h2 { font-size: 17px; }
/* Un premier titre ne pousse pas la réponse vers le bas. */
.msg.bot .body h2:first-child,
.msg.bot .body h3:first-child { margin-top: 0; }

/* Un tableau de mise en page : lisible sur téléphone, donc il défile
   horizontalement plutôt que de compresser ses colonnes.

   `display: block` est ce qui rend ce défilement possible : un <table> ne
   sait pas déborder dans sa propre boîte, il élargit celle de son parent.
   Jusqu'au 15/10/2026 c'est le CANVAS ENTIER qui s'élargissait, donc qui
   défilait en diagonale — l'intention écrite ici n'était pas appliquée, et
   lire une réponse à tableau au doigt était devenu pénible. `max-content`
   borné à 100 % : le tableau prend la largeur qu'il lui faut, jamais plus
   que la colonne de lecture, et c'est LUI qui défile. */
.msg.bot .body table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 0.8em;
  font: 450 14px/1.45 var(--font-ui);
}
.msg.bot .body th,
.msg.bot .body td {
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.msg.bot .body th {
  font: var(--fw-strong) 12px/1.3 var(--font-ui);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.msg.bot .body tr:last-child td { border-bottom: none; }
.msg.bot .body caption {
  caption-side: top;
  text-align: left;
  color: var(--muted);
  font-size: 0.85em;
  padding-bottom: 0.3em;
}

/* Même cause, autre coupable : une URL ou un identifiant insécable élargit
   la colonne de lecture. Il se coupe plutôt que de faire déborder. */
.msg.bot .body { overflow-wrap: anywhere; }

.msg.bot .body blockquote {
  margin: 0 0 0.7em;
  font-style: italic;
  color: var(--ink-2);
}
.msg.bot .body figure { margin: 0 0 0.8em; }
.msg.bot .body figcaption {
  color: var(--muted);
  font-size: 0.82em;
  margin-top: 0.3em;
}
.msg.bot .body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.msg.bot .body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1em 0;
}
.msg.bot .body dl { margin: 0 0 0.7em; }
.msg.bot .body dt { font-weight: 650; }
.msg.bot .body dd { margin: 0 0 0.4em 1em; color: var(--muted); }