@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}

:root {
  /* Blancs adoucis : le blanc pur (#ffffff) des panneaux et des cartes etait
     trop cru a l'oeil, surtout sur un grand ecran. On garde la hierarchie —
     le fond de page reste plus sombre que les panneaux, eux-memes plus sombres
     que les cartes — mais aucune surface n'est du blanc pur. */
  --bg: #f1f3f7;
  --bg-2: #fafbfc;
  --surface: #fcfcfe;
  --surface-2: #eceff5;
  --border: #dfe4ec;
  --text: #16181d;
  --text-dim: #64707e;
  --text-pale: #98a2b0;
  --accent: #4f6ef7;
  --accent-2: #2f54eb;
  --grad: linear-gradient(135deg, #4f6ef7 0%, #2f54eb 100%);
  --danger: #dc2626;
  --ok: #16a34a;
  --warn: #d97706;
  --radius: 14px;
  --radius-lg: 20px;
  --font: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0d13; --bg-2: #0f141d; --surface: #151b26; --surface-2: #1b2331;
    --border: #263042; --text: #e8edf6; --text-dim: #96a2b6; --text-pale: #5b6576;
    --accent: #6d8bff; --accent-2: #3d63f5;
    --grad: linear-gradient(135deg, #6d8bff 0%, #3d63f5 100%);
    --danger: #ff6b6b; --ok: #3ddc97; --warn: #ffc86b;
    --shadow: 0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --bg: #0a0d13; --bg-2: #0f141d; --surface: #151b26; --surface-2: #1b2331;
  --border: #263042; --text: #e8edf6; --text-dim: #96a2b6; --text-pale: #5b6576;
  --accent: #6d8bff; --accent-2: #3d63f5;
  --grad: linear-gradient(135deg, #6d8bff 0%, #3d63f5 100%);
  --danger: #ff6b6b; --ok: #3ddc97; --warn: #ffc86b;
  --shadow: 0 1px 2px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 10px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform .08s ease, filter .15s ease, background .15s ease; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 24px rgba(109,139,255,.28); }
.btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
#send-btn.btn-primary { background: var(--text); color: var(--bg); box-shadow: none; }
#send-btn.btn-primary:hover { filter: brightness(1.15); }
#send-btn.send-arrow { width: 40px; height: 40px; padding: 0; border-radius: 50%; flex: 0 0 auto; }
#send-btn.send-arrow:disabled { opacity: .5; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); text-decoration: none; }
.btn-lg { padding: 14px 28px; font-size: 16px; border-radius: 12px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }

.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 18px; color: var(--accent); }
.brand-logo { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.brand-name { font-weight: 700; letter-spacing: -.02em; }
/* Sigle de marque de commerce colle au NOM (T-34, 2026-10-16). Petit, en exposant, sans agrandir la
   ligne : line-height 0 et position relative, pour qu'il ne decale ni l'en-tete ni une page imprimee. */
.brand-name .tm { font-size: .6em; font-weight: 600; letter-spacing: 0; line-height: 0; margin-left: .12em;
  vertical-align: baseline; position: relative; top: -.6em; }
.brand-tag {
  font-size: 11px; font-weight: 700; color: var(--accent);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
}

.nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg-2) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: 1080px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; }
.nav-right { display: flex; align-items: center; gap: 16px; }
/* Telephone : logo + nom + FR/EN + bouton depassaient 375 px (bouton coupe, page
   qui defile de cote, nom colle au FR). Le nom est masque a l'ecran mais reste lu
   par les lecteurs d'ecran (le logo n'a pas de texte de remplacement). */
@media (max-width: 520px) {
  .nav-inner { padding: 12px 14px; }
  .nav-right { gap: 10px; }
  .nav .brand-name, .nav .brand-tag {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }
.lang-switch strong { color: var(--text); font-weight: 700; }
.lang-switch a { color: var(--text-dim); text-decoration: none; }
.lang-switch a:hover { color: var(--text); text-decoration: underline; }
/* Pages d authentification (connexion, inscription, nouveau mot de passe) : pas
   de barre de navigation, le selecteur de langue etait centre dans la carte. Il
   rejoint le coin haut droit, comme sur toutes les autres pages du site. */
.auth-lang { position: fixed; top: 22px; right: 28px; margin: 0; z-index: 10; }
@media (max-width: 560px) { .auth-lang { top: 12px; right: 14px; } }
.ads-banner { margin: 14px auto 0; padding: 0 16px; max-width: 960px; }
/* En haut de page (norme de Simon, 2026-09-13) : le bloc entier — étiquette comprise —
   ne prend jamais plus de 15 % de la fenêtre, pour que le titre de la page reste visible
   sans défiler. .ads-bas reste défini pour une page qui garderait l'ancienne position. */
.ads-banner.ads-haut { margin: 12px auto 6px; max-height: 15vh; }
/* 23 px = l'étiquette « Aussi chez Archipel » et sa marge : le bloc entier tient donc
   dans 15 vh, et la bannière garde sa hauteur de 110 à 120 px sur un écran ordinaire. */
.ads-banner.ads-haut > .ads-inner { max-height: calc(15vh - 23px); }
.ads-banner.ads-bas { margin: 40px auto 28px; }
.ads-titre { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 5px; }
/* Format bannière (règle de Simon, 2026-09-13) : 110 à 120 px de haut, jamais plus de
   15 % de l'écran. L'image se voit en entier (contain) par-dessus une copie floutée
   qui remplit le cadre (img.fond, posée par js/ads.js) : les cartons 8:1 du flux
   remplissent le cadre, une image d'un autre format n'est jamais rognée. */
.ads-banner > .ads-inner { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #14264a; box-shadow: var(--shadow); position: relative; width: 100%; aspect-ratio: 8 / 1; height: 116px; max-height: 15vh; min-height: 60px; }
.ad-item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .6s; pointer-events: none; }
.ad-item.active { opacity: 1; pointer-events: auto; }
.ad-item img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
/* Image plus haute que large : cadrée au centre pour remplir la bannière (voir js/ads.js). */
.ad-item img.cadree { object-fit: cover; object-position: center; }
.ad-item img.fond { position: absolute; inset: 0; object-fit: cover; filter: blur(14px) brightness(.55); transform: scale(1.12); }
.ad-label { position: absolute; top: 6px; right: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; z-index: 2; }

.hero { max-width: 860px; margin: 0 auto; padding: 90px 24px 60px; text-align: center; }
.hero-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font-size: 13px; margin-bottom: 24px; }
.hero-title { font-size: clamp(32px, 6vw, 56px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 20px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 18px; color: var(--text-dim); max-width: 640px; margin: 0 auto 32px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-price { color: var(--text-dim); margin-top: 18px; font-size: 15px; }
.hero-price span { opacity: .7; }

.features { max-width: 1080px; margin: 0 auto; padding: 40px 24px 60px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.feature-icon { font-size: 28px; margin-bottom: 14px; }
.feature h2 { margin: 0 0 10px; font-size: 19px; letter-spacing: -.01em; }
.feature p { margin: 0; color: var(--text-dim); font-size: 15px; }

.pricing { max-width: 1180px; margin: 0 auto; padding: 20px 24px 80px; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; align-items: stretch; }
.pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 28px; text-align: center; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.4); display: flex; flex-direction: column; }
.pricing-card h3 { font-size: 18px; font-weight: 700; margin: 6px 0 0; }
.pricing-card .btn-block { margin-top: auto; }
.pricing-featured { border-color: var(--primary, #3b5bfd); box-shadow: 0 0 0 2px var(--primary, #3b5bfd), 0 20px 60px rgba(0,0,0,.4); }
.pricing-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.pricing-amount { font-size: 40px; font-weight: 800; letter-spacing: -.03em; margin: 12px 0; }
.pricing-amount span { font-size: 16px; font-weight: 500; color: var(--text-dim); }
.pricing-list { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; flex: 1; }
.pricing-list li { padding: 8px 0; color: var(--text-dim); font-size: 14px; }
.pricing-list li:first-child { color: var(--text); }
.pricing-note { font-size: 13px; color: var(--text-dim); margin: 14px 0 0; text-align: center; }
.pricing-soon { opacity: .72; }
.pricing-soon .pricing-tag { background: var(--text-dim, #888); }
.pricing-card button[disabled] { cursor: not-allowed; opacity: .85; }

.footer { border-top: 1px solid var(--border); padding: 32px 24px; text-align: center; color: var(--text-dim); font-size: 14px; }
.footer p { margin: 4px 0; }
.footer-small { font-size: 12px; opacity: .7; max-width: 620px; margin: 8px auto 0; }

/* ===== Authentification ===== */
.auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; text-align: center; }
.auth-brand { margin-bottom: 8px; }
.auth-card h1 { font-size: 24px; margin: 12px 0 4px; }
.auth-sub { color: var(--text-dim); font-size: 14px; margin: 0 0 24px; }
.field { display: block; text-align: left; margin-bottom: 16px; }
.field span { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.field input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font-size: 15px; }
.field input:focus { outline: none; border-color: var(--accent); }
.pw-field { position: relative; display: flex; }
.pw-field input { padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; background: transparent; border-radius: 8px;
  color: var(--text-pale); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pw-toggle:hover { background: var(--surface-2); color: var(--text-dim); }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-toggle .pw-icon-off { display: block; }
.pw-toggle .pw-icon-on { display: none; }
.pw-toggle.is-visible .pw-icon-off { display: none; }
.pw-toggle.is-visible .pw-icon-on { display: block; }
.settings-form .pw-field input { border: 1px solid var(--border, #ccc); }
.form-error { color: var(--danger); font-size: 14px; min-height: 20px; margin: 4px 0 12px; }
.form-hint { font-size: 13px; color: var(--text-dim); margin: 0 0 12px; text-align: left; line-height: 1.45; }
.form-hint a { text-decoration: underline; }
.forgot-row { display: flex; gap: 6px; margin: 6px 0; }
.forgot-row input { flex: 1; min-width: 0; }
.btn-danger { border: 1px solid var(--danger); color: var(--danger); background: transparent; }
.btn-danger:hover { background: var(--danger); color: #fff; }
label.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 8px 0; }
.auth-foot { margin-top: 20px; font-size: 14px; color: var(--text-dim); }

/* ===== Workbench (agent) ===== */
.workbench-body { height: 100vh; height: 100dvh; overflow: hidden; }
.workbench { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.wb-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.wb-header-right { display: flex; align-items: center; gap: 12px; }
.user-label { display: none; }
.status { font-size: 12px; color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.status.busy { color: var(--warn); }
.status.busy::before {
  content: "@";
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-weight: 700;
  font-family: var(--mono);
  display: inline-block;
  animation: status-spin .9s linear infinite;
}
@keyframes status-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Pastille d'état de l'agent : logo qui tourne quand il travaille, immobile sinon */
.agent-state { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 3px 10px 3px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); }
.agent-state-logo { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; display: block; flex: 0 0 auto; }
.agent-state .status { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.agent-state .status::before { display: none; }
.agent-state.busy { border-color: color-mix(in srgb, var(--warn) 60%, var(--border)); }
.agent-state.busy .status { color: var(--warn); max-width: 38vw; }
.agent-state.busy .agent-state-logo { animation: svc-agent-spin 1s linear infinite; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--warn) 55%, transparent)); }
@keyframes svc-agent-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.wb2-stop-btn { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 55%, var(--border)) !important; flex: 0 0 auto; white-space: nowrap; }
.wb2-stop-btn:hover { background: color-mix(in srgb, var(--danger) 12%, var(--surface-2)) !important; }
@media (prefers-reduced-motion: reduce) {
  .agent-state.busy .agent-state-logo { animation-duration: 3.5s; }
}
@media (max-width: 760px) {
  .agent-state { padding: 2px 7px 2px 4px; }
  .agent-state-logo { width: 19px; height: 19px; }
  .agent-state .status { display: none; }
  .wb2-stop-label { display: none; }
}

.wb-main { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.pane { display: flex; flex-direction: column; min-height: 0; }
.pane-chat { border-right: 1px solid var(--border); }
.pane-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-dim); background: var(--bg-2); }

.messages { flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 12px; max-width: 100%; padding: 14px 0; border-bottom: 1px solid var(--border); }
.msg:last-child { border-bottom: none; }
.msg-avatar { display: none; }
.msg-bubble { max-width: 100%; padding: 2px 0; background: transparent; border: none; }
.msg.user .msg-bubble { border: none; }
.msg.user .msg-bubble::before { content: ""; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--danger); margin-bottom: 8px; }

.messages { font-size: var(--chat-font-size, 14.5px); }
.msg-content { font-size: inherit; overflow-wrap: anywhere; }
.msg.assistant .msg-content { color: var(--ok); }
.msg.user .msg-content { color: var(--text); }
.wb2-font-control { display: flex; gap: 2px; flex: 0 0 auto; }
.wb2-font-control .btn { padding: 4px 9px; font-size: 12px; font-weight: 700; }
.msg-content > *:first-child { margin-top: 0; }
.msg-content > *:last-child { margin-bottom: 0; }
.msg-content p { margin: 0 0 10px; }
.msg-content ul, .msg-content ol { margin: 0 0 10px; padding-left: 22px; }
.msg-content h1, .msg-content h2, .msg-content h3, .msg-content h4 { margin: 16px 0 8px; line-height: 1.3; }
.msg-content blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--accent); background: var(--bg-2); color: var(--text-dim); border-radius: 0 8px 8px 0; }
.msg-content table { border-collapse: collapse; margin: 10px 0; width: 100%; }
.msg-content th, .msg-content td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.msg-content pre { margin: 0; padding: 14px; overflow-x: auto; background: #0d1117; border-radius: 0 0 10px 10px; font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.msg-content code.hljs { background: transparent; padding: 0; font-family: var(--mono); }
.inline-code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-family: var(--mono); font-size: 13px; }

.approval-card { border: 1px solid var(--warn); border-radius: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.approval-title { font-weight: 700; color: var(--warn); margin-bottom: 6px; }
.approval-arg { display: block; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; margin-bottom: 10px; }
.approval-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.approval-timer { margin-top: 6px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.approval-timer:empty { display: none; }
.code-block { margin: 12px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-dim); font-family: var(--mono); }
.copy-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.copy-btn:hover { color: var(--text); border-color: var(--accent); }
.fallback { white-space: pre-wrap; font-family: var(--mono); font-size: 13px; }

.composer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 12px 16px;
  /* La barre de gestes d un telephone mangeait la derniere rangee. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.composer-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
/* Sur 360 px, la meme ligne portait « + », le dossier, le presse-papiers, deux listes
   deroulantes, la zone de texte et l envoi : tout se comprimait et la deuxieme liste se
   faisait couper. La zone de texte prend maintenant sa propre ligne, les boutons restent
   au-dessus, a leur taille. */
@media (max-width: 560px) {
  .composer-form textarea { flex-basis: 100%; order: 2; }
  .composer-options { flex-direction: row; }
}
.composer-form textarea { flex: 1; resize: none; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: #ffffff; color: #16181d; font-family: var(--font); font-size: 14.5px; line-height: 1.5; max-height: 200px; }
.composer-form textarea:focus { outline: none; border-color: var(--accent); }
.model-mode { padding: 0 10px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font); font-size: 13.5px; }
.model-mode:focus { outline: none; border-color: var(--accent); }
#image-attach-btn, #files-toggle-btn, #plan-mode-btn { padding: 0; width: 40px; height: 40px; font-size: 16px; flex: 0 0 auto; }
.image-preview { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--border); background: var(--bg-2); }
.image-preview img { max-height: 56px; border-radius: 8px; border: 1px solid var(--border); }
.image-preview-note { font-size: 12px; color: var(--text-dim); flex: 1; }

.files-drawer { border-top: 1px solid var(--border); background: var(--bg-2); max-height: 40%; display: flex; flex-direction: column; }
.files-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-pale); flex: 0 0 auto; }
.files-tree { overflow-y: auto; padding: 0 8px 8px; font-size: 12.5px; font-family: var(--mono); }
.files-node { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; color: var(--text-dim); }
.files-node:hover { background: var(--surface-2); color: var(--text); }
.files-node.is-dir { color: var(--text); font-weight: 600; }
.files-caret { display: inline-block; font-size: 10px; transition: transform .15s ease; color: var(--text-pale); }
.files-node.is-dir.is-collapsed .files-caret { transform: rotate(-90deg); }
.files-children.hidden { display: none; }
.files-size { color: var(--text-pale); font-size: 11px; margin-left: auto; padding-left: 8px; }
.files-download { color: var(--text-pale); text-decoration: none; font-size: 13px; padding: 0 2px 0 8px; flex: 0 0 auto; }
.files-download:hover { color: var(--accent); }
.files-empty { color: var(--text-pale); font-size: 12px; padding: 10px; text-align: center; }

