/* NoteTaker PWA — identité visuelle reprise du desktop (palette sauge/argile/iris, 3 polices). */

@font-face { font-family: "Familjen Grotesk"; src: url("fonts/FamiljenGrotesk-Variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-Variable.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/DMMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/DMMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --ground: #cde0d7; --surface: #fbfcfb; --surface-2: #eef3f0; --sunken: #e4ede8;
  --ink: #1f2b29; --ink-2: #566b64; --line: #cbd6d0; --line-2: #b9c7c0;
  --sage: #457a69; --sage-soft: #cde0d7; --sage-ink: #2f5b4e;
  --clay: #be7060; --clay-soft: #f1d9d2; --clay-ink: #8e4a3b;
  --iris: #666fb2; --iris-soft: #dbdef1; --iris-ink: #454c87;
  --ok: #3d7a63; --ok-soft: #d9e9e0; --warn: #8c6e2e; --warn-soft: #f0e6ce; --err: #8e4a63; --err-soft: #f2dce4;
  --f-ui: "Familjen Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --f-read: "Newsreader", Georgia, "Times New Roman", serif;
  --f-data: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-1: 10px; --r-2: 12px; --r-3: 16px; --r-pill: 999px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #141a19; --surface: #1b2221; --surface-2: #222a29; --sunken: #111716;
    --ink: #e6ece9; --ink-2: #9db0a9; --line: #2c3735; --line-2: #3a4744;
    --sage: #84baa4; --sage-soft: #24403a; --sage-ink: #a9d4c2;
    --clay: #de9482; --clay-soft: #432a24; --clay-ink: #efb4a4;
    --iris: #a2aae8; --iris-soft: #282c4c; --iris-ink: #bfc5f0;
    --ok: #7fc0a2; --ok-soft: #1f3830; --warn: #d9ba76; --warn-soft: #3b3320; --err: #dfa0b8; --err-soft: #402029;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--f-ui); color: var(--ink); background: var(--ground);
  line-height: 1.5; -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; max-width: 760px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 { font-size: 20px; margin: 0; letter-spacing: -0.01em; }
.tagline { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.logo {
  width: 40px; height: 40px; border-radius: 10px; display: block;
  background: #1f2b29 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'%3E%3Crect x='37.5' y='17' width='13' height='34' rx='6.5' fill='%23cde0d7'/%3E%3Cpath d='M28.5 49 A17 17 0 0 0 59.5 49' fill='none' stroke='%23cde0d7' stroke-width='5'/%3E%3Crect x='42.2' y='58' width='3.6' height='13' fill='%23cde0d7'/%3E%3Ccircle cx='72' cy='71' r='8.2' fill='%23de9482'/%3E%3C/svg%3E") center / contain no-repeat;
}
.badge { padding: 6px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
.badge.idle { background: var(--surface-2); color: var(--ink-2); }
.badge.rec  { background: var(--clay-soft); color: var(--clay-ink); }
.badge.proc { background: var(--warn-soft); color: var(--warn); }
.badge.done { background: var(--ok-soft); color: var(--ok); }

.tabs { display: flex; gap: 4px; padding: 0 16px; max-width: 760px; margin: 0 auto; border-bottom: 1px solid var(--line); }
.tab {
  background: transparent; border: 0; font-family: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--ink-2); padding: 10px 14px; cursor: pointer; border-radius: var(--r-1) var(--r-1) 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.active { color: var(--ink); border-bottom-color: var(--sage); }

main { max-width: 760px; margin: 0 auto; padding: 16px; }
.panel { display: none; }
.panel.active { display: block; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); padding: 18px; margin-bottom: 16px; }

.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.field input {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-2); padding: 11px 13px;
}
.field input:focus { outline: 2px solid var(--sage); border-color: var(--sage); }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); margin-bottom: 18px; }
.consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--sage); flex: 0 0 auto; }

.recorder { display: flex; align-items: center; gap: 18px; }
.rec-btn {
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer; flex: 0 0 auto;
  background: var(--sage); display: grid; place-items: center; transition: transform .1s, background .2s;
}
.rec-btn:active { transform: scale(0.96); }
.rec-btn:disabled { opacity: .5; cursor: not-allowed; }
.rec-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--surface); transition: all .2s; }
.rec-btn.recording { background: var(--clay); }
.rec-btn.recording .rec-icon { width: 24px; height: 24px; border-radius: 5px; }
.rec-btn:not(.recording) .rec-icon { border-radius: 50%; }
.timer { font-family: var(--f-data); font-size: 30px; font-weight: 500; letter-spacing: 0.02em; }
.rec-meta { line-height: 1.3; }

