/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Bricolage_Grotesque","arguments":[{"subsets":["latin"],"variable":"--font-display","display":"swap"}],"variableName":"display"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/93a6e477e1480c92-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/c7e0cf6c760983e7-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/9d5a263311222317-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Bricolage Grotesque Fallback';src: local("Arial");ascent-override: 88.21%;descent-override: 25.61%;line-gap-override: 0.00%;size-adjust: 105.43%
}.__className_1243c3 {font-family: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback';font-style: normal
}.__variable_1243c3 {--font-display: 'Bricolage Grotesque', 'Bricolage Grotesque Fallback'
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Instrument_Sans","arguments":[{"subsets":["latin"],"variable":"--font-body","display":"swap"}],"variableName":"body"} ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/adb45196eddef626-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/26d0ba92e140f0dc-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Instrument Sans Fallback';src: local("Arial");ascent-override: 94.42%;descent-override: 24.33%;line-gap-override: 0.00%;size-adjust: 102.74%
}.__className_3f4a4b {font-family: 'Instrument Sans', 'Instrument Sans Fallback';font-style: normal
}.__variable_3f4a4b {--font-body: 'Instrument Sans', 'Instrument Sans Fallback'
}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* Engene — Build · Create · Inspire. Sombre, premium ; violet électrique + cyan. Deux expériences distinctes : mobile (<1024px) et poste de travail. */
:root {
  --font-body: "Instrument Sans", system-ui; /* remplacé par next/font quand la police est chargée */
  --font-display: "Bricolage Grotesque", system-ui;
  --bg: #07070e;
  --bg-2: #0b0b16;
  --panel: #0f0f1c;
  --card: #141426;
  --card-2: #191931;
  --line: rgba(160, 150, 255, 0.12);
  --line-2: rgba(160, 150, 255, 0.22);
  --text: #eeeeff;
  --muted: #9b99bd;
  --faint: #6a688c;
  --violet: #7c3aed;
  --violet-2: #a78bfa;
  --cyan: #22d3ee;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #fb7185;
  --grad: linear-gradient(135deg, #7c3aed 0%, #5b6cf0 55%, #22d3ee 120%);
  --glow: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 8px 40px -8px rgba(124, 58, 237, 0.55);
  --display: var(--font-display), "Bricolage Grotesque", var(--font-body), ui-sans-serif, system-ui, sans-serif;
  --thread: linear-gradient(180deg, #8b5cf6, #22d3ee);
  --r: 16px;
  --r-sm: 10px;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: var(--font-body), "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(1200px 600px at 80% -10%, rgba(124, 58, 237, 0.16), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(34, 211, 238, 0.08), transparent 60%), var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: rgba(124, 58, 237, 0.5); }
* { scrollbar-width: thin; scrollbar-color: #2a2a4a transparent; }

/* ---------- briques communes ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__name { font: 700 19px/1 var(--display); letter-spacing: -0.02em; }
.brand__tag { color: var(--faint); font-size: 12px; }
.badge { font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 99px; color: var(--violet-2); border: 1px solid rgba(167, 139, 250, 0.35); background: rgba(124, 58, 237, 0.12); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); padding: 9px 14px; border-radius: 12px; font-weight: 600; font-size: 14px; transition: transform 0.12s, border-color 0.15s, background 0.15s; min-height: 40px; }
.btn:hover:not(:disabled) { border-color: var(--violet-2); background: var(--card-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--glow); }
.btn--primary:hover:not(:disabled) { background: var(--grad); filter: brightness(1.08); border-color: transparent; }
.btn--quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn--line { background: transparent; }
.btn--small { padding: 5px 10px; min-height: 30px; font-size: 13px; border-radius: 9px; }
.btn--block { width: 100%; }
.btn--danger { color: var(--red); border-color: rgba(251, 113, 133, 0.4); }
.iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--muted); }
.iconbtn:hover { color: var(--text); border-color: var(--line-2); }
.input, .textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 13px; color: var(--text); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .textarea:focus { border-color: var(--violet-2); outline: none; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25); }
.alert { border: 1px solid rgba(251, 113, 133, 0.4); background: rgba(251, 113, 133, 0.08); color: #ffc2cb; padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.notice { border: 1px solid rgba(34, 211, 238, 0.3); background: rgba(34, 211, 238, 0.06); color: #b8f1fb; padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.hint { color: var(--muted); font-size: 14px; margin: 0; }
.eyebrow { color: var(--faint); font-size: 12.5px; font-weight: 600; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(167, 139, 250, 0.3); border-top-color: var(--cyan); animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .spin, .live { animation: none !important; } }

/* verdict : ce que le Runner a réellement établi */
.verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; border: 1px solid; white-space: nowrap; }
.verdict::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.verdict--verified { color: var(--green); border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.08); }
.verdict--built { color: var(--cyan); border-color: rgba(34, 211, 238, 0.4); background: rgba(34, 211, 238, 0.08); }
.verdict--failed { color: var(--red); border-color: rgba(251, 113, 133, 0.45); background: rgba(251, 113, 133, 0.08); }
.verdict--none, .verdict--nothing, .verdict--error, .verdict--cancelled { color: var(--amber); border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.07); }
.verdict--stale { color: var(--faint); border-color: var(--line-2); background: transparent; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 1.4s infinite; display: inline-block; }

/* ---------- connexion ---------- */
.auth { min-height: 100%; display: grid; grid-template-columns: 1fr; }
.auth__aside { display: none; padding: 56px; background: linear-gradient(160deg, rgba(124, 58, 237, 0.25), rgba(34, 211, 238, 0.06) 70%), var(--bg-2); border-right: 1px solid var(--line); flex-direction: column; justify-content: center; gap: 22px; }
.auth__aside h2 { font-family: var(--display); font-size: 34px; line-height: 1.12; margin: 8px 0 0; letter-spacing: -0.02em; }
.auth__aside p { color: var(--muted); max-width: 46ch; margin: 0; }
.auth__main { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 32px 22px; max-width: 460px; width: 100%; margin: 0 auto; }
.auth__title { font-family: var(--display); font-size: 28px; margin: 0 0 4px; letter-spacing: -0.02em; }
.auth__lead { color: var(--muted); margin: 0; }
.auth__form { display: grid; grid-gap: 14px; gap: 14px; }
.field { display: grid; grid-gap: 6px; gap: 6px; }
.field__label { font-size: 13px; color: var(--muted); font-weight: 600; }
.field__hint { color: var(--faint); font-size: 13px; margin: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 4px; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); padding: 4px; border-radius: 12px; }
.seg__item { border: 0; background: transparent; color: var(--muted); padding: 8px; border-radius: 9px; font-weight: 600; }
.seg__item[aria-selected="true"] { background: var(--card-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.demo { display: grid; grid-gap: 10px; gap: 10px; background: rgba(8, 8, 18, 0.6); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; max-width: 460px; }
@media (min-width: 960px) { .auth { grid-template-columns: 1.1fr 1fr; } .auth__aside { display: flex; } }

/* ---------- barre de présence de l'agent (timeline) ---------- */
.tl { display: grid; grid-gap: 0; gap: 0; margin: 0; padding: 0; list-style: none; }
.tl__row { display: grid; grid-template-columns: 22px 1fr auto; grid-gap: 10px; gap: 10px; align-items: start; padding: 7px 0; position: relative; font-size: 13.5px; }
.tl__row:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 28px; bottom: -6px; width: 2px; margin-left: -0.5px; border-radius: 2px; background: linear-gradient(180deg, rgba(139,92,246,.55), rgba(34,211,238,.25)); }
.tl__dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted); }
.tl__dot--ok { color: var(--green); border-color: rgba(52, 211, 153, 0.5); }
.tl__dot--run { color: var(--cyan); border-color: rgba(34, 211, 238, 0.6); box-shadow: 0 0 0 4px rgba(34,211,238,.12), 0 0 14px rgba(34,211,238,.45); }
.tl__dot--bad { color: var(--red); border-color: rgba(251, 113, 133, 0.5); }
.tl__title { color: var(--text); overflow-wrap: anywhere; }
.tl__sub { color: var(--faint); font-size: 12.5px; font-family: var(--mono); overflow-wrap: anywhere; }
.tl__meta { color: var(--faint); font-size: 12px; white-space: nowrap; }