.permission-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 18px; font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--text-pale); background: var(--bg-2); border-top: 1px solid var(--border); flex: 0 0 auto; cursor: pointer; user-select: none; }
.permission-bar:hover { background: var(--surface-2); }
.permission-bar.is-isolated { color: var(--ok); }
.permission-bar.is-open { color: var(--danger); }
.permission-caret { color: var(--text-pale); font-size: 10px; }
.permission-menu {
  flex: 0 0 auto; background: var(--bg-2); border-top: 1px solid var(--border);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.permission-menu-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-pale); padding: 4px 10px 6px; }
.permission-menu-opt {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px;
  border: none; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer;
}
.permission-menu-opt:hover { background: var(--surface-2); }
.permission-menu-opt.active { color: var(--accent); font-weight: 700; }

/* ===== Trajectoire ===== */
.trajectory { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.traj-empty { color: var(--text-dim); font-size: 13px; padding: 12px; border: 1px dashed var(--border); border-radius: 10px; text-align: center; }
.traj-item { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.traj-item.status { background: transparent; border-style: dashed; }
.traj-item.error { border-color: rgba(255,107,107,.4); }
.traj-head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13px; }
.traj-icon { flex: 0 0 auto; }
.traj-title { font-weight: 600; }
.traj-title .dim { color: var(--text-dim); font-weight: 400; }
.traj-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.traj-item.ok .traj-status-dot { background: var(--ok); }
.traj-item.fail .traj-status-dot { background: var(--danger); }
.traj-body { padding: 0 12px 10px; font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto; }
.traj-item.error .traj-body { color: var(--danger); }
.traj-args { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); padding: 0 12px 10px; word-break: break-word; }