.level { height: 6px; background: var(--sunken); border-radius: var(--r-pill); margin-top: 16px; overflow: hidden; }
.level-bar { height: 100%; width: 0%; background: var(--sage); border-radius: var(--r-pill); transition: width .08s linear; }

.result-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.result-head h2 { font-size: 17px; margin: 0; }
.subtabs { display: flex; gap: 6px; margin-bottom: 14px; }
.subtab { background: var(--surface-2); border: 0; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 7px 13px; border-radius: var(--r-pill); cursor: pointer; }
.subtab.active { background: var(--sage-soft); color: var(--sage-ink); }

.processing { display: flex; align-items: center; gap: 12px; color: var(--ink-2); padding: 18px 0; }
.spinner { width: 18px; height: 18px; border: 2.5px solid var(--line); border-top-color: var(--sage); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.view.transcript { font-family: var(--f-data); font-size: 13px; white-space: pre-wrap; word-break: break-word; color: var(--ink-2); background: var(--sunken); padding: 14px; border-radius: var(--r-2); margin: 0; }

.md { font-family: var(--f-read); font-size: 16px; }
.md h2 { font-family: var(--f-ui); font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sage-ink); margin: 20px 0 8px; }
.md h2:first-child { margin-top: 0; }
.md h3 { font-family: var(--f-ui); font-size: 14.5px; margin: 16px 0 6px; }
.md ul { margin: 6px 0; padding-left: 20px; }
.md li { margin: 4px 0; }
.md p { margin: 8px 0; }
.md strong { font-weight: 600; }
.md code { font-family: var(--f-data); font-size: 0.9em; background: var(--sunken); padding: 1px 5px; border-radius: 5px; }

.btn { font-family: inherit; font-size: 14px; font-weight: 600; padding: 9px 15px; border-radius: var(--r-2); border: 1px solid transparent; cursor: pointer; }
.btn.primary { background: var(--sage); color: var(--surface); }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.session-list { list-style: none; margin: 0; padding: 0; }
.session-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.session-item:last-child { border-bottom: 0; }
.session-item:hover { background: var(--surface-2); }
.session-item .s-title { font-weight: 600; font-size: 14.5px; }
.session-item .s-sub { font-size: 12px; color: var(--ink-2); font-family: var(--f-data); }
.pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.pill.done { background: var(--ok-soft); color: var(--ok); }
.pill.processing { background: var(--warn-soft); color: var(--warn); }
.pill.recording { background: var(--clay-soft); color: var(--clay-ink); }
.pill.failed { background: var(--err-soft); color: var(--err); }

.msg { font-size: 13px; margin-top: 12px; min-height: 1em; }
.msg.err { color: var(--err); }
.msg.ok { color: var(--ok); }
.muted { color: var(--ink-2); }
.hidden { display: none !important; }

.foot { max-width: 760px; margin: 0 auto; padding: 8px 16px 24px; font-size: 12px; }


/* Auth */
.topbar-right { display: flex; align-items: center; gap: 10px; }
.userchip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.gate { position: fixed; inset: 0; z-index: 1000; background: var(--ground); display: flex; align-items: center; justify-content: center; padding: 24px; }
.gate-card { text-align: center; max-width: 360px; }
.gate-card .logo { width: 64px; height: 64px; margin: 0 auto 14px; }
.gate-card h1 { margin: 0; font-size: 26px; }
.gate-card .tagline { justify-content: center; }
.gate-card .btn { margin-top: 18px; }

.player { width: 100%; margin: 2px 0 14px; }
.audio-note { font-size: 12.5px; color: var(--ink-2); margin: 0 0 12px; }