/* ---------- assistant ---------- */
.assistant { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.assistant__scroll { flex: 1 1; overflow-y: auto; padding: 16px; display: grid; grid-gap: 14px; gap: 14px; align-content: start; }
.msg { display: grid; grid-gap: 4px; gap: 4px; }
.msg--user { justify-items: end; }
.msg__bubble { max-width: 92%; padding: 10px 14px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line); overflow-wrap: anywhere; }
.msg--user .msg__bubble { background: linear-gradient(135deg, rgba(124, 58, 237, 0.55), rgba(91, 108, 240, 0.4)); border-color: rgba(167, 139, 250, 0.4); border-bottom-right-radius: 5px; }
.msg--assistant .msg__bubble { border-bottom-left-radius: 5px; }
.msg__who { color: var(--faint); font-size: 12px; padding: 0 4px; }
.activity { padding: 12px 14px; display: grid; grid-gap: 8px; gap: 8px; }
.activity__head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.plan { margin: 0; padding: 0; list-style: none; display: grid; grid-gap: 4px; gap: 4px; }
.plan li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.plan li[data-s="done"] { color: var(--text); }
.plan li[data-s="doing"] { color: var(--cyan); }
.plan__box { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line-2); flex: none; margin-top: 2px; display: grid; place-items: center; }
.plan li[data-s="done"] .plan__box { background: rgba(52, 211, 153, 0.15); border-color: rgba(52, 211, 153, 0.5); color: var(--green); }
.composer { padding: 12px; border-top: 1px solid var(--line); background: rgba(9, 9, 20, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; grid-gap: 8px; gap: 8px; }
.composer__box { display: flex; gap: 8px; align-items: flex-end; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 16px; padding: 8px 8px 8px 14px; }
.composer__box:focus-within { border-color: var(--violet-2); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22); }
.composer__input { flex: 1 1; background: none; border: 0; outline: none; resize: none; max-height: 160px; min-height: 24px; padding: 6px 0; color: var(--text); }
.composer__send { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: var(--glow); flex: none; }
.composer__send:disabled { opacity: 0.4; box-shadow: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line-2); background: var(--card); color: var(--muted); border-radius: 99px; padding: 6px 12px; font-size: 13px; }
.chip:hover { color: var(--text); border-color: var(--violet-2); }
.empty { display: grid; grid-gap: 14px; gap: 14px; justify-items: center; text-align: center; padding: 28px 8px; }
.empty__orb { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--grad); box-shadow: var(--glow); color: #fff; }
.empty__title { font-family: var(--display); font-size: 22px; margin: 0; letter-spacing: -0.02em; }
.empty__lead { color: var(--muted); margin: 0; max-width: 44ch; }