@media (max-width: 900px) {
  .wb-main { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .pane-chat { border-right: none; border-bottom: 1px solid var(--border); }
  .hero { padding: 60px 20px 40px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .user-label { display: none; }
}

/* ===== Utilitaires + Tableau de bord opérateur ===== */
.hidden { display: none !important; }
.admin-shell { display: flex; flex-direction: column; min-height: 100vh; }
.admin-main { flex: 1; max-width: 1000px; margin: 0 auto; width: 100%; padding: 32px 24px; }
.admin-main h1 { font-size: 26px; margin: 0 0 24px; }
.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.admin-card-num { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.admin-card-label { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.admin-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.admin-table th { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-note { color: var(--text-dim); font-size: 12px; margin-top: 16px; opacity: .8; }
.settings-block { margin-bottom: 36px; }
.settings-block h2 { font-size: 17px; margin: 0 0 14px; }
.settings-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.settings-list li { color: var(--text-dim); font-size: 14px; line-height: 1.5; padding: 12px 0; border-bottom: 1px solid var(--border); }
.settings-list li:last-child { border-bottom: none; }
.settings-list li strong { color: var(--text); }
.settings-list a { text-decoration: underline; }

.field-hint { font-size: 11.5px; color: var(--text-dim); opacity: .8; margin-top: 4px; }
.signup-success { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-top: 16px; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.badge-active { background: rgba(61,220,151,.15); color: var(--ok); }
.badge-pending { background: rgba(255,200,107,.15); color: var(--warn); }

/* ===== Bascule clair/sombre ===== */
.theme-toggle {
  position: fixed; bottom: 18px; right: 18px; z-index: 9999;
  width: 46px; height: 46px; border-radius: 50%;
  border: none; background: var(--surface); color: var(--text);
  font-size: 19px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1.5px var(--accent),
    0 0 16px 2px color-mix(in srgb, var(--accent) 45%, transparent),
    0 4px 14px rgba(0,0,0,.25);
  transition: box-shadow .2s ease, transform .2s ease;
}
.theme-toggle:hover {
  transform: scale(1.07);
  box-shadow: 0 0 0 1.5px var(--accent),
    0 0 26px 6px color-mix(in srgb, var(--accent) 65%, transparent),
    0 4px 14px rgba(0,0,0,.3);
}

.legal-wrap { max-width: 860px; margin: 0 auto; padding: 32px 24px 80px; }
.legal-wrap h1 { font-size: 28px; margin: 0 0 8px; }
.legal-wrap .muted { color: var(--text-dim); font-size: 13px; margin-bottom: 24px; }
.legal-wrap h2 { font-size: 18px; margin: 26px 0 8px; }
.legal-wrap p, .legal-wrap li { color: var(--text-dim); font-size: 14.5px; }
.legal-wrap a { text-decoration: underline; }

/* ===== Espace de travail (v2) : conversations + chat + panneau code ===== */
.wb2 { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); }

.wb2-sidebar { width: 260px; flex: 0 0 auto; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--bg-2); }
.wb2-sidebar-head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 12px; font-weight: 700; }
.wb2-sidebar-head .brand-mark { color: var(--accent); font-size: 17px; }
.wb2-new-conv { margin: 0 12px 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); }
.wb2-new-conv:hover { border-color: var(--accent); color: var(--accent); }
.wb2-conv-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.wb2-conv-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--text-dim); }
.wb2-conv-item:hover { background: var(--surface-2); color: var(--text); }
.wb2-conv-item.active { background: var(--surface-2); color: var(--text); font-weight: 600; }
.wb2-conv-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.wb2-conv-item-time { flex: 0 0 auto; font-size: 11px; color: var(--text-pale); }
.wb2-conv-group { padding: 14px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-pale); }
.wb2-conv-group:first-child { padding-top: 4px; }
.wb2-conv-del { opacity: .65; background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 4px; flex: 0 0 auto; }
.wb2-conv-item:hover .wb2-conv-del { opacity: 1; }
.wb2-conv-del:hover { color: var(--accent); background: var(--surface); }
.wb2-conv-item-title { cursor: text; }
.wb2-conv-empty { color: var(--text-pale); font-size: 12.5px; padding: 14px 10px; text-align: center; }
.wb2-sidebar-foot { border-top: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.wb2-sidebar-actions { display: flex; flex-direction: column; gap: 2px; }
.wb2-sidebar-actions .btn { justify-content: flex-start; width: 100%; }
.wb2-sidebar-actions .btn { background: transparent; border: none; padding: 5px 8px; border-radius: 6px; color: var(--text-dim); }
.wb2-sidebar-actions .btn:hover { background: var(--surface-2); color: var(--text); }

.wb2-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.wb2-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--bg-2); }

