/* Studio de contenu (« Mes outils ») : mêmes couleurs, cartes, boutons et tailles que les pages VISION,
   repris des maquettes validées. Un seul thème clair, comme l'application. */
:root {
  --cream: #f8f3e8; --panel: #fffdf8; --green: #0e3d34; --green-deep: #072820; --green-soft: #e7efeb;
  --mint: #3fa88e; --gold: #d4a047; --gold-soft: #fbf1d8; --coral-start: #ff8a6b; --coral-end: #e8527d;
  --ink: #1a1714; --ink-soft: #625b51; --muted: #978d7e; --line: #e7ddca; --danger: #b63e52;
  --page: #e8e4dc; --shadow: 0 18px 60px rgba(22,52,43,.13);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); font-size: 13px; line-height: 1.45 }


/* Cadre d'application, comme .app-shell */
.top-right { display: flex; gap: 12px; align-items: center }
.saved { display: flex; gap: 6px; align-items: center; color: var(--ink-soft); font-size: 11px; font-weight: 700 }
.saved i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint) }
.avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--coral-start), var(--coral-end)); color: #fff; font-size: 11px; font-weight: 800 }

/* Briques communes */
.hero { position: relative; overflow: hidden; padding: 24px; border-radius: 22px; background: linear-gradient(150deg, var(--green), var(--green-deep)); color: #fff }
.hero::after { content: ""; position: absolute; right: -45px; bottom: -105px; width: 260px; height: 230px; transform: rotate(42deg); border-radius: 38px; background: rgba(255,255,255,.055) }
.eyebrow, .kicker { color: #e8c56f; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase }
.hero h1 { margin: 6px 0 6px; font-size: 26px; letter-spacing: -.01em; text-wrap: balance }
.hero p { margin: 0; max-width: 60ch; color: rgba(255,255,255,.78); font-size: 13px }
.heading { margin: 6px 2px 18px }
.heading > span { color: var(--coral-end); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase }
.heading h1 { margin: 4px 0 6px; font-size: 24px; letter-spacing: -.01em; text-wrap: balance }
.heading p { margin: 0; max-width: 64ch; color: var(--ink-soft) }
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin: 22px 0 10px }
.section-title span { color: var(--coral-end); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase }
.section-title h2 { margin: 3px 0 0; font-size: 17px }
.section-title a { color: var(--green); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap }
.card { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); min-width: 0 }
.grid { display: grid; gap: 12px }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; text-decoration: none }
.btn.primary { background: var(--green); color: #fff }
.btn.coral { background: linear-gradient(135deg, var(--coral-start), var(--coral-end)); color: #fff }
.btn.secondary { background: var(--panel); border-color: var(--line); color: var(--green) }
.btn.danger { background: var(--panel); border-color: rgba(182,62,82,.35); color: var(--danger) }
.btn.locked { background: #ece6da; color: var(--muted) }
.btn.text { padding-inline: 4px; background: none; color: var(--green) }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font-size: 11px; font-weight: 700; white-space: nowrap }
.chip.on { background: var(--green); border-color: var(--green); color: #fff }
.badge { display: inline-block; padding: 3px 7px; border-radius: 7px; font-size: 9px; font-weight: 900; letter-spacing: .05em; color: #fff; white-space: nowrap }
.tofu { background: var(--mint) } .mofu { background: var(--gold) } .bofu { background: var(--coral-end) } .apres { background: var(--green) }
.status { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 10px; font-weight: 800; white-space: nowrap }
.st-wait { background: var(--gold-soft); color: #8a6516 } .st-ok { background: var(--green-soft); color: var(--green) } .st-redo { background: #fde9e4; color: #b2492f } .st-ai { background: #efe9fb; color: #5b3fa0 } .st-off { background: #eee9df; color: var(--muted) }
.field { display: grid; gap: 6px }
.field > b { font-size: 12px } .field > small { color: var(--muted); font-size: 11px }
.input { min-height: 40px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); font-size: 12px; white-space: pre-line }
.input.tall { min-height: 92px }
.input.ph { color: var(--muted) }
.note { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 13px 15px; border-radius: 14px; background: var(--green-soft) }
.note > i { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: #fff; color: var(--green); font-style: normal; font-weight: 900 }
.note strong { display: block; font-size: 12px } .note p { margin: 2px 0 0; color: var(--ink-soft); font-size: 12px }
.note.warn { background: var(--gold-soft) } .note.warn > i { color: #8a6516 }
.muted { color: var(--muted) } .soft { color: var(--ink-soft) }
.small { font-size: 11px }
.divider { height: 1px; background: var(--line); margin: 14px 0 }

.item .open { color: var(--green); font-size: 11px; font-weight: 800; white-space: nowrap }
.item .right { display: flex; gap: 10px; align-items: center }

/* 1 · Accueil du studio */
.stat { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel) }
.stat b { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--green) }
.stat span { color: var(--ink-soft); font-size: 11px; font-weight: 700 }
.action { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel) }
.action > i { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: var(--gold-soft); color: var(--green); font-style: normal; font-size: 18px; font-weight: 800 }
.action strong { display: block; font-size: 13px } .action small { color: var(--muted); font-size: 11px }
.action.main-act { border-color: rgba(232,82,125,.3) }
.list { display: grid; gap: 8px }
.item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel) }
.item strong { display: block; font-size: 12px } .item .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; color: var(--muted); font-size: 10px }
.knows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel) }
.knows div { padding: 13px 15px; border-right: 1px solid var(--line); min-width: 0 }
.knows div:last-child { border-right: 0 }
.knows span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase }
.knows p { margin: 4px 0 0; font-size: 12px }

