Boutons : leur rendre leur cadre

La refonte les voulait « sans contour » : trait transparent et aplat pris
sur --row-bg. Or --row-bg est exactement le fond des blocs qui les
contiennent (.slist, .rowbody). Un bouton posé dessus n'avait donc ni
trait ni écart de valeur : « démarrer / redémarrer / arrêter » et
« mettre à jour le moteur » se lisaient comme du texte, et rien ne disait
qu'on pouvait cliquer.

On revient au cadre d'avant la refonte — trait de 1 px et aplat un ton
au-dessus du bloc — pour que le bouton se détache quel que soit ce qu'il
y a derrière. La micro-interaction au survol reste : elle était bonne,
il lui manquait seulement quelque chose à animer, et le survol change
maintenant aussi la couleur du trait.

Les boutons-icônes de la saisie et de l'en-tête (envoyer, arrêter,
joindre, ☰) ne bougent pas : ils posent border:0 plus bas dans la
feuille et gardent leur allure nue, qui est la bonne pour un
pictogramme seul.

Vérifié en clair et en sombre, dans la barre latérale, les boîtes de
dialogue et les modales.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LPyFxVHNAN9u5pVzSYMwjd

internal/loki/ui/index.html

@@ -1610,10 +1610,22 @@ html[data-files="1"] #files-btn{color:var(--accent)}
 .perf-fill.hot{background:var(--warn)}
 .perf-fill.max{background:var(--err)}
 
-/* --- Boutons : sans contour, micro-interaction au survol ------------- */
-button{border-color:transparent;background:var(--row-bg);border-radius:9px;
-  transition:background .15s ease,color .15s ease,transform .08s ease}
-button:hover{background:var(--row-bg-on);border-color:transparent;color:var(--text)}
+/* --- Boutons : un cadre, et une micro-interaction au survol -----------
+   La refonte les avait voulus « sans contour » : contour transparent, et un
+   aplat pris sur --row-bg. Or c'est exactement le fond des blocs qui les
+   contiennent (.slist, .rowbody) : un bouton posé dessus n'avait plus ni trait
+   ni écart de valeur, et « démarrer / redémarrer / arrêter » ou « mettre à jour
+   le moteur » se lisaient comme du texte, pas comme des commandes.
+   On revient donc au cadre — celui d'avant la refonte : trait de 1 px et aplat
+   un ton AU-DESSUS du bloc, pour que le bouton se détache dans les deux cas.
+   La micro-interaction, elle, reste : elle est bonne, elle manquait juste de
+   quelque chose à animer.
+   ⚠️ Ne concerne pas les boutons-icônes de la saisie et de l'en-tête (#send,
+   #stop, #attach, #menubtn…) : ils posent `border:0` PLUS BAS dans la feuille
+   et gardent leur allure nue, qui est la bonne pour un pictogramme seul. */
+button{background:var(--panel);border-color:var(--border);border-radius:9px;
+  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .08s ease}
+button:hover{background:var(--row-bg);border-color:var(--dim);color:var(--text)}
 button:active:not(:disabled){transform:translateY(1px)}
 .side .preset,.slist,#conv-search{transition:background .15s ease,border-color .15s ease}
 

internal/loki/ui/src/styles.css

@@ -1579,10 +1579,22 @@ html[data-files="1"] #files-btn{color:var(--accent)}
 .perf-fill.hot{background:var(--warn)}
 .perf-fill.max{background:var(--err)}
 
-/* --- Boutons : sans contour, micro-interaction au survol ------------- */
-button{border-color:transparent;background:var(--row-bg);border-radius:9px;
-  transition:background .15s ease,color .15s ease,transform .08s ease}
-button:hover{background:var(--row-bg-on);border-color:transparent;color:var(--text)}
+/* --- Boutons : un cadre, et une micro-interaction au survol -----------
+   La refonte les avait voulus « sans contour » : contour transparent, et un
+   aplat pris sur --row-bg. Or c'est exactement le fond des blocs qui les
+   contiennent (.slist, .rowbody) : un bouton posé dessus n'avait plus ni trait
+   ni écart de valeur, et « démarrer / redémarrer / arrêter » ou « mettre à jour
+   le moteur » se lisaient comme du texte, pas comme des commandes.
+   On revient donc au cadre — celui d'avant la refonte : trait de 1 px et aplat
+   un ton AU-DESSUS du bloc, pour que le bouton se détache dans les deux cas.
+   La micro-interaction, elle, reste : elle est bonne, elle manquait juste de
+   quelque chose à animer.
+   ⚠️ Ne concerne pas les boutons-icônes de la saisie et de l'en-tête (#send,
+   #stop, #attach, #menubtn…) : ils posent `border:0` PLUS BAS dans la feuille
+   et gardent leur allure nue, qui est la bonne pour un pictogramme seul. */
+button{background:var(--panel);border-color:var(--border);border-radius:9px;
+  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .08s ease}
+button:hover{background:var(--row-bg);border-color:var(--dim);color:var(--text)}
 button:active:not(:disabled){transform:translateY(1px)}
 .side .preset,.slist,#conv-search{transition:background .15s ease,border-color .15s ease}