/* Composer flottant : seule la zone où l'on écrit peut être détachée et déplacée. */
.composer.wb2-composer-float {
  position: fixed; z-index: 20;
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
  width: 420px; max-width: 92vw;
}
.composer.wb2-composer-float.wb2-dragging { transition: none; user-select: none; }
.composer-drag-handle {
  display: none; align-items: center; justify-content: center; gap: 4px;
  cursor: move; padding: 5px 0 2px; color: var(--text-pale); font-size: 11px; user-select: none;
}
.wb2-composer-float .composer-drag-handle { display: flex; }
.composer-float-toggle { position: absolute; right: 4px; top: -30px; font-size: 12px; padding: 4px 8px; }
.wb2-conv-title { font-weight: 600; font-size: 14.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb2-panel-toggle { font-size: 15px; padding: 6px 10px; }
.wb2-sidebar-toggle { display: none; font-size: 15px; padding: 6px 10px; }

.status-line { padding: 2px 18px 10px; font-size: 12px; color: var(--warn); line-height: 1.55; }
.status-line-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--warn); }
.status-line-row.is-command { color: var(--danger); }
.status-line-row:last-child { opacity: .85; }

.wb2-resize-handle { position: relative; width: 5px; flex: 0 0 5px; cursor: col-resize; background: transparent; z-index: 6; }
.wb2-resize-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px; } /* zone cliquable élargie, invisible */
.wb2-resize-handle:hover, .wb2-resize-handle.dragging { background: var(--accent); opacity: .35; }
.wb2.panel-collapsed #resize-handle { display: none; }
.wb2-resize-arrows { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 3px; z-index: 7; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.wb2-resize-handle:hover .wb2-resize-arrows, .wb2-resize-handle.dragging .wb2-resize-arrows { opacity: 1; pointer-events: auto; }
.wb2-resize-arrow-btn { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-dim); font-size: 9px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.wb2-resize-arrow-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.wb2-panel { width: 440px; min-width: 0; flex: 0 0 auto; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--bg-2); overflow: hidden; }
.wb2.panel-collapsed .wb2-panel { width: 0; min-width: 0; border-left: none; overflow: hidden; }
.wb2-panel-tabs { display: flex; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.wb2-tab { flex: 1; padding: 10px; background: transparent; border: none; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; font-family: var(--font); }
.wb2-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.wb2-panel-body { flex: 1; overflow: auto; display: flex; flex-direction: column; }
.wb2-panel-path { padding: 10px 14px; font-size: 12px; color: var(--text-dim); font-family: var(--mono); word-break: break-all; flex: 1 1 auto; min-width: 0; }
.wb2-panel-path-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.wb2-panel-actions { display: flex; gap: 6px; padding: 6px 10px; flex: 0 0 auto; }
.wb2-panel-code { margin: 0; padding: 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; overflow: auto; flex: 1; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.wb2-panel-editor { margin: 0; padding: 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; flex: 1; width: 100%; height: 100%; border: 0; resize: none; background: var(--bg-2); color: var(--text); outline: none; }
.wb2-panel-image-wrap { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; }
.wb2-panel-image { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.wb2-preview-frame { flex: 1; border: none; background: #fff; width: 100%; }
.wb2-panel-trace { flex: 1; overflow-y: auto; padding: 4px 0; }
.wb2-trace-item { display: flex; align-items: baseline; gap: 8px; padding: 7px 14px; font-size: 12.5px; font-family: var(--mono); border-bottom: 1px solid var(--border); color: var(--text-dim); }
.wb2-trace-item .wb2-trace-idx { color: var(--text-pale); flex: 0 0 auto; }
.wb2-trace-item .wb2-trace-label { color: var(--text); }
.wb2-trace-item .wb2-trace-arg { color: var(--text-dim); word-break: break-word; }
.wb2-trace-item.is-fail { color: var(--danger); }
.wb2-trace-item.is-fail .wb2-trace-label { color: var(--danger); }

.wb2-panel-plan { flex: 0 0 auto; border-bottom: 1px solid var(--border); padding: 10px 0; }
.wb2-plan-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-pale); padding: 0 14px 6px; }
.wb2-plan-item { display: flex; align-items: baseline; gap: 8px; padding: 5px 14px; font-size: 13px; color: var(--text-dim); }
.wb2-plan-item.is-done { color: var(--text-pale); text-decoration: line-through; }
.wb2-plan-item.is-in_progress { color: var(--text); font-weight: 600; }
.wb2-plan-icon { flex: 0 0 auto; }

#plan-mode-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.wb2-conv2-frame { flex: 1; border: none; background: var(--bg); width: 100%; }

.wb2-links-list { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.wb2-link-item { display: block; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; }
.wb2-link-item:hover { border-color: var(--accent); text-decoration: none; }

.wb2-tv-bar { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.wb2-tv-input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font-size: 13px; font-family: var(--font); }
.wb2-tv-input:focus { outline: none; border-color: var(--accent); }
.wb2-tv-error { margin: 0 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,90,90,.1); border: 1px solid var(--danger); color: var(--danger); font-size: 12.5px; flex: 0 0 auto; }
.wb2-tv-frame { flex: 1; border: none; background: #000; width: 100%; }

/* Instance de app.html chargée en iframe (deuxième conversation) : masque sa propre barre latérale */
body.wb2-embed .wb2-sidebar,
body.wb2-embed .wb2-resize-handle,
body.wb2-embed .wb2-sidebar-toggle,
body.wb2-embed .wb2-panel-toggle,
body.wb2-embed #right-panel { display: none !important; }

.drop-overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 2px dashed var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--accent); font-size: 15px; z-index: 20; pointer-events: none; }

@media (max-width: 900px) {
  .wb2-sidebar-toggle { display: inline-flex; }
  .wb2-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; transform: translateX(-100%); transition: transform .18s ease; box-shadow: 0 0 0 100vmax rgba(0,0,0,0); }
  .wb2.sidebar-open .wb2-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .wb2-panel { position: fixed; inset: 0 0 0 auto; z-index: 30; width: 100vw !important; }
  .wb2.panel-collapsed .wb2-panel { display: none; }
  .wb2-resize-handle { display: none; }
  /* Sous 900px : le composer reste docké en bas, pas de flottement (peu praticable au toucher). */
  .composer.wb2-composer-float { position: static; width: auto; max-width: none; border-radius: 0; box-shadow: none; }
  .composer-float-toggle { display: none; }

  /* Boutons de fermeture des panneaux latéraux (visibles seulement en overlay plein écran mobile) */
  .wb2-mobile-close { display: inline-flex !important; margin-left: auto; flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
  .wb2-sidebar-head { flex-wrap: nowrap; }

  /* Le bouclier clair/sombre flottant chevauchait le bouton Envoyer du composer (+ barre de permission
     en dessous) sur mobile — on le remonte au-dessus de cette zone dans l'espace de travail uniquement. */
  body.workbench-body .theme-toggle { bottom: 96px; }
}

@media (min-width: 901px) {
  .wb2-mobile-close { display: none !important; }
}

/* ===== Barre d'état de l'agent collée à la zone d'écriture (bas du chat) ===== */
.wb2-agentbar { display: flex; align-items: center; gap: 8px; padding: 6px 12px 0; flex: 0 0 auto; }
.wb2-agentbar .agent-state { padding: 2px 8px 2px 4px; }

/* ===== Fichiers du workspace (bas de la colonne de gauche) ===== */
.wb2-sidebar-files { flex: 0 1 auto; max-height: 42%; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); background: var(--bg-2); }
.wb2-sidebar-files-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--text-dim); flex: 0 0 auto; }
.wb2-sidebar-files-head > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb2-sidebar-files-actions { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.wb2-sidebar-files-actions .btn { padding: 2px 7px; font-size: 11px; }
.wb2-sidebar-files-tree { overflow-y: auto; padding: 0 6px 6px; font-family: var(--mono); font-size: 12px; min-height: 0; }
.wb2-sidebar-files-tree .files-node { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.wb2-sidebar-files-tree .files-node .side-fname { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.wb2-sidebar-files-tree .files-node .files-download { flex: 0 0 auto; text-decoration: none; opacity: .85; }
.wb2-sidebar-files-tree .files-node .files-download:hover { color: var(--accent); opacity: 1; }
.wb2-sidebar-files-tree .files-children { display: block; }
.wb2-sidebar-files-tree .files-empty { font-family: var(--mono); }

/* ===== Panneau droit : fermeture / réouverture + onglets ===== */
.wb2-panel-x { display: inline-flex !important; margin-left: auto; flex: 0 0 auto; font-weight: 700; font-size: 13px; padding: 2px 9px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; }
.wb2-panel-x:hover { color: var(--danger); }
/* Les onglets doivent TOUS tenir dans la largeur du panneau : une barre qui
   defile horizontalement cache des onglets sans le dire (l'onglet Agents
   disparaissait ainsi derriere le bord). On resserre l'espacement et on laisse
   le texte se compresser si besoin, plutot que de deborder. */
.wb2-panel-tabs { overflow-x: auto; }
.wb2-panel-tabs .wb2-tab { flex: 0 1 auto; padding: 9px 5px; font-size: 11.5px; white-space: nowrap; min-width: 0; }
.wb2-panel { transition: width .16s ease; }

/* ===== Console (panneau droit) ===== */
.wb2-console-out { flex: 1; overflow-y: auto; padding: 8px 12px; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--text-dim); min-height: 0; white-space: pre-wrap; word-break: break-word; }
.wb2-console-line { padding: 2px 0; border-bottom: 1px dashed var(--border); }
.wb2-console-line.is-err { color: var(--danger); }
.wb2-console-line.is-warn { color: var(--warn); }
.wb2-console-empty { color: var(--text-pale); padding: 6px 0; }
/* Sortie d'une commande (jusqu'à 6 000 caractères, la borne du serveur). */
.wb2-console-sortie { margin: 2px 0 6px; padding: 6px 8px; background: var(--surface-2); border-left: 2px solid var(--border); color: var(--text); font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
.wb2-console-in { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); flex: 0 0 auto; }
.wb2-console-input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); font-size: 12.5px; font-family: var(--mono); }
.wb2-console-input:focus { outline: none; border-color: var(--accent); }
.wb2-console-in .btn { white-space: nowrap; flex: 0 0 auto; }

