:root {
  --bg: #09090b;
  --panel: #111114;
  --panel2: #18181c;
  --line: #26262c;
  --line2: #34343c;
  --text: #ededf0;
  --muted: #8b8b96;
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --ok: #34d399;
  --bad: #f87171;
  --grad: linear-gradient(135deg, #8b5cf6, #22d3ee);
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 15px/1.55 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
.grow { flex: 1; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Fond aurore */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transition: opacity .6s; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; animation: float 18s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 520px; height: 520px; background: #6d28d9; left: 12%; top: 18%; }
.aurora i:nth-child(2) { width: 460px; height: 460px; background: #0e7490; right: 10%; top: 30%; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 380px; height: 380px; background: #be185d; left: 40%; bottom: -10%; opacity: .25; animation-delay: -12s; }
@keyframes float { to { transform: translate(60px, -40px) scale(1.15); } }
.work ~ .aurora, body:has(.work) .aurora { opacity: .18; }

/* ---------- Structure ---------- */
#studio { position: relative; z-index: 1; height: 100vh; }
.chat-col { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.top { display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; text-decoration: none; color: var(--text); letter-spacing: -.01em; }
.mark { width: 22px; height: 22px; border-radius: 7px; background: var(--grad); box-shadow: 0 0 24px rgba(139, 92, 246, .6); }
.project { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { font-size: 12px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
.pill.ai { color: var(--ok); border-color: rgba(52, 211, 153, .35); }
.ghost-btn { background: transparent; border: 1px solid var(--line2); border-radius: 10px; padding: 7px 12px; font-size: 13px; white-space: nowrap; }
.ghost-btn:hover { background: var(--panel2); }
.primary-btn { background: var(--grad); border: 0; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; }
.primary-btn:hover { filter: brightness(1.1); }

/* ---------- Accueil ---------- */
.home .chat-col { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.home .top { position: fixed; left: 0; right: 0; top: 0; z-index: 3; }
.home .chat-col { justify-content: center; }
.home .thread, .home .work-col, .home #btn-new, .home .project { display: none; }
.hero { text-align: center; margin-bottom: 28px; animation: rise .7s ease both; }
.hero h1 { font-size: clamp(32px, 5.6vw, 56px); line-height: 1.05; letter-spacing: -.035em; margin: 0 0 16px; font-weight: 800; }
.hero p { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 auto; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.ideas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; animation: rise .7s .15s ease both; }
.ideas button { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; font-size: 13px; color: #c9c9d1; }
.ideas button:hover { border-color: var(--violet); color: #fff; }

/* Zone de saisie */
.composer { position: relative; background: rgba(20, 20, 24, .85); border: 1px solid var(--line2); border-radius: 22px; padding: 14px 14px 10px 18px; backdrop-filter: blur(12px); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); transition: border-color .2s, box-shadow .2s; animation: rise .7s .08s ease both; }
.composer:focus-within { border-color: rgba(139, 92, 246, .7); box-shadow: 0 0 0 4px rgba(139, 92, 246, .15), 0 20px 60px rgba(0, 0, 0, .45); }
.composer textarea { width: 100%; background: transparent; border: 0; color: var(--text); font: 16px/1.5 Inter; resize: none; outline: none; max-height: 220px; min-height: 52px; }
.composer textarea::placeholder { color: #6b6b75; }
.composer-bar { display: flex; align-items: center; gap: 10px; }
.hint { font-size: 12px; color: #5f5f69; flex: 1; }
.send { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; transition: transform .15s, opacity .2s; }
.send:hover { transform: scale(1.06); }
.send:disabled { opacity: .35; transform: none; cursor: default; }
.busy .send { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(139, 92, 246, .18); } }

/* ---------- Espace de travail ---------- */
.work { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
/* la colonne reste à la hauteur de l'écran : le fil défile, la zone de consignes reste visible en bas */
.work .chat-col { min-height: 0; overflow: hidden; }
.thread { min-height: 0; }
.work .hero, .work .ideas { display: none; }
.work .chat-col { border-right: 1px solid var(--line); background: rgba(9, 9, 11, .75); backdrop-filter: blur(10px); }
.work .top { border-bottom: 1px solid var(--line); }
.work .composer { margin: 0 14px 14px; border-radius: 18px; animation: none; }
.work .composer textarea { min-height: 44px; font-size: 15px; }
.thread { flex: 1; overflow-y: auto; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 16px; }
.u-msg { align-self: flex-end; max-width: 88%; background: var(--panel2); border: 1px solid var(--line); padding: 10px 14px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; animation: rise .35s ease both; }
.run { display: flex; flex-direction: column; gap: 4px; animation: rise .35s ease both; }
.step { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 0; }
.st { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.st.running { border: 2px solid var(--line2); border-top-color: var(--cyan); animation: spin .8s linear infinite; }
.st.done { background: rgba(52, 211, 153, .15); color: var(--ok); }
.st.error { background: rgba(248, 113, 113, .15); color: var(--bad); }
@keyframes spin { to { transform: rotate(360deg); } }
.step .head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.step .head b { font-weight: 600; }
.tool { font: 11px var(--mono); color: #a5a5b0; border: 1px solid var(--line2); border-radius: 6px; padding: 1px 6px; }
.step .detail { color: var(--muted); font-size: 13px; }
.step .sub { margin-top: 6px; display: grid; gap: 3px; font-size: 13px; }
.step .sub div { color: #c4c4cc; animation: rise .3s ease both; }
.step .sub div::before { content: "↳ "; color: #55555f; }
.swatches { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.swatches i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .12); }
.swatches span { font-size: 13px; color: #c4c4cc; margin-left: 6px; }
.codeline { font: 11px var(--mono); color: #6f6f7a; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-msg { color: #dcdce2; white-space: pre-wrap; }
.a-msg.err { color: var(--bad); }
.a-msg.gate { white-space: normal; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,.04); }
.a-msg.gate.forbidden { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.a-msg.gate p { margin: 0; }
.a-msg.gate ul { margin: 8px 0 0; padding-left: 20px; }
.a-msg.gate li + li { margin-top: 4px; }
.a-msg.gate .gate-ex { margin-top: 10px; color: #a0a0ad; font-size: .92em; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.actions button { background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; padding: 7px 12px; font-size: 13px; }
.actions button:hover { border-color: var(--violet); }

.work-col { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
/* Bandeau d'un espace : retour au Bureau, titre, et seulement les actions utiles à cet espace */
.pane-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(9, 9, 11, .8); backdrop-filter: blur(10px); min-height: 56px; }
.work-col[data-tab="office"] .pane-head { display: none; }
.pane-head [hidden] { display: none !important; }
.pane-head #pane-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-btn { background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 7px 12px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.back-btn:hover { color: var(--text); border-color: var(--violet); }
.count { font-size: 11px; background: var(--violet); color: #fff; border-radius: 99px; padding: 0 6px; margin-left: 4px; }
.count:empty { display: none; }
.devices { display: flex; gap: 2px; }
.devices button { background: none; border: 1px solid transparent; border-radius: 8px; width: 32px; height: 30px; color: var(--muted); }
.devices button.on { border-color: var(--line2); color: var(--text); }
.panes { flex: 1; min-height: 0; position: relative; }
.pane { position: absolute; inset: 0; display: none; }
.pane.on { display: flex; flex-direction: column; }
.frame-wrap { flex: 1; display: flex; justify-content: center; padding: 16px; overflow: auto; }
#preview { width: 100%; height: 100%; min-height: 500px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: max-width .3s; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.empty-frame { display: grid; place-items: center; color: var(--muted); }
.code { flex: 1; margin: 0; overflow: auto; padding: 18px 20px; font: 12.5px/1.6 var(--mono); color: #c9d1d9; background: #0b0b0e; white-space: pre-wrap; word-break: break-all; }
.code .t { color: #7ee787; } .code .a { color: #79c0ff; } .code .s { color: #a5d6ff; }
.design-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.design-bar b { color: var(--text); }
#gjs { flex: 1; min-height: 0; }

/* Thème sombre de GrapesJS */
.gjs-one-bg { background-color: #111114 !important; }
.gjs-two-color { color: #c9c9d1 !important; }
.gjs-three-bg { background-color: #8b5cf6 !important; color: #fff !important; }
.gjs-four-color, .gjs-four-color-h:hover { color: #22d3ee !important; }
.gjs-block { width: 44%; min-height: 70px; border-radius: 8px; }

/* Marketing */
.mk { overflow: auto; padding: 20px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start; flex: 1; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.card.wide { grid-column: 1 / -1; }
.card h3 { margin: 0 0 12px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.card h3 .tool { margin-left: auto; }
.card p { margin: 0 0 8px; color: #cfcfd6; font-size: 14px; }
.posts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.post { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13px; white-space: pre-wrap; }
.post .net { font: 11px var(--mono); color: var(--cyan); display: block; margin-bottom: 6px; }
.mail { border-left: 2px solid var(--violet); padding: 2px 0 2px 12px; margin-bottom: 12px; font-size: 13px; }
.mail b { display: block; }
.mail div { color: #b5b5bf; white-space: pre-wrap; }
.row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.row:last-child { border: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: 12px; border: 1px solid var(--line2); border-radius: 99px; padding: 3px 10px; }
.mk-empty { color: var(--muted); padding: 40px; text-align: center; grid-column: 1 / -1; }

#toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; }
.toast { background: #1c1c21; border: 1px solid var(--line2); padding: 10px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 14px; animation: rise .3s ease both; }

/* Mobile : voir « Téléphone » en fin de fichier */

/* Coûts */
.table-scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th { color: var(--muted); font-weight: 500; font-size: 12px; }
.tbl tr.tot td { border-top: 1px solid var(--line2); background: rgba(139, 92, 246, .06); }
.est { font-size: 10px; color: #fbbf24; border: 1px solid rgba(251, 191, 36, .4); border-radius: 5px; padding: 0 4px; margin-left: 4px; }
.note { color: var(--muted) !important; font-size: 12px !important; margin-top: 12px !important; }
.sim { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sim label { font-size: 12px; color: var(--muted); display: grid; gap: 6px; }
.sim input { background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); padding: 8px 10px; font: 14px Inter; }
.sim input:focus { outline: none; border-color: var(--violet); }

/* Équipe d'agents */
.run-progress { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.run-progress div { flex: 1; height: 4px; background: var(--line); border-radius: 99px; overflow: hidden; }
.run-progress i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .5s; }
.score { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.score span { text-decoration: line-through; }
.score b { color: var(--ok); font-size: 16px; }
.score em { font-style: normal; font-size: 11px; }
.score.big b { font-size: 34px; } .score.big span { font-size: 20px; }
.lbl { color: var(--muted) !important; font-size: 12px !important; margin: 14px 0 6px !important; }
.ul { margin: 0; padding-left: 18px; font-size: 13px; color: #cfcfd6; display: grid; gap: 4px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; margin-top: 8px; }
.kv span { color: var(--muted); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.hyp { margin-top: 12px; border: 1px dashed rgba(251, 191, 36, .4); border-radius: 12px; padding: 4px 14px 12px; }
.muted { color: var(--muted); font-size: 12px; }
.serp { background: #fff; border-radius: 10px; padding: 12px 14px; font-family: Arial, sans-serif; }
.serp-url { color: #202124; font-size: 12px; }
.serp-title { color: #1a0dab; font-size: 18px; margin: 2px 0; }
.serp-desc { color: #4d5156; font-size: 13px; }
.tbl a { color: var(--cyan); text-decoration: none; }
.card h3 .ghost-btn { margin-left: 8px; padding: 4px 10px; font-size: 12px; }
.badge { font-size: 11px; border-radius: 99px; padding: 2px 8px; margin-left: 6px; }
.badge.ok { color: var(--ok); border: 1px solid rgba(52, 211, 153, .4); }
.badge.wait { color: #fbbf24; border: 1px solid rgba(251, 191, 36, .4); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.flow .node { background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.flow .node.trig { border-color: rgba(139, 92, 246, .6); color: #c4b5fd; }
.flow .arrow { color: #55555f; }

/* Connexions */
.hidden { display: none !important; }
.modal { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; }
.modal-box { width: min(760px, 100%); max-height: 88vh; overflow: auto; background: #111114; border: 1px solid var(--line2); border-radius: 20px; padding: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.modal-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.modal-head h2 { margin: 0 0 4px; font-size: 20px; }
.modal-head p { margin: 0; color: var(--muted); font-size: 14px; }
.modal-head > div { flex: 1; }
.icon-x { background: none; border: 1px solid var(--line2); border-radius: 10px; width: 34px; height: 34px; color: var(--muted); }
.cx-list { display: grid; gap: 10px; }
.cx-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--panel); display: grid; gap: 12px; }
.cx-card.on { border-color: rgba(52, 211, 153, .35); }
.cx-card.soon { opacity: .6; padding: 10px 14px; }
.cx-top { display: flex; gap: 12px; align-items: center; }
.cx-top .grow { min-width: 0; }
.cx-top p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.cx-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line2); display: grid; place-items: center; flex: none; font-size: 18px; color: #fff; }
.cx-state { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cx-state.ok { color: var(--ok); }
.cx-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cx-actions input:not([type=checkbox]), .cx-actions select { flex: 1; min-width: 180px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); padding: 8px 10px; font: 14px Inter; }
.cx-actions input:focus, .cx-actions select:focus { outline: none; border-color: var(--violet); }
.cx-check { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.cx-setup p { font-size: 13px; color: #cfcfd6; margin: 0 0 8px; }
.cx-setup code, .cx-result code { font: 12px var(--mono); background: var(--panel2); padding: 1px 6px; border-radius: 6px; word-break: break-all; }
.cx-setup details { border-top: 1px solid var(--line); padding-top: 8px; }
.cx-setup summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.cx-setup a, .cx-result a { color: var(--cyan); }
.cx-result { font-size: 13px; line-height: 1.7; background: rgba(52, 211, 153, .06); border: 1px solid rgba(52, 211, 153, .25); border-radius: 10px; padding: 10px 12px; }
.link-btn { background: none; border: 0; color: var(--cyan); font-size: 12px; padding: 0; justify-self: start; }
.link-btn.danger { color: var(--bad); }
.cx-sep { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.badge.wait { cursor: pointer; }
@media (max-width: 900px) { #btn-connections { padding: 6px 9px; } .home .top #ai-pill { display: none; } }
.work .project { display: none; }
.work #btn-connections .cx-label { display: none; }
.work .top { gap: 6px; padding: 14px 12px; }
.work .top .ghost-btn { padding: 7px 9px; }

/* Compte */
.avatar-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; font-weight: 700; flex: none; }
.user-menu { position: absolute; top: 56px; right: 16px; z-index: 30; background: #17171b; border: 1px solid var(--line2); border-radius: 14px; padding: 8px; min-width: 220px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.home .user-menu { position: fixed; }
.um-who { display: grid; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.um-who span { color: var(--muted); font-size: 13px; }
.user-menu button { width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.user-menu button:hover { background: var(--panel2); }
.top { position: relative; }
.auth { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(9, 9, 11, .5); backdrop-filter: blur(3px); }
.auth-box { width: min(420px, 100%); background: rgba(17, 17, 20, .92); border: 1px solid var(--line2); border-radius: 22px; padding: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.auth-box .logo { margin-bottom: 20px; }
.auth-box h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.02em; }
.auth-box .muted { font-size: 14px; margin: 0 0 18px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 3px; margin-bottom: 16px; }
.auth-tabs button { background: none; border: 0; border-radius: 9px; padding: 8px; font-size: 14px; color: var(--muted); }
.auth-tabs button.on { background: var(--panel2); color: var(--text); }
#auth-form { display: grid; gap: 12px; }
#auth-form label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
#auth-form input { background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; color: var(--text); padding: 11px 12px; font: 15px Inter; }
#auth-form input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, .2); }
#auth-submit { padding: 12px; font-size: 15px; margin-top: 4px; }
.auth-error { color: var(--bad); font-size: 13px; margin: 0; min-height: 0; }
.auth-error:empty { display: none; }
.auth-note { color: var(--muted); font-size: 12px; text-align: center; margin: 16px 0 0; }
.auth-box { position: relative; }
.auth-x { position: absolute; top: 16px; right: 16px; }
.auth-later { display: block; margin: 10px auto 0; color: var(--muted); }
.work #ai-pill { display: none; }

/* ---------- Parcours d'onboarding ---------- */
.trust { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 18px; font-size: 13px; color: #9a9aa6; animation: rise .7s .2s ease both; }
.work .trust, .home .journey { display: none; }
.journey { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.journey div { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.journey b { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; font-size: 11px; }
.journey i { flex: 1; height: 1px; background: var(--line2); min-width: 10px; }
.journey .on { color: var(--text); }
.journey .on b { background: var(--grad); border: 0; color: #fff; }
.journey .done { color: var(--ok); }
.journey .done b { background: rgba(52, 211, 153, .15); border-color: transparent; color: var(--ok); font-size: 0; }
.journey .done b::after { content: '✓'; font-size: 11px; }
.unlock { margin-top: 10px; border: 1px solid rgba(139, 92, 246, .45); border-radius: 16px; padding: 16px; background: linear-gradient(160deg, rgba(139, 92, 246, .14), rgba(34, 211, 238, .05)); display: grid; gap: 8px; animation: rise .4s ease both; }
.unlock b { font-size: 16px; }
.unlock ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; color: #d6d6de; }
.unlock .actions { margin-top: 4px; }
.unlock small, .locked small { color: var(--muted); font-size: 12px; }
.pr-step { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #c4b5fd; font-weight: 700; }
.locked { grid-column: 1 / -1; margin: 40px auto; max-width: 440px; text-align: center; border: 1px dashed var(--line2); border-radius: 18px; padding: 28px; display: grid; gap: 10px; justify-items: center; }
.locked b { font-size: 17px; }
.locked p { color: var(--muted); margin: 0; }

/* Vidéos */
.videos { overflow: auto; padding: 20px; flex: 1; }
.vd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.vd-head b { font-size: 17px; }
.vd-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.vd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.vcard { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 10px; display: grid; gap: 10px; }
.vcard canvas { width: 100%; aspect-ratio: 9 / 16; border-radius: 12px; background: #000; display: block; }
.vmeta { display: grid; gap: 2px; padding: 0 4px; }
.vmeta span { color: var(--muted); font-size: 12px; }
.vbtns { display: flex; gap: 6px; }
.vbtns { flex-wrap: wrap; }
.vbtns button { flex: 1; padding: 8px 6px; }
.vbtns [data-vpub] { flex-basis: 100%; }

/* Offres */
.pricing-box { width: min(1060px, 100%); position: relative; padding: 30px; }
.pr-x { position: absolute; top: 18px; right: 18px; }
.pr-head { text-align: center; display: grid; gap: 8px; justify-items: center; margin-bottom: 22px; }
.pr-head h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; max-width: 720px; }
.pr-head > p { margin: 0; color: var(--muted); max-width: 640px; }
.pr-promise { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pr-promise li { font-size: 13px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.pr-toggle { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 3px; margin-top: 8px; }
.pr-toggle button { background: none; border: 0; border-radius: 9px; padding: 7px 16px; font-size: 14px; color: var(--muted); }
.pr-toggle button.on { background: var(--panel2); color: var(--text); }
.pr-toggle em { font-style: normal; color: var(--ok); font-size: 12px; margin-left: 4px; }
.pr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pr-plan { position: relative; border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: var(--panel); display: grid; gap: 6px; align-content: start; }
.pr-plan.pop { border-color: rgba(139, 92, 246, .7); background: linear-gradient(180deg, rgba(139, 92, 246, .12), var(--panel) 40%); box-shadow: 0 20px 50px rgba(139, 92, 246, .15); }
.pr-plan.cur { border-color: rgba(52, 211, 153, .5); }
.pr-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.pr-plan h3 { margin: 0; font-size: 18px; }
.pr-tag { margin: 0; color: var(--muted); font-size: 13px; }
.pr-price { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; }
.pr-price b { font-size: 38px; letter-spacing: -.03em; }
.pr-price span, .pr-bill { color: var(--muted); font-size: 13px; margin: 0; }
.pr-cta { width: 100%; padding: 11px; margin: 10px 0 6px; font-size: 14px; }
.pr-plan ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 7px; font-size: 13px; color: #d4d4dc; }
.pr-plan li::before { content: '✓  '; color: var(--ok); font-weight: 700; }
.pr-foot { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 18px; font-size: 13px; color: var(--muted); }
.pr-foot .link-btn { flex-basis: 100%; text-align: center; font-size: 13px; color: var(--muted); }
.pr-test { flex-basis: 100%; text-align: center; margin: 0; color: #fbbf24; font-size: 12px; }
.um-plan { font-size: 12px; color: #c4b5fd !important; margin-top: 2px; }
.work #btn-pricing { display: none; }
@media (max-width: 900px) { .pr-plans { grid-template-columns: 1fr; } .pricing-box { padding: 20px; } }
.pr-plan li.soon { color: var(--muted); }
.pr-plan li.soon::before { content: '◷  '; color: #6b6b75; }
.pr-plan li em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #fbbf24; border: 1px solid rgba(251, 191, 36, .4); border-radius: 5px; padding: 0 5px; margin-left: 4px; white-space: nowrap; }

/* ---------- Bureau des agents ---------- */
.office { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 0; background: radial-gradient(ellipse 60% 55% at 45% 50%, rgba(245, 158, 11, .07), transparent 70%), #0a0a0d; }
.of-main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 18px 8px; }
.of-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.of-top b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.of-top > div:first-child span { margin-left: 10px; color: var(--muted); font-size: 13px; }
.office-svg { flex: 1; width: 100%; min-height: 0; }
.of-hint { margin: 0; text-align: center; color: #5f5f69; font-size: 12px; }
.link { fill: none; stroke-width: 1.5; stroke-dasharray: 4 7; opacity: .55; }
.link.done { opacity: .7; }
.link.running { stroke-width: 2.4; opacity: 1; animation: dash .9s linear infinite; }
.link.locked, .link.idle { opacity: .35; }
@keyframes dash { to { stroke-dashoffset: -22; } }
.dept, .core { cursor: pointer; transition: transform .25s ease, filter .25s; transform-box: fill-box; }
.dept:hover, .dept:focus-visible { transform: translateY(-7px); outline: none; filter: brightness(1.2) drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.dept.running { filter: drop-shadow(0 0 14px rgba(250, 204, 21, .35)); }
.dept.locked { opacity: .55; }
.dept .screen { animation: flicker 2.4s ease-in-out infinite; }
.dept.running .screen { animation-duration: .7s; }
@keyframes flicker { 50% { opacity: .55; } }
.tag-bg { fill: rgba(14, 14, 19, .94); stroke: rgba(255, 255, 255, .14); }
.tag-name { fill: #f4f4f6; font: 700 11px var(--mono); letter-spacing: .08em; }
.tag-sub { fill: #9a9aa6; font: 11px Inter; }
.core-tag { stroke: rgba(245, 158, 11, .45); }
.orb { transform-box: fill-box; transform-origin: center; animation: pulse-orb 3s ease-in-out infinite; }
.core.busy .orb { animation-duration: 1.1s; }
@keyframes pulse-orb { 50% { transform: scale(1.12); opacity: .85; } }
.ring { fill: none; stroke: rgba(245, 158, 11, .55); stroke-width: 1.5; stroke-dasharray: 3 6; animation: dash 3s linear infinite; }
.of-side { border-left: 1px solid var(--line); padding: 16px 14px; overflow: auto; display: grid; gap: 6px; align-content: start; background: rgba(9, 9, 11, .7); }
.of-h { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.of-task { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; font-size: 13px; }
.of-task:hover:not(:disabled) { border-color: var(--violet); }
.of-task b { font-weight: 600; }
.of-task em { font-style: normal; color: var(--muted); }
.of-team { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; background: none; border: 0; border-radius: 8px; padding: 6px 4px; font-size: 13px; text-align: left; }
.of-team:hover { background: var(--panel); }
.of-team i { width: 8px; height: 8px; border-radius: 50%; }
.of-team b { font-weight: 500; }
.of-team span { font-size: 11px; color: var(--muted); }
.of-team span.st-running { color: #facc15; } .of-team span.st-done { color: var(--ok); } .of-team span.st-locked { color: #71717a; }
@media (max-width: 1100px) { .office { grid-template-columns: 1fr; overflow: auto; } .of-side { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- Chantier : accueil et construction ---------- */
.home-stage { display: none; }
.home .chat-col { max-width: 1180px; }
.home .hero, .home .composer, .home .ideas, .home .trust { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
/* la scène se réduit pour que l'idée, les choix et les exemples tiennent sans défiler */
.home .home-stage { display: block; width: 100%; height: clamp(200px, calc(100vh - 720px), 520px); margin: 4px auto 6px; animation: rise .8s .1s ease both; pointer-events: none; }
.home .home-stage svg { width: 100%; height: 100%; }
.home .hero { margin-bottom: 0; }
.home .hero h1 { font-size: clamp(30px, 4.6vw, 50px); }
.home .hero p { font-size: 16px; }
.home .chat-col { justify-content: flex-start; padding-top: 78px; padding-bottom: 24px; overflow: auto; }
.home .composer { position: relative; z-index: 2; }
.slot-shape { fill: rgba(255, 255, 255, .02); stroke: rgba(255, 255, 255, .22); stroke-width: 1.4; stroke-dasharray: 6 6; animation: dash 6s linear infinite; }
.slot.locked .slot-shape { stroke: rgba(251, 191, 36, .28); }
.slot-icon { font-size: 22px; fill: rgba(255, 255, 255, .35); }
.tag.ghost .tag-bg { fill: rgba(14, 14, 19, .55); stroke: rgba(255, 255, 255, .08); stroke-dasharray: 4 4; }
.tag.ghost .tag-name { fill: #8b8b96; }
.link.ghost { stroke: rgba(255, 255, 255, .08); stroke-dasharray: 2 8; stroke-width: 1.2; fill: none; }
.core.idle .orb { animation-duration: 4s; }
/* construction d'un département : le plateau tombe, les postes apparaissent, l'étiquette et la connexion suivent */
.dept.spawn .plate { animation: drop .75s cubic-bezier(.2, .9, .3, 1.35) both; }
.dept.spawn .desk { animation: pop .45s cubic-bezier(.2, .9, .3, 1.4) both; animation-delay: calc(.55s + var(--i) * .18s); transform-box: fill-box; transform-origin: center bottom; }
.dept.spawn .tag { animation: pop .4s 1s both; transform-box: fill-box; transform-origin: center; }
.link.spawn { stroke-dasharray: 100; animation: draw .9s .2s ease-out both; }
@keyframes drop { 0% { transform: translateY(-140px); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.hud-game { display: flex; align-items: center; gap: 10px; font: 11px var(--mono); color: var(--muted); }
.hud-game b { color: #fde68a; letter-spacing: .08em; }
.hud-bar { width: 120px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.hud-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #fde68a); transition: width .8s cubic-bezier(.2, .9, .3, 1.2); }
#build-banners { position: absolute; top: 64px; left: 0; right: 280px; display: grid; justify-items: center; pointer-events: none; z-index: 3; }
.build-banner { display: flex; gap: 12px; align-items: center; background: rgba(14, 14, 19, .95); border: 1px solid var(--c); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 40%, transparent); border-radius: 14px; padding: 10px 16px; animation: banner-in .45s cubic-bezier(.2, .9, .3, 1.3) both; }
.build-banner span { font-size: 22px; }
.build-banner b { display: block; font-size: 15px; }
.build-banner small { color: var(--muted); font-size: 12px; }
.build-banner.out { animation: banner-out .35s ease both; }
@keyframes banner-in { from { transform: translateY(-20px) scale(.9); opacity: 0; } }
@keyframes banner-out { to { transform: translateY(-14px); opacity: 0; } }
@media (max-width: 1100px) { #build-banners { right: 0; } }
@media (max-width: 900px) { .home .home-stage { margin: 0 auto -20px; } .hud-game span { display: none; } }

/* Studio vidéo */
.vd-studio { border: 1px solid rgba(139, 92, 246, .45); background: linear-gradient(160deg, rgba(139, 92, 246, .12), transparent); border-radius: 16px; padding: 16px; display: grid; gap: 10px; margin-bottom: 18px; }
.vd-studio b { font-size: 15px; }
.vd-studio p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.vd-studio textarea { background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; color: var(--text); padding: 10px 12px; font: 14px/1.5 Inter; resize: vertical; }
.vd-studio textarea:focus, .vd-studio select:focus { outline: none; border-color: var(--violet); }
.vd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vd-row label { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.vd-row select { background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); padding: 7px 10px; font: 13px Inter; }
.locked-studio { grid-template-columns: 1fr auto; align-items: center; border-style: dashed; }
.vcard.mine { border-color: rgba(139, 92, 246, .5); }
.vmeta em { font-style: normal; font-size: 12px; color: #c4b5fd; min-height: 16px; }
@media (max-width: 700px) { .locked-studio { grid-template-columns: 1fr; } }

/* Publication sur les réseaux sociaux */
.pub-box { width: min(620px, 100%); display: grid; gap: 12px; }
.pub-box .modal-head { margin-bottom: 0; }
.pub-nets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pub-net { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; }
.pub-net.ready { cursor: pointer; }
.pub-net.ready:hover, .pub-net.ready:focus-visible { border-color: var(--line2); outline: none; }
.pub-net.on { border-color: var(--violet); background: rgba(139, 92, 246, .08); }
.pub-net .grow { min-width: 0; display: grid; }
.pub-net b { font-size: 14px; }
.pub-net span:not(.pub-ico):not(.pub-check) { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.pub-check { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line2); display: grid; place-items: center; font-size: 13px; color: #fff; flex: none; }
.pub-net.on .pub-check { background: var(--violet); border-color: var(--violet); }
.pub-off { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ghost-btn.sm { padding: 5px 10px; font-size: 12px; }
.pub-field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.pub-field-head { display: flex; justify-content: space-between; }
.pub-field input, .pub-field textarea { background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); padding: 9px 11px; font: 14px/1.5 Inter, system-ui, sans-serif; resize: vertical; }
.pub-field input:focus, .pub-field textarea:focus { outline: none; border-color: var(--violet); }
.pub-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pub-actions .grow { flex: 1; }
.pub-results { display: grid; gap: 6px; }
.pub-res { font-size: 13px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); line-height: 1.5; }
.pub-res.ok { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .06); }
.pub-res.ko { border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .06); }
.pub-res a { color: var(--cyan); }
.vd-pubs { margin-top: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.vd-pubs b { color: var(--text); }
.vd-pubs span { color: var(--text); font-weight: 600; }
.vd-pubs a { color: var(--cyan); }
@media (max-width: 560px) { .pub-nets { grid-template-columns: minmax(0, 1fr); } }

/* Type de projet : choix à l'accueil, question dans le fil, rappel du type choisi */
.kinds { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 14px; animation: rise .7s .1s ease both; }
.kinds > span { font-size: 13px; color: var(--muted); margin-right: 2px; }
.kinds button { background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); border-radius: 10px; padding: 7px 12px; font-size: 13px; color: #dcdce2; }
.kinds button:hover { border-color: var(--violet); color: #fff; }
.kinds button[aria-pressed="true"] { border-color: var(--violet); background: rgba(139, 92, 246, .16); color: #fff; }
.work .kinds { display: none; }
.home .kinds { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.type-ask { display: grid; gap: 12px; animation: rise .35s ease both; }
.type-ask p { margin: 0; color: #dcdce2; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.type-grid button { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; padding: 12px; color: var(--text); }
.type-grid button:hover:not(:disabled) { border-color: var(--violet); transform: translateY(-1px); }
.type-grid button.on { border-color: var(--violet); background: rgba(139, 92, 246, .14); }
.type-grid button:disabled:not(.on) { opacity: .45; }
.type-grid span { font-size: 22px; }
.type-grid b { font-size: 14px; }
.type-grid small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.type-grid em { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--violet); background: rgba(139, 92, 246, .14); border-radius: 99px; padding: 2px 7px; }
.type-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 12px; color: #dcdce2; border: 1px solid var(--line2); border-radius: 99px; padding: 4px 6px 4px 12px; margin-bottom: 4px; }
.type-chip button { font-size: 12px; color: var(--muted); background: var(--panel2); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; }
.type-chip button:hover { color: #fff; border-color: var(--violet); }

/* SEO : audit technique et fiche Google */
.seo-score { margin-left: auto; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 99px; }
.seo-score.ok { color: #052e16; background: var(--ok); }
.seo-score.mid { color: #422006; background: #facc15; }
.seo-score.low { color: #fff; background: var(--bad); }
.seo-checks { display: grid; gap: 6px; }
.seo-checks > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.45; }
.seo-checks b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; margin-top: 1px; }
.seo-checks .ok b { background: rgba(52, 211, 153, .18); color: var(--ok); }
.seo-checks .ko b { background: rgba(250, 204, 21, .18); color: #facc15; }
.seo-checks em { display: block; font-style: normal; color: var(--muted); font-size: 12px; }
.kw-main { border-color: var(--violet) !important; background: rgba(139, 92, 246, .16); color: #fff; }

/* Prospects : score, priorité, accroche */
.temp { display: inline-block; min-width: 34px; text-align: center; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 99px; }
.temp.chaud { background: rgba(248, 113, 113, .18); color: #fca5a5; }
.temp.tiede { background: rgba(250, 204, 21, .16); color: #fde68a; }
.temp.froid { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
.lead-sum { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 12px; }
.tbl .why { font-size: 11px; color: var(--muted); margin-top: 4px; }
.tbl .hook { font-size: 12px; color: #dcdce2; margin-top: 4px; font-style: italic; max-width: 460px; }
.mail .ab { display: block; font-size: 12px; color: var(--muted); margin: 2px 0 4px; }

/* Fil plus épuré : le modèle et les jetons de chaque agent restent dans l'espace Coûts */
.thread .step .tool { display: none; }
.thread .step .head b { font-size: 14px; }

/* Sélecteur de page de l'aperçu */
.page-select { background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); padding: 6px 10px; font: 13px Inter, system-ui, sans-serif; max-width: 240px; }
.page-count { font-size: 12px; white-space: nowrap; }

/* Infos de l'entreprise */
.co-box { width: min(680px, 100%); display: grid; gap: 14px; }
.co-box .modal-head { margin-bottom: 0; }
.co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.co-grid label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.co-grid label.wide { grid-column: 1 / -1; }
.co-grid label[hidden] { display: none; }
.co-grid input { background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); padding: 9px 11px; font: 14px Inter, system-ui, sans-serif; }
.co-grid input:focus { outline: none; border-color: var(--violet); }
.co-actions { display: flex; align-items: center; gap: 10px; }
.co-actions .grow { flex: 1; }
@media (max-width: 560px) { .co-grid { grid-template-columns: minmax(0, 1fr); } }
.work-col[data-tab="preview"] #pane-title { display: none; }

/* Sélecteur de design */
.pane-preview.on { flex-direction: row; }
.pane-preview .frame-wrap { min-width: 0; }
#btn-style.on { background: var(--panel2); border-color: var(--text); }
.dz { width: 360px; flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--panel); min-height: 0; }
.dz.hidden { display: none; }
.dz-head { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.dz-body { flex: 1; overflow: auto; padding: 4px 16px 16px; }
.dz-body h4 { margin: 18px 0 10px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dz-body button { font: inherit; color: inherit; cursor: pointer; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, background .15s; }
.dz-body button:hover { border-color: var(--line2); }
.dz-body button.on { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.dz-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dz-theme { display: grid; gap: 2px; padding: 8px; text-align: left; }
.dz-theme b { font-size: 13px; margin-top: 6px; }
.dz-theme small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.dz-mini { display: grid; gap: 5px; align-content: start; height: 84px; padding: 10px 12px; border: 1px solid rgba(128, 128, 128, .25); overflow: hidden; }
.dz-mini i { font-style: normal; font-size: 26px; line-height: 1; }
.dz-mini s { display: block; height: 4px; width: 70%; border-radius: 2px; opacity: .45; }
.dz-mini u { display: block; width: 42px; height: 12px; margin-top: 3px; }
.dz-pals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dz-pal { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px !important; text-align: left; }
.dz-pal i { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.dz-colors { display: flex; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.dz-colors label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.dz-colors input { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line2); border-radius: 8px; background: none; cursor: pointer; }
.dz-fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dz-font { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; }
.dz-font i { font-style: normal; font-size: 26px; line-height: 1.1; }
.dz-font span { font-size: 12px; }
.dz-font small { font-size: 10px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dz-shapes.four { grid-template-columns: repeat(2, 1fr); }
.dz-shape { display: grid; justify-items: center; gap: 6px; padding: 10px 6px 8px; font-size: 12px; }
.dz-shape svg { width: 100%; max-width: 84px; height: auto; color: var(--muted); }
.dz-shape.on svg { color: var(--text); }
.dz-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dz-seg button { padding: 9px; font-size: 13px; }
.dz-foot { display: flex; gap: 8px; align-items: center; padding: 12px 16px 6px; border-top: 1px solid var(--line); }
.dz-foot button:disabled { opacity: .4; cursor: default; }
.dz-note { margin: 0; padding: 0 16px 12px; font-size: 11px; color: var(--muted); }
@media (max-width: 900px) {
  .pane-preview.on { flex-direction: column; }
  .dz { width: auto; height: 58%; border-left: 0; border-top: 1px solid var(--line); }
}

/* Nouveaux agents */
.of-team { grid-template-columns: 10px 1fr auto; row-gap: 2px; }
.of-team b small { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.of-team em { grid-column: 2 / -1; font-style: normal; font-size: 11px; color: var(--muted); line-height: 1.35; }
.ph-strip { display: flex; gap: 6px; margin: 6px 0; }
.ph-strip img { width: 54px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--panel2); }
.ph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.ph-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; background: var(--panel2); }
.og-thumb { width: 220px; max-width: 100%; border-radius: 8px; margin: 6px 0; display: block; }
.og-big { width: 100%; border-radius: 10px; display: block; margin-bottom: 10px; }
b.free { color: var(--ok); } b.taken { color: #f87171; }
.nl-frame { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 12px; background: #f3f4f6; }
.fc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.fc-kpis div { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.fc-kpis span { font-size: 12px; color: var(--muted); }
.fc-kpis b { font-size: 18px; }
.fc-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 140px; align-items: end; margin-bottom: 8px; }
.fc-bars div { height: 100%; display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; gap: 4px; }
.fc-bars i { width: 100%; border-radius: 6px 6px 2px 2px; background: #52525b; }
.fc-bars i.pos { background: var(--ok); }
.fc-bars small { font-size: 10px; color: var(--muted); }
.sim select { width: 100%; background: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 8px; font: inherit; }
@media (max-width: 700px) { .fc-kpis { grid-template-columns: 1fr 1fr; } .ph-grid { grid-template-columns: repeat(3, 1fr); } }

/* Accueil : créer ou améliorer un site existant */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; animation: rise .7s .05s ease both; }
.home .modes { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.work .modes { display: none; }
.modes button { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line2); color: var(--text); }
.modes button span { grid-row: span 2; font-size: 22px; }
.modes button b { font-size: 14px; }
.modes button small { font-size: 12px; color: var(--muted); }
.modes button:hover { border-color: var(--violet); }
.modes button[aria-checked="true"] { border-color: var(--violet); background: rgba(139, 92, 246, .14); box-shadow: 0 0 0 1px var(--violet); }
.ideas .muted { width: 100%; text-align: center; font-size: 12px; }
[hidden] { display: none !important; }
@media (max-width: 600px) { .modes { grid-template-columns: 1fr; } }

/* Espace Audit */
.au-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.au-head h3 a { color: var(--text); }
.au-scores { display: flex; gap: 10px; flex-wrap: wrap; }
.au-score { display: grid; justify-items: center; gap: 2px; min-width: 92px; padding: 12px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel2); }
.au-score b { font-size: 26px; line-height: 1; }
.au-score span { font-size: 11px; color: var(--muted); text-align: center; }
.au-score.ok b { color: var(--ok); } .au-score.mid b { color: #fbbf24; } .au-score.low b { color: #f87171; }
.au-progress { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 500; }
.au-list { display: grid; gap: 10px; }
.au-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.au-item input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ok); }
.au-item b { display: block; margin: 6px 0 4px; font-size: 15px; }
.au-item p { margin: 3px 0; font-size: 13px; color: #c9c9d1; }
.au-item p em { font-style: normal; color: var(--muted); }
.au-item.done { opacity: .55; } .au-item.done b { text-decoration: line-through; }
.au-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.au-tags span { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.au-tags .imp.fort { color: #fca5a5; border-color: rgba(248, 113, 113, .4); } .au-tags .imp.moyen { color: #fcd34d; border-color: rgba(251, 191, 36, .4); }
.au-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.au-ba > div { padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); display: grid; gap: 6px; align-content: start; }
.au-ba .after { border-color: rgba(52, 211, 153, .45); }
.au-ba b { font-size: 18px; line-height: 1.25; } .au-ba p { margin: 0; font-size: 13px; color: #c9c9d1; }
.au-btn { justify-self: start; margin-top: 6px; padding: 7px 12px; border-radius: 8px; background: var(--violet); color: #fff; font-size: 13px; font-weight: 600; }
.au-btn.ghost { background: none; border: 1px solid var(--line2); color: var(--text); }
.au-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 760px) { .au-head, .au-ba { grid-template-columns: 1fr; } }

/* Assistant : consignes après la création */
.assist { display: none; }
.work .assist { display: grid; gap: 8px; padding: 10px 14px 8px; border-top: 1px solid var(--line); }
.assist-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; min-width: 0; }
.assist-head small { font-weight: 400; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.assist-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.assist-chips::-webkit-scrollbar { display: none; }
.assist-chips button { flex: none; font-size: 12px; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); color: #dcdce2; white-space: nowrap; }
.assist-chips button:hover { border-color: var(--violet); color: #fff; }
.busy .assist-chips button { opacity: .45; pointer-events: none; }
.a-msg.help ul { margin: 6px 0 0; padding-left: 18px; }

/* Vidéos : accroches à tester et version payante */
.vhooks { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 0 12px; }
.vhooks span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.vhooks button { font-size: 11px; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line2); background: none; color: #c9c9d1; }
.vhooks button.on { border-color: var(--violet); background: rgba(139, 92, 246, .18); color: #fff; }
.vhook-text { margin: 6px 12px 0; font-size: 12px; color: #c9c9d1; font-style: italic; }
.vd-upsell { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin-bottom: 16px; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(139, 92, 246, .55); background: linear-gradient(120deg, rgba(139, 92, 246, .18), rgba(34, 211, 238, .08)); }
.vd-upsell b { font-size: 15px; }
.vd-upsell ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; font-size: 13px; color: #dcdce2; }
.vd-upsell li:before { content: "✓ "; color: var(--ok); font-weight: 800; }
.vd-up-cta { display: grid; gap: 6px; justify-items: center; }
.vd-up-cta small { font-size: 11px; color: var(--muted); }
@media (max-width: 900px) { .vd-upsell { grid-template-columns: 1fr; } .vd-upsell ul { grid-template-columns: 1fr; } }

/* Accueil : le bouton d'envoi s'allume quand une suggestion a rempli la zone */
.send.ready { animation: sendReady 1.6s ease 2; box-shadow: 0 0 0 0 rgba(139, 92, 246, .6); }
@keyframes sendReady { 0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, .65); transform: scale(1); } 40% { transform: scale(1.12); } 100% { box-shadow: 0 0 0 16px rgba(139, 92, 246, 0); transform: scale(1); } }

/* Intégrations visibles sans compte : présentation et bouton qui débloque */
.cx-lock { display: grid; gap: 8px; justify-items: start; padding: 16px 18px; margin-bottom: 6px; border-radius: 14px; border: 1px solid rgba(139, 92, 246, .55); background: linear-gradient(120deg, rgba(139, 92, 246, .16), rgba(34, 211, 238, .06)); }
.cx-lock p { margin: 0; font-size: 13px; color: #c9c9d1; }

/* Ventes et rentabilité (Stripe) */
.rv { position: relative; }
.rv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; }
.rv-src { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.rv-badge { font-size: 12px; border: 1px solid var(--line2); border-radius: 99px; padding: 3px 10px; color: var(--muted); }
.rv-badge.ok { color: var(--ok); border-color: rgba(52, 211, 153, .4); }
.rv-badge.demo { color: #fbbf24; border-color: rgba(251, 191, 36, .45); }
.rv-periods { display: inline-flex; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.rv-periods button { background: none; border: 0; border-radius: 7px; padding: 5px 11px; font-size: 13px; color: var(--muted); }
.rv-periods button.on { background: var(--line2); color: var(--text); }
.rv-intro p { max-width: 760px; }
.rv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.rv-steps div { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 13px; color: #cfcfd6; display: grid; gap: 6px; }
.rv-steps b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: #fff; font-size: 12px; }
.rv-error { color: var(--bad); display: flex; gap: 10px; align-items: center; }
.rv-kpis em { font-style: normal; font-size: 11px; color: var(--muted); }
.rv-tips { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rv-tips li { font-size: 13px; color: #dcdce2; background: var(--panel2); border-radius: 10px; padding: 8px 12px; }
.rv-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #cfcfd6; margin-bottom: 10px; }
.rv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rv-legend i, .rv-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.rv-dot { margin-right: 7px; vertical-align: -1px; }
.rv-chart { display: flex; gap: 2px; height: 180px; align-items: stretch; margin-bottom: 14px; border-bottom: 1px solid var(--line2); }
.rv-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; position: relative; cursor: default; }
.rv-col:hover { background: rgba(255, 255, 255, .03); }
.rv-stack { display: flex; flex-direction: column-reverse; gap: 2px; min-height: 0; }
.rv-stack i { display: block; min-height: 2px; }
.rv-stack i:last-child { border-radius: 4px 4px 0 0; }
.rv-col small { position: absolute; bottom: -20px; left: 0; font-size: 10px; color: var(--muted); white-space: nowrap; }
.rv-chart + .rv-tip + .table-scroll, .rv-chart + .rv-tip[hidden] + .table-scroll { margin-top: 26px; }
.rv-tip { position: absolute; z-index: 5; pointer-events: none; background: #1d1d23; border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: var(--text); width: 216px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.rv-tip div { color: #cfcfd6; }
.rv-share { display: inline-block; width: 60px; height: 6px; background: var(--line); border-radius: 3px; vertical-align: middle; overflow: hidden; }
.rv-share i { display: block; height: 100%; }
.rv-in { width: 80px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; color: var(--text); padding: 4px 8px; font: 13px Inter; }
.rv-subs { font-size: 12px; white-space: normal !important; min-width: 180px; }
.rv-fixed { margin: 14px 0 6px; max-width: 360px; grid-template-columns: 1fr; }
.rv-url { font-size: 11px; color: #cfcfd6; word-break: break-all; white-space: normal; }
.rv .tbl td:has(.rv-url) { white-space: normal; }
@media (max-width: 700px) { .rv-steps { grid-template-columns: 1fr; } }

/* Connecteurs de croissance */
.cx-card.focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, .25); }
.cx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.cx-grid input { background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); padding: 8px 10px; font: 14px Inter; min-width: 0; }
.cx-grid input:focus { outline: none; border-color: var(--violet); }
.cx-dns { margin-top: 6px; border-collapse: collapse; font-size: 12px; }
.cx-dns td { padding: 3px 10px 3px 0; }
.lead-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 12px; }
.lead-mail { width: 190px; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; color: var(--text); padding: 5px 8px; font: 12px Inter; }
.lead-mail:focus { outline: none; border-color: var(--violet); }
.lead-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lead-act .why { flex-basis: 100%; }
.rdv-panel { display: grid; gap: 8px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid rgba(139, 92, 246, .5); border-radius: 12px; background: rgba(139, 92, 246, .08); font-size: 13px; }
.post-act { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.sched-tag { font-size: 12px; color: var(--ok); }
.sched-form { display: grid; gap: 8px; padding: 12px; margin: 10px 0; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel2); }
.sched-form input[type=datetime-local], .pub-when input { background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; color: var(--text); padding: 7px 10px; font: 14px Inter; color-scheme: dark; }
.sched-tbl td.sched-text { white-space: normal; min-width: 220px; color: #cfcfd6; }
@media (max-width: 700px) { .cx-grid { grid-template-columns: 1fr; } }

/* Agent Coach : plan d'action du client */
.coach { display: grid; gap: 8px; }
.coach-head { display: flex; justify-content: space-between; align-items: baseline; }
.coach-head b { font-size: 14px; }
.coach-head span { font: 11px var(--mono); color: var(--muted); }
.coach-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.coach-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .6s ease; }
.coach-count { font-size: 12px; color: var(--muted); }
.coach-wait { font-size: 13px; color: #cfcfd6; margin: 4px 0; line-height: 1.5; }
.coach-next { display: grid; gap: 6px; justify-items: start; padding: 12px; border-radius: 14px; border: 1px solid rgba(139, 92, 246, .55); background: linear-gradient(120deg, rgba(139, 92, 246, .16), rgba(34, 211, 238, .06)); margin: 4px 0 6px; }
.coach-next span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #c4b5fd; }
.coach-next b { font-size: 14px; }
.coach-next p { margin: 0; font-size: 12px; color: #cfcfd6; line-height: 1.45; }
.coach-next .primary-btn { padding: 7px 12px; font-size: 13px; }
.coach-phase { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.coach-phase summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 13px; font-weight: 600; }
.coach-phase summary::-webkit-details-marker { display: none; }
.coach-phase summary em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 500; }
.coach-phase.complete summary em { color: var(--ok); }
.coach-phase[open] summary { border-bottom: 1px solid var(--line); }
.ck { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: start; padding: 8px 12px; font-size: 13px; }
.ck + .ck { border-top: 1px solid rgba(255, 255, 255, .04); }
.ck .box { width: 18px; height: 18px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line2); background: none; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; padding: 0; }
.ck .box:disabled { cursor: default; opacity: 1; }
.ck .box[data-coach-toggle] { border-style: dashed; border-color: #8b8b96; cursor: pointer; }
.ck.done .box { background: var(--ok); border: 0; color: #052e1b; }
.ck b { font-weight: 600; display: block; }
.ck b small { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 4px; }
.ck div small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.ck.done b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); }
.ck.opt:not(.done) b { color: #cfcfd6; }
.ck.next { background: rgba(139, 92, 246, .08); }
.coach-go { background: none; border: 1px solid var(--line2); border-radius: 8px; padding: 3px 8px; color: var(--text); font-size: 12px; }
.coach-go:hover { border-color: var(--violet); }
.coach-note { font-size: 11px; color: var(--muted); margin: 2px 0 8px; }

/* Mesure Lighthouse */
.lh-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 14px; }
.lh-score { display: grid; justify-items: center; gap: 6px; text-align: center; }
.lh-score b { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; border: 4px solid currentColor; }
.lh-score span { font-size: 12px; color: var(--muted); }
.lh-score.ok b { color: var(--ok); } .lh-score.mid b { color: #fbbf24; } .lh-score.low b { color: var(--bad); }
.lh-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 10px; }
.lh-metrics div { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; font-size: 12px; }
.lh-metrics span { color: var(--muted); }
.lh-metrics b { font-size: 16px; }
.lh-metrics .ok b { color: var(--ok); } .lh-metrics .mid b { color: #fbbf24; } .lh-metrics .low b { color: var(--bad); }
.lh-opps { margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: #cfcfd6; }
.lh-opps em { color: var(--muted); font-style: normal; margin-left: 6px; }
@media (max-width: 700px) { .lh-scores { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Produit et technique (projets techniques) ---------- */
.tech-opt .chips { margin: 6px 0 8px; }
.tech-opt em { display: block; margin-top: 6px; color: var(--muted); font-style: normal; }
.tech-reco { background: rgba(139, 92, 246, .08); border: 1px solid rgba(139, 92, 246, .3); border-radius: 10px; padding: 10px 12px; margin-top: 12px !important; }
.lvl { display: inline-block; margin-left: 6px; font: 600 10px Inter, sans-serif; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 5px; color: var(--muted); border: 1px solid var(--line2); vertical-align: middle; }
.lvl.must { color: #fbbf24; border-color: rgba(251, 191, 36, .4); }
.proto { display: grid; grid-template-columns: 190px minmax(0, 1fr); border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; background: #f6f7fb; color: #1d1d27; margin-top: 10px; }
.proto-nav { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; background: #fff; border-right: 1px solid #e6e7ef; }
.proto-nav b { font-size: 15px; padding: 2px 8px 10px; color: var(--pc); }
.proto-nav button { text-align: left; border: 0; background: transparent; color: #4b4b5c; padding: 8px 10px; border-radius: 8px; font: 500 13px Inter, sans-serif; cursor: pointer; }
.proto-nav button.on { background: color-mix(in srgb, var(--pc) 14%, #fff); color: var(--pc); font-weight: 600; }
.proto-screens { padding: 18px; min-width: 0; }
.proto-screen h4 { margin: 0; font-size: 18px; color: #12121a; }
.proto-purpose { color: #6b6b7b !important; font-size: 13px !important; margin: 2px 0 14px !important; }
.proto-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pb { background: #fff; border: 1px solid #e6e7ef; border-radius: 12px; padding: 12px 14px; min-width: 0; font-size: 13px; }
.pb-wide, .pb-stats { grid-column: 1 / -1; }
.pb h5 { margin: 0 0 8px; font-size: 12px; color: #6b6b7b; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pb .ul { color: #2b2b38; }
.pb-stats > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.pb-stats > div div { display: grid; gap: 2px; }
.pb-stats span { color: #6b6b7b; font-size: 12px; }
.pb-stats b { font-size: 20px; color: #12121a; }
.pb .tbl th, .pb .tbl td { border-bottom-color: #ececf3; color: #2b2b38; }
.pb .tbl th { color: #6b6b7b; }
.pb label { display: grid; gap: 4px; margin-bottom: 8px; color: #4b4b5c; font-size: 12px; }
.pb .pf { height: 30px; border: 1px solid #dcdde7; border-radius: 8px; background: #fafafd; }
.pbtn { display: inline-block; background: var(--pc); color: #fff; border-radius: 8px; padding: 7px 14px; font-weight: 600; font-size: 13px; margin: 4px 6px 0 0; }
.pchart { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.pchart div { flex: 1; height: 100%; display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; gap: 4px; min-width: 0; }
.pchart i { width: 100%; border-radius: 5px 5px 2px 2px; background: var(--pc); opacity: .85; }
.pchart small { font-size: 10px; color: #6b6b7b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 700px) {
  .proto { grid-template-columns: minmax(0, 1fr); }
  .proto-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #e6e7ef; align-items: center; }
  .proto-nav b { padding: 0 8px 0 4px; flex-shrink: 0; }
  .proto-nav button { flex-shrink: 0; }
  .proto-screens { padding: 14px; }
}

/* ---------- Téléphone et petite tablette ----------
   La discussion et le Bureau prennent chacun tout l'écran ; la barre du bas passe de l'un à l'autre. */
.m-switch { display: none; }
@media (max-width: 900px) {
  :root { --mnav: 60px; }
  .devices, .hint { display: none; }

  /* Accueil : en-tête lisible sur la scène, boutons qui tiennent sur une ligne */
  .home .top { padding: 10px 14px; gap: 6px; background: rgba(9, 9, 11, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  .home .top .logo { font-size: 17px; }
  .home .top .ghost-btn { padding: 7px 10px; font-size: 13px; }
  .home .chat-col { padding: 70px 16px 24px; }
  .home .hero h1 { font-size: clamp(28px, 8.4vw, 40px); }
  .home .hero p { font-size: 15px; }

  /* Studio : écran plein, sans double défilement */
  body:has(.work) { overflow: hidden; }
  .work { display: block; height: 100vh; height: 100dvh; }
  .work .chat-col, .work .work-col { height: calc(100dvh - var(--mnav) - env(safe-area-inset-bottom)); border: 0; }
  .work .chat-col { overflow: hidden; }
  .work:not([data-mview="work"]) .work-col, .work[data-mview="work"] .chat-col { display: none; }
  .work .thread { max-height: none; padding: 14px 14px 8px; }
  .work .composer { margin: 0 10px 10px; }
  .work .top { padding: 10px 12px; }
  .journey { padding: 8px 12px; gap: 4px; }
  .step { grid-template-columns: 22px minmax(0, 1fr); }
  .u-msg { max-width: 92%; }
  .ph-strip { flex-wrap: wrap; }
  .pane-head .page-select { max-width: 150px; }

  .m-switch { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--mnav) + env(safe-area-inset-bottom)); padding: 6px 10px env(safe-area-inset-bottom); gap: 8px; background: rgba(9, 9, 11, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .home .m-switch { display: none; }
  .m-switch button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: 600 14px Inter, sans-serif; }
  .m-switch button.on { background: var(--panel2); color: var(--text); }
  .m-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, .25); }
  .m-dot[hidden] { display: none; }
  #toasts { bottom: calc(var(--mnav) + 14px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }

  /* Barre d'outils de chaque espace : défile à l'horizontale plutôt que de déborder */
  .pane-head { padding: 8px 12px; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .pane-head::-webkit-scrollbar { display: none; }
  .pane-head > * { flex-shrink: 0; }
  .pane-head .grow { flex: 1 0 0; }
  .pane-head #pane-title { flex-shrink: 1; min-width: 60px; }

  /* Fenêtres : plein écran, bouton de fermeture qui ne chevauche plus le titre */
  .modal { padding: 10px; }
  .modal-box { padding: 16px; border-radius: 16px; max-height: calc(100dvh - 20px); }
  .pricing-box h2 { padding: 0 34px; font-size: 22px; }
  .cx-top { flex-wrap: wrap; }
  .cx-top .grow { flex: 1 1 calc(100% - 70px); }
  .cx-top .cx-state { margin-left: 56px; }
}
@media (max-width: 420px) {
  .home .top #btn-connections .cx-label { display: none; }
  .home .top .logo { font-size: 16px; }
  .home .top .ghost-btn { padding: 6px 8px; font-size: 12.5px; }
}