* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f5f6f8; --panel: #ffffff; --border: #e2e5ea;
  --primary: #1a5fb4; --primary-dark: #14488a;
  --text: #23282e; --muted: #6b7280;
  --user-bubble: #1a5fb4; --assistant-bubble: #ffffff;
}
body { font-family: "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); height: 100vh; }
.hidden { display: none !important; }
button { cursor: pointer; font: inherit; }

/* --- Login --- */
.login-screen { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-box { background: var(--panel); padding: 40px; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.08); width: 340px; display: flex; flex-direction: column; gap: 12px; }
.login-box h1 { font-size: 26px; text-align: center; }
.login-box .subtitle { text-align: center; color: var(--muted); margin-bottom: 8px; }
.login-box input { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; }
.login-box button { padding: 10px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-size: 15px; }
.error { color: #c0392b; font-size: 13px; text-align: center; min-height: 1em; }

/* --- Écran de configuration véhicule --- */
.config-screen { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.config-box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.06); width: 720px; max-width: 100%; padding: 30px; }
.config-header { display: flex; justify-content: space-between; align-items: center; }
.config-header h1 { font-size: 24px; }
.config-form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; max-width: 420px; }
.config-form label { font-weight: 600; font-size: 14px; margin-top: 6px; }
.config-form input { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; }
.config-or { text-align: center; color: var(--muted); font-size: 13px; margin: 4px 0; }
.config-manual { margin-top: 14px; font-size: 14px; }
.config-manual summary { cursor: pointer; color: var(--muted); }
.config-manual label { display: block; margin: 10px 0 4px; font-weight: 600; }
.config-manual input { margin-bottom: 8px; }
#config-skip { text-align: center; margin-top: 8px; }
.config-result { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 18px; }
.config-result h3 { margin-bottom: 6px; }
.config-result h4 { font-size: 14px; margin-bottom: 6px; }
.config-cols { display: flex; gap: 24px; flex-wrap: wrap; margin: 14px 0; }
.config-cols > div { flex: 1; min-width: 240px; }
.config-cols ul { margin-left: 18px; font-size: 14px; }
.config-result .muted { color: var(--muted); }
.config-result details { margin: 10px 0; font-size: 13px; }
.config-result table { margin-top: 8px; }
.config-result .btn { margin-top: 16px; }