/* ---------- code ---------- */
.explorer { display: grid; grid-gap: 2px; gap: 2px; padding: 8px; align-content: start; overflow: auto; }
.tree__item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); text-align: left; font-size: 13.5px; width: 100%; font-family: var(--mono); }
.tree__item:hover { background: var(--card); color: var(--text); }
.tree__item[aria-current="true"] { background: rgba(124, 58, 237, 0.18); color: #fff; box-shadow: inset 2px 0 0 var(--violet-2); }
.tree__dir { color: var(--faint); font-size: 12px; padding: 8px 8px 2px; font-family: var(--mono); }
.codeview { display: grid; grid-template-columns: auto 1fr; overflow: auto; font: 13px/1.65 var(--mono); background: #090913; height: 100%; }
.codeview pre { margin: 0; padding: 14px 0; }
.codeview__gutter { padding: 14px 12px !important; color: #46466a; text-align: right; -webkit-user-select: none; -moz-user-select: none; user-select: none; position: -webkit-sticky; position: sticky; left: 0; background: #090913; }
.codeview__src { padding: 14px 18px !important; color: #d9d8ff; -moz-tab-size: 2; tab-size: 2; }
.filehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font: 12.5px var(--mono); }

/* ---------- terminal / vérification ---------- */
.term { background: #06060d; font: 12.5px/1.6 var(--mono); color: #cfcff0; padding: 14px 16px; overflow: auto; height: 100%; }
.term__line { white-space: pre-wrap; overflow-wrap: anywhere; }
.term__ok { color: var(--green); } .term__bad { color: var(--red); } .term__dim { color: var(--faint); } .term__cy { color: var(--cyan); }
.steps { display: grid; grid-gap: 8px; gap: 8px; padding: 14px; }
.step { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: grid; grid-gap: 6px; gap: 6px; }
.step__head { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.step__tail { font: 12px/1.55 var(--mono); color: #b9b8e0; background: #07070f; border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; }
.statline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line); }

/* ---------- aperçu ---------- */
.preview { display: grid; grid-template-rows: auto 1fr; height: 100%; min-height: 0; }
.preview__bar { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.preview__url { flex: 1 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; color: var(--faint); font: 12.5px var(--mono); }
.preview__frame { width: 100%; height: 100%; border: 0; background: #fff; }
.preview__empty { display: grid; place-content: center; grid-gap: 10px; gap: 10px; text-align: center; padding: 24px; color: var(--muted); }

/* ---------- accueil ---------- */
.home { display: grid; grid-gap: 22px; gap: 22px; align-content: start; }
.home__hello { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.askbox { padding: 14px; display: grid; grid-gap: 12px; gap: 12px; background: linear-gradient(180deg, rgba(124, 58, 237, 0.16), rgba(20, 20, 38, 0.9)); border: 1px solid rgba(167, 139, 250, 0.3); border-radius: 20px; box-shadow: var(--glow); }
.askbox__row { display: flex; align-items: flex-end; gap: 8px; }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; gap: 10px; }
.quick__item { display: grid; grid-gap: 8px; gap: 8px; justify-items: start; padding: 14px 12px; text-align: left; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.quick__item:hover { border-color: var(--violet-2); }
.quick__ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(124, 58, 237, 0.2); color: var(--violet-2); }
.quick__item:nth-child(2) .quick__ico { background: rgba(34, 211, 238, 0.14); color: var(--cyan); }
.quick__item:nth-child(3) .quick__ico { background: rgba(52, 211, 153, 0.14); color: var(--green); }
.quick__label { font-weight: 600; font-size: 14px; }
.quick__sub { color: var(--faint); font-size: 12px; }
.sect { display: flex; align-items: center; justify-content: space-between; }
.sect h2 { font-size: 16px; margin: 0; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; grid-gap: 10px; gap: 10px; }
.proj { display: grid; grid-template-columns: 44px 1fr auto; grid-gap: 12px; gap: 12px; align-items: center; width: 100%; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); text-align: left; color: var(--text); }
.proj:hover, .proj[aria-current="true"] { border-color: var(--violet-2); }
.proj__ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--grad); }
.proj__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj__meta { color: var(--faint); font-size: 12.5px; }
.activity-list { display: grid; grid-gap: 8px; gap: 8px; }
.act { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 13.5px; }
.act__txt { flex: 1 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= MOBILE (<1024px) ================= */
.m-app { display: grid; grid-template-rows: 1fr auto; height: 100dvh; max-width: 640px; margin: 0 auto; position: relative; }
.m-screen { overflow-y: auto; min-height: 0; padding: 18px 16px 24px; }
.m-screen--flush { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.m-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(9, 9, 20, 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.m-top__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1; text-align: center; }
.m-tabs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.m-tab { flex: none; display: inline-flex; gap: 6px; align-items: center; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.m-tab[aria-selected="true"] { background: rgba(124, 58, 237, 0.2); color: #fff; border-color: rgba(167, 139, 250, 0.5); }
.m-body { flex: 1 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.m-nav { display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: end; padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(9, 9, 20, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.m-nav__item { display: grid; justify-items: center; grid-gap: 3px; gap: 3px; border: 0; background: transparent; color: var(--faint); font-size: 11.5px; padding: 6px 0; }
.m-nav__item[aria-current="page"] { color: var(--violet-2); }
.m-nav__fab { justify-self: center; width: 62px; height: 62px; margin-top: -26px; border-radius: 50%; border: 4px solid var(--bg); background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: var(--glow); position: relative; }
.m-nav__fab .live { position: absolute; top: 6px; right: 6px; }

/* ================= POSTE DE TRAVAIL (≥1024px) ================= */
.ws { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100dvh; }
.ws__side { display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; border-right: 1px solid var(--line); background: rgba(9, 9, 20, 0.75); min-height: 0; overflow: auto; }
.ws__nav { display: grid; grid-gap: 2px; gap: 2px; }
.ws__link { display: flex; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-weight: 600; text-align: left; font-size: 14px; }
.ws__link:hover { background: var(--card); color: var(--text); }
.ws__link[aria-current="page"] { background: rgba(124, 58, 237, 0.18); color: #fff; box-shadow: inset 2px 0 0 var(--violet-2); }
.ws__main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.ws__bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(9, 9, 20, 0.6); }
.ws__bar h1 { font-size: 15px; margin: 0; font-weight: 700; }
.ws__spacer { flex: 1 1; }
.ws__work { display: grid; grid-template-columns: 250px minmax(0, 1fr) 400px; min-height: 0; }
.ws__col { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.ws__col:last-child { border-right: 0; background: rgba(11, 11, 22, 0.7); }
.ws__tabs { overflow-x: auto; display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); background: rgba(9, 9, 20, 0.5); }
.ws__tab { flex: none; display: inline-flex; gap: 6px; align-items: center; padding: 11px 10px; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 13.5px; border-bottom: 2px solid transparent; }
.ws__tab[aria-selected="true"] { color: #fff; border-bottom-color: transparent; border-image: linear-gradient(90deg, #8b5cf6, #22d3ee) 1; }
.ws__panel { flex: 1 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ws__panel > * { flex: 1 1; min-height: 0; }
.ws__foot { display: flex; gap: 14px; align-items: center; padding: 7px 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; background: rgba(9, 9, 20, 0.7); }
.timeline { padding: 10px 16px 12px; border-top: 1px solid var(--line); background: rgba(9, 9, 20, 0.7); }
.timeline__track { display: flex; gap: 3px; height: 26px; margin-top: 6px; }
.timeline__seg { flex: 1 1; border-radius: 6px; background: var(--card-2); border: 1px solid var(--line); min-width: 6px; }
.timeline__seg[data-s="done"] { background: linear-gradient(90deg, rgba(124, 58, 237, 0.6), rgba(34, 211, 238, 0.45)); border-color: transparent; }
.timeline__seg[data-s="doing"] { background: rgba(34, 211, 238, 0.25); border-color: var(--cyan); animation: pulse 1.4s infinite; }
@media (max-width: 1279px) { .ws__work { grid-template-columns: 230px minmax(0, 1fr); } }

/* texte riche (réponses de l'assistant) */
.rich { display: grid; grid-gap: 8px; gap: 8px; } .rich p { margin: 0; } .rich ul, .rich ol { margin: 0; padding-left: 20px; }
.rich__h { margin: 4px 0 0; font-size: 15px; } .rich__code { font: 0.92em var(--mono); background: rgba(124, 58, 237, 0.18); padding: 1px 5px; border-radius: 5px; }
.codeblock { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #07070f; }
.codeblock__bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 4px 12px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 12px; }
.codeblock__pre { margin: 0; padding: 12px; overflow: auto; font: 12.5px/1.6 var(--mono); color: #d9d8ff; }

/* narration de l'agent (langage naturel) et détail replié des sessions passées */
.tl__say { display: block; color: var(--text); font-size: 14.5px; line-height: 1.5; }
.activity--past { padding: 10px 14px; }
.activity--past > summary { cursor: pointer; list-style: none; color: var(--muted); }
.activity--past > summary::-webkit-details-marker { display: none; }
.activity--past[open] > summary { margin-bottom: 10px; }

.preview__log { max-width: min(560px, 90%); max-height: 180px; overflow: auto; margin: 0; padding: 10px 12px; text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font: 12px/1.5 var(--mono); white-space: pre-wrap; }

/* Signature : le brin. Un fil violet→cyan relie le logo, la frise d'activité et l'onglet actif ; il se trace une fois à l'ouverture. */
.brand svg path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: brin 0.9s 0.15s ease-out forwards; }
@keyframes brin { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .brand svg path { animation: none; stroke-dashoffset: 0; } }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.015em; }