diff --git a/internal/loki/ui/index.html b/internal/loki/ui/index.html
index 3a924b9..44d3fcf 100644
--- a/internal/loki/ui/index.html
+++ b/internal/loki/ui/index.html
@@ -50,6 +50,8 @@ document.documentElement.setAttribute('data-perf',localStorage.getItem('loki-per
    Rôles : --accent = sauge (sélection, marche, liens, bulle utilisateur) ·
    --warn = ambre (chiffres, mesures, avertissements) · --err = rouille (arrêt,
    danger). --row-bg / --code-bg sont les deux fonds encastrés d'un panneau.
+   --code-bg est nettement plus soutenu que --bubble : un bloc de code posé DANS
+   la carte de réponse doit se lire comme un encadré, pas se fondre dedans.
 
    --on-accent : ce qui s'écrit SUR un aplat de sauge. Il change avec la
    variante — blanc sur la sauge foncée du thème clair, ardoise sur la sauge
@@ -64,7 +66,7 @@ document.documentElement.setAttribute('data-perf',localStorage.getItem('loki-per
   --accent-soft:#8fab8b;
   --side:#fafbfa;--row-bg:#f5f7f6;--row-bg-on:#eef2f0;
   --ok:#5e7f5a;--warn:#a86a2a;--err:#c0503f;--mag:#a86a2a;
-  --code-bg:#f4f6f5;--danger-bg:#faeae7;--warn-bg:#f7f0e5;
+  --code-bg:#e7ecea;--danger-bg:#faeae7;--warn-bg:#f7f0e5;
   --add:#5e7f5a;--add-bg:rgba(94,127,90,.11);--del:#c0503f;--del-bg:rgba(192,80,63,.12);
   --shadow:0 1px 2px rgba(15,23,42,.05);--shadow-lift:0 4px 16px rgba(15,23,42,.08);
   --shadow-card:0 2px 10px rgba(15,23,42,.07),0 1px 3px rgba(15,23,42,.05)}
@@ -76,7 +78,7 @@ document.documentElement.setAttribute('data-perf',localStorage.getItem('loki-per
   --accent-soft:#6d8f6a;
   --side:#0d1424;--row-bg:#172033;--row-bg-on:#243349;
   --ok:#8fb08c;--warn:#d9a55f;--err:#e0705c;--mag:#d9a55f;
-  --code-bg:#131c2f;--danger-bg:#3a1f1c;--warn-bg:#33291b;
+  --code-bg:#0e1626;--danger-bg:#3a1f1c;--warn-bg:#33291b;
   --add:#8fb08c;--add-bg:rgba(143,176,140,.16);--del:#e0705c;--del-bg:rgba(224,112,92,.16);
   --shadow:none;--shadow-lift:0 4px 16px rgba(0,0,0,.35);
   --shadow-card:0 2px 12px rgba(0,0,0,.30),0 1px 3px rgba(0,0,0,.22)}
@@ -1709,6 +1711,14 @@ html[data-files="1"] #files-btn{color:var(--accent)}
 /* Marque et attribution du fork empilées, pastille d'état à leur droite. */
 .sidebrand{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
 .sidebrand .brand-fork{margin:0;font-size:10px;line-height:1.3}
+/* Blocs de code du fil : encadré franc dans la carte de réponse — fond plus
+   soutenu, filet net et coins alignés sur ceux de la carte. Le bouton « copier »
+   reprend le fond du bloc pour ne pas flotter sur le texte. */
+#chat .msg.assistant .body pre,#chat .msg.reasoning .body pre,#chat .msg.tool pre{
+  background:var(--code-bg);border:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
+#chat .msg.assistant .body code{background:var(--code-bg);
+  border:1px solid color-mix(in srgb,var(--text) 7%,transparent);border-radius:5px}
+#chat .msg.assistant .body pre code{border:0;background:transparent}
 </style></head><body>
 <button id="menubtn" onclick="toggleSide()">☰</button>
 <!-- Installation d'un moteur en cours : le détail vit dans le panneau, qui est
diff --git a/internal/loki/ui/src/styles.css b/internal/loki/ui/src/styles.css
index 385bfaf..1a91922 100644
--- a/internal/loki/ui/src/styles.css
+++ b/internal/loki/ui/src/styles.css
@@ -19,6 +19,8 @@
    Rôles : --accent = sauge (sélection, marche, liens, bulle utilisateur) ·
    --warn = ambre (chiffres, mesures, avertissements) · --err = rouille (arrêt,
    danger). --row-bg / --code-bg sont les deux fonds encastrés d'un panneau.
+   --code-bg est nettement plus soutenu que --bubble : un bloc de code posé DANS
+   la carte de réponse doit se lire comme un encadré, pas se fondre dedans.
 
    --on-accent : ce qui s'écrit SUR un aplat de sauge. Il change avec la
    variante — blanc sur la sauge foncée du thème clair, ardoise sur la sauge
@@ -33,7 +35,7 @@
   --accent-soft:#8fab8b;
   --side:#fafbfa;--row-bg:#f5f7f6;--row-bg-on:#eef2f0;
   --ok:#5e7f5a;--warn:#a86a2a;--err:#c0503f;--mag:#a86a2a;
-  --code-bg:#f4f6f5;--danger-bg:#faeae7;--warn-bg:#f7f0e5;
+  --code-bg:#e7ecea;--danger-bg:#faeae7;--warn-bg:#f7f0e5;
   --add:#5e7f5a;--add-bg:rgba(94,127,90,.11);--del:#c0503f;--del-bg:rgba(192,80,63,.12);
   --shadow:0 1px 2px rgba(15,23,42,.05);--shadow-lift:0 4px 16px rgba(15,23,42,.08);
   --shadow-card:0 2px 10px rgba(15,23,42,.07),0 1px 3px rgba(15,23,42,.05)}
@@ -45,7 +47,7 @@
   --accent-soft:#6d8f6a;
   --side:#0d1424;--row-bg:#172033;--row-bg-on:#243349;
   --ok:#8fb08c;--warn:#d9a55f;--err:#e0705c;--mag:#d9a55f;
-  --code-bg:#131c2f;--danger-bg:#3a1f1c;--warn-bg:#33291b;
+  --code-bg:#0e1626;--danger-bg:#3a1f1c;--warn-bg:#33291b;
   --add:#8fb08c;--add-bg:rgba(143,176,140,.16);--del:#e0705c;--del-bg:rgba(224,112,92,.16);
   --shadow:none;--shadow-lift:0 4px 16px rgba(0,0,0,.35);
   --shadow-card:0 2px 12px rgba(0,0,0,.30),0 1px 3px rgba(0,0,0,.22)}
@@ -1678,3 +1680,11 @@ html[data-files="1"] #files-btn{color:var(--accent)}
 /* Marque et attribution du fork empilées, pastille d'état à leur droite. */
 .sidebrand{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
 .sidebrand .brand-fork{margin:0;font-size:10px;line-height:1.3}
+/* Blocs de code du fil : encadré franc dans la carte de réponse — fond plus
+   soutenu, filet net et coins alignés sur ceux de la carte. Le bouton « copier »
+   reprend le fond du bloc pour ne pas flotter sur le texte. */
+#chat .msg.assistant .body pre,#chat .msg.reasoning .body pre,#chat .msg.tool pre{
+  background:var(--code-bg);border:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
+#chat .msg.assistant .body code{background:var(--code-bg);
+  border:1px solid color-mix(in srgb,var(--text) 7%,transparent);border-radius:5px}
+#chat .msg.assistant .body pre code{border:0;background:transparent}