SPB Git
spboucher.ai

spb/admin-ka

Public

v3.1 — modernisation du style : hairlines + ombres douces (fin des bordures 2px/ombres décalées), rayons contenus, typo sobre, segmented controls et tags nets — Linear/Vercel-like, identité crème+orange conservée

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Simon-Pierre Boucher committed (Aug 26, 2026) parent bb0eef5 Browse files

1 changed file +232 −92

Unified Split
modified public/style.css +232 −92
@@ -47,7 +47,7 @@ button { font-family: inherit; color: inherit; }
47 display: inline-flex; align-items: center; justify-content: center; 47 display: inline-flex; align-items: center; justify-content: center;
48 width: 34px; height: 34px; border-radius: 11px; 48 width: 34px; height: 34px; border-radius: 11px;
49 background: var(--orange); color: var(--ink); 49 background: var(--orange); color: var(--ink);
50− border: 2px solid var(--edge); box-shadow: var(--bshadow-sm); 50+ border: 1px solid var(--edge); box-shadow: var(--bshadow-sm);
51 font-weight: 800; font-size: 15px; letter-spacing: -0.2px; 51 font-weight: 800; font-size: 15px; letter-spacing: -0.2px;
52 flex-shrink: 0; 52 flex-shrink: 0;
53 } 53 }
@@ -56,20 +56,20 @@ button { font-family: inherit; color: inherit; }
56 56
57 .btn-cta { 57 .btn-cta {
58 background: var(--orange); color: var(--ink); 58 background: var(--orange); color: var(--ink);
59− border: 2px solid var(--edge); border-radius: 999px; 59+ border: 1px solid var(--edge); border-radius: 999px;
60 box-shadow: var(--bshadow); 60 box-shadow: var(--bshadow);
61 font-weight: 800; font-size: 16px; padding: 13px 22px; cursor: pointer; 61 font-weight: 800; font-size: 16px; padding: 13px 22px; cursor: pointer;
62 transition: transform 0.08s, box-shadow 0.08s; 62 transition: transform 0.08s, box-shadow 0.08s;
63 } 63 }
64−.btn-cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); } 64+.btn-cta:active { transform: translate(2px, 2px); box-shadow: none; }
65 .btn-cta.small { font-size: 13.5px; padding: 8px 16px; box-shadow: var(--bshadow-sm); } 65 .btn-cta.small { font-size: 13.5px; padding: 8px 16px; box-shadow: var(--bshadow-sm); }
66 .btn-ghost { 66 .btn-ghost {
67− background: var(--card); border: 1.5px solid var(--edge); border-radius: 999px; 67+ background: var(--card); border: 1px solid var(--edge); border-radius: 999px;
68 font-weight: 700; font-size: 13.5px; padding: 10px 16px; cursor: pointer; 68 font-weight: 700; font-size: 13.5px; padding: 10px 16px; cursor: pointer;
69 } 69 }
70 .btn-danger { 70 .btn-danger {
71 display: block; margin: 18px auto calc(20px); 71 display: block; margin: 18px auto calc(20px);
72− background: var(--card); border: 2px solid var(--bad); color: var(--bad); 72+ background: var(--card); border: 1px solid var(--bad); color: var(--bad);
73 border-radius: 999px; font-weight: 800; font-size: 14.5px; padding: 12px 26px; cursor: pointer; 73 border-radius: 999px; font-weight: 800; font-size: 14.5px; padding: 12px 26px; cursor: pointer;
74 } 74 }
75 75
@@ -82,15 +82,15 @@ button { font-family: inherit; color: inherit; }
82 } 82 }
83 .login-box { 83 .login-box {
84 width: 100%; max-width: 360px; 84 width: 100%; max-width: 360px;
85− background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-xl); 85+ background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-xl);
86− box-shadow: 6px 6px 0 var(--shadow); 86+ box-shadow: var(--bshadow);
87 padding: 34px 26px 26px; 87 padding: 34px 26px 26px;
88 display: flex; flex-direction: column; gap: 13px; text-align: center; 88 display: flex; flex-direction: column; gap: 13px; text-align: center;
89 } 89 }
90 .login-title { margin: 6px 0 0; font-size: 27px; font-weight: 800; letter-spacing: -0.5px; } 90 .login-title { margin: 6px 0 0; font-size: 27px; font-weight: 800; letter-spacing: -0.5px; }
91 .login-sub { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; font-weight: 600; } 91 .login-sub { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
92 .login input { 92 .login input {
93− background: var(--bg); border: 2px solid var(--edge); color: var(--ink); 93+ background: var(--bg); border: 1px solid var(--edge); color: var(--ink);
94 border-radius: var(--r-md); padding: 14px 16px; font-size: 16px; outline: none; 94 border-radius: var(--r-md); padding: 14px 16px; font-size: 16px; outline: none;
95 font-family: inherit; 95 font-family: inherit;
96 } 96 }
@@ -105,14 +105,14 @@ button { font-family: inherit; color: inherit; }
105 position: sticky; top: 0; z-index: var(--z-header); 105 position: sticky; top: 0; z-index: var(--z-header);
106 display: flex; align-items: center; justify-content: space-between; gap: 10px; 106 display: flex; align-items: center; justify-content: space-between; gap: 10px;
107 background: var(--bg); 107 background: var(--bg);
108− border-bottom: 2px solid var(--edge); 108+ border-bottom: 1px solid var(--edge);
109 padding: 8px 14px; 109 padding: 8px 14px;
110 padding-top: calc(8px + env(safe-area-inset-top)); 110 padding-top: calc(8px + env(safe-area-inset-top));
111 } 111 }
112 .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.4px; } 112 .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.4px; }
113 .conn-pill { 113 .conn-pill {
114 display: flex; align-items: center; gap: 6px; 114 display: flex; align-items: center; gap: 6px;
115− border: 1.5px solid var(--edge); border-radius: 999px; 115+ border: 1px solid var(--edge); border-radius: 999px;
116 background: var(--card); font-size: 11.5px; font-weight: 700; 116 background: var(--card); font-size: 11.5px; font-weight: 700;
117 padding: 4px 10px; 117 padding: 4px 10px;
118 } 118 }
@@ -125,7 +125,7 @@ button { font-family: inherit; color: inherit; }
125 .banners { position: fixed; top: calc(52px + env(safe-area-inset-top)); left: 0; right: 0; z-index: var(--z-banner); display: flex; flex-direction: column; gap: 8px; padding: 8px 14px; pointer-events: none; } 125 .banners { position: fixed; top: calc(52px + env(safe-area-inset-top)); left: 0; right: 0; z-index: var(--z-banner); display: flex; flex-direction: column; gap: 8px; padding: 8px 14px; pointer-events: none; }
126 .banner { 126 .banner {
127 pointer-events: auto; cursor: pointer; 127 pointer-events: auto; cursor: pointer;
128− border: 2px solid var(--edge); border-radius: var(--r-md); 128+ border: 1px solid var(--edge); border-radius: var(--r-md);
129 box-shadow: var(--bshadow); padding: 11px 14px; 129 box-shadow: var(--bshadow); padding: 11px 14px;
130 font-weight: 700; font-size: 13.5px; 130 font-weight: 700; font-size: 13.5px;
131 display: flex; gap: 10px; align-items: center; 131 display: flex; gap: 10px; align-items: center;
@@ -148,7 +148,7 @@ button { font-family: inherit; color: inherit; }
148 position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-nav); 148 position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-nav);
149 display: flex; 149 display: flex;
150 background: var(--card); 150 background: var(--card);
151− border-top: 2px solid var(--edge); 151+ border-top: 1px solid var(--edge);
152 padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); 152 padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
153 } 153 }
154 .nav-btn { 154 .nav-btn {
@@ -164,21 +164,21 @@ button { font-family: inherit; color: inherit; }
164 .nav-btn .badge { 164 .nav-btn .badge {
165 position: absolute; top: 3px; right: calc(50% - 17px); 165 position: absolute; top: 3px; right: calc(50% - 17px);
166 width: 9px; height: 9px; border-radius: 50%; 166 width: 9px; height: 9px; border-radius: 50%;
167− background: var(--orange); border: 1.5px solid var(--edge); 167+ background: var(--orange); border: 1px solid var(--edge);
168 } 168 }
169 169
170 /* ================= Vue chat ================= */ 170 /* ================= Vue chat ================= */
171 .chatbar { 171 .chatbar {
172 display: flex; gap: 7px; align-items: center; 172 display: flex; gap: 7px; align-items: center;
173 padding: 9px 12px; overflow-x: auto; scrollbar-width: none; 173 padding: 9px 12px; overflow-x: auto; scrollbar-width: none;
174− border-bottom: 1.5px solid var(--line); 174+ border-bottom: 1px solid var(--line);
175 background: var(--bg); 175 background: var(--bg);
176 } 176 }
177 .chatbar::-webkit-scrollbar { display: none; } 177 .chatbar::-webkit-scrollbar { display: none; }
178 .pill-select { 178 .pill-select {
179 appearance: none; -webkit-appearance: none; 179 appearance: none; -webkit-appearance: none;
180 background: var(--card); color: var(--ink); 180 background: var(--card); color: var(--ink);
181− border: 2px solid var(--edge); border-radius: 999px; 181+ border: 1px solid var(--edge); border-radius: 999px;
182 font-weight: 800; font-size: 13.5px; font-family: inherit; 182 font-weight: 800; font-size: 13.5px; font-family: inherit;
183 padding: 7px 26px 7px 13px; 183 padding: 7px 26px 7px 13px;
184 box-shadow: var(--bshadow-sm); 184 box-shadow: var(--bshadow-sm);
@@ -187,7 +187,7 @@ button { font-family: inherit; color: inherit; }
187 background-repeat: no-repeat; background-position: right 9px center; background-size: 12px; 187 background-repeat: no-repeat; background-position: right 9px center; background-size: 12px;
188 } 188 }
189 .chip { 189 .chip {
190− border: 1.5px solid var(--edge); border-radius: 999px; 190+ border: 1px solid var(--edge); border-radius: 999px;
191 background: var(--card2); font-weight: 700; font-size: 12.5px; 191 background: var(--card2); font-weight: 700; font-size: 12.5px;
192 padding: 7px 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; 192 padding: 7px 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
193 } 193 }
@@ -197,7 +197,7 @@ button { font-family: inherit; color: inherit; }
197 .sess-meta { 197 .sess-meta {
198 display: flex; gap: 12px; flex-wrap: wrap; 198 display: flex; gap: 12px; flex-wrap: wrap;
199 padding: 6px 14px; font-size: 11px; font-family: var(--mono); color: var(--muted); 199 padding: 6px 14px; font-size: 11px; font-family: var(--mono); color: var(--muted);
200− border-bottom: 1.5px solid var(--line); background: var(--card2); 200+ border-bottom: 1px solid var(--line); background: var(--card2);
201 } 201 }
202 202
203 .messages { 203 .messages {
@@ -212,14 +212,14 @@ button { font-family: inherit; color: inherit; }
212 .msg-user { 212 .msg-user {
213 align-self: flex-end; max-width: 86%; 213 align-self: flex-end; max-width: 86%;
214 background: var(--orange); color: var(--ink); 214 background: var(--orange); color: var(--ink);
215− border: 2px solid var(--edge); border-radius: var(--r-lg) var(--r-lg) 6px var(--r-lg); 215+ border: 1px solid var(--edge); border-radius: var(--r-lg) var(--r-lg) 6px var(--r-lg);
216 box-shadow: var(--bshadow-sm); 216 box-shadow: var(--bshadow-sm);
217 padding: 10px 15px; font-weight: 600; 217 padding: 10px 15px; font-weight: 600;
218 white-space: pre-wrap; word-break: break-word; 218 white-space: pre-wrap; word-break: break-word;
219 } 219 }
220 .msg-claude { 220 .msg-claude {
221 align-self: stretch; 221 align-self: stretch;
222− background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-lg); 222+ background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg);
223 box-shadow: var(--bshadow-sm); 223 box-shadow: var(--bshadow-sm);
224 padding: 13px 16px; word-break: break-word; 224 padding: 13px 16px; word-break: break-word;
225 } 225 }
@@ -227,14 +227,14 @@ button { font-family: inherit; color: inherit; }
227 .msg-claude .md > :last-child { margin-bottom: 0; } 227 .msg-claude .md > :last-child { margin-bottom: 0; }
228 .md p { margin: 0.55em 0; } 228 .md p { margin: 0.55em 0; }
229 .md pre { 229 .md pre {
230− background: var(--code-bg); border: 1.5px solid var(--line); border-radius: var(--r-sm); 230+ background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r-sm);
231 padding: 11px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; 231 padding: 11px; overflow-x: auto; font-size: 12.5px; line-height: 1.5;
232 } 232 }
233 .md code { font-family: var(--mono); font-size: 0.88em; } 233 .md code { font-family: var(--mono); font-size: 0.88em; }
234 .md :not(pre) > code { background: var(--orange-soft); padding: 1px 6px; border-radius: 6px; } 234 .md :not(pre) > code { background: var(--orange-soft); padding: 1px 6px; border-radius: 6px; }
235 .md h1, .md h2, .md h3, .md h4 { font-size: 1.03em; margin: 0.9em 0 0.35em; } 235 .md h1, .md h2, .md h3, .md h4 { font-size: 1.03em; margin: 0.9em 0 0.35em; }
236 .md table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 13px; } 236 .md table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 13px; }
237−.md th, .md td { border: 1.5px solid var(--line); padding: 5px 9px; } 237+.md th, .md td { border: 1px solid var(--line); padding: 5px 9px; }
238 .md th { background: var(--card2); } 238 .md th { background: var(--card2); }
239 .md a { color: var(--orange-deep); font-weight: 700; } 239 .md a { color: var(--orange-deep); font-weight: 700; }
240 .md ul, .md ol { padding-left: 1.35em; margin: 0.5em 0; } 240 .md ul, .md ol { padding-left: 1.35em; margin: 0.5em 0; }
@@ -249,19 +249,19 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
249 .meta-line { 249 .meta-line {
250 align-self: center; text-align: center; 250 align-self: center; text-align: center;
251 color: var(--muted); font-size: 11px; font-family: var(--mono); 251 color: var(--muted); font-size: 11px; font-family: var(--mono);
252− background: var(--card2); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 12px; 252+ background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px;
253 max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 253 max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
254 } 254 }
255 .notice-line { align-self: center; color: var(--warn); font-size: 12px; font-weight: 700; } 255 .notice-line { align-self: center; color: var(--warn); font-size: 12px; font-weight: 700; }
256 .error-box { 256 .error-box {
257− background: var(--bad-soft); border: 2px solid var(--bad); 257+ background: var(--bad-soft); border: 1px solid var(--bad);
258 color: var(--bad); border-radius: var(--r-md); padding: 11px 14px; 258 color: var(--bad); border-radius: var(--r-md); padding: 11px 14px;
259 font-size: 13px; white-space: pre-wrap; word-break: break-word; font-weight: 600; 259 font-size: 13px; white-space: pre-wrap; word-break: break-word; font-weight: 600;
260 } 260 }
261 261
262 /* --- cartes outils --- */ 262 /* --- cartes outils --- */
263 .tool { 263 .tool {
264− background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-md); 264+ background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-md);
265 overflow: hidden; font-size: 13px; box-shadow: var(--bshadow-sm); 265 overflow: hidden; font-size: 13px; box-shadow: var(--bshadow-sm);
266 } 266 }
267 .tool summary { 267 .tool summary {
@@ -271,7 +271,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
271 .tool summary::-webkit-details-marker { display: none; } 271 .tool summary::-webkit-details-marker { display: none; }
272 .tool .t-icon { 272 .tool .t-icon {
273 flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; 273 flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px;
274− border: 1.5px solid var(--edge); 274+ border: 1px solid var(--edge);
275 display: flex; align-items: center; justify-content: center; 275 display: flex; align-items: center; justify-content: center;
276 font-size: 13px; background: var(--card2); 276 font-size: 13px; background: var(--card2);
277 } 277 }
@@ -288,9 +288,9 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
288 .tool .t-state.pending { color: var(--warn); background: var(--warn-soft); } 288 .tool .t-state.pending { color: var(--warn); background: var(--warn-soft); }
289 .tool .t-state.ok { color: var(--good); background: var(--good-soft); } 289 .tool .t-state.ok { color: var(--good); background: var(--good-soft); }
290 .tool .t-state.err { color: var(--bad); background: var(--bad-soft); } 290 .tool .t-state.err { color: var(--bad); background: var(--bad-soft); }
291−.tool-body { border-top: 2px solid var(--edge); padding: 9px 13px 11px; background: var(--card2); } 291+.tool-body { border-top: 1px solid var(--edge); padding: 9px 13px 11px; background: var(--card2); }
292 .tool-body pre { 292 .tool-body pre {
293− margin: 6px 0; background: var(--card); border: 1.5px solid var(--line); 293+ margin: 6px 0; background: var(--card); border: 1px solid var(--line);
294 border-radius: var(--r-sm); padding: 9px; 294 border-radius: var(--r-sm); padding: 9px;
295 overflow-x: auto; font-size: 12px; font-family: var(--mono); 295 overflow-x: auto; font-size: 12px; font-family: var(--mono);
296 white-space: pre-wrap; word-break: break-word; 296 white-space: pre-wrap; word-break: break-word;
@@ -298,7 +298,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
298 .tool-body .label { color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; margin-top: 6px; } 298 .tool-body .label { color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; margin-top: 6px; }
299 .see-more { background: none; border: none; color: var(--orange-deep); font-size: 12.5px; font-weight: 800; cursor: pointer; padding: 4px 0; } 299 .see-more { background: none; border: none; color: var(--orange-deep); font-size: 12.5px; font-weight: 800; cursor: pointer; padding: 4px 0; }
300 300
301−.diff { font-family: var(--mono); font-size: 12px; margin: 6px 0; border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--card); } 301+.diff { font-family: var(--mono); font-size: 12px; margin: 6px 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--card); }
302 .diff .dl { padding: 2px 10px; white-space: pre-wrap; word-break: break-word; } 302 .diff .dl { padding: 2px 10px; white-space: pre-wrap; word-break: break-word; }
303 .diff .del { background: var(--del-bg); color: var(--del-ink); } 303 .diff .del { background: var(--del-bg); color: var(--del-ink); }
304 .diff .add { background: var(--add-bg); color: var(--add-ink); } 304 .diff .add { background: var(--add-bg); color: var(--add-ink); }
@@ -310,13 +310,13 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
310 310
311 /* --- permission --- */ 311 /* --- permission --- */
312 .perm { 312 .perm {
313− background: var(--warn-soft); border: 2px solid var(--edge); 313+ background: var(--warn-soft); border: 1px solid var(--edge);
314 border-radius: var(--r-lg); padding: 14px; font-size: 13.5px; 314 border-radius: var(--r-lg); padding: 14px; font-size: 13.5px;
315− box-shadow: 4px 4px 0 var(--shadow); 315+ box-shadow: var(--bshadow);
316 } 316 }
317 .perm-title { font-weight: 800; margin-bottom: 8px; font-size: 14.5px; } 317 .perm-title { font-weight: 800; margin-bottom: 8px; font-size: 14.5px; }
318 .perm pre { 318 .perm pre {
319− background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 9px; 319+ background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px;
320 overflow-x: auto; font-size: 12px; font-family: var(--mono); 320 overflow-x: auto; font-size: 12px; font-family: var(--mono);
321 white-space: pre-wrap; word-break: break-word; 321 white-space: pre-wrap; word-break: break-word;
322 max-height: 200px; overflow-y: auto; margin: 0; 322 max-height: 200px; overflow-y: auto; margin: 0;
@@ -325,7 +325,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
325 .perm-actions button { 325 .perm-actions button {
326 flex: 1; padding: 11px 6px; border-radius: 999px; 326 flex: 1; padding: 11px 6px; border-radius: 999px;
327 font-size: 13.5px; font-weight: 800; cursor: pointer; min-height: 46px; 327 font-size: 13.5px; font-weight: 800; cursor: pointer; min-height: 46px;
328− border: 2px solid var(--edge); 328+ border: 1px solid var(--edge);
329 } 329 }
330 .perm-allow { background: var(--good); color: #fff; box-shadow: var(--bshadow-sm); } 330 .perm-allow { background: var(--good); color: #fff; box-shadow: var(--bshadow-sm); }
331 .perm-always { background: var(--good-soft); color: var(--good); line-height: 1.05; } 331 .perm-always { background: var(--good-soft); color: var(--good); line-height: 1.05; }
@@ -333,7 +333,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
333 .perm-deny { background: var(--card); color: var(--bad); } 333 .perm-deny { background: var(--card); color: var(--bad); }
334 .perm-allall { 334 .perm-allall {
335 width: 100%; margin-top: 8px; padding: 12px; border-radius: 999px; 335 width: 100%; margin-top: 8px; padding: 12px; border-radius: 999px;
336− border: 2px solid var(--edge); background: var(--ink); color: var(--orange); 336+ border: 1px solid var(--edge); background: var(--ink); color: var(--orange);
337 font-weight: 800; font-size: 13.5px; cursor: pointer; box-shadow: var(--bshadow-sm); 337 font-weight: 800; font-size: 13.5px; cursor: pointer; box-shadow: var(--bshadow-sm);
338 } 338 }
339 .perm-allall:active { transform: translate(1px,1px); box-shadow: none; } 339 .perm-allall:active { transform: translate(1px,1px); box-shadow: none; }
@@ -348,7 +348,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
348 } 348 }
349 349
350 /* file d'attente */ 350 /* file d'attente */
351−.queued-notice { align-self: center; background: var(--warn-soft); border: 1.5px solid var(--warn); border-radius: 999px; padding: 5px 14px; } 351+.queued-notice { align-self: center; background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 999px; padding: 5px 14px; }
352 .working .work-time { margin-left: 2px; color: var(--orange-deep); font-family: var(--mono); font-size: 12px; } 352 .working .work-time { margin-left: 2px; color: var(--orange-deep); font-family: var(--mono); font-size: 12px; }
353 353
354 .head-actions { display: flex; align-items: center; gap: 10px; } 354 .head-actions { display: flex; align-items: center; gap: 10px; }
@@ -357,7 +357,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
357 align-self: flex-start; 357 align-self: flex-start;
358 display: flex; align-items: center; gap: 10px; 358 display: flex; align-items: center; gap: 10px;
359 font-size: 13.5px; font-weight: 700; 359 font-size: 13.5px; font-weight: 700;
360− background: var(--card); border: 2px solid var(--edge); 360+ background: var(--card); border: 1px solid var(--edge);
361 border-radius: 999px; padding: 8px 16px; box-shadow: var(--bshadow-sm); 361 border-radius: 999px; padding: 8px 16px; box-shadow: var(--bshadow-sm);
362 } 362 }
363 .dots { display: flex; gap: 4px; } 363 .dots { display: flex; gap: 4px; }
@@ -377,7 +377,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
377 .welcome p { margin: 0; color: var(--muted); font-size: 14px; max-width: 300px; font-weight: 600; } 377 .welcome p { margin: 0; color: var(--muted); font-size: 14px; max-width: 300px; font-weight: 600; }
378 .hints { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; } 378 .hints { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
379 .hint { 379 .hint {
380− background: var(--card); border: 1.5px solid var(--edge); 380+ background: var(--card); border: 1px solid var(--edge);
381 font-size: 13px; font-weight: 700; 381 font-size: 13px; font-weight: 700;
382 border-radius: 999px; padding: 9px 14px; cursor: pointer; 382 border-radius: 999px; padding: 9px 14px; cursor: pointer;
383 box-shadow: var(--bshadow-sm); 383 box-shadow: var(--bshadow-sm);
@@ -393,7 +393,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
393 display: flex; align-items: flex-end; gap: 8px; 393 display: flex; align-items: flex-end; gap: 8px;
394 max-width: 780px; margin: 0 auto; 394 max-width: 780px; margin: 0 auto;
395 background: var(--card); 395 background: var(--card);
396− border: 2px solid var(--edge); border-radius: var(--r-xl); 396+ border: 1px solid var(--edge); border-radius: var(--r-xl);
397 box-shadow: var(--bshadow); 397 box-shadow: var(--bshadow);
398 padding: 6px 6px 6px 6px; gap: 4px; 398 padding: 6px 6px 6px 6px; gap: 4px;
399 } 399 }
@@ -406,7 +406,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
406 #input::placeholder { color: var(--muted); font-weight: 600; } 406 #input::placeholder { color: var(--muted); font-weight: 600; }
407 .send-btn { 407 .send-btn {
408 width: 42px; height: 42px; border-radius: 50%; 408 width: 42px; height: 42px; border-radius: 50%;
409− border: 2px solid var(--edge); 409+ border: 1px solid var(--edge);
410 background: var(--orange); color: var(--ink); 410 background: var(--orange); color: var(--ink);
411 cursor: pointer; flex-shrink: 0; 411 cursor: pointer; flex-shrink: 0;
412 display: flex; align-items: center; justify-content: center; 412 display: flex; align-items: center; justify-content: center;
@@ -419,7 +419,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
419 .send-btn.stop { background: var(--bad); color: #fff; } 419 .send-btn.stop { background: var(--bad); color: #fff; }
420 .wand-btn { 420 .wand-btn {
421 width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; 421 width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
422− border: 2px solid var(--edge); background: var(--card2); color: var(--orange-deep); 422+ border: 1px solid var(--edge); background: var(--card2); color: var(--orange-deep);
423 cursor: pointer; display: flex; align-items: center; justify-content: center; 423 cursor: pointer; display: flex; align-items: center; justify-content: center;
424 align-self: flex-end; margin-bottom: 2px; 424 align-self: flex-end; margin-bottom: 2px;
425 } 425 }
@@ -431,20 +431,20 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
431 max-width: 780px; margin: 6px auto 0; display: flex; gap: 6px; flex-wrap: wrap; 431 max-width: 780px; margin: 6px auto 0; display: flex; gap: 6px; flex-wrap: wrap;
432 } 432 }
433 .slash-hint button { 433 .slash-hint button {
434− border: 1.5px solid var(--edge); background: var(--card2); border-radius: 999px; 434+ border: 1px solid var(--edge); background: var(--card2); border-radius: 999px;
435 font-size: 12px; font-weight: 700; padding: 5px 11px; cursor: pointer; 435 font-size: 12px; font-weight: 700; padding: 5px 11px; cursor: pointer;
436 } 436 }
437 437
438 /* ================= Sessions ================= */ 438 /* ================= Sessions ================= */
439 .sess-list { display: flex; flex-direction: column; gap: 12px; max-width: 780px; margin: 0 auto; width: 100%; } 439 .sess-list { display: flex; flex-direction: column; gap: 12px; max-width: 780px; margin: 0 auto; width: 100%; }
440 .sess-card { 440 .sess-card {
441− background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-lg); 441+ background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg);
442 box-shadow: var(--bshadow-sm); padding: 13px 15px; cursor: pointer; 442 box-shadow: var(--bshadow-sm); padding: 13px 15px; cursor: pointer;
443 display: flex; flex-direction: column; gap: 6px; 443 display: flex; flex-direction: column; gap: 6px;
444 } 444 }
445 .sess-top { display: flex; align-items: center; gap: 8px; } 445 .sess-top { display: flex; align-items: center; gap: 8px; }
446 .sess-title { flex: 1; min-width: 0; font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 446 .sess-title { flex: 1; min-width: 0; font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
447−.sess-badge { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 10px; border: 1.5px solid var(--edge); flex-shrink: 0; } 447+.sess-badge { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--edge); flex-shrink: 0; }
448 .sess-badge.running { background: var(--orange); animation: pulse 1.4s infinite; } 448 .sess-badge.running { background: var(--orange); animation: pulse 1.4s infinite; }
449 .sess-badge.waiting_perm { background: var(--warn-soft); color: var(--warn); } 449 .sess-badge.waiting_perm { background: var(--warn-soft); color: var(--warn); }
450 .sess-badge.idle { background: var(--card2); color: var(--muted); } 450 .sess-badge.idle { background: var(--card2); color: var(--muted); }
@@ -453,7 +453,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
453 .sess-info { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); font-family: var(--mono); } 453 .sess-info { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
454 .sess-actions { display: flex; gap: 8px; margin-top: 4px; } 454 .sess-actions { display: flex; gap: 8px; margin-top: 4px; }
455 .sess-actions button { 455 .sess-actions button {
456− border: 1.5px solid var(--edge); border-radius: 999px; background: var(--card2); 456+ border: 1px solid var(--edge); border-radius: 999px; background: var(--card2);
457 font-size: 12px; font-weight: 800; padding: 6px 13px; cursor: pointer; 457 font-size: 12px; font-weight: 800; padding: 6px 13px; cursor: pointer;
458 } 458 }
459 .sess-actions .del { color: var(--bad); } 459 .sess-actions .del { color: var(--bad); }
@@ -462,18 +462,18 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
462 /* Prompt Bank */ 462 /* Prompt Bank */
463 .prompt-preview { 463 .prompt-preview {
464 font-family: var(--mono); font-size: 12px; color: var(--ink); 464 font-family: var(--mono); font-size: 12px; color: var(--ink);
465− background: var(--card2); border: 1.5px solid var(--line); border-radius: var(--r-sm); 465+ background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-sm);
466 padding: 8px 10px; white-space: pre-wrap; word-break: break-word; line-height: 1.45; 466 padding: 8px 10px; white-space: pre-wrap; word-break: break-word; line-height: 1.45;
467 } 467 }
468 .sess-actions .p-send { background: var(--orange); color: var(--ink); border-color: var(--ink); box-shadow: var(--bshadow-sm); } 468 .sess-actions .p-send { background: var(--orange); color: var(--ink); border-color: var(--ink); box-shadow: var(--bshadow-sm); }
469 .pe-input { 469 .pe-input {
470− width: 100%; background: var(--bg); border: 2px solid var(--edge); color: var(--ink); 470+ width: 100%; background: var(--bg); border: 1px solid var(--edge); color: var(--ink);
471 border-radius: var(--r-md); padding: 11px 13px; font-size: 15px; font-family: inherit; font-weight: 600; outline: none; 471 border-radius: var(--r-md); padding: 11px 13px; font-size: 15px; font-family: inherit; font-weight: 600; outline: none;
472 } 472 }
473 .pe-input:focus { border-color: var(--orange); } 473 .pe-input:focus { border-color: var(--orange); }
474 .pe-textarea { 474 .pe-textarea {
475 width: 100%; margin-top: 10px; min-height: 180px; resize: vertical; 475 width: 100%; margin-top: 10px; min-height: 180px; resize: vertical;
476− background: var(--bg); border: 2px solid var(--edge); color: var(--ink); 476+ background: var(--bg); border: 1px solid var(--edge); color: var(--ink);
477 border-radius: var(--r-md); padding: 12px 13px; font-size: 14px; line-height: 1.5; 477 border-radius: var(--r-md); padding: 12px 13px; font-size: 14px; line-height: 1.5;
478 font-family: var(--mono); outline: none; 478 font-family: var(--mono); outline: none;
479 } 479 }
@@ -490,7 +490,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
490 max-width: 780px; margin-left: auto; margin-right: auto; 490 max-width: 780px; margin-left: auto; margin-right: auto;
491 } 491 }
492 .eco-stat { 492 .eco-stat {
493− flex: 1; background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-lg); 493+ flex: 1; background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg);
494 box-shadow: var(--bshadow-sm); padding: 10px 12px; text-align: center; 494 box-shadow: var(--bshadow-sm); padding: 10px 12px; text-align: center;
495 } 495 }
496 .eco-stat .v { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; } 496 .eco-stat .v { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
@@ -504,16 +504,16 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
504 @media (min-width: 560px) { .eco-grid { grid-template-columns: 1fr 1fr; } } 504 @media (min-width: 560px) { .eco-grid { grid-template-columns: 1fr 1fr; } }
505 .eco-loading { color: var(--muted); text-align: center; padding: 40px; font-weight: 700; } 505 .eco-loading { color: var(--muted); text-align: center; padding: 40px; font-weight: 700; }
506 .site-card { 506 .site-card {
507− background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-lg); 507+ background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg);
508 box-shadow: var(--bshadow-sm); padding: 12px 14px; cursor: pointer; 508 box-shadow: var(--bshadow-sm); padding: 12px 14px; cursor: pointer;
509 display: flex; flex-direction: column; gap: 8px; 509 display: flex; flex-direction: column; gap: 8px;
510 transition: transform 0.08s; 510 transition: transform 0.08s;
511 } 511 }
512 .site-card:active { transform: translate(2px, 2px); box-shadow: none; } 512 .site-card:active { transform: translate(2px, 2px); box-shadow: none; }
513−.site-card.down { border-color: var(--bad); box-shadow: 3px 3px 0 var(--bad); } 513+.site-card.down { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
514 .site-top { display: flex; align-items: center; gap: 8px; } 514 .site-top { display: flex; align-items: center; gap: 8px; }
515 .site-name { font-weight: 800; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 515 .site-name { font-weight: 800; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
516−.st-pill { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 3px 10px; border: 1.5px solid var(--edge); flex-shrink: 0; display: flex; gap: 4px; align-items: center; } 516+.st-pill { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--edge); flex-shrink: 0; display: flex; gap: 4px; align-items: center; }
517 .st-pill.up { background: var(--good-soft); color: var(--good); } 517 .st-pill.up { background: var(--good-soft); color: var(--good); }
518 .st-pill.slow { background: var(--warn-soft); color: var(--warn); } 518 .st-pill.slow { background: var(--warn-soft); color: var(--warn); }
519 .st-pill.down { background: var(--bad); color: #fff; } 519 .st-pill.down { background: var(--bad); color: #fff; }
@@ -530,16 +530,16 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
530 .eco-subhead { max-width: 780px; margin: 20px auto 10px; width: 100%; font-size: 15px; font-weight: 800; letter-spacing: -0.3px; } 530 .eco-subhead { max-width: 780px; margin: 20px auto 10px; width: 100%; font-size: 15px; font-weight: 800; letter-spacing: -0.3px; }
531 .node-grid { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 780px; margin: 0 auto; width: 100%; } 531 .node-grid { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 780px; margin: 0 auto; width: 100%; }
532 @media (min-width: 560px) { .node-grid { grid-template-columns: 1fr 1fr; } } 532 @media (min-width: 560px) { .node-grid { grid-template-columns: 1fr 1fr; } }
533−.node-card { background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-lg); box-shadow: var(--bshadow-sm); padding: 12px 14px; } 533+.node-card { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg); box-shadow: var(--bshadow-sm); padding: 12px 14px; }
534 .node-card.warn { border-color: var(--warn); } 534 .node-card.warn { border-color: var(--warn); }
535 .node-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; } 535 .node-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
536 .node-name { font-weight: 800; font-size: 15px; font-family: var(--mono); } 536 .node-name { font-weight: 800; font-size: 15px; font-family: var(--mono); }
537−.node-apps { font-size: 11px; font-weight: 800; border: 1.5px solid var(--edge); border-radius: 999px; padding: 2px 9px; background: var(--good-soft); color: var(--good); } 537+.node-apps { font-size: 11px; font-weight: 800; border: 1px solid var(--edge); border-radius: 999px; padding: 2px 9px; background: var(--good-soft); color: var(--good); }
538 .node-apps.bad { background: var(--warn-soft); color: var(--warn); } 538 .node-apps.bad { background: var(--warn-soft); color: var(--warn); }
539 .nbar { margin: 5px 0; } 539 .nbar { margin: 5px 0; }
540 .nbar-l { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 2px; } 540 .nbar-l { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
541 .nbar-l b { color: var(--ink); font-family: var(--mono); } 541 .nbar-l b { color: var(--ink); font-family: var(--mono); }
542−.nbar-track { height: 7px; background: var(--card2); border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; } 542+.nbar-track { height: 7px; background: var(--card2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
543 .nbar-fill { height: 100%; border-radius: 999px; transition: width 0.4s; } 543 .nbar-fill { height: 100%; border-radius: 999px; transition: width 0.4s; }
544 544
545 /* actions d'admin dans la feuille */ 545 /* actions d'admin dans la feuille */
@@ -558,7 +558,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
558 } 558 }
559 @media (min-width: 560px) { .eco-overview { grid-template-columns: repeat(6, 1fr); } } 559 @media (min-width: 560px) { .eco-overview { grid-template-columns: repeat(6, 1fr); } }
560 .kpi { 560 .kpi {
561− background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-md); 561+ background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-md);
562 box-shadow: var(--bshadow-sm); padding: 9px 8px; text-align: center; 562 box-shadow: var(--bshadow-sm); padding: 9px 8px; text-align: center;
563 } 563 }
564 .kpi .v { font-size: 21px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; } 564 .kpi .v { font-size: 21px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; }
@@ -569,20 +569,20 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
569 .eco-grid { max-width: 900px; } 569 .eco-grid { max-width: 900px; }
570 @media (min-width: 900px) { .eco-grid { grid-template-columns: 1fr 1fr 1fr; } } 570 @media (min-width: 900px) { .eco-grid { grid-template-columns: 1fr 1fr 1fr; } }
571 571
572−.site-logo { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; object-fit: cover; background: var(--card2); border: 1.5px solid var(--line); } 572+.site-logo { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; object-fit: cover; background: var(--card2); border: 1px solid var(--line); }
573 .site-logo.big { width: 34px; height: 34px; border-radius: 9px; } 573 .site-logo.big { width: 34px; height: 34px; border-radius: 9px; }
574 .trend { font-size: 11px; font-weight: 800; font-family: var(--round); margin-left: 4px; } 574 .trend { font-size: 11px; font-weight: 800; font-family: var(--round); margin-left: 4px; }
575 .trend.up { color: var(--bad); } .trend.down { color: var(--good); } .trend.flat { color: var(--muted); } 575 .trend.up { color: var(--bad); } .trend.down { color: var(--good); } .trend.flat { color: var(--muted); }
576−.statusbar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--card2); border: 1.5px solid var(--line); margin: 4px 0 2px; } 576+.statusbar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--card2); border: 1px solid var(--line); margin: 4px 0 2px; }
577 .statusbar i { display: block; height: 100%; } 577 .statusbar i { display: block; height: 100%; }
578 .statusbar .s2 { background: var(--good); } .statusbar .s3 { background: #6a9fd8; } 578 .statusbar .s2 { background: var(--good); } .statusbar .s3 { background: #6a9fd8; }
579 .statusbar .s4 { background: var(--warn); } .statusbar .s5, .statusbar .se { background: var(--bad); } 579 .statusbar .s4 { background: var(--warn); } .statusbar .s5, .statusbar .se { background: var(--bad); }
580 .site-metrics { display: flex; gap: 6px; margin: 4px 0 2px; } 580 .site-metrics { display: flex; gap: 6px; margin: 4px 0 2px; }
581−.site-metrics .m { flex: 1; text-align: center; background: var(--card2); border: 1.5px solid var(--line); border-radius: 8px; padding: 5px 2px; } 581+.site-metrics .m { flex: 1; text-align: center; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 2px; }
582 .site-metrics .m b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -0.3px; } 582 .site-metrics .m b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -0.3px; }
583 .site-metrics .m span { font-size: 9px; color: var(--muted); font-weight: 700; text-transform: uppercase; } 583 .site-metrics .m span { font-size: 9px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
584 .pgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; } 584 .pgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
585−.pc { text-align: center; background: var(--card2); border: 1.5px solid var(--line); border-radius: 9px; padding: 7px 2px; } 585+.pc { text-align: center; background: var(--card2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 2px; }
586 .pc b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.4px; } 586 .pc b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.4px; }
587 .pc span { font-size: 9.5px; color: var(--muted); font-weight: 800; text-transform: uppercase; } 587 .pc span { font-size: 9.5px; color: var(--muted); font-weight: 800; text-transform: uppercase; }
588 .pc.hot { background: var(--warn-soft); border-color: #f0c36b; } 588 .pc.hot { background: var(--warn-soft); border-color: #f0c36b; }
@@ -599,7 +599,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
599 .sheet-panel { 599 .sheet-panel {
600 position: absolute; left: 0; right: 0; bottom: 0; 600 position: absolute; left: 0; right: 0; bottom: 0;
601 max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; 601 max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
602− background: var(--bg); border: 2px solid var(--edge); border-bottom: none; 602+ background: var(--bg); border: 1px solid var(--edge); border-bottom: none;
603 border-radius: var(--r-xl) var(--r-xl) 0 0; 603 border-radius: var(--r-xl) var(--r-xl) 0 0;
604 padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); 604 padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
605 animation: sheet-up 0.22s ease-out; 605 animation: sheet-up 0.22s ease-out;
@@ -607,12 +607,12 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
607 .sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--line); margin: 6px auto 12px; } 607 .sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: var(--line); margin: 6px auto 12px; }
608 .sheet-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } 608 .sheet-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
609 .sheet-h h3 { margin: 0; font-size: 21px; font-weight: 800; flex: 1; } 609 .sheet-h h3 { margin: 0; font-size: 21px; font-weight: 800; flex: 1; }
610−.sheet-sec { background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-lg); box-shadow: var(--bshadow-sm); padding: 13px 15px; margin-bottom: 12px; } 610+.sheet-sec { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg); box-shadow: var(--bshadow-sm); padding: 13px 15px; margin-bottom: 12px; }
611 .sheet-sec h4 { margin: 0 0 9px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted); } 611 .sheet-sec h4 { margin: 0 0 9px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted); }
612 .kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13.5px; } 612 .kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13.5px; }
613 .kv b { font-family: var(--mono); font-weight: 700; } 613 .kv b { font-family: var(--mono); font-weight: 700; }
614 .tile-row { display: flex; gap: 9px; } 614 .tile-row { display: flex; gap: 9px; }
615−.tile { flex: 1; background: var(--card2); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 8px 6px; text-align: center; } 615+.tile { flex: 1; background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 6px; text-align: center; }
616 .tile .v { font-size: 17px; font-weight: 800; } 616 .tile .v { font-size: 17px; font-weight: 800; }
617 .tile .l { font-size: 10px; color: var(--muted); font-weight: 800; text-transform: uppercase; } 617 .tile .l { font-size: 10px; color: var(--muted); font-weight: 800; text-transform: uppercase; }
618 .chart { width: 100%; } 618 .chart { width: 100%; }
@@ -621,7 +621,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
621 background: var(--ink); color: var(--bg); border-radius: 8px; 621 background: var(--ink); color: var(--bg); border-radius: 8px;
622 font-size: 11px; font-family: var(--mono); padding: 4px 8px; white-space: nowrap; 622 font-size: 11px; font-family: var(--mono); padding: 4px 8px; white-space: nowrap;
623 } 623 }
624−.inc-item { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1.5px solid var(--line); font-size: 12.5px; align-items: baseline; } 624+.inc-item { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; align-items: baseline; }
625 .inc-item:last-child { border-bottom: none; } 625 .inc-item:last-child { border-bottom: none; }
626 .inc-dot { color: var(--bad); font-weight: 800; } 626 .inc-dot { color: var(--bad); font-weight: 800; }
627 .inc-ok { color: var(--good); font-weight: 800; } 627 .inc-ok { color: var(--good); font-weight: 800; }
@@ -629,14 +629,14 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
629 /* ================= Réglages ================= */ 629 /* ================= Réglages ================= */
630 .set-card { 630 .set-card {
631 max-width: 780px; margin: 0 auto 12px; width: 100%; 631 max-width: 780px; margin: 0 auto 12px; width: 100%;
632− background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-lg); 632+ background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg);
633 box-shadow: var(--bshadow-sm); padding: 14px 16px; 633 box-shadow: var(--bshadow-sm); padding: 14px 16px;
634 } 634 }
635 .set-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted); margin-bottom: 10px; } 635 .set-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted); margin-bottom: 10px; }
636 .seg { display: flex; gap: 7px; } 636 .seg { display: flex; gap: 7px; }
637 .seg.vert { flex-direction: column; } 637 .seg.vert { flex-direction: column; }
638 .seg button { 638 .seg button {
639− flex: 1; border: 1.5px solid var(--edge); border-radius: 999px; 639+ flex: 1; border: 1px solid var(--edge); border-radius: 999px;
640 background: var(--card2); font-weight: 700; font-size: 13.5px; 640 background: var(--card2); font-weight: 700; font-size: 13.5px;
641 padding: 10px 12px; cursor: pointer; text-align: center; 641 padding: 10px 12px; cursor: pointer; text-align: center;
642 } 642 }
@@ -647,16 +647,16 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
647 647
648 648
649 /* ---- Social ---- */ 649 /* ---- Social ---- */
650−.soc-card{background:var(--card,#fff);border:2px solid var(--edge);border-radius:16px;padding:14px 16px;margin:0 0 14px;box-shadow:3px 3px 0 var(--shadow);} 650+.soc-card{background:var(--card,#fff);border:1px solid var(--edge);border-radius:16px;padding:14px 16px;margin:0 0 14px;box-shadow:3px 3px 0 var(--shadow);}
651 .soc-card h3{margin:0 0 10px;font-size:15px;} 651 .soc-card h3{margin:0 0 10px;font-size:15px;}
652 .soc-switch{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer;} 652 .soc-switch{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer;}
653 .soc-switch input{width:20px;height:20px;accent-color:var(--accent,#f97316);} 653 .soc-switch input{width:20px;height:20px;accent-color:var(--accent,#f97316);}
654 .soc-sub{color:var(--muted,#6b7280);font-size:13px;margin-top:8px;} 654 .soc-sub{color:var(--muted,#6b7280);font-size:13px;margin-top:8px;}
655 .soc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px;} 655 .soc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px;}
656−.soc-select{padding:9px 12px;border:2px solid var(--edge);border-radius:10px;font:inherit;background:#fff;} 656+.soc-select{padding:9px 12px;border:1px solid var(--edge);border-radius:10px;font:inherit;background:#fff;}
657 .soc-draft{margin-top:14px;display:flex;flex-direction:column;gap:10px;} 657 .soc-draft{margin-top:14px;display:flex;flex-direction:column;gap:10px;}
658−.soc-draft img{width:100%;max-width:340px;border-radius:12px;border:2px solid var(--edge);align-self:center;} 658+.soc-draft img{width:100%;max-width:340px;border-radius:12px;border:1px solid var(--edge);align-self:center;}
659−#view-social textarea{width:100%;padding:10px 12px;border:2px solid var(--edge);border-radius:10px;font:inherit;resize:vertical;} 659+#view-social textarea{width:100%;padding:10px 12px;border:1px solid var(--edge);border-radius:10px;font:inherit;resize:vertical;}
660 .soc-log{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;} 660 .soc-log{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;}
661 .soc-logrow{font-size:13px;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.04);} 661 .soc-logrow{font-size:13px;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.04);}
662 .soc-logt{color:var(--muted,#6b7280);font-variant-numeric:tabular-nums;margin-right:6px;} 662 .soc-logt{color:var(--muted,#6b7280);font-variant-numeric:tabular-nums;margin-right:6px;}
@@ -669,7 +669,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
669 @media(max-width:640px){.st-grid{grid-template-columns:1fr}} 669 @media(max-width:640px){.st-grid{grid-template-columns:1fr}}
670 .st-gen h3{margin:0 0 8px} 670 .st-gen h3{margin:0 0 8px}
671 .st-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:8px} 671 .st-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:8px}
672−.st-item{background:var(--card,#fff);border:2px solid var(--edge);border-radius:14px;overflow:hidden;box-shadow:3px 3px 0 var(--shadow);display:flex;flex-direction:column} 672+.st-item{background:var(--card,#fff);border:1px solid var(--edge);border-radius:14px;overflow:hidden;box-shadow:3px 3px 0 var(--shadow);display:flex;flex-direction:column}
673 .st-media{position:relative;aspect-ratio:4/5;background:#0d0d0d;overflow:hidden} 673 .st-media{position:relative;aspect-ratio:4/5;background:#0d0d0d;overflow:hidden}
674 .st-media img,.st-media video{width:100%;height:100%;object-fit:cover;display:block} 674 .st-media img,.st-media video{width:100%;height:100%;object-fit:cover;display:block}
675 .st-badge{position:absolute;left:8px;top:8px;background:rgba(13,13,13,.82);color:#fff;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;letter-spacing:.02em} 675 .st-badge{position:absolute;left:8px;top:8px;background:rgba(13,13,13,.82);color:#fff;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;letter-spacing:.02em}
@@ -681,7 +681,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
681 /* ---- Studio loading ---- */ 681 /* ---- Studio loading ---- */
682 #stLoad{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(8,8,10,.72);backdrop-filter:blur(4px)} 682 #stLoad{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(8,8,10,.72);backdrop-filter:blur(4px)}
683 #stLoad.on{display:flex} 683 #stLoad.on{display:flex}
684−.stload-box{background:var(--card,#141414);border:2px solid var(--edge);border-radius:18px;padding:26px 30px;text-align:center;box-shadow:4px 4px 0 var(--shadow);max-width:80vw} 684+.stload-box{background:var(--card,#141414);border:1px solid var(--edge);border-radius:18px;padding:26px 30px;text-align:center;box-shadow:var(--bshadow);max-width:80vw}
685 .stload-spin{width:44px;height:44px;margin:0 auto 14px;border:5px solid rgba(127,127,127,.25);border-top-color:var(--accent,#f97316);border-radius:50%;animation:stspin .8s linear infinite} 685 .stload-spin{width:44px;height:44px;margin:0 auto 14px;border:5px solid rgba(127,127,127,.25);border-top-color:var(--accent,#f97316);border-radius:50%;animation:stspin .8s linear infinite}
686 @keyframes stspin{to{transform:rotate(360deg)}} 686 @keyframes stspin{to{transform:rotate(360deg)}}
687 .stload-msg{font-weight:800;font-size:15px} 687 .stload-msg{font-weight:800;font-size:15px}
@@ -693,11 +693,11 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
693 /* ---- Visiteurs ---- */ 693 /* ---- Visiteurs ---- */
694 #view-visitors{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px calc(86px + env(safe-area-inset-bottom))} 694 #view-visitors{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px calc(86px + env(safe-area-inset-bottom))}
695 .vis-global{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px} 695 .vis-global{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
696−.vg-item{background:var(--card,#fff);border:2px solid var(--edge);border-radius:14px;padding:14px;text-align:center;box-shadow:3px 3px 0 var(--shadow)} 696+.vg-item{background:var(--card,#fff);border:1px solid var(--edge);border-radius:14px;padding:14px;text-align:center;box-shadow:3px 3px 0 var(--shadow)}
697 .vg-n{font-size:26px;font-weight:900;color:var(--accent,#f97316)} 697 .vg-n{font-size:26px;font-weight:900;color:var(--accent,#f97316)}
698 .vg-l{font-size:11px;font-weight:700;color:var(--muted,#777);text-transform:uppercase;letter-spacing:.05em;margin-top:2px} 698 .vg-l{font-size:11px;font-weight:700;color:var(--muted,#777);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
699 .vis-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px} 699 .vis-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
700−.vis-card{background:var(--card,#fff);border:2px solid var(--edge);border-radius:16px;padding:16px;box-shadow:3px 3px 0 var(--shadow)} 700+.vis-card{background:var(--card,#fff);border:1px solid var(--edge);border-radius:16px;padding:16px;box-shadow:3px 3px 0 var(--shadow)}
701 .vis-h{display:flex;align-items:center;gap:10px} 701 .vis-h{display:flex;align-items:center;gap:10px}
702 .vis-h img{width:26px;height:26px;border-radius:6px} 702 .vis-h img{width:26px;height:26px;border-radius:6px}
703 .vis-name{font-weight:800;font-size:15px;flex:1} 703 .vis-name{font-weight:800;font-size:15px;flex:1}
@@ -718,7 +718,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
718 .vis-card:active{transform:scale(.98)} 718 .vis-card:active{transform:scale(.98)}
719 #visDetail{position:fixed;inset:0;z-index:9998;display:none;align-items:flex-start;justify-content:center;background:rgba(8,8,10,.72);backdrop-filter:blur(4px);overflow-y:auto;padding:40px 14px} 719 #visDetail{position:fixed;inset:0;z-index:9998;display:none;align-items:flex-start;justify-content:center;background:rgba(8,8,10,.72);backdrop-filter:blur(4px);overflow-y:auto;padding:40px 14px}
720 #visDetail.on{display:flex} 720 #visDetail.on{display:flex}
721−.vd-box{background:var(--card,#141414);border:2px solid var(--edge);border-radius:18px;width:100%;max-width:720px;box-shadow:5px 5px 0 var(--shadow)} 721+.vd-box{background:var(--card,#141414);border:1px solid var(--edge);border-radius:18px;width:100%;max-width:720px;box-shadow:var(--bshadow)}
722 .vd-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(127,127,127,.2)} 722 .vd-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(127,127,127,.2)}
723 .vd-head img{width:30px;height:30px;border-radius:8px} 723 .vd-head img{width:30px;height:30px;border-radius:8px}
724 .vd-head h3{flex:1;font-size:18px} 724 .vd-head h3{flex:1;font-size:18px}
@@ -785,11 +785,11 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
785 .head-right { display: flex; align-items: center; gap: 8px; } 785 .head-right { display: flex; align-items: center; gap: 8px; }
786 .icon-btn { 786 .icon-btn {
787 position: relative; width: 34px; height: 34px; border-radius: 10px; 787 position: relative; width: 34px; height: 34px; border-radius: 10px;
788− border: 1.5px solid var(--edge); background: var(--card); cursor: pointer; 788+ border: 1px solid var(--edge); background: var(--card); cursor: pointer;
789 display: flex; align-items: center; justify-content: center; color: var(--ink); 789 display: flex; align-items: center; justify-content: center; color: var(--ink);
790 } 790 }
791 .icon-btn svg { width: 17px; height: 17px; } 791 .icon-btn svg { width: 17px; height: 17px; }
792−.icon-btn .badge { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); border: 1.5px solid var(--edge); } 792+.icon-btn .badge { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); border: 1px solid var(--edge); }
793 .top-stamp { font-size: 11px; color: var(--muted); font-family: var(--mono); } 793 .top-stamp { font-size: 11px; color: var(--muted); font-family: var(--mono); }
794 .view.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(86px + env(safe-area-inset-bottom)); } 794 .view.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(86px + env(safe-area-inset-bottom)); }
795 795
@@ -799,7 +799,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
799 .bottomnav { display: none; } 799 .bottomnav { display: none; }
800 .sidebar { 800 .sidebar {
801 display: flex; flex-direction: column; width: 224px; flex-shrink: 0; 801 display: flex; flex-direction: column; width: 224px; flex-shrink: 0;
802− background: var(--card); border-right: 2px solid var(--edge); 802+ background: var(--card); border-right: 1px solid var(--edge);
803 padding: 14px 10px 12px; 803 padding: 14px 10px 12px;
804 } 804 }
805 .side-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.4px; padding: 2px 8px 14px; } 805 .side-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.4px; padding: 2px 8px 14px; }
@@ -810,10 +810,10 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
810 padding: 9px 12px; border-radius: 10px; text-align: left; 810 padding: 9px 12px; border-radius: 10px; text-align: left;
811 } 811 }
812 .side-nav .nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; } 812 .side-nav .nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
813− .side-nav .nav-btn.active { background: var(--orange-soft); color: var(--ink); border: 1.5px solid var(--edge); padding: 7.5px 10.5px; } 813+ .side-nav .nav-btn.active { background: var(--orange-soft); color: var(--ink); border: 1px solid var(--edge); padding: 7.5px 10.5px; }
814 .side-nav .nav-btn.active svg { color: var(--orange-deep); } 814 .side-nav .nav-btn.active svg { color: var(--orange-deep); }
815 .side-nav .nav-btn .badge { position: absolute; top: 8px; right: 10px; left: auto; } 815 .side-nav .nav-btn .badge { position: absolute; top: 8px; right: 10px; left: auto; }
816− .side-foot { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px 0; border-top: 1.5px solid var(--line); } 816+ .side-foot { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px 0; border-top: 1px solid var(--line); }
817 .side-node { font-size: 11px; color: var(--muted); } 817 .side-node { font-size: 11px; color: var(--muted); }
818 .header { padding: 10px 20px; } 818 .header { padding: 10px 20px; }
819 .head-right #connPill { display: none; } 819 .head-right #connPill { display: none; }
@@ -833,7 +833,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
833 } 833 }
834 .ov-kpis.compact { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } 834 .ov-kpis.compact { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
835 .kpi2 { 835 .kpi2 {
836− background: var(--card); border: 1.5px solid var(--edge); border-radius: var(--r-md); 836+ background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-md);
837 padding: 10px 12px; box-shadow: var(--bshadow-sm); 837 padding: 10px 12px; box-shadow: var(--bshadow-sm);
838 } 838 }
839 .kpi2 .kv2 { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.1; font-variant-numeric: tabular-nums; } 839 .kpi2 .kv2 { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.1; font-variant-numeric: tabular-nums; }
@@ -851,7 +851,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
851 .ov-cols { display: grid; grid-template-columns: 1fr; gap: var(--panel-gap); margin-bottom: var(--panel-gap); max-width: 1180px; } 851 .ov-cols { display: grid; grid-template-columns: 1fr; gap: var(--panel-gap); margin-bottom: var(--panel-gap); max-width: 1180px; }
852 @media (min-width: 900px) { .ov-cols { grid-template-columns: 3fr 2fr; } .ov-cols + .ov-cols { grid-template-columns: 1fr 1fr; } } 852 @media (min-width: 900px) { .ov-cols { grid-template-columns: 3fr 2fr; } .ov-cols + .ov-cols { grid-template-columns: 1fr 1fr; } }
853 .panel { 853 .panel {
854− background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-lg); 854+ background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-lg);
855 box-shadow: var(--bshadow-sm); padding: 14px 16px; min-width: 0; 855 box-shadow: var(--bshadow-sm); padding: 14px 16px; min-width: 0;
856 } 856 }
857 .panel.slim { padding: 10px 14px; margin-bottom: var(--panel-gap); max-width: 1180px; } 857 .panel.slim { padding: 10px 14px; margin-bottom: var(--panel-gap); max-width: 1180px; }
@@ -866,7 +866,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
866 .ov-eco-chips { display: flex; flex-wrap: wrap; gap: 6px; } 866 .ov-eco-chips { display: flex; flex-wrap: wrap; gap: 6px; }
867 .eco-chip { 867 .eco-chip {
868 display: inline-flex; align-items: center; gap: 6px; cursor: pointer; 868 display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
869− border: 1.5px solid var(--edge); border-radius: 999px; padding: 4px 10px; 869+ border: 1px solid var(--edge); border-radius: 999px; padding: 4px 10px;
870 font-size: 11.5px; font-weight: 700; background: var(--card2); 870 font-size: 11.5px; font-weight: 700; background: var(--card2);
871 } 871 }
872 .eco-chip b { font-family: var(--mono); font-weight: 700; color: var(--muted); } 872 .eco-chip b { font-family: var(--mono); font-weight: 700; color: var(--muted); }
@@ -874,23 +874,23 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
874 .eco-chip.slow { color: var(--warn); background: var(--warn-soft); } 874 .eco-chip.slow { color: var(--warn); background: var(--warn-soft); }
875 .eco-chip.down { color: #fff; background: var(--bad); border-color: var(--bad); } 875 .eco-chip.down { color: #fff; background: var(--bad); border-color: var(--bad); }
876 .eco-chip.down b { color: #fff; } 876 .eco-chip.down b { color: #fff; }
877−.ov-sess { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1.5px solid var(--line); cursor: pointer; } 877+.ov-sess { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
878 .ov-sess:last-child { border-bottom: none; } 878 .ov-sess:last-child { border-bottom: none; }
879 .ov-sess-t { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 879 .ov-sess-t { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
880 .ov-sess-m { font-size: 11px; color: var(--muted); flex-shrink: 0; } 880 .ov-sess-m { font-size: 11px; color: var(--muted); flex-shrink: 0; }
881−.anom { font-size: 12.5px; padding: 7px 0; border-bottom: 1.5px solid var(--line); font-weight: 600; } 881+.anom { font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
882 .anom:last-child { border-bottom: none; } 882 .anom:last-child { border-bottom: none; }
883 .anom.warn { color: var(--warn); font-weight: 800; } 883 .anom.warn { color: var(--warn); font-weight: 800; }
884 884
885 /* répartition humains / bots / datacenter */ 885 /* répartition humains / bots / datacenter */
886−.break-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--card2); border: 1.5px solid var(--line); } 886+.break-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--card2); border: 1px solid var(--line); }
887 .break-bar i { display: block; height: 100%; } 887 .break-bar i { display: block; height: 100%; }
888 888
889 /* temps réel */ 889 /* temps réel */
890 .rt-list { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; } 890 .rt-list { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
891 .rt-row { 891 .rt-row {
892 display: flex; align-items: center; gap: 8px; 892 display: flex; align-items: center; gap: 8px;
893− padding: 6px 0; border-bottom: 1.5px solid var(--line); font-size: 12.5px; 893+ padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
894 } 894 }
895 .rt-row:last-child { border-bottom: none; } 895 .rt-row:last-child { border-bottom: none; }
896 .rt-row img { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; } 896 .rt-row img { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; }
@@ -905,11 +905,11 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
905 .vis-card { padding: 12px 14px; box-shadow: var(--bshadow-sm); border-width: 2px; } 905 .vis-card { padding: 12px 14px; box-shadow: var(--bshadow-sm); border-width: 2px; }
906 .vis-on-pill { 906 .vis-on-pill {
907 font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 10px; 907 font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 10px;
908− border: 1.5px solid var(--line); color: var(--muted); background: var(--card2); flex-shrink: 0; 908+ border: 1px solid var(--line); color: var(--muted); background: var(--card2); flex-shrink: 0;
909 } 909 }
910 .vis-on-pill.on { background: var(--good-soft); color: var(--good); border-color: var(--good); } 910 .vis-on-pill.on { background: var(--good-soft); color: var(--good); border-color: var(--good); }
911 .vis-row { margin-top: 10px; } 911 .vis-row { margin-top: 10px; }
912−.vis-m { background: var(--card2); border: 1.5px solid var(--line); } 912+.vis-m { background: var(--card2); border: 1px solid var(--line); }
913 .vm-n { font-size: 17px; font-variant-numeric: tabular-nums; } 913 .vm-n { font-size: 17px; font-variant-numeric: tabular-nums; }
914 .vis-pv { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11.5px; } 914 .vis-pv { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11.5px; }
915 .vis-more { color: var(--orange-deep); font-weight: 800; } 915 .vis-more { color: var(--orange-deep); font-weight: 800; }
@@ -919,7 +919,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
919 /* filtres listes */ 919 /* filtres listes */
920 .filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; max-width: 1180px; } 920 .filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; max-width: 1180px; }
921 .f-input, .f-select { 921 .f-input, .f-select {
922− background: var(--card); border: 1.5px solid var(--edge); color: var(--ink); 922+ background: var(--card); border: 1px solid var(--edge); color: var(--ink);
923 border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; font-family: inherit; outline: none; 923 border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; font-family: inherit; outline: none;
924 } 924 }
925 .f-input { flex: 1; min-width: 140px; } 925 .f-input { flex: 1; min-width: 140px; }
@@ -934,7 +934,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
934 .sess-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } 934 .sess-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
935 .sess-cost, .sess-when { flex-shrink: 0; font-size: 11.5px; color: var(--muted); } 935 .sess-cost, .sess-when { flex-shrink: 0; font-size: 11.5px; color: var(--muted); }
936 .sess-btns { display: flex; gap: 6px; flex-shrink: 0; } 936 .sess-btns { display: flex; gap: 6px; flex-shrink: 0; }
937−.sess-btns button { border: 1.5px solid var(--edge); border-radius: 999px; background: var(--card2); font-size: 11.5px; font-weight: 800; padding: 5px 12px; cursor: pointer; } 937+.sess-btns button { border: 1px solid var(--edge); border-radius: 999px; background: var(--card2); font-size: 11.5px; font-weight: 800; padding: 5px 12px; cursor: pointer; }
938 .sess-btns .del { color: var(--bad); padding: 5px 9px; } 938 .sess-btns .del { color: var(--bad); padding: 5px 9px; }
939 @media (max-width: 640px) { .sess-when { display: none; } } 939 @media (max-width: 640px) { .sess-when { display: none; } }
940 940
@@ -949,7 +949,7 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
949 .more-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 8px; } 949 .more-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 8px; }
950 .more-btn { 950 .more-btn {
951 display: flex; align-items: center; gap: 10px; 951 display: flex; align-items: center; gap: 10px;
952− background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-md); 952+ background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-md);
953 box-shadow: var(--bshadow-sm); padding: 13px 14px; font-weight: 800; font-size: 14px; cursor: pointer; 953 box-shadow: var(--bshadow-sm); padding: 13px 14px; font-weight: 800; font-size: 14px; cursor: pointer;
954 } 954 }
955 .more-btn svg { width: 20px; height: 20px; color: var(--orange-deep); } 955 .more-btn svg { width: 20px; height: 20px; color: var(--orange-deep); }
@@ -961,14 +961,14 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
961 .wr-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); text-align: left; } 961 .wr-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); text-align: left; }
962 .wr-item { 962 .wr-item {
963 display: flex; align-items: center; gap: 9px; text-align: left; 963 display: flex; align-items: center; gap: 9px; text-align: left;
964− background: var(--card); border: 1.5px solid var(--edge); border-radius: var(--r-md); 964+ background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-md);
965 padding: 9px 12px; cursor: pointer; font-family: inherit; 965 padding: 9px 12px; cursor: pointer; font-family: inherit;
966 } 966 }
967 .wr-t { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } 967 .wr-t { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
968 .wr-m { font-size: 11px; color: var(--muted); flex-shrink: 0; } 968 .wr-m { font-size: 11px; color: var(--muted); flex-shrink: 0; }
969 969
970 /* réglages analytics */ 970 /* réglages analytics */
971−.an-cfg .ac-num { width: 74px; background: var(--bg); border: 1.5px solid var(--edge); color: var(--ink); border-radius: 8px; padding: 5px 8px; font-family: var(--mono); font-size: 13px; } 971+.an-cfg .ac-num { width: 74px; background: var(--bg); border: 1px solid var(--edge); color: var(--ink); border-radius: 8px; padding: 5px 8px; font-family: var(--mono); font-size: 13px; }
972 .an-cfg .pe-textarea { font-size: 12px; } 972 .an-cfg .pe-textarea { font-size: 12px; }
973 973
974 /* studio / vieux composants : bascule douce vers les variables */ 974 /* studio / vieux composants : bascule douce vers les variables */
@@ -977,3 +977,143 @@ details.thinking-box summary { color: var(--muted); font-size: 12.5px; cursor: p
977 .vd-head h3 { color: var(--ink); } 977 .vd-head h3 { color: var(--ink); }
978 .st-cap { color: var(--muted); } 978 .st-cap { color: var(--muted); }
979 .vis-chart { background: var(--card2); border-radius: 12px; } 979 .vis-chart { background: var(--card2); border-radius: 12px; }
980+
981+/* ====================================================================
982+ v3.1 — Modernisation : fini le look jouet.
983+ Hairlines, ombres douces, rayons contenus, typo sobre, contrôles fins.
984+ ==================================================================== */
985+:root {
986+ --r-xl: 16px; --r-lg: 12px; --r-md: 10px; --r-sm: 8px;
987+ --bshadow: 0 1px 2px rgba(24, 18, 10, 0.05), 0 8px 24px rgba(24, 18, 10, 0.06);
988+ --bshadow-sm: 0 1px 2px rgba(24, 18, 10, 0.05);
989+ --edge: #ddd8cb;
990+ --round: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
991+ --bg: #F4F3EE;
992+ --card: #FFFFFE;
993+ --card2: #F7F5EF;
994+}
995+:root[data-theme="dark"] {
996+ --edge: #353026;
997+ --bshadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
998+ --bshadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
999+ --bg: #131109;
1000+ --bg: #14110c;
1001+ --card: #1c1913;
1002+ --card2: #242019;
1003+}
1004+html, body { font: 14.5px/1.5 var(--round); letter-spacing: -0.01em; }
1005+
1006+/* boutons : sobres, nets */
1007+.btn-cta {
1008+ border: none; border-radius: 9px; padding: 9px 16px;
1009+ font-size: 13.5px; font-weight: 700; box-shadow: var(--bshadow-sm);
1010+}
1011+.btn-cta:active { transform: translateY(1px); box-shadow: none; }
1012+.btn-cta.small { font-size: 12.5px; padding: 7px 13px; }
1013+.btn-ghost { border: 1px solid var(--edge); background: var(--card); border-radius: 9px; padding: 8px 14px; font-weight: 600; }
1014+.btn-danger { border: 1px solid var(--bad); border-radius: 9px; font-weight: 700; padding: 10px 20px; }
1015+.icon-btn { border-radius: 9px; }
1016+.chip { border-radius: 8px; background: var(--card); font-weight: 600; border-color: var(--edge); }
1017+.chip.orange { background: var(--orange-soft); border-color: transparent; color: var(--orange-deep); font-weight: 700; }
1018+.pill-select {
1019+ border-radius: 9px; border: 1px solid var(--edge); box-shadow: none;
1020+ font-weight: 700; font-size: 13px;
1021+}
1022+.pill-select.all-mode { box-shadow: none; }
1023+
1024+/* marque : carré arrondi net, sans cerne */
1025+.ka-mark { border: none; box-shadow: none; border-radius: 9px; width: 30px; height: 30px; font-size: 14px; }
1026+.ka-mark.big { border-radius: 18px; box-shadow: var(--bshadow); }
1027+.brand, .side-brand { font-size: 16.5px; }
1028+
1029+/* header + nav */
1030+.header { border-bottom: 1px solid var(--edge); background: var(--bg); }
1031+.bottomnav { border-top: 1px solid var(--edge); }
1032+.conn-pill { border: 1px solid var(--edge); font-weight: 600; }
1033+@media (min-width: 1020px) {
1034+ .sidebar { border-right: 1px solid var(--edge); background: var(--bg); }
1035+ .side-nav .nav-btn { font-weight: 600; border-radius: 8px; }
1036+ .side-nav .nav-btn:hover { background: var(--card2); color: var(--ink); }
1037+ .side-nav .nav-btn.active { background: var(--orange-soft); border: none; padding: 9px 12px; color: var(--ink); font-weight: 700; }
1038+}
1039+
1040+/* cartes & panneaux : hairline + ombre douce */
1041+.panel, .kpi2, .site-card, .node-card, .sess-card, .set-card, .soc-card, .st-item,
1042+.vis-card, .vg-item, .sheet-sec, .login-box, .tool, .msg-claude, .perm, .more-btn, .wr-item, .eco-stat, .kpi {
1043+ border-width: 1px; border-color: var(--edge); box-shadow: var(--bshadow-sm);
1044+}
1045+.panel, .login-box, .sheet-panel { box-shadow: var(--bshadow); }
1046+.site-card.down { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
1047+.node-card.warn { border-color: var(--warn); }
1048+.sess-card.row, .sess-card.prow { box-shadow: none; }
1049+.tile, .vis-m, .site-metrics .m, .pc { border-radius: 8px; }
1050+
1051+/* segmented controls modernes */
1052+.seg { background: var(--card2); border: 1px solid var(--edge); border-radius: 10px; padding: 3px; gap: 3px; }
1053+.seg button { border: none; background: none; border-radius: 7px; font-weight: 600; padding: 8px 12px; color: var(--muted); }
1054+.seg button.on { background: var(--card); color: var(--ink); font-weight: 700; box-shadow: var(--bshadow-sm); }
1055+.seg.vert { padding: 4px; }
1056+.seg.mini button { padding: 5px 11px; }
1057+:root[data-theme="dark"] .seg button.on { background: #38321f; color: var(--ink); }
1058+.seg button.on[data-v="bypass"] { color: var(--bad); }
1059+
1060+/* chat */
1061+.chatbar { border-bottom: 1px solid var(--edge); }
1062+.msg-user { border: none; border-radius: 14px 14px 5px 14px; box-shadow: var(--bshadow-sm); font-weight: 500; }
1063+.msg-claude { border-radius: 12px; }
1064+.composer-inner { border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--bshadow); background: var(--card); }
1065+.send-btn { border: none; width: 38px; height: 38px; box-shadow: none; }
1066+.wand-btn { border: 1px solid var(--edge); background: var(--card); }
1067+.hint { border: 1px solid var(--edge); box-shadow: none; border-radius: 9px; font-weight: 600; }
1068+.working { border: 1px solid var(--edge); box-shadow: var(--bshadow-sm); border-radius: 10px; font-weight: 600; }
1069+.dots i { border: none; }
1070+.tool { box-shadow: var(--bshadow-sm); }
1071+.tool .t-icon { border: none; background: var(--card2); border-radius: 7px; }
1072+.tool-body { border-top: 1px solid var(--edge); }
1073+.perm { box-shadow: var(--bshadow); border-radius: 12px; }
1074+.perm-actions button { border-radius: 9px; border: 1px solid var(--edge); }
1075+.perm-allow { border: none; box-shadow: var(--bshadow-sm); }
1076+.perm-allall { border: none; border-radius: 9px; box-shadow: var(--bshadow-sm); }
1077+.meta-line { border-radius: 7px; }
1078+.banner { border: 1px solid var(--edge); box-shadow: var(--bshadow); border-radius: 10px; font-weight: 600; }
1079+
1080+/* KPI : chiffres droits, hiérarchie fine */
1081+.kpi2 { padding: 12px 14px; border-radius: 12px; }
1082+.kpi2 .kv2 { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
1083+.kpi2 .kl2 { font-weight: 600; letter-spacing: 0.4px; }
1084+.kpi .v, .eco-stat .v { font-weight: 700; }
1085+.panel-h h3 { font-weight: 700; letter-spacing: 0.5px; }
1086+.view-head h2 { font-weight: 700; font-size: 21px; letter-spacing: -0.4px; }
1087+.login-title, .welcome h2 { font-weight: 700; }
1088+.page-title { font-weight: 700; }
1089+.vm-n, .vd-kn, .tile .v, .pc b, .site-ms { font-weight: 700; }
1090+.vg-n { font-weight: 700; }
1091+
1092+/* pills de statut : tags nets */
1093+.st-pill, .sess-badge, .vis-on-pill, .node-apps, .eco-chip { border-radius: 6px; border-width: 1px; font-weight: 700; }
1094+.st-pill { border-color: transparent; }
1095+.st-pill.up { background: var(--good-soft); }
1096+.st-pill.slow { background: var(--warn-soft); }
1097+.sess-badge { border-color: transparent; }
1098+.sess-badge.idle { background: var(--card2); }
1099+.batch-tag { border-radius: 5px; }
1100+.kdelta { border-radius: 5px; font-weight: 700; }
1101+
1102+/* filtres & inputs */
1103+.f-input, .f-select { border-radius: 9px; border: 1px solid var(--edge); font-weight: 500; }
1104+.login input, .pe-input, .pe-textarea, .soc-select, #view-social textarea { border: 1px solid var(--edge); border-radius: 9px; }
1105+.login input:focus, .pe-input:focus, .pe-textarea:focus, .f-input:focus { border-color: var(--orange); outline: 2px solid var(--orange-soft); }
1106+.an-cfg .ac-num { border: 1px solid var(--edge); border-radius: 7px; }
1107+.slash-hint button, .sess-actions button, .sess-btns button { border: 1px solid var(--edge); border-radius: 7px; font-weight: 600; }
1108+.sess-actions .p-send { border: none; box-shadow: var(--bshadow-sm); font-weight: 700; }
1109+.see-more { font-weight: 700; }
1110+
1111+/* divers */
1112+.sheet-panel { border: 1px solid var(--edge); border-bottom: none; border-radius: 16px 16px 0 0; }
1113+.nbar-track, .break-bar, .statusbar { border: none; background: var(--card2); }
1114+.vis-chart { background: transparent; }
1115+.md pre, .tool-body pre, .perm pre, .diff, .prompt-preview { border-radius: 8px; border: 1px solid var(--line); }
1116+.eco-chip b { font-weight: 600; }
1117+.welcome p, .login-sub { font-weight: 500; }
1118+.nav-btn { font-weight: 600; }
1119+.md :not(pre) > code { border-radius: 4px; }
980 1120
Menu

Theme
↑↓ navigate ↵ open esc close / or ⌘K anywhere