/* ---------- admin ---------- */
.result-actions { display: flex; gap: 8px; }
.admin-note { font-size: 12.5px; margin: 0 0 12px; }
.admin-stats { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 0 14px; font-size: 13.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.admin-stats strong { color: var(--ink); }
.admin-back { margin-bottom: 10px; }
.admin-sess { align-items: center; }
.admin-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.admin-actions .btn { padding: 6px 10px; font-size: 12.5px; }
.btn.danger { color: var(--err); border-color: var(--err-soft); }
.btn.danger:hover { background: var(--err-soft); }
.admin-sess { align-items: flex-start; }
.admin-sess-info { min-width: 0; flex: 1 1 auto; }
.s-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 11.5px; color: var(--ink-2); }
.s-meta span { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); padding: 2px 8px; border-radius: var(--r-pill); }

/* ---------- sessions : recherche / filtres ---------- */
.search-input {
  width: 100%; font-family: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 10px 12px; margin: 4px 0 10px;
}
.search-input:focus { outline: 2px solid var(--sage); border-color: var(--sage); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filter-btn {
  background: var(--surface-2); border: 0; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer;
}
.filter-btn.active { background: var(--sage-soft); color: var(--sage-ink); }

/* ---------- vue détail ---------- */
#session-detail .result-head { margin-bottom: 4px; }
#detail-title { font-size: 19px; margin: 6px 0 10px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.detail-actions .btn { padding: 7px 12px; font-size: 12.5px; }
.player { width: 100%; margin: 8px 0 4px; }
.subtabs { align-items: center; }
.copy-btn { margin-left: auto; padding: 6px 12px !important; font-size: 12.5px; }

/* audit */
.view.audit { font-size: 13px; }
.audit-list { list-style: none; margin: 8px 0 0; padding: 0; font-family: var(--f-data); }
.audit-list li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.audit-list li:last-child { border-bottom: 0; }
.audit-type { font-weight: 500; color: var(--sage-ink); flex: 0 0 auto; min-width: 120px; }
.audit-ts { color: var(--ink-2); flex: 1 1 auto; }
.audit-hash { color: var(--line-2); flex: 0 0 auto; }

/* ---------- réglages ---------- */
.settings-info .info-list { list-style: none; margin: 4px 0 0; padding: 0; }
.settings-info .info-list li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.settings-info .info-list li:last-child { border-bottom: 0; }
.settings-info strong { color: var(--ink); }

/* glossaire */
.gloss-add { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-2); padding: 12px; margin: 12px 0; }
.seg { display: inline-flex; gap: 2px; background: var(--sunken); border-radius: var(--r-pill); padding: 3px; margin-bottom: 10px; }
.seg-btn { background: transparent; border: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; }
.seg-btn.active { background: var(--surface); color: var(--ink); }
.gloss-form { margin-bottom: 8px; }
.gloss-form .search-input { margin: 0; }
.rule-row { display: flex; align-items: center; gap: 8px; }
.rule-row .search-input { margin: 0; }
.rule-arrow { color: var(--ink-2); flex: 0 0 auto; }
.gloss-stats { display: flex; gap: 16px; padding: 4px 0 12px; font-size: 13.5px; color: var(--ink-2); }
.gloss-stats strong { color: var(--ink); }
.gloss-h { font-family: var(--f-ui); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sage-ink); margin: 14px 0 6px; }
.gloss-rules { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.gloss-rules li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.gloss-rules li:last-child { border-bottom: 0; }
.gloss-rules code { font-family: var(--f-data); font-size: 0.9em; background: var(--sunken); padding: 1px 5px; border-radius: 5px; }
.gloss-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; background: var(--sage-soft); color: var(--sage-ink); padding: 3px 10px; border-radius: var(--r-pill); }

/* glossaire admin : sections repliables + pagination */
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.gloss-sec { margin-top: 10px; }
.gloss-toggle { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-2); width: 100%; text-align: left; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 10px 12px; cursor: pointer; }
.gloss-toggle:hover { background: var(--sunken); }
.gloss-filter { margin: 8px 0 !important; }
.gloss-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; font-size: 12.5px; }
.gloss-pager .btn[disabled] { opacity: .4; cursor: not-allowed; }

/* source audio (desktop) */
.source-select { margin-bottom: 16px; }
.field-label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.src-btn { background: transparent; border: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer; }
.src-btn.active { background: var(--surface); color: var(--ink); }
.src-hint { font-size: 12px; margin: 8px 0 0; }
.platform-badge { font-size: 12px; margin: 0 0 12px; opacity: .85; }