/* BI Designer — identité de Cortex (« Épure », 2026-10-21) : sombre, Geist partout, l’ambre seule couleur d’action. Aucune ressource externe (S7). */
@font-face { font-family: "Host Grotesk"; src: url("/static/fonts/HostGrotesk.ttf") format("truetype"); font-weight: 300 800; font-display: swap; }

:root {
  /* encre et papier */
  --ink: #201613; --ink-2: #3b2d28; --ink-3: #524742; --muted: #736761; --faint: #7a705d;
  --paper: #fafaf8; --panel: #ffffff; --wash: #f4f3ef; --line: #dad8ce; --line-soft: #ecebe5;
  --accent: #8566ec; --accent-soft: #eceafd; --accent-line: #bdb4f8;
  /* états */
  --ok: #4a9d54; --ok-bg: #f3faf3; --ok-line: #a0d5a6;
  --warn: #953d00; --warn-bg: #fff6ed; --warn-line: #ffb070;
  --err: #b42318; --err-bg: #fdf1ef; --err-line: #f2b8b0;
  --info-bg: #f1f9fa; --info-line: #a3d7de; --info: #2b6f7c;
  --radius: 10px; --radius-sm: 6px;
  --shadow: 0 1px 2px rgb(32 22 19 / .06), 0 12px 24px -12px rgb(32 22 19 / .10);
  --sans: "Host Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
code { font-family: var(--mono); font-size: .86em; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
::selection { background: var(--accent-soft); }

/* libellé « eyebrow » en petites capitales monospace */
.eyebrow, .side-title, .page-label, .section-label {
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}

/* ---------------------------------------------------------------- barre du haut */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 24px;
  background: rgb(250 250 248 / .88); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line-soft); }
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.logo { display: inline-grid; grid-template-columns: repeat(2, 7px); gap: 2px; }
.logo i { width: 7px; height: 7px; border-radius: 2px; background: var(--ink); }
.logo i:nth-child(2) { background: var(--accent); }
.status { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; overflow: hidden; height: 20px; }
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.chip.ko::before { background: #ff8537; }

/* ---------------------------------------------------------------- structure */
.layout { display: grid; grid-template-columns: 272px 1fr; min-height: calc(100vh - 60px); }
.sidebar { border-right: 1px solid var(--line-soft); padding: 20px 16px; position: sticky; top: 60px; height: calc(100vh - 60px); overflow: auto; }
.new-project { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.new-project input { flex: 1; min-width: 0; border: 0; padding: 6px 8px; background: transparent; }
.new-project input:focus { outline: none; }
.new-project:focus-within { border-color: var(--ink-3); }
.side-title { margin: 26px 8px 8px; }
.project-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.project-list button { width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.project-list button:hover { background: var(--wash); }
.project-list button.active { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.project-list .meta { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--faint); }

.main { padding: 32px 40px 80px; min-width: 0; }

/* ---------------------------------------------------------------- accueil */
.empty { max-width: 980px; padding: 40px 0; }
.empty h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; margin: 14px 0 20px; }
.empty .lead { font-size: 18px; color: var(--muted); max-width: 620px; margin: 0 0 36px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 28px; }
.step-card { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 16px; background: var(--panel); }
.step-card .eyebrow { display: block; margin-bottom: 10px; }
.step-card strong { display: block; font-weight: 500; margin-bottom: 4px; }
.step-card p { margin: 0; font-size: 13.5px; color: var(--muted); }
.privacy { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 18px; max-width: 760px; }

/* ---------------------------------------------------------------- en-tête projet */
.proj-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line-soft); }
.proj-head .titles { flex: 1; min-width: 280px; }
.proj-head h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.03em; margin-top: 8px; }
.proj-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.proj-head select { min-width: 220px; }
.import-hint { font-size: 12.5px; color: var(--muted); margin: -12px 0 24px; }

/* ---------------------------------------------------------------- espace de travail : rail + canevas */
.workspace { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: 32px; align-items: start; }
.rail { display: grid; gap: 16px; min-width: 0; }
.canvas { min-width: 0; display: grid; gap: 18px; }

.card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card > h2 { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card > h2 .step { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .06em; }
.card > h2 .count { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); }

/* ---------------------------------------------------------------- formulaires et boutons */
input, select, textarea { font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--panel); color: inherit; }
textarea { width: 100%; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }
label { display: grid; gap: 5px; font-size: 13px; color: var(--ink-3); }