/* ===== Webradio (panneau droit) ===== */
.wb2-radio-now { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex: 0 0 auto; border-bottom: 1px solid var(--border); }
.wb2-radio-status { font-size: 15px; flex: 0 0 auto; }
.wb2-radio-title { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
#radio-audio { width: calc(100% - 24px); margin: 10px 12px; flex: 0 0 auto; }
.wb2-radio-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.wb2-radio-item { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-dim); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.wb2-radio-item:hover { background: var(--surface-2); color: var(--text); }
.wb2-radio-item.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.wb2-radio-item-name { font-weight: 600; }
.wb2-radio-item-genre { color: var(--text-pale); font-size: 11px; }
.wb2-radio-url { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border); flex: 0 0 auto; }

/* ===== Actions d'en-tête du tiroir de fichiers ===== */
.files-drawer-actions { display: inline-flex; gap: 4px; align-items: center; }
.files-drawer-actions .btn { padding: 2px 8px; font-size: 11px; }

@media (max-width: 760px) {
  .wb2-agentbar .agent-state .status { display: none; }
  .wb2-agentbar { padding: 4px 8px 0; }
  .wb2-sidebar-files { max-height: 30%; }
}

/* ===== Panneau d'agents (droite) ===== */
.agent-panel { width: 100%; overflow-y: auto; background: var(--bg-2); color: var(--text); }
.agent-panel-head { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 500; }
.agent-slots { font-size: 12px; color: var(--text-dim); }
.agent-card { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.agent-card-head { display: flex; align-items: center; gap: 7px; }
.agent-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-pale); flex-shrink: 0; }
.agent-dot-actif { background: var(--accent); }
.agent-dot-attente { background: var(--warn); }
.agent-name { font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; }
.agent-name:hover, .agent-name:focus-visible { text-decoration: underline; }
.agent-desc { font-size: 11px; color: var(--text-pale); margin: 4px 0; }
.agent-task { font-size: 12px; color: var(--text-dim); margin: 6px 0; }
.agent-notice { font-size: 11px; color: var(--warn); margin: 6px 0; }
.agent-order input { width: 100%; font-size: 12px; padding: 5px 8px; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); }
.agent-order input:focus { outline: none; border-color: var(--accent); }
.agent-actions { display: flex; gap: 6px; margin-top: 7px; }
.agent-actions button { font-size: 11px; padding: 3px 9px; }
.agent-actions button:disabled { opacity: .4; cursor: not-allowed; }
.agent-edit-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex;
  align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.agent-edit-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 20px; width: 420px; max-width: 100%; max-height: 90vh; overflow-y: auto; }