.vehicle-banner { display: flex; align-items: center; justify-content: space-between; padding: 8px 12%; background: #eef4fb; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.vehicle-banner .btn-link { color: var(--primary); }

/* --- Layout --- */
.app { display: flex; height: 100vh; }
.sidebar { width: 280px; background: #20242b; color: #d5d9e0; display: flex; flex-direction: column; }
.sidebar-header { padding: 14px; }
.btn-primary { width: 100%; padding: 10px; background: var(--primary); color: #fff; border: none; border-radius: 8px; }
.btn-primary:hover { background: var(--primary-dark); }
.conv-list { flex: 1; overflow-y: auto; padding: 0 8px; }
.conv-item { display: flex; align-items: center; padding: 9px 10px; border-radius: 7px; margin-bottom: 2px; font-size: 14px; }
.conv-item:hover, .conv-item.active { background: #2e3440; }
.conv-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.conv-del { background: none; border: none; color: #8a919e; visibility: hidden; }
.conv-item:hover .conv-del { visibility: visible; }
.sidebar-footer { padding: 14px; border-top: 1px solid #333a45; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.sidebar-footer a { color: #9ec1f0; text-decoration: none; }
.btn-link { background: none; border: none; color: #8a919e; text-align: left; padding: 0; }
.btn-link:hover { color: #fff; }

/* --- Chat --- */
.chat-area { flex: 1; display: flex; flex-direction: column; }
.messages { flex: 1; overflow-y: auto; padding: 24px 12%; }
.welcome { text-align: center; margin-top: 8vh; color: var(--muted); }
.welcome h2 { color: var(--text); margin-bottom: 10px; }
.examples { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; align-items: center; }
.example { background: var(--panel); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; max-width: 560px; color: var(--text); }
.example:hover { border-color: var(--primary); }

.msg { margin-bottom: 18px; display: flex; flex-direction: column; }
.msg.user { align-items: flex-end; }
.msg.assistant { align-items: flex-start; }
.bubble { max-width: 85%; padding: 12px 16px; border-radius: 14px; line-height: 1.55; font-size: 15px; }
.msg.user .bubble { background: var(--user-bubble); color: #fff; white-space: pre-wrap; }
.msg.assistant .bubble { background: var(--assistant-bubble); border: 1px solid var(--border); }
.bubble p { margin: 6px 0; }
.bubble h3, .bubble h4 { margin: 12px 0 6px; }
.bubble ul { margin: 6px 0 6px 22px; }
.bubble pre { background: #22272e; color: #e6e8eb; padding: 12px; border-radius: 8px; overflow-x: auto; margin: 8px 0; font-size: 13px; }
.bubble code { font-family: Consolas, monospace; font-size: 13px; background: rgba(27,31,35,.07); padding: 1px 4px; border-radius: 4px; }
.bubble pre code { background: none; padding: 0; }
.schema-img { max-width: 100%; border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; }
.typing { color: var(--muted); font-style: italic; }
.tool-status { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.tool-status em { color: #8a919e; }
.feedback-bar { margin-top: 4px; display: flex; gap: 6px; }
.feedback-bar button { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-size: 13px; }
.feedback-bar button:hover { background: #eef2f7; }
.fb-done { font-size: 12.5px; color: var(--muted); }
.feedback-bar { align-items: center; flex-wrap: wrap; }
/* Les pouces et le résultat vivent dans un conteneur que le code vide et remplit ; `contents`
   le rend invisible à la mise en page, pour que ses enfants restent des éléments de la barre. */
.fb-notes { display: contents; }
/* Le bouton d'arbre de l'admin (phase E) : à droite, et les constats d'un refus sur une ligne
   à part, en texte brut — ils citent le XML du modèle. */
.fb-arbre-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.fb-arbre-fait { color: #15803d; }
.fb-arbre-constats { flex-basis: 100%; font-size: 12.5px; color: #b45309; white-space: pre-wrap;
                     max-height: 12em; overflow: auto; }
/* Le résultat de la réparation déjà déclaré, sous la réponse. Discret — c'est un rappel, pas
   une alerte — mais CLIQUABLE : sans lui, un clic à côté figeait la donnée pour toujours. */
.fb-resultat { font-size: 12.5px; color: var(--muted); cursor: pointer;
               border: 1px dashed var(--border) !important; border-radius: 6px; }
.fb-resultat.r-resolu { color: #15803d; }
.fb-resultat.r-non_resolu { color: #b45309; }
.fb-retex { font-size: 12.5px; color: var(--muted); font-style: italic;
            max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bloc « alors, cette réparation ? » : le même aux deux endroits où la question se pose (la
   relance au-dessus de la saisie, et la correction sous une réponse notée). */
.resultat-form { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; }
.resultat-choix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resultat-form button[data-r].actif { border-color: var(--primary); color: var(--primary); }
.resultat-form button[data-r].pose { font-weight: 600; }
.retex-zone { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.retex-zone label { font-size: 12.5px; color: var(--muted); }
.retex-zone textarea { resize: vertical; padding: 6px 8px; border: 1px solid var(--border);
                       border-radius: 8px; font: inherit; font-size: 13.5px; }
/* Dans la relance — et là seulement — le champ n'est pas redimensionnable : `.relance` est en
   `overflow: hidden` pour sa transition de fermeture, et un champ agrandi à la souris ferait
   sortir « Enregistrer » du cadre, sans barre de défilement. Bouton invisible = bouton
   inexistant, c'est-à-dire le piège même que ce bloc est censé éviter. Sous une réponse déjà
   notée rien ne clippe : le redimensionnement y reste. */
.relance .retex-zone textarea { resize: none; }
.retex-actions { display: flex; align-items: center; gap: 8px; }
.retex-aide { font-size: 12px; color: var(--muted); }
/* Le bouton d'enregistrement garde son remplissage plein DANS les deux conteneurs : sans
   cette reprise, `.relance button` / `.feedback-bar button` le repeignaient en bouton neutre,
   et l'action principale devenait impossible à distinguer de « Plus tard ». */
.resultat-form .retex-ok, .resultat-form .retex-ok:hover {
  background: var(--primary); color: #fff; border: none; padding: 6px 14px; font-size: 13px; }
.resultat-form .retex-ok:disabled, .resultat-form .retex-ok:disabled:hover {
  background: #b6c2d1; opacity: .8; cursor: not-allowed; }

/* Relance « est-ce que c'était ça ? », juste au-dessus de la saisie. Une seule ligne, au ton
   du compteur de quota : elle informe, elle n'interpelle pas. Aucun fond coloré, aucune
   ombre — elle disparaît à la première frappe, elle n'a pas à se faire remarquer. */
.relance { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           padding: 8px 12% 0; background: var(--panel); font-size: 12.5px; color: var(--muted); }
.relance-q { margin-right: 2px; }
.relance button { background: none; border: 1px solid var(--border); border-radius: 6px;
                  padding: 2px 10px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.relance button:hover { background: #eef2f7; }
.relance .relance-fermer { border: none; margin-left: auto; color: var(--muted); padding: 2px 6px; }
/* Elle s'efface à la première frappe : sans transition, la saisie sautait d'une trentaine de
   pixels sous le curseur au moment exact où le technicien commence à taper. */
/* `max-height` sert la transition, pas la mise en page : il doit rester plus grand que le bloc
   le plus haut (choix + champ de retour d'expérience ouvert), sinon le bouton
   « Enregistrer » se retrouve coupé par `overflow: hidden` — invisible, donc inexistant. */
.relance { transition: opacity .18s ease, max-height .18s ease, padding .18s ease;
           max-height: 340px; opacity: 1; overflow: hidden; }
.relance.partante { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .relance { transition: none; } }

.chat-input { display: flex; gap: 10px; padding: 16px 12%; background: var(--panel); border-top: 1px solid var(--border); }
.chat-input textarea { flex: 1; resize: none; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 15px; }
.chat-input button { padding: 0 22px; background: var(--primary); color: #fff; border: none; border-radius: 10px; font-size: 15px; }
.chat-input button:disabled { opacity: .5; cursor: default; }
/* Compteur de quota, sous la zone de saisie : discret tant qu'il reste des questions. */
.quota { padding: 0 12% 10px; background: var(--panel); font-size: 12.5px; color: var(--muted); }
.quota.bas { color: #b45309; }
.quota.epuise { color: #b91c1c; font-weight: 600; }

/* --- Admin --- */
.admin-page { max-width: 1080px; margin: 0 auto; padding: 24px; }
.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.admin-header a { color: var(--primary); text-decoration: none; }
.tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs button { padding: 8px 16px; border: 1px solid var(--border); background: var(--panel); border-radius: 8px; }
.tabs button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tab-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.tab-panel h3 { margin-bottom: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
.form-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.form-grid input, .form-grid textarea, .form-grid select { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.form-row { display: flex; gap: 10px; }
.form-row > * { flex: 1; }
.btn { padding: 9px 18px; background: var(--primary); color: #fff; border: none; border-radius: 8px; }
.btn-secondary { padding: 8px 14px; background: #eef2f7; color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
.btn-danger { background: none; border: none; color: #c0392b; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: #eef2f7; }
.badge.ok { background: #d9f2e3; color: #14683a; }
.badge.err { background: #fbe0dc; color: #a03024; }
.badge.warn { background: #fdf3d7; color: #8a6d1a; }
.notice { color: var(--muted); font-size: 13.5px; margin: 8px 0; }
/* Refus du serveur affiché sous un formulaire, à la place d'une alerte : le message reste à
   l'écran pendant qu'on corrige la saisie, et il nomme la règle appliquée (le rôle GlobalTool
   qui l'emporte, le garde-fou du dernier administrateur). `.error` ne convient pas : elle est
   centrée pour l'écran de connexion. */
.form-erreur { color: #c0392b; font-size: 13.5px; margin: 8px 0; white-space: pre-wrap; }
.msg-preview { max-width: 420px; max-height: 90px; overflow: hidden; font-size: 13px; color: var(--muted); }
/* Retour d'expérience dans la console : lisible en entier (c'est le contenu de la future
   fiche), mais borné en largeur pour ne pas écraser les autres colonnes. */
.fb-retex-cell { max-width: 280px; font-size: 13px; }

/* --- Vue 3D / Identification composants (features A & B) --- */
.btn-nav {
  display: block; margin-top: 8px; text-align: center; text-decoration: none;
  padding: 8px 10px; border-radius: 8px; background: #eef1f4; color: #044C89;
  font-weight: 600; font-size: 14px; border: 1px solid #dbe3ea;
}
.btn-nav:hover { background: #e2e9f0; }
.photo-btn {
  flex: 0 0 auto; font-size: 20px; line-height: 1; padding: 0 12px;
  background: #eef1f4; border: 1px solid #dbe3ea; border-radius: 8px; cursor: pointer;
}
.photo-btn:hover { background: #e2e9f0; }
/* En écoute : le bouton doit se voir DE LOIN. Un micro resté ouvert sans que le technicien
   s'en aperçoive serait le pire défaut de cette fonction. */
.dictee-btn.ecoute {
  background: #E20D21; border-color: #B00A1A;
  animation: pulse-dictee 1.1s ease-in-out infinite;
}
@keyframes pulse-dictee {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 13, 33, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(226, 13, 33, 0); }
}
@media (prefers-reduced-motion: reduce) { .dictee-btn.ecoute { animation: none; } }
.comp-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: #fafbfc; }
.comp-card h4 { margin: 0 0 6px; color: #044C89; }
.pin-table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.pin-table th, .pin-table td { border: 1px solid #e0e0e0; padding: 4px 6px; text-align: left; }
.pin-table th { background: #f2f2f2; }
.schema-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.schema-thumb { width: 96px; height: 68px; object-fit: cover; border: 1px solid #ccc; border-radius: 4px; }
.comp-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.comp-actions button { font: inherit; border: 0; border-radius: 6px; padding: 7px 11px; cursor: pointer; }
.comp-ask { background: #044C89; color: #fff; }
.comp-3d { background: #e7ebef; }
.muted { color: #888; }

/* --- Modale : proposer une fiche de connaissance --- */
.kb-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.kb-modal-box {
  background: #fff; color: #222; border-radius: 12px; padding: 22px 24px;
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.kb-modal-box h2 { margin: 0 0 4px; color: #044C89; font-size: 19px; }
.kb-modal-box .subtitle { color: #667; font-size: 13.5px; margin: 0 0 14px; text-align: left; }
.kb-modal-box input, .kb-modal-box textarea {
  width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 9px 12px;
  border: 1px solid #d5dbe2; border-radius: 8px; font: inherit;
}
.kb-modal-actions { display: flex; justify-content: flex-end; gap: 12px; align-items: center; }
.kb-modal-actions .btn-link { color: #667; }
.kb-modal-actions .btn-link:hover { color: #044C89; }
.kbp-hint { color: #667; font-size: 12.5px; margin: -4px 0 12px; }
.success { color: #14683a; font-size: 13px; text-align: center; min-height: 1em; }

/* Badge « à valider » (fiches proposées par les techniciens, en attente) */
.badge.pending { background: #fdf3d7; color: #8a6d1a; }
tr.kb-pending td { background: #fffaf0; }

/* Fiches « à revoir » : une source citée a bougé, ou le gabarit n'a pas été rempli.
   Signalement seulement — la fiche reste VALIDÉE et servie à l'assistant. Le liseré de
   gauche et la ligne de raisons doivent donc attirer l'œil sans avoir l'air d'une erreur.

   Sa teinte est DIFFÉRENTE de celle de `.badge.pending` (« à valider »), et volontairement :
   les deux badges se retrouvent côte à côte dans l'onglet, et les deux mots ne veulent pas
   dire la même chose — « à valider » BLOQUE la diffusion, « à revoir » ne la bloque pas. Les
   servir dans le même ambre obligeait à lire le texte pour distinguer les deux notions. */
.badge.revoir { background: #f7e2cb; color: #8a4b0f; }
tr.kb-a-revoir td { background: #fffdf5; }
tr.kb-a-revoir td:first-child { box-shadow: inset 3px 0 0 #d9a520; }
tr.kb-raisons td { background: #fffdf5; padding-top: 0; border-top: none; font-size: 13px; }
tr.kb-raisons ul { margin: 0 0 8px; padding-left: 20px; color: #6b5510; }
tr.kb-raisons li { margin: 2px 0; }

/* « Surveillance inactive » : la fiche cite un document, mais son état de départ n'a jamais été
   relevé. Ce n'est PAS un défaut de la fiche — elle peut être parfaitement juste — c'est un
   défaut de COUVERTURE : elle ne sera pas signalée si le document bouge. D'où un gris neutre,
   délibérément plus sourd que l'ambre du « à revoir » : l'admin doit voir au premier coup d'œil
   quelles fiches ne sont pas sous surveillance, sans que cela crie l'erreur. Ce qu'on refusait,
   c'est qu'elles portent le même badge vert « validée » que les fiches surveillées. */
.badge.inactive { background: #e6e8ec; color: #55606e; }
tr.kb-surveillance td { background: #fafbfc; }
tr.kb-surveillance td:first-child { box-shadow: inset 3px 0 0 #aab2bd; }
tr.kb-raisons-inactive td { background: #fafbfc; }
tr.kb-raisons-inactive ul { color: #55606e; }

/* Arbres de diagnostic (onglet 🌳) : mêmes badges et même liseré « à valider » que les fiches.
   Le XML d'un arbre PROPOSÉ s'édite en place dans un <pre> : un arbre porteur de mesures est un
   petit programme, l'admin corrige un seuil ou un NextNodeId sans quitter la relecture. Le
   pointillé ambre dit qu'on peut écrire dedans ; un validé ou un refusé n'en a pas. */
.tree-detail { margin-top: 18px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #fafbfc; }
.tree-detail h4 { margin: 0 0 10px; }
.tree-xml { background: #22272e; color: #e6e8eb; padding: 12px; border-radius: 8px; font-size: 12.5px;
            white-space: pre; overflow: auto; max-height: 520px; margin: 8px 0; }
.tree-xml-editable { outline: 2px dashed #d9a520; outline-offset: 2px; }

/* Le XML et son dessin, côte à côte : on relit un arbre en suivant des chemins, pas en lisant
   des balises. Sous 1100 px la colonne du dessin passe dessous plutôt que de se tasser. */
.tree-split { display: flex; gap: 14px; align-items: stretch; margin: 8px 0; }
.tree-split > .tree-pane { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.tree-pane-titre { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tree-split .tree-xml { flex: 1; margin: 0; min-height: 340px; }
.tree-apercu { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 8px;
               padding: 10px; overflow: auto; min-height: 340px; max-height: 520px; }
.tree-apercu svg { max-width: 100%; height: auto; }
/* Pendant la frappe le XML est transitoirement illisible : le dernier dessin reste, grisé. */
.tree-apercu-perime { opacity: .4; }
.tree-apercu-etat { font-size: 12.5px; color: #8a6d1a; min-height: 1.3em; margin-top: 4px; }
@media (max-width: 1100px) { .tree-split { flex-direction: column; } }
.tree-rapport { white-space: pre-wrap; font-size: 12.5px; background: #f5f6f8; padding: 10px; border-radius: 8px;
                max-height: 360px; overflow-y: auto; }
.tree-controle { font-size: 13px; margin: 6px 0 10px; }
.tree-controle ul { margin: 2px 0 8px; padding-left: 20px; }
.tree-controle .erreur { color: #a03024; font-weight: 600; }
.tree-controle .saute { color: #8a6d1a; }
tr.tree-motif td { background: #fdf4f2; padding-top: 0; border-top: none; font-size: 13px; color: #6b2a22; }


/* --- Tableaux et diagrammes des réponses ------------------------------------------
   L'assistant produit beaucoup de tableaux (brochages, états, comparaisons) et, sur
   demande, des diagrammes Mermaid. Les uns s'affichaient en barres verticales brutes,
   les autres en texte dans un bloc de code.

   La réponse est lue sur un TÉLÉPHONE, debout devant le véhicule : le tableau doit
   pouvoir défiler horizontalement plutôt que d'écraser ses colonnes, et le diagramme
   doit tenir dans la largeur. */
.md-table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13.5px; }
.md-table th, .md-table td { border: 1px solid var(--border); padding: 5px 8px;
                             text-align: left; vertical-align: top; }
.md-table th { background: #eef2f7; font-weight: 600; }
.md-table tr:nth-child(even) td { background: #fafbfc; }
/* Un tableau large ne doit pas déborder de la bulle : il défile. */
.bubble .md-table { display: block; overflow-x: auto; white-space: nowrap; }
.bubble .md-table td, .bubble .md-table th { white-space: normal; min-width: 90px; }

.mermaid-bloc { margin: 10px 0; overflow-x: auto; }
.mermaid-bloc svg { max-width: 100%; height: auto; }
/* Repli quand le diagramme est mal formé ou la bibliothèque indisponible : on montre la
   source plutôt que de laisser un trou silencieux dans la réponse. */
.mermaid-bloc pre { margin: 0; }

/* Arbre de diagnostic : le graphe se lit, le XML reste à portée — c'est lui qui part à la
   relecture et que jouera GlobalTool — mais replié, pour ne pas noyer la réponse. */
.arbre-rendu { margin: 10px 0; }
.arbre-xml > summary { cursor: pointer; font-size: 13px; color: #57606a; padding: 4px 0; }
.arbre-xml[open] > summary { margin-bottom: 4px; }