/* 2 · Profil */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; font-size: 12px }
.kv dt { color: var(--muted); font-weight: 700 } .kv dd { margin: 0 }
.offer { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: #fff }
.offer strong { font-size: 12px } .offer p { margin: 2px 0 0; color: var(--ink-soft); font-size: 11px }
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.stage { padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c, var(--mint)); min-width: 0 }
.stage b { display: block; font-size: 11px } .stage small { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 11px } .stage em { font-style: normal; font-weight: 700; color: var(--ink) }
.source { margin: 12px 0 0; color: var(--muted); font-size: 10px; font-weight: 700 }
.voice { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 12px; background: #fff; border: 1px solid var(--line) }
.voice p { margin: 0; font-size: 12px; color: var(--ink-soft) } .voice small { color: var(--muted); font-size: 10px }

.from { margin: 8px 0 10px; color: var(--muted); font-size: 10px; font-weight: 700 }
.explain { margin: 0 0 10px; color: var(--ink-soft); font-size: 12px; max-width: 72ch }
.kv.tight { grid-template-columns: 110px 1fr; margin-top: 6px; font-size: 11px }
.journey-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: st }
.journey-steps li { counter-increment: st; display: grid; gap: 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 11px; color: var(--ink-soft); min-width: 0 }
.journey-steps li b { color: var(--ink); font-size: 12px } .journey-steps li b::before { content: counter(st) " · "; color: var(--gold) }
.journey-steps em { font-style: normal; font-weight: 700; color: var(--ink) }
.settings-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px }
.settings-tabs a { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--green); font-size: 11px; font-weight: 800; text-decoration: none }
.settings-tabs a.on { background: var(--green-soft); border-color: var(--mint) }
.settings-link { color: var(--green); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 4px 6px }
.figures div { display: grid; gap: 2px } .figures b { font-size: 28px; line-height: 1.1; color: var(--green); font-variant-numeric: tabular-nums } .figures span { color: var(--ink-soft); font-size: 12px; font-weight: 700 }
.settings-line { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line) }
.settings-line span { color: var(--coral-end); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase } .settings-line h2 { margin: 3px 0 2px; font-size: 17px } .settings-line p { margin: 0; color: var(--ink-soft); font-size: 12px }
.setting-card { display: grid; gap: 4px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: inherit; text-decoration: none; min-width: 0 }
.setting-card span { color: var(--coral-end); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase }
.setting-card p { margin: 0; font-size: 12px; color: var(--ink-soft) } .setting-card b { color: var(--green); font-size: 11px }
.setting-card:hover { border-color: var(--mint) }
.mic { background: #fff; border-color: var(--line); color: var(--green); margin-top: 8px }
.mic.listening { background: #fde9e4; border-color: var(--coral-end); color: var(--coral-end) }
.capture { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel) }
.capture-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start }
.text-with-mic { position: relative }
.text-with-mic textarea { display: block; width: 100%; min-height: 64px; padding-right: 48px; font: inherit; font-size: 12px; line-height: 1.5; resize: vertical; white-space: normal }
.sheet .text-with-mic textarea { min-height: 96px }
.mic-icon { position: absolute; right: 8px; bottom: 8px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; background: var(--green-soft); color: var(--green); cursor: pointer }
.mic-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.mic-icon.listening { background: var(--coral-end); color: #fff; animation: pulse 1s ease-in-out infinite }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(232,82,125,.18) } }
@media (prefers-reduced-motion: reduce) { .mic-icon.listening { animation: none } }
.quiet-field { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; color: var(--ink-soft); font-size: 11px; font-weight: 700 }
.quiet-field select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 11px }
.capture-row .mic { margin-top: 0 } .capture .input { width: 100%; font: inherit; font-size: 12px }
.capture-more { display: flex; flex-wrap: wrap; gap: 4px 18px }
.capture p { margin: 8px 0 0 }
.capture-title { display: block; margin-bottom: 8px; font-size: 12px }
.matrix-wrap { overflow-x: auto } .matrix-wrap .matrix { min-width: 560px }
.ai-box { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 12px; padding: 13px 15px; border-radius: 14px; background: var(--gold-soft) }
.ai-box strong { font-size: 12px } .ai-box p { margin: 2px 0 0; color: var(--ink-soft); font-size: 12px }
.proposed { margin-top: 12px; padding: 14px; border: 1px dashed #b9a6e6; border-radius: 14px; background: #f7f3fd }
.proposed > b { font-size: 12px } .proposed p { margin: 2px 0 10px }
.idea.done p { color: var(--muted) }
.delete-idea { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer }
.delete-idea:hover { background: #fde9e4; color: var(--danger) }
.capture.flash { animation: flash 1.2s ease }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px var(--mint) } 100% { box-shadow: 0 0 0 0 transparent } }
@media (prefers-reduced-motion: reduce) { .capture.flash { animation: none; box-shadow: 0 0 0 3px var(--mint) } }
.steps button.step { font: inherit; font-size: 11px; font-weight: 800; cursor: pointer }
.pick-list { display: grid; gap: 6px }
.pick { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 12px }
.pick input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--green) }
.pick small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px }
.pick:has(input:checked) { border-color: var(--mint); background: var(--green-soft) }
.mix-info { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel) }
.mix-info > b { font-size: 12px } .mix-info .mix { margin: 8px 0 }
.mix .ia, .mix-legend i.ia { background: repeating-linear-gradient(45deg, #ddd4c4 0 4px, #ece6da 4px 8px) }
.mix-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--ink-soft) }
.mix-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px }
.pick-scroll { max-height: 270px; overflow-y: scroll; padding: 2px 6px 2px 2px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel) }
.pick-scroll .pick-list { padding: 6px }
.pick-scroll::-webkit-scrollbar { width: 10px } .pick-scroll::-webkit-scrollbar-thumb { background: #cfc5b2; border-radius: 99px; border: 2px solid var(--panel) } .pick-scroll::-webkit-scrollbar-track { background: transparent }
.mix-steppers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px }
.stepper { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); min-width: 0 }
.stepper span { font-size: 11px; font-weight: 800 } .stepper small { color: var(--muted); font-size: 10px }
.stepper .ctl { display: flex; align-items: center; gap: 8px }
.stepper .ctl button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--green); font: inherit; font-weight: 900; cursor: pointer }
.stepper .ctl button:disabled { opacity: .35; cursor: default }
.stepper .ctl b { min-width: 18px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums }
.pick-summary { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); font-size: 12px }
.prompt { width: 100%; margin-top: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; color: var(--ink-soft); resize: vertical; white-space: pre-wrap }
.paste-area { width: 100%; margin-top: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; resize: vertical; white-space: pre-wrap }
.script-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 0 0 6px; color: var(--ink-soft); font-size: 12px; font-weight: 600 }
.script-meta > span:not(.status) + span::before { content: "·"; margin-right: 14px; color: var(--muted) }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50% }
.five textarea, .final textarea { display: block; width: 100%; border: 0; background: transparent; color: inherit; font: inherit; resize: none; outline: 0; padding: 0 }
.five textarea { font-size: 12px; line-height: 1.5; field-sizing: content; min-height: 36px }
.final .final-text { margin: 10px 0 0; color: rgba(255,255,255,.75); font-size: 13px; font-weight: 400; line-height: 1.65 } .final .final-text .hook, .final .final-text .cta { color: #f3d58c; font-weight: 400 }
.final-note { margin: 10px 0 0; color: rgba(255,255,255,.6); font-size: 10px }
[data-script].editing .five textarea { resize: vertical; padding: 8px 10px; border-radius: 10px; outline: 1px solid var(--mint) }
[data-script].editing .five textarea { background: #fff }
.flag { margin: 6px 0 0; color: #8a6516; font-size: 10px; font-weight: 800 }
.decision-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px }
.after { margin-bottom: 14px; padding: 16px 18px; border-radius: 16px; background: var(--green-soft); border: 1px solid var(--mint) }
.after.refused { background: #fdf0ec; border-color: rgba(182,62,82,.35) }
.after-title { margin: 0; font-size: 14px; font-weight: 800; color: var(--green) } .after.refused .after-title { color: var(--danger) }
.after-list { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 12px; display: grid; gap: 3px }
.banner { margin-bottom: 12px; padding: 11px 14px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 700 }
.banner.refused { background: #fde9e4; color: var(--danger) }
.panel { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 12px 36px rgba(7,40,32,.1) }
.panel-kicker { color: var(--coral-end); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase }
.panel h3 { margin: 4px 0 12px; font-size: 16px }
.panel .input { width: 100%; font: inherit; font-size: 12px; resize: vertical }
.pills { display: flex; flex-wrap: wrap; gap: 6px }
.pill input { position: absolute; opacity: 0 } .pill span { display: inline-block; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font-size: 11px; font-weight: 700; cursor: pointer }
.pill input:checked + span { background: var(--green); border-color: var(--green); color: #fff } .pill input:focus-visible + span { outline: 2px solid var(--mint) }
.remember { margin: 14px 0 0; padding: 0; border: 0; display: grid; gap: 8px }
.remember legend { margin-bottom: 8px; font-size: 12px; font-weight: 800 }
.radio-line, .check-line { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 11px }
.radio-line input, .check-line input { margin: 2px 0 0; accent-color: var(--green) }
.radio-line b, .check-line b { display: block; font-size: 12px } .radio-line small, .check-line small { color: var(--ink-soft) }
.radio-line:has(input:checked), .check-line:has(input:checked) { border-color: var(--mint); background: var(--green-soft) }
.check-line { margin-top: 4px; border-style: dashed }
.ai-panel { margin-top: 10px; margin-bottom: 12px; padding: 14px; border: 1px solid var(--mint); border-radius: 14px; background: #fff }
.ai-panel .input { width: 100%; font: inherit; font-size: 12px }
.matrix button.c { border: 0; font: inherit; font-weight: 800; cursor: pointer }
.matrix button.c.empty { border: 1px dashed var(--coral-end) }
.matrix button.c.selected { outline: 2px solid var(--green) }
.learn-step { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line) }
.learn-step > b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--green) }
.pair { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 8px; align-items: center; margin-top: 8px }
.pair > div { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; min-width: 0 }
.pair > div:first-child p { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(182,62,82,.5) }
.pair small { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em } .pair p { margin: 4px 0 0; font-size: 12px }
.pair > i { font-style: normal; text-align: center; color: var(--mint); font-weight: 900 }
.style-flow { margin-top: 10px; padding: 14px; border: 1px solid var(--mint); border-radius: 14px; background: #fff }
.style-flow .input { width: 100%; font: inherit; font-size: 12px; resize: vertical }
.style-summary { padding: 14px 16px; border-radius: 14px; background: var(--green-deep); color: #fff }
.style-summary p { margin: 0; font-size: 13px; line-height: 1.55 } .style-summary small { display: block; margin-top: 8px; color: #e8c56f; font-size: 10px; font-weight: 700 }
.voice-link { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; color: inherit; text-decoration: none; border-color: rgba(232,82,125,.3) }
.voice-link strong { display: block; margin-top: 3px; font-size: 13px } .voice-link small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px } .voice-link b { color: var(--green); font-size: 11px }
.edit-only { display: none } .card.editing .edit-only { display: flex }
.card.editing dd, .card.editing .offer strong, .card.editing .offer p:not(.from), .card.editing .journey-steps span { outline: 1px solid var(--mint); outline-offset: 2px; border-radius: 6px; background: #fff }
button.btn, button.chip, button.toggle { cursor: pointer; font: inherit }
button.chip { font-size: 11px; font-weight: 700 }
button.toggle { border: 0; padding: 0 }
.inline-form { display: grid; gap: 10px; margin: 6px 0 12px; padding: 14px; border: 1px solid var(--mint); border-radius: 14px; background: #fff }
.inline-form .input { width: 100%; font: inherit; font-size: 12px }
.btn.always { background: #fff; border-color: var(--line); color: var(--green) }
.btn.always.on { background: var(--green-soft); border-color: var(--mint) }
.undo { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 12px }
.undo .btn.text { color: #f3d58c }
.rule.editing p { outline: 1px solid var(--mint); outline-offset: 3px; border-radius: 6px; background: #fff }
/* 3 · Mes idées de Reels */
.sheet { margin: 10px; padding: 16px; border-radius: 20px; background: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.08) }
.sheet h3 { margin: 0 0 10px; font-size: 15px }
.matrix { display: grid; grid-template-columns: 130px repeat(6, minmax(0, 1fr)); gap: 4px; font-size: 10px }
.matrix .h { padding: 6px 4px; text-align: center; font-weight: 800; color: var(--ink-soft) }
.matrix .p { padding: 8px; font-weight: 800; color: var(--green); align-self: center }
.matrix .c { display: grid; place-items: center; min-height: 34px; border-radius: 8px; background: var(--green-soft); color: var(--green); font-weight: 800; font-variant-numeric: tabular-nums }
.matrix .c.empty { background: #fff; border: 1px dashed var(--coral-end); color: var(--coral-end) }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px }
.idea { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel) }
.idea p { margin: 0; font-size: 12px; font-weight: 700 } .idea .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 10px; color: var(--muted) }
.idea .acts { display: flex; gap: 6px }

/* 4 · Créer des scripts */
.steps { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap }
.step { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 11px; font-weight: 800; color: var(--muted) }
.step i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #ece6da; font-style: normal }
.step.on { color: var(--green); border-color: var(--green) } .step.on i { background: var(--green); color: #fff }
.step.done i { background: var(--mint); color: #fff }
.opt { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line) }
.opt:last-child { border-bottom: 0 }
.opt > b { font-size: 12px }
.mix { display: flex; height: 10px; overflow: hidden; border-radius: 99px; margin: 8px 0 6px }
.mix span { display: block }
.paste { min-height: 120px; padding: 12px; border: 1px dashed var(--mint); border-radius: 12px; background: #fff; color: var(--ink-soft); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; white-space: pre-wrap; overflow: hidden }
.preview { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line) }
.preview .tick { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--mint); color: #fff; font-size: 11px; font-weight: 900 }
.preview .tick.w { background: var(--gold) }
.preview strong { font-size: 12px } .preview small { display: block; color: var(--muted); font-size: 10px }

/* 5 · Fiche script */
.script-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px }
.five { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.five li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 11px 13px; border-radius: 12px; background: #fff; border: 1px solid var(--line) }
.five li b { font-size: 11px; color: var(--green) } .five li b small { display: block; margin-top: 2px; color: var(--muted); font-weight: 600; font-size: 10px }
.five li p { margin: 0; font-size: 12px }
.final { padding: 18px 20px; border-radius: 16px; background: var(--green-deep); color: #fff }
.final > span { color: #e8c56f; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase }
.final p { margin: 10px 0 0; font-size: 14px; line-height: 1.6 }
.final .hook, .final .cta { color: #f3d58c; font-weight: 700 }
.decision { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line) }
.modal-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px }
.modal { padding: 18px; border-radius: 20px; background: var(--panel); box-shadow: 0 16px 50px rgba(7,40,32,.18); border: 1px solid var(--line) }
.modal > span { color: var(--coral-end); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase }
.modal h3 { margin: 4px 0 12px; font-size: 16px }
.choice2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px }
.radio { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 11px }
.radio i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); margin-top: 1px }
.radio.on { border-color: var(--green); background: var(--green-soft) } .radio.on i { border: 5px solid var(--green) }
.radio b { display: block; font-size: 12px } .radio small { color: var(--ink-soft) }

/* 6 · Préférences */
.rule { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel) }
.rule p { margin: 0; font-size: 13px; font-weight: 700 }
.rule .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; color: var(--muted); font-size: 10px }
.rule.paused { opacity: .62 }
.toggle { width: 34px; height: 20px; border-radius: 99px; background: var(--mint); position: relative; flex: none }
.toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff }
.toggle.off { background: #d9d2c4 } .toggle.off::after { right: auto; left: 3px }
.rule .acts { display: flex; gap: 10px; align-items: center }
.suggest { padding: 14px 15px; border-radius: 14px; border: 1px dashed var(--gold); background: var(--gold-soft) }
.suggest p { margin: 0; font-size: 12px }

/* 7 · Bibliothèque */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto }
.tabs span { flex: none; padding: 9px 12px; font-size: 12px; font-weight: 800; color: var(--muted); border-bottom: 2px solid transparent }
.tabs span.on { color: var(--green); border-color: var(--green) }
.tabs b { margin-left: 4px; padding: 1px 6px; border-radius: 99px; background: #ece6da; font-size: 10px }
.balance { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px }
.balance-title { margin: 2px 0 8px; color: var(--coral-end); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase }
.detail-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 14px }
.rework { display: block; width: 100%; margin-top: 10px; padding: 10px 12px; border: 0; border-radius: 10px; outline: 1px solid var(--mint); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 13px; line-height: 1.6; resize: vertical }
.detail-title { margin: 4px 0 12px; font-size: 20px }
.talk { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.talk li { padding: 11px 14px; border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; background: var(--gold-soft); font-size: 12px; color: var(--ink-soft) }
.talk li b { color: var(--ink) }
.talk.plain li { border-left-color: var(--mint); background: var(--green-soft) }
[data-coach] .tabs button { flex: none; padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer }
[data-coach] .tabs button.on { color: var(--green); border-color: var(--green) }
[data-coach] a.item, [data-coach] button.item { width: 100%; border: 1px solid var(--line); font: inherit; text-align: left; cursor: pointer }
.coach-extra { margin-top: 12px }
.lib-filters { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 14px 0 10px }
.lib-filters .quiet-field { margin-top: 0 }
.lib-search { margin-left: auto; min-width: 220px } .lib-search .input { width: 100%; min-height: 36px; padding: 8px 12px; font: inherit; font-size: 12px }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.tabs button { flex: none; padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer }
.tabs button.on { color: var(--green); border-color: var(--green) } .tabs button b { margin-left: 4px; padding: 1px 6px; border-radius: 99px; background: #ece6da; font-size: 10px }
tr.clickable { cursor: pointer } tr.clickable:hover td { background: var(--green-soft) }
td .open-link { color: var(--green); font-size: 11px; font-weight: 800; white-space: nowrap; text-decoration: none }
.balance > div { padding: 2px 0 }
.balance small { display: block; color: var(--muted); font-size: 10px; font-weight: 700 }
.balance b { font-size: 18px; font-variant-numeric: tabular-nums }
.balance .bar { height: 5px; margin-top: 6px; padding: 0; border: 0; border-radius: 99px; background: #ece6da; overflow: hidden }
.balance .bar i { display: block; height: 100% }
.balance .low b { color: var(--coral-end) }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel) }
table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 12px }
th, td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle }
th { color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase }
tr:last-child td { border-bottom: 0 }
td strong { font-size: 12px }

/* 8 · Vue coach */
.coach-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 12px }
.readonly { padding: 3px 9px; border-radius: 99px; background: #eee9df; color: var(--ink-soft); font-size: 10px; font-weight: 800 }

@media (max-width: 480px) { .lib-search { margin-left: 0; width: 100% } .journey-steps { grid-template-columns: 1fr } .voice { grid-template-columns: 1fr } .g2 { grid-template-columns: 1fr } .saved { display: none } .choice2 { grid-template-columns: 1fr } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

/* Cadre de la page, comme .app-shell des autres pages */
body { padding: 24px }
.app { width: min(1000px, 100%); min-height: calc(100vh - 48px); margin: 0 auto; overflow: hidden; border-radius: 24px; background: var(--cream); box-shadow: var(--shadow) }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 10px }
.brand { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: var(--green); color: var(--gold); font-weight: 800 }
.brand strong { display: block; font-size: 13px } .brand span { display: block; color: var(--muted); font-size: 11px }
.saved.error i { background: var(--danger) }
.main { padding: 6px 22px 32px }
.studio-nav { position: sticky; top: 0; z-index: 4; display: flex; gap: 4px; margin: 0 22px 12px; padding: 4px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); overflow-x: auto }
.studio-nav a { flex: 1 0 auto; display: flex; gap: 6px; justify-content: center; align-items: center; padding: 8px 12px; border-radius: 10px; color: var(--ink-soft); font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap }
.studio-nav a b { font-weight: 800 }
.studio-nav a.on { background: var(--green); color: #fff }
a.item, a.action { color: inherit; text-decoration: none } a.action:hover, a.item:hover { border-color: var(--mint) }
.loading { color: var(--muted) }
.page-error, .form-error { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #fde9e4; color: var(--danger); font-size: 12px; font-weight: 700 }
.btn:disabled { opacity: .5; cursor: default }
.btn.inline { padding: 0; font-size: inherit }
.btn.danger.solid { background: var(--danger); color: #fff }
.warn-banner { background: var(--gold-soft); color: #8a6516 }
.five li.missing { border-style: dashed; border-color: var(--gold) }
.five li.missing textarea::placeholder { color: #8a6516 }
.script-editing .five textarea { resize: vertical; padding: 8px 10px; border-radius: 10px; outline: 1px solid var(--mint); background: #fff }
.idea .meta .status { font-size: 9px }
.empty-state { padding: 16px; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink-soft); font-size: 12px; text-align: center }
.offer-edit, .theme-edit, .stage-edit { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--mint); border-radius: 13px; background: #fff }
.offer-edit .input, .theme-edit .input, .stage-edit .input, .card.editing .input { width: 100%; font: inherit; font-size: 12px }
.edit-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px }
.card .from { margin: 10px 0 0 }
.pick input:disabled + span { color: var(--muted) }
.text-with-mic textarea { min-height: 64px }
.matrix .c.on { outline: 2px solid var(--green) }
.matrix button.c { min-width: 0 }
/* Fenêtre de confirmation commune (vision-confirm.js) */
.confirm-dialog { width: min(460px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 20px; background: var(--panel); box-shadow: 0 25px 80px rgba(7,40,32,.3) }
.confirm-dialog::backdrop { background: rgba(7,40,32,.55); backdrop-filter: blur(3px) }
.confirm-dialog .confirm-body { padding: 24px }
.confirm-dialog span { color: var(--coral-end); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase }
.confirm-dialog h2 { margin: 5px 0 8px; font-size: 19px }
.confirm-dialog p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55 }
.confirm-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px }
.confirm-dialog .dialog-actions button { padding: 10px 16px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer }
.confirm-dialog .primary-action { background: var(--green); color: #fff }
.confirm-dialog .secondary-action { border-color: var(--line); background: var(--panel); color: var(--green) }

/* Téléphone : le menu passe en bas de l'écran */
@media (max-width: 760px) {
  body { padding: 0 }
  .app { min-height: 100vh; border-radius: 0; box-shadow: none; padding-bottom: 72px }
  .studio-nav { position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-radius: 0; border: 0; border-top: 1px solid var(--line); gap: 2px }
  .studio-nav a { flex: 1 1 0; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 10px }
  .studio-nav a b { font-size: 15px }
  .main { padding-inline: 16px } .topbar { padding-inline: 16px }
  .g3, .g4, .knows, .modal-wrap { grid-template-columns: 1fr }
  .mix-steppers { grid-template-columns: repeat(2, minmax(0, 1fr)) } .capture-row { grid-template-columns: 1fr } .pair { grid-template-columns: 1fr } .pair > i { transform: rotate(90deg) }
  .stages, .balance, .journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .kv, .kv.tight, .five li, .opt { grid-template-columns: 1fr }
  .figures b { font-size: 22px }
}
@media (min-width: 761px) { .studio-nav a b { display: none } }
/* Retour à l'accueil de l'application, sous le logo. */
.home-link { display: inline-block; margin: 0 22px 10px; color: var(--green); font-size: 12px; font-weight: 800; text-decoration: none }
.home-link:hover { text-decoration: underline }
@media (max-width: 760px) { .home-link { margin-inline: 16px } }