.btn { font: inherit; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 8px 14px; border-radius: 4px; cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--ink-2); }
.btn.primary.arrow::after { content: "→"; font-size: 13px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
.btn.ghost:hover { background: var(--wash); border-color: transparent; }
.btn.danger { color: var(--err); }
.btn.danger.ghost:hover { background: var(--err-bg); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn.small { font-size: 12.5px; padding: 5px 10px; }
.btn.block { width: 100%; justify-content: center; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------- bandeaux et contrôles */
.banner { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 10px; border: 1px solid; }
.banner.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.banner.info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.banner.err { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.banner.ok { background: var(--ok-bg); border-color: var(--ok-line); color: #2f6b36; }
.hint { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }

.checks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.checks li { font-size: 13px; line-height: 1.45; padding: 8px 10px 8px 28px; border-radius: var(--radius-sm); position: relative; border: 1px solid; }
.checks li::before { position: absolute; left: 10px; top: 8px; font-size: 11px; }
.checks .error { background: var(--err-bg); border-color: var(--err-line); color: var(--err); }
.checks .error::before { content: "✕"; }
.checks .warning { background: var(--warn-bg); border-color: #ffd9b8; color: var(--warn); }
.checks .warning::before { content: "!"; font-weight: 700; left: 12px; }
.checks .ok { background: var(--ok-bg); border-color: var(--ok-line); color: #2f6b36; }
.checks .ok::before { content: "✓"; }
.checks code { display: block; opacity: .65; font-size: 10.5px; margin-top: 2px; }
.tally { display: flex; gap: 6px; }
.tally span { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tally .e { color: var(--err); border-color: var(--err-line); background: var(--err-bg); }
.tally .w { color: var(--warn); border-color: #ffd9b8; background: var(--warn-bg); }
.tally .o { color: #2f6b36; border-color: var(--ok-line); background: var(--ok-bg); }

/* ---------------------------------------------------------------- pièces jointes */
.drop { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 14px; text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 10px; background: var(--paper); }
.drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink-2); }
.drop button { display: flex; margin: 10px auto 0; }
.drop-note { margin: 10px 0 0; font-size: 11.5px; color: var(--faint); }
.att { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px; margin-top: 12px; display: grid; gap: 10px; background: var(--paper); }
.att-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13px; }
.att-head strong { flex: 1 1 55%; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor { display: grid; grid-template-columns: 1fr; gap: 12px; }
.editor canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; cursor: crosshair; touch-action: none; display: block; }
.editor .final img { width: 100%; border: 1px solid var(--line); border-radius: 4px; display: block; }
.editor .final .muted, .editor .muted { margin: 4px 0; }
.tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.tools label { display: inline-flex; align-items: center; gap: 5px; }
pre.clean { white-space: pre-wrap; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px; font-size: 12px; max-height: 240px; overflow: auto; margin: 0; }
.send-preview { border: 1px solid var(--accent-line); background: #f8f7fe; border-radius: var(--radius-sm); padding: 12px; margin-top: 12px; }
.send-preview h3 { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.send-preview .thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.send-preview .thumbs img { height: 80px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.consent { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); margin-top: 10px; font-size: 13px; }

/* ---------------------------------------------------------------- maquettes */
.preview-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pill { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-3); }
.pages { display: grid; gap: 22px; }
.page-frame { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.page-label { display: flex; gap: 8px; margin: 0 2px 10px; }
.page-label b { font-weight: 400; color: var(--ink-3); }
.page-svg { width: 100%; height: auto; display: block; border-radius: 4px; }
.placeholder { border: 1px dashed var(--line); border-radius: var(--radius); padding: 48px 28px; text-align: center; color: var(--muted); background: var(--panel); }
.placeholder h2 { font-size: 22px; color: var(--ink); margin-bottom: 6px; letter-spacing: -.02em; }
.placeholder p { margin: 0 0 16px; }

details { border-top: 1px solid var(--line-soft); padding-top: 12px; }
details + details { margin-top: 0; }
summary { cursor: pointer; font-weight: 500; font-size: 13.5px; color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: 8px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; font-family: var(--mono); color: var(--faint); width: 12px; }
details[open] > summary::before { content: "−"; }
.extras { display: grid; gap: 12px; }
.measures { display: grid; gap: 10px; margin-top: 12px; }
.measure { font-size: 13px; }
.measure strong { font-weight: 500; }
.measure .tag { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); margin-left: 6px; }
.measure pre { white-space: pre-wrap; margin: 5px 0 0; font-size: 12px; background: var(--wash); padding: 8px 10px; border-radius: var(--radius-sm); }
pre.diff { font-size: 12px; background: var(--wash); padding: 10px; border-radius: var(--radius-sm); overflow: auto; max-height: 360px; }
pre.diff .add { color: #2f6b36; } pre.diff .del { color: var(--err); }
.questions { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
#spec-json, #set-presets { font-family: var(--mono); font-size: 12px; }

/* ---------------------------------------------------------------- divers */
.spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgb(250 250 248 / .35); border-top-color: var(--paper); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 8px); background: var(--ink); color: var(--paper); padding: 11px 16px; border-radius: var(--radius-sm);
  font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 80vw; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--err); }

dialog.settings { border: 1px solid var(--line-soft); border-radius: 12px; padding: 0; width: min(720px, 94vw); max-height: 90vh; background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 60px -12px rgb(32 22 19 / .3); }
dialog::backdrop { background: rgb(32 22 19 / .35); backdrop-filter: blur(2px); }
.settings-head { display: flex; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); }
.settings-head h2 { flex: 1; font-size: 20px; letter-spacing: -.02em; }
.settings-body { padding: 0 22px 22px; display: grid; overflow: auto; }
.settings-body section { display: grid; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.settings-body section:last-child { border-bottom: 0; }
.settings-body h3 { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.settings-body .btn.primary { justify-self: start; }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 1fr; }
  .rail { position: static; max-height: none; overflow: visible; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .main { padding: 20px 16px 60px; }
  .status { display: none; }
  .steps { grid-template-columns: 1fr; }
  .proj-head h1 { font-size: 26px; }
}
#open-settings { margin-left: auto; }
.checks .times { font-family: var(--mono); font-size: 10.5px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgb(255 255 255 / .7); }
.page-edit { margin-top: 12px; }
.edit-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-top: 12px; }
.edit-grid .wide { grid-column: 1 / -1; }
.edit-visuals { display: grid; gap: 6px; margin-top: 12px; }
.edit-visual { display: flex; gap: 8px; align-items: center; }
.edit-visual input[data-f="vtitle"] { flex: 1; min-width: 0; }
.edit-visual .muted { flex: 1; }
.edit-visual .del { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; white-space: nowrap; font-size: 12.5px; color: var(--err); }

/* itération 1 : état condensé */
.status { overflow: visible; height: auto; }
.status-pop { position: relative; }
.status-pop > summary { list-style: none; cursor: pointer; }
.status-pop > summary::-webkit-details-marker { display: none; }
.status-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--panel); }
.status-btn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.status-btn.ko { color: var(--warn); border-color: #ffd9b8; background: var(--warn-bg); }
.status-btn.ko::before { background: #ff8537; }
.status-btn::after { content: "▾"; font-size: 10px; opacity: .6; }
.status-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: min(420px, 90vw); padding: 14px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line-soft); box-shadow: 0 18px 40px -12px rgb(32 22 19 / .25); display: grid; gap: 12px; }
.status-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.status-panel li { display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; font-size: 13px; line-height: 1.4; }
.status-panel li::before { content: "✓"; color: var(--ok); font-size: 12px; grid-row: span 2; }
.status-panel li.ko::before { content: "!"; color: #ff6a1a; font-weight: 700; }
.status-panel strong { font-weight: 500; }
.status-panel span { color: var(--muted); font-size: 12.5px; }
.status-panel .btn { justify-self: start; }
@media (max-width: 820px) { .status { display: block; } .status-btn { font-size: 10px; } .status-btn::after { display: none; } }
.status-pop:not([open]) .status-panel { display: none; }
@media (max-width: 820px) { .status-panel { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; } }
@media (max-width: 820px) { .topbar { gap: 10px; padding: 0 16px; } .brand { font-size: 15px; } .status { flex: 1; min-width: 0; } }
.status-pop { border-top: 0; padding-top: 0; }
.status-btn { white-space: nowrap; }
@media (max-width: 820px) { .status-btn .long { display: none; } }

/* itération 2 : liste des projets */
.projects-box { border-top: 0; padding-top: 0; }
.projects-box > summary.side-title { display: flex; gap: 6px; cursor: default; pointer-events: none; }
.projects-box > summary.side-title::before { display: none; }
.project-search { width: 100%; margin: 0 0 8px; padding: 7px 10px; font-size: 13px; background: var(--paper); }
.project-search[hidden] { display: none; }
.side-empty { padding: 8px 10px; }
@media (max-width: 820px) {
  .projects-box > summary.side-title { pointer-events: auto; cursor: pointer; margin: 18px 8px 4px; }
  .projects-box > summary.side-title::after { content: "▾"; margin-left: auto; }
  .projects-box:not([open]) > summary.side-title::after { content: "▸"; }
  .sidebar { padding-bottom: 8px; }
}

/* itération 3 : en-tête projet */
.proj-head select { min-width: 0; max-width: 300px; font-size: 13px; }
#export[aria-disabled] { opacity: .4; cursor: not-allowed; }
.menu { position: relative; border-top: 0; padding-top: 0; }
.menu > summary { list-style: none; font-size: 18px; line-height: 1; padding: 6px 10px; }
.menu > summary::before, .menu > summary::-webkit-details-marker { display: none; content: none; }
.menu:not([open]) .menu-panel { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 240px; padding: 6px; display: grid; background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: 0 18px 40px -12px rgb(32 22 19 / .25); }
.menu-panel a, .menu-panel button { font: inherit; font-size: 13.5px; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none; cursor: pointer; }
.menu-panel a:hover, .menu-panel button:hover { background: var(--wash); }
.menu-panel .danger { color: var(--err); }
.import-hint { font-size: 12.5px; }
@media (max-width: 820px) { .proj-head .actions { width: 100%; } .proj-head select { flex: 1; max-width: none; } }

/* itération 4 : carte Demande */
.drop { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; }
.drop span { font-size: 12.5px; line-height: 1.35; }
.drop button { margin: 0; flex: none; }
.paste-mail { border-top: 0; padding-top: 8px; }
.paste-mail > summary { font-size: 12.5px; color: var(--muted); }
.examples { display: grid; gap: 6px; margin-top: 10px; }
.example { font: inherit; font-size: 12.5px; line-height: 1.4; text-align: left; padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink-3); cursor: pointer; }
.example:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.inline-warn { margin: 10px 0 0; font-size: 12.5px; color: var(--warn); display: flex; gap: 6px; flex-wrap: wrap; }
.inline-warn::before { content: "!"; font-weight: 700; }
.inline-warn a { color: inherit; }
kbd { font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; border-radius: 4px; border: 1px solid rgb(250 250 248 / .3); opacity: .75; margin-left: 4px; }

/* itération 5 : attente de conception */
.working { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius); border: 1px solid var(--accent-line);
  background: linear-gradient(180deg, #f8f7fe, var(--panel)); box-shadow: var(--shadow); }
.working strong { font-weight: 500; }
.working p { margin: 4px 0 8px; font-size: 13px; color: var(--muted); }
.working-dot { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .working-dot, .spinner { animation: none; } }
.canvas.is-busy > :not(.working) { opacity: .4; pointer-events: none; transition: opacity .3s; }

/* itération 6 : contrôles reliés à la maquette */
.page-svg g.flag-warning > rect:first-child { stroke: #ff8537; stroke-width: 3; stroke-dasharray: 8 5; }
.page-svg g.flag-error > rect:first-child { stroke: var(--err); stroke-width: 3.5; }
.page-svg g.pulse > rect:first-child { animation: flash 1.6s ease-out 2; }
.page-frame.pulse { animation: frameflash 1.6s ease-out 1; }
@keyframes flash { 0% { fill: #eceafd; } 100% { fill: #ffffff; } }
@keyframes frameflash { 0% { box-shadow: 0 0 0 4px var(--accent-line); } 100% { box-shadow: var(--shadow); } }
.checks .see { font: inherit; font-size: 11.5px; margin-left: 6px; padding: 0 6px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; cursor: pointer; opacity: .8; }
.checks .see:hover { opacity: 1; }

/* itération 7 : après l'export */
dialog.after-export { width: min(560px, 94vw); }
.after-export .settings-body { gap: 14px; padding-top: 18px; }
.exported { margin: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.exported code { font-size: 13px; color: var(--ink); word-break: break-all; }
.import-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.import-steps li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; font-size: 14px; line-height: 1.45; }
.import-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 3px; }
.import-steps strong { font-weight: 500; }
.import-steps li { display: block; position: relative; padding-left: 28px; }
.import-steps li::before { position: absolute; left: 0; top: 0; }

/* itération 8 : réglages en onglets */
.tabs { display: flex; gap: 2px; padding: 0 22px; border-bottom: 1px solid var(--line-soft); overflow-x: auto; }
.tabs button { font: inherit; font-size: 13.5px; padding: 10px 12px; border: 0; background: none; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.settings-body > section[hidden] { display: none; }
.settings-body > section { border-bottom: 0; }
dialog.settings:not(.after-export) { height: min(640px, 90vh); }
dialog.settings:not(.after-export)[open] { display: flex; flex-direction: column; }
.settings-body > section[data-panel] > h3 { display: none; }

/* itération 9 : maquettes lisibles */
.page-label { align-items: center; }
.page-label .zoom { margin-left: auto; font: inherit; font-family: var(--sans); font-size: 12px; letter-spacing: 0; text-transform: none; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink-3); cursor: zoom-in; }
.page-label .zoom:hover { border-color: var(--ink-3); color: var(--ink); }
.page-link { text-decoration: none; }
.page-link:hover { border-color: var(--ink-3); color: var(--ink); }
.page-frame { scroll-margin-top: 80px; }
dialog.zoom-dialog { width: min(1400px, 96vw); max-height: 94vh; padding: 0; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--paper);
  box-shadow: 0 24px 60px -12px rgb(32 22 19 / .3); }
dialog.zoom-dialog::backdrop { background: rgb(32 22 19 / .45); }
.zoom-dialog .settings-head h2 { font-size: 16px; }
.zoom-body { padding: 16px; overflow: auto; }
.zoom-body .page-svg { min-width: 900px; }

/* itération 10 : clavier et accessibilité */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 0; }
.btn.primary:focus-visible { outline-color: var(--accent); }
summary:focus-visible { outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.resend { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); background: #f8f7fe; display: grid; gap: 8px; }
.resend p { margin: 0; font-size: 13px; line-height: 1.45; }
.resend strong { font-weight: 500; }
.resend .btn { justify-self: start; }
.workspace > * { min-width: 0; }
.resend p, .exported code, .att-head strong { overflow-wrap: anywhere; }
.card, .card pre { overflow-wrap: anywhere; }
.att, .send-preview, .tools, .tools label { min-width: 0; }
.tools label { flex-wrap: wrap; }
.tools input:not([type="checkbox"]):not([type="radio"]) { min-width: 0; width: 100%; }
.send-preview .thumbs img { max-width: 100%; }
.att, .send-preview, .rail, .canvas, .card { grid-template-columns: minmax(0, 1fr); }

/* itérations 1, 2, 5, 7 : restauration, renommage, consommation, exports */
.restore-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: -10px 0 18px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent-line); background: #f8f7fe; font-size: 13.5px; }
.restore-bar strong { font-weight: 600; }
.export-info { font-size: 12.5px; color: var(--muted); margin: -12px 0 18px; }
.export-info strong { font-weight: 600; color: var(--ink-2); }
.warn-text { color: var(--warn); }
.rename-input { font: inherit; font-size: 34px; line-height: 1.1; letter-spacing: -.03em; margin-top: 8px; width: 100%; padding: 2px 8px; }
.proj-head h1 { cursor: text; }
.questions .answer { font: inherit; font-size: 11.5px; margin-left: 6px; padding: 0 7px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.page-edit .row .btn.ghost { padding: 4px 8px; }
.lib-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.lib-list li { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px; background: var(--panel); }
.lib-list li > div { min-width: 0; }
.lib-list strong { font-weight: 500; }
.lib-list pre { white-space: pre-wrap; font-size: 11.5px; margin: 6px 0 0; background: var(--wash); padding: 6px 8px; border-radius: 4px; }
.lib-ref { line-height: 1.7; }
.tag { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }

/* attente d'une conception : signaux réels */
.working { display: grid; gap: 14px; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--accent-line);
  background: linear-gradient(180deg, #f8f7fe, var(--panel) 70%); box-shadow: var(--shadow); }
.working-head { display: flex; gap: 14px; align-items: center; }
.working-titles { display: grid; gap: 2px; flex: 1; min-width: 0; }
.working-title { font-size: 17px; font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere; }
.working-time { display: grid; justify-items: end; gap: 2px; text-align: right; }
.working-elapsed { font-family: var(--mono); font-size: 18px; color: var(--ink); }
.working-typical { font-size: 11.5px; color: var(--muted); }
.working-bar { height: 4px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.working-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 1.1s linear; }
.working-bar.over span { background: repeating-linear-gradient(90deg, var(--accent) 0 12px, var(--accent-line) 12px 24px); animation: slide 1.2s linear infinite; }
@keyframes slide { to { background-position: 24px 0; } }
.working-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.working-steps li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.working-steps li strong { display: block; font-weight: 500; font-size: 13.5px; }
.working-steps li span:not(.step-mark) { font-size: 12px; color: var(--muted); }
.step-mark { width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--panel); position: relative; }
.step-done .step-mark { background: var(--ok); border-color: var(--ok); }
.step-done .step-mark::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 9px; }
.step-now .step-mark { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: pulse 1.2s ease-in-out infinite; }
.step-todo { opacity: .55; }
.working-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 170px)); gap: 10px; }
.working-pages:empty { display: none; }
.mini-page { display: grid; gap: 6px; font-size: 12px; color: var(--ink-3); }
.mini-page.new { animation: pop .45s var(--ease-out, ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.mini-page b { font-family: var(--mono); font-weight: 400; color: var(--faint); margin-right: 4px; }
.mini-page > span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini-sheet { aspect-ratio: 16 / 9; border: 1px solid var(--line-soft); border-radius: 4px; background: #fff; padding: 7px; display: grid;
  grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 6px 1fr 1fr; gap: 4px; }
.mini-sheet i:nth-child(1) { grid-column: 1 / -1; background: #1C2A8F; border-radius: 2px; opacity: .75; width: 60%; }
.mini-sheet i:nth-child(2) { grid-column: 1 / 3; background: #E1DFDD; border-radius: 2px; }
.mini-sheet i:nth-child(3) { grid-column: 3; grid-row: 2 / 4; background: #00A9E0; opacity: .35; border-radius: 2px; }
.mini-sheet i:nth-child(4) { grid-column: 1 / 3; background: #E1DFDD; border-radius: 2px; }
.mini-page.pending .mini-sheet { border-style: dashed; background: linear-gradient(100deg, #fff 30%, #f3f2fb 50%, #fff 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.mini-page.pending .mini-sheet i { opacity: .25; }
.mini-page.pending > span { color: var(--faint); }
@keyframes shimmer { to { background-position: -200% 0; } }
.dots::after { content: "…"; animation: dots 1.2s steps(4) infinite; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; }
@keyframes dots { from { width: 0; } to { width: 1.2em; } }
.working-fix { border: 1px solid #ffd9b8; background: var(--warn-bg); color: var(--warn); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; }
.working-fix strong { font-weight: 500; }
.working-fix ul { margin: 6px 0 0; padding-left: 18px; }
.working-tip { margin: 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-3); display: flex; gap: 10px; align-items: baseline; }
.working-tip .eyebrow { flex: none; }
.tip-in { animation: fade .5s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .working *, .working { animation: none !important; transition: none !important; } }
@media (max-width: 820px) { .working { padding: 16px; } .working-head { flex-wrap: wrap; } .working-time { justify-items: start; text-align: left; } }

/* ---------------------------------------------------------------- zones Power BI / Salesforce (22/10/2026)
   Deux zones distinctes pour l'instant : un sélecteur en tête de colonne, un repère de couleur par zone
   (lilas = Power BI, bleu Salesforce = Salesforce), mêmes gestes partout. */
body[data-zone="sf"] { --accent: #0176d3; --accent-soft: #e5f1fb; --accent-line: #9bc9f0; }
.zone-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--wash); }
.zone-switch button { display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: transparent; padding: 7px 6px; border-radius: 7px;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.zone-switch button:hover { color: var(--ink); }
.zone-switch button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(32 22 19 / .08), inset 0 0 0 1px var(--line); }
.zone-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.zone-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.zone-dot.pbi { background: #8566ec; }
.zone-dot.sf { background: #0176d3; border-radius: 50%; }
.zone-n { font-family: var(--mono); font-size: 10.5px; color: var(--faint); font-weight: 400; }
.zone-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; letter-spacing: .06em; color: var(--paper); }
.zone-tag.pbi { background: #8566ec; }
.zone-tag.sf { background: #0176d3; }

/* aperçu Salesforce : maquette du dashboard + fiche de chaque rapport */
.sf-frame svg { border-radius: 8px; }
.sf-reports { margin-top: 26px; }
.sf-reports .section-label { margin: 0 0 12px 2px; }
.sf-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.sf-report { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.sf-report.flagged { border-color: var(--err-line); }
.sf-report header { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; margin-bottom: 10px; }
.sf-report header strong { font-weight: 500; font-size: 14.5px; line-height: 1.3; }
.sf-report header .pill { white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.sf-report dl { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 13px; }
.sf-report dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
.sf-report dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; color: var(--ink-2); }
.chip-sf { padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--ink-2); font-size: 12px; }
.chip-sf.soft { background: var(--wash); color: var(--ink-3); }
.sf-filters { margin: 0; padding-left: 18px; width: 100%; }
.sf-filters li { margin: 1px 0; }
.sf-report.pulse { animation: frameflash 1.6s ease-out 1; }
.cmd { display: flex; gap: 8px; align-items: center; margin: 6px 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--wash); }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 12px; }
@media (max-width: 820px) { .sf-report dl { grid-template-columns: 1fr; } }
/* l'attribut hidden l'emporte toujours sur le display des composants (.btn…) : « Afficher dans le Finder » restait visible
   dans le navigateur, où il ne fait rien (constaté le 22/10/2026) */
[hidden] { display: none !important; }
dialog.after-export.sf { width: min(720px, 94vw); }
.import-steps li, .after-export .settings-body { min-width: 0; }
.import-steps .cmd { max-width: 100%; }
.import-steps, .exported { min-width: 0; }

/* =====================================================================================================================
   Identité Cortex (demande de Yassine, 22/10/2026 : « je n'aime pas le mauve, choisis un design plus proche de celui de
   Cortex ») — reprend l'Épure de Cortex : un seul thème (sombre), une seule police (Geist, titres compris), une seule
   couleur d'action (l'ambre), des filets plutôt que des boîtes, libellés en phrase (plus de petites capitales). Les
   maquettes restent blanches : elles représentent le rapport Power BI ou le dashboard Salesforce tels qu'ils s'afficheront.
   Ce bloc remplace les jetons du papier chaud et du lilas ; le retirer suffit à revenir à l'ancien style.
   ===================================================================================================================== */
@font-face { font-family: "Geist"; src: url("/static/fonts/Geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("/static/fonts/Geist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url("/static/fonts/GeistMono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  /* texte (contrastes de Cortex : secondaire 8:1, discret 4,7:1 sur le fond) */
  --ink: #eceae5; --ink-2: #d6d4ce; --ink-3: #a9aeb8; --muted: #8b909a; --faint: #7d828d;
  /* fond, surfaces, filets */
  --paper: #111419; --panel: #161a21; --wash: #1e222a; --line: rgba(236, 234, 229, .14); --line-soft: rgba(236, 234, 229, .075);
  /* une seule couleur d'action */
  --accent: #e9a54a; --accent-soft: color-mix(in srgb, #e9a54a 12%, transparent); --accent-line: color-mix(in srgb, #e9a54a 45%, transparent);
  --on-accent: #111419;
  /* états (sauge, sable, corail — ceux de Cortex) */
  --ok: #8fd3a8; --ok-bg: color-mix(in srgb, #8fd3a8 9%, transparent); --ok-line: color-mix(in srgb, #8fd3a8 35%, transparent);
  --warn: #f2c46b; --warn-bg: color-mix(in srgb, #f2c46b 9%, transparent); --warn-line: color-mix(in srgb, #f2c46b 35%, transparent);
  --err: #ff7a6b; --err-bg: color-mix(in srgb, #ff7a6b 9%, transparent); --err-line: color-mix(in srgb, #ff7a6b 38%, transparent);
  --info: #9cc4ff; --info-bg: color-mix(in srgb, #9cc4ff 8%, transparent); --info-line: color-mix(in srgb, #9cc4ff 30%, transparent);
  --radius: 14px; --radius-sm: 8px;
  --shadow: none; --shadow-2: 0 20px 40px -24px rgba(0, 0, 0, .6);
  --sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* repères de zone : un point, jamais une couleur d'action */
  --zone-pbi: #f2c811; --zone-sf: #4aa3ea;
}
body[data-zone="sf"] { --accent: #e9a54a; --accent-soft: color-mix(in srgb, #e9a54a 12%, transparent); --accent-line: color-mix(in srgb, #e9a54a 45%, transparent); }
::selection { background: color-mix(in srgb, #e9a54a 30%, transparent); }

/* libellés en phrase, plus de petites capitales espacées */
.eyebrow, .side-title, .page-label, .section-label, .settings-body h3, .status-btn, .pill, .tally span, .chip, .zone-n, .sf-report dt,
.card > h2 .step, .card > h2 .count, .import-steps li::before, .mini-page b, .measure .tag, .tag, .working-elapsed, .checks .times {
  font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.eyebrow, .side-title, .page-label, .section-label { font-size: 12.5px; color: var(--faint); }
.pill { font-size: 12px; background: transparent; border-color: var(--line); color: var(--ink-3); }
.status-btn { font-size: 12.5px; }
.sf-report dt { font-size: 12px; }
h1, h2, h3 { font-weight: 500; }
.empty h1 { font-weight: 500; letter-spacing: -.03em; }

/* barre du haut et colonne : le fond, sans verre ni cadre */
.topbar { background: var(--paper); backdrop-filter: none; border-bottom-color: var(--line-soft); }
.logo { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.logo i { width: 4px; border-radius: 1.5px; background: var(--accent); }
.logo i:nth-child(1) { height: 7px; opacity: .55; } .logo i:nth-child(2) { height: 11px; opacity: .75; background: var(--accent); }
.logo i:nth-child(3) { height: 15px; } .logo i:nth-child(4) { height: 18px; }
.sidebar { background: var(--paper); }
.new-project { background: var(--panel); border-color: var(--line-soft); }
.project-list button { color: var(--ink-3); }
.project-list button:hover { background: rgba(236, 234, 229, .04); }
.project-list button.active { background: var(--wash); color: var(--ink); box-shadow: none; }

/* surfaces : des filets, l'élément en cours seul en relief */
.card, .page-frame, .sf-report, .placeholder, .lib-list li { background: var(--panel); border-color: var(--line-soft); box-shadow: none; }
.step-card { background: transparent; border-style: solid; border-color: var(--line-soft); }
.placeholder { border-style: solid; }
input, select, textarea { background: var(--paper); border-color: var(--line); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent-line); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* gestes : le principal plein (ambre), les autres se lisent comme du texte */
.btn { background: transparent; border-color: var(--line); color: var(--ink); border-radius: var(--radius-sm); }
.btn:hover { border-color: var(--line); background: rgba(236, 234, 229, .07); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: #f0b562; }
.btn.ghost:hover { background: rgba(236, 234, 229, .07); }
.spinner { border-color: rgba(17, 20, 25, .3); border-top-color: var(--on-accent); }
.btn:not(.primary) .spinner { border-color: rgba(236, 234, 229, .25); border-top-color: var(--ink); }
kbd { border-color: rgba(17, 20, 25, .35); }
.btn:not(.primary) kbd { border-color: var(--line); }

/* bandeaux, contrôles, pièces jointes : teintes posées sur le fond */
.banner.ok, .checks .ok, .tally .o { color: var(--ok); }
.checks .warning, .tally .w, .status-btn.ko, .working-fix { border-color: var(--warn-line); }
.status-btn { background: transparent; border-color: var(--line-soft); color: var(--ink-3); }
.status-btn.ko { color: var(--warn); background: var(--warn-bg); }
.status-btn.ko::before, .status-panel li.ko::before { background: var(--warn); color: var(--warn); }
.status-panel, .menu-panel { background: var(--wash); border-color: var(--line); box-shadow: var(--shadow-2); }
.menu-panel a:hover, .menu-panel button:hover { background: rgba(236, 234, 229, .06); }
.checks .times { background: rgba(236, 234, 229, .08); }
pre.diff .add { color: var(--ok); }
.drop, .att, .example, .project-search { background: var(--paper); }
.send-preview, .resend, .restore-bar { background: var(--accent-soft); border-color: var(--accent-line); }
.send-preview .thumbs img, .mini-sheet { background: #fff; }
.toast { background: var(--wash); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.toast.err { background: color-mix(in srgb, #ff7a6b 22%, #161a21); color: #ffd9d4; border-color: var(--err-line); }

/* fenêtres */
dialog.settings, dialog.zoom-dialog { background: var(--panel); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-2); }
dialog::backdrop, dialog.zoom-dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: none; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.cmd { background: var(--paper); border-color: var(--line-soft); }

/* maquettes : blanches, comme le rendu réel, posées sur la surface */
.page-label .zoom { background: transparent; border-color: var(--line); color: var(--ink-3); }
.page-label .zoom:hover { color: var(--ink); border-color: var(--ink-3); }
.page-label b { color: var(--ink-2); }
@keyframes flash { 0% { fill: #fdf1e0; } 100% { fill: #ffffff; } }
.mini-page.pending .mini-sheet { background: linear-gradient(100deg, #fff 30%, #f6efe4 50%, #fff 70%); background-size: 200% 100%; }

/* attente : la voix de Cortex sans dégradé lilas */
.working { background: var(--panel); border-color: var(--accent-line); box-shadow: none; }
.working-bar { background: rgba(236, 234, 229, .08); }
.step-mark { background: var(--paper); border-color: var(--line); }
.step-done .step-mark::after { color: var(--on-accent); }

/* zones : un point de couleur, la même couleur d'action partout */
.zone-switch { background: var(--panel); border-color: var(--line-soft); }
.zone-switch button[aria-selected="true"] { background: var(--wash); color: var(--ink); box-shadow: none; }
.zone-dot.pbi { background: var(--zone-pbi); }
.zone-dot.sf { background: var(--zone-sf); }
.zone-tag { background: transparent !important; color: var(--ink-3); padding: 0; margin-right: 8px; font-size: 12.5px; }
.zone-tag::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.zone-tag.pbi::before { background: var(--zone-pbi); }
.zone-tag.sf::before { background: var(--zone-sf); border-radius: 50%; }
.chip-sf { background: rgba(236, 234, 229, .07); color: var(--ink-2); }
.chip-sf.soft { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-soft); }
.project-list .meta { font-family: var(--sans); font-size: 12px; letter-spacing: 0; }
/* l'ambre est rare : seul le geste principal de l'écran est plein (Exporter, ou Concevoir tant qu'il n'y a rien) */

/* dépôt dans Salesforce depuis l'application (22/10/2026) */
.sf-deploy-what { margin: 0; font-size: 15px; }
.sf-conn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--paper); font-size: 14px; }
.sf-conn .btn { margin-left: auto; }
.sf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.sf-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; color: var(--ink-3); }
.sf-steps .st-mark { text-align: center; color: var(--faint); }
.sf-steps .st-done { color: var(--ink-2); } .sf-steps .st-done .st-mark { color: var(--ok); }
.sf-steps .st-running { color: var(--ink); } .sf-steps .st-running .st-mark { color: var(--accent); }
.sf-steps .st-error .st-mark, .err-text { color: var(--err); }
/* réglage discret : petit, en retrait, en bas du panneau */
label.discreet { display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--faint); }
label.discreet input { margin-top: 2px; }

/* --- version hébergée : connexion et compte (27/10/2026) --- */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-box { width: 100%; max-width: 380px; display: grid; gap: 14px; }
.login-box .brand { font-size: 22px; }
.login-box form { display: grid; gap: 8px; margin-top: 8px; }
.login-box label { font-size: 13px; color: var(--muted, #9aa0aa); margin-top: 6px; }
.login-box input { font-size: 16px; padding: 10px 12px; }
.login-box .btn { margin-top: 12px; justify-content: center; }
.login-msg { min-height: 1.4em; color: var(--err); font-size: 14px; }
.account { position: relative; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted, #9aa0aa); }
.account-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; z-index: 50; display: grid; gap: 8px; padding: 12px;
  background: var(--panel, #161a22); border: 1px solid var(--line, #2a2f3a); border-radius: 8px; }
.account-menu input { font-size: 14px; padding: 8px 10px; }

/* --- avis sur l'outil (27/10/2026) : pastille discrète, panneau, désignation d'un élément --- */
#fb .fb-pill { position: fixed; right: 16px; bottom: 16px; z-index: 60; font: inherit; font-size: 12px; color: var(--ink-3);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; opacity: .8; }
#fb .fb-pill:hover { opacity: 1; color: var(--ink); border-color: var(--ink-3); }
#fb .fb-badge { margin-left: 6px; background: var(--accent); color: var(--on-accent, #111); border-radius: 999px; padding: 0 6px; font-weight: 600; }
#fb .fb-panel { position: fixed; right: 16px; bottom: 56px; z-index: 61; width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; box-shadow: var(--shadow-2, none); }
#fb .fb-tabs { display: flex; gap: 6px; align-items: center; }
#fb .fb-tabs [data-fbtab] { font: inherit; font-size: 13px; background: none; border: 0; color: var(--muted); padding: 4px 6px; cursor: pointer; border-radius: 6px; }
#fb .fb-tabs [aria-selected="true"] { color: var(--ink); background: var(--wash); }
#fb .fb-close { margin-left: auto; font-size: 18px; line-height: 1; }
#fb .fb-types { display: flex; flex-wrap: wrap; gap: 6px; }
#fb .fb-types button { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink-3); cursor: pointer; }
#fb .fb-types [aria-pressed="true"] { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
#fb textarea { width: 100%; font: inherit; font-size: 14px; resize: vertical; }
#fb .fb-actions { display: flex; justify-content: space-between; gap: 8px; }
#fb .fb-list { display: grid; gap: 10px; }
#fb .fb-item { border-top: 1px solid var(--line-soft); padding-top: 10px; display: grid; gap: 6px; }
#fb .fb-item header { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
#fb .fb-item p { margin: 0; font-size: 14px; white-space: pre-wrap; }
#fb .fb-st { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
#fb .fb-st.st-nouveau { border-color: var(--accent-line); color: var(--accent); }
#fb .fb-st.st-fait { border-color: var(--ok-line); color: var(--ok); }
#fb .fb-reply { border-left: 2px solid var(--accent-line); padding-left: 8px; color: var(--ink-2); }
#fb .fb-admin { display: grid; gap: 6px; }
#fb .linklike { font: inherit; background: none; border: 0; padding: 0; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
#fb .fb-frame { position: fixed; z-index: 90; pointer-events: none; border-radius: 6px; outline: 2px solid var(--accent); background: var(--accent-soft); }
#fb .fb-hint { position: fixed; z-index: 91; top: 14px; left: 50%; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); font-size: 13px; color: var(--ink); }
@media print { #fb { display: none; } }