.agent-edit-title { margin: 0 0 12px; font-size: 15px; font-weight: 500; color: var(--text); }
.agent-edit-field { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.agent-edit-field input, .agent-edit-field select, .agent-edit-field textarea {
  display: block; width: 100%; margin-top: 4px; font-size: 13px; padding: 6px 8px;
  box-sizing: border-box; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-2); color: var(--text); font-family: inherit; }
.agent-edit-tools { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.agent-edit-tools legend { font-size: 12px; color: var(--text-dim); padding: 0 4px; }
.agent-edit-tool { display: block; font-size: 12px; color: var(--text); padding: 2px 0; }
.agent-edit-error { font-size: 12px; color: var(--warn); margin: 8px 0; }
.agent-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* Bouton thème rangé dans l'en-tête (voir #theme-slot dans app.html) : il perd
   son positionnement flottant et sa halo lumineuse pour se fondre parmi les
   autres boutons de la barre. Le bouton flottant reste inchangé ailleurs. */
.theme-toggle.theme-toggle-inline {
  position: static; width: 30px; height: 30px; font-size: 15px;
  box-shadow: none; background: transparent; flex: 0 0 auto;
}
.theme-toggle.theme-toggle-inline:hover { transform: none; box-shadow: none; background: var(--surface); }

/* --- Composeur : modele et longueur de reponse --- */
.composer-options { display: flex; flex-direction: column; gap: 4px; }
.composer-select { font-family: var(--font); font-size: 12px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }

/* --- Bloc « Travail en cours » : les etapes de la mission, repliable --- */
.travail { margin: 0 0 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 12.5px; color: var(--text-dim); }
.travail summary { cursor: pointer; padding: 6px 10px; font-weight: 600; color: var(--text); list-style: none; }
.travail summary::-webkit-details-marker { display: none; }
.travail summary::before { content: '▸ '; color: var(--text-pale); }
.travail[open] summary::before { content: '▾ '; }
.travail ol { margin: 0; padding: 0 12px 8px 26px; }
.travail li { margin: 2px 0; line-height: 1.45; }
.travail li.err { color: var(--danger); }
.travail .duree { color: var(--text-pale); margin-left: 6px; font-size: 11.5px; }
.travail .sortie { display: block; color: var(--text-pale); white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; margin: 2px 0 4px; }
/* Sortie complète d'une étape, repliée sous l'extrait de 200 caractères. */
.travail details { margin: 0 0 6px; }
.travail details summary { padding: 0; font-weight: 500; font-size: 11.5px; color: var(--text-pale); }
.travail details:not([open]) > summary::before { content: '▸ '; }
.travail details[open] > summary::before { content: '▾ '; }
.travail details pre { margin: 4px 0 0; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }

/* --- Ordre en attente dans la file de l onglet --- */
.msg.user .attente { display: inline-block; font-size: 11px; color: var(--warn); margin: 4px 0 0 4px; }

/* Deuxieme rangee de prix : deux cartes seulement. Sans borne haute, auto-fit
   les etire sur toute la largeur et elles ecrasent les trois du dessus. On les
   plafonne et on centre, pour que les deux rangees se repondent. */
.pricing-grid--duo { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); justify-content: center; }
.pricing-sous-titre { text-align: center; font-size: 18px; font-weight: 700; margin: 48px 0 24px; }

/* Classes plutot qu'attributs style="..." : la CSP du site est en style-src
   'self', qui bloque en silence tout style en ligne. */
.box-message { text-align: center; margin-top: 16px; }
.plan-choisi { margin: 4px 0 12px; }
.mt-10 { margin-top: 10px; }
.pricing-mt { margin-top: 24px; }

/* Choix du forfait a l inscription (signup.html, en/signup.html). */
.choix-forfait { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px 6px; margin: 0 0 16px; }
.choix-forfait legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
.forfait-option { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 8px 4px; cursor: pointer; }
.forfait-option input { margin: 0; align-self: center; }
.forfait-option .forfait-nom { font-weight: 700; }
.forfait-option .forfait-detail { font-size: 13px; color: var(--text-dim); }
/* display:flex ecraserait l attribut hidden : un forfait retire resterait visible. */
.forfait-option[hidden] { display: none; }

/* Page 1 (2026-09-13) : le message d'Archipel, les trois interfaces, la carte SouverainBox « à partir de ». */
.hero-kicker { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-dim); }
.interfaces { max-width: 1080px; margin: 0 auto; padding: 0 24px 20px; }
.interfaces h2 { text-align: center; font-size: 26px; letter-spacing: -.02em; margin: 0 0 8px; }
.interfaces .section-sub { text-align: center; color: var(--text-dim); max-width: 640px; margin: 0 auto 24px; }
.interfaces-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.interface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.interface .interface-nom { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.interface h3 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.interface p { margin: 0; color: var(--text-dim); font-size: 15px; }
.interface ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-dim); font-size: 14px; }
.interface .btn { align-self: flex-start; margin-top: auto; }
.pricing-box .pricing-amount { font-size: 26px; }
.pricing-box .pricing-amount span { display: block; font-size: 13px; margin-top: 4px; }
.pricing-box .btn + .btn { margin-top: 10px; }
.footer-message { font-weight: 600; color: var(--text); }