/* Réunions — direction « HUD » (reprise de ScanCarte), sombre uniquement, mobile-first */

@font-face { font-family: "Chakra Petch"; src: url("../fonts/chakra-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../fonts/chakra-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../fonts/chakra-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }

:root {
  --bg: #03060B;
  --bg-2: #07111B;
  --panel-solid: #08141F;
  --ink: #E6F7FF;
  --ink-2: #B9D3E2;
  --muted: #7D97AB;
  --line: rgba(92, 225, 255, .16);
  --line-strong: rgba(92, 225, 255, .45);
  --cyan: #5CE1FF;
  --cyan-hot: #B8F4FF;
  --cyan-soft: rgba(92, 225, 255, .1);
  --gold: #E3B866;      /* confirmation, usage rare */
  --danger: #FF5A5F;    /* erreurs et enregistrement en cours */
  --on-cyan: #031018;
  --glow: 0 0 12px rgba(92, 225, 255, .5), 0 0 36px rgba(92, 225, 255, .16);
  --glow-text: 0 0 14px rgba(92, 225, 255, .45);
  --glow-red: 0 0 12px rgba(255, 90, 95, .55), 0 0 36px rgba(255, 90, 95, .18);

  --display: "Chakra Petch", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --cut: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: 20px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --level: 0;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100dvh; color: var(--ink);
  font: 400 16px/1.5 var(--display);
  background:
    radial-gradient(120% 55% at 50% -5%, rgba(20, 70, 100, .45), transparent 65%),
    linear-gradient(rgba(92, 225, 255, .035) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(92, 225, 255, .035) 1px, transparent 1px) 0 0 / 32px 100%,
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body::after { /* lignes de balayage très discrètes */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: .05;
  background: repeating-linear-gradient(to bottom, #fff 0 1px, transparent 1px 3px);
}
::selection { background: var(--cyan); color: var(--on-cyan); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.sprite { position: absolute; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 18px; height: 18px; }

/* ---------- Structure ---------- */

.app { max-width: 560px; margin: 0 auto; min-height: 100dvh; position: relative; }
.screen { min-height: 100dvh; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 12px) var(--gutter) calc(var(--safe-b) + 24px); }
.screen.is-entering { animation: power-on .6s var(--ease) both; }
@keyframes power-on {
  0% { opacity: 0; transform: translateY(12px); filter: brightness(2.4) blur(3px); }
  45% { opacity: 1; filter: brightness(1.4) blur(0); }
  55% { opacity: .55; }
  65% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}

.actionbar {
  position: sticky; bottom: 0; z-index: 5;
  margin: auto calc(var(--gutter) * -1) calc((var(--safe-b) + 24px) * -1);
  padding: 16px var(--gutter) calc(var(--safe-b) + 18px);
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg);
}
.actionbar::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; pointer-events: none;
  background: linear-gradient(to top, var(--bg), rgba(3, 6, 11, 0));
}

.topbar { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; min-height: 56px; margin: 0 -8px 8px; }
.topbar-title { margin: 0; text-align: center; font: 500 15px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.icon-btn, .icon-btn-spacer { width: 48px; height: 48px; }
.icon-btn { display: grid; place-items: center; border: 0; background: transparent; color: var(--cyan); transition: background .2s; }
.icon-btn:active { background: var(--cyan-soft); }

/* ---------- Typo ---------- */

.display { font: 600 clamp(38px, 11vw, 52px)/.95 var(--display); letter-spacing: -.01em; text-transform: uppercase; margin: 0; }
.kicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font: 400 13px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--cyan);
}
.kicker::before { content: ""; width: 28px; height: 1px; background: var(--cyan); box-shadow: var(--glow); }
.tag { font: 400 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.brand { display: flex; align-items: center; gap: 10px; min-height: 48px; font: 600 16px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.brand-mark { width: 22px; height: 15px; border: 1.6px solid var(--cyan); position: relative; clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px); }
.brand-mark::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.6px; background: var(--cyan); box-shadow: var(--glow); animation: mark-scan 2.4s ease-in-out infinite; }
@keyframes mark-scan { 0%, 100% { top: 25%; } 50% { top: 75%; } }
.brand-sys { margin-left: auto; font: 400 12px/1 var(--mono); letter-spacing: .14em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.brand-sys::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: var(--glow); animation: blink 2s steps(1) infinite; }
.brand-sys.is-off { color: var(--danger); }
.brand-sys.is-off::before { background: var(--danger); box-shadow: var(--glow-red); }
.brand-gear { margin: 0 -10px 0 auto; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- Formulaires ---------- */

.field-label { display: block; margin: 18px 2px 6px; font: 400 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.input {
  width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--line-strong); outline: none;
  background: rgba(8, 20, 31, .8); color: var(--ink); font-size: 16px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan), inset 0 0 18px rgba(92, 225, 255, .12); }
.input-mono { font: 400 15px var(--mono); }
::placeholder { color: var(--muted); opacity: .7; }
.form-error { min-height: 1.4em; margin: 10px 2px; color: var(--danger); font: 400 14px/1.4 var(--mono); }
.form-error:empty { min-height: 0; margin: 4px 0; }
.hint { margin: 8px 2px 0; color: var(--muted); font: 400 13px/1.45 var(--mono); }
.readout { margin: 0 2px; font: 400 14px var(--mono); color: var(--ink-2); word-break: break-all; }

/* ---------- Boutons ---------- */

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 20px; border: 0; overflow: hidden; white-space: nowrap;
  font: 600 16px var(--display); letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .18s var(--ease), filter .2s, background .2s;
  user-select: none; -webkit-user-select: none;
}
.btn:active { transform: scale(.975); }
.btn:disabled, .btn.is-busy { opacity: .5; pointer-events: none; }
.btn-xl { min-height: 62px; width: 100%; font-size: 17px; }
.btn-sm { min-height: 48px; padding: 0 12px; font-size: 15px; gap: 6px; letter-spacing: .06em; --cut: 8px; }
.btn-primary { background: linear-gradient(90deg, var(--cyan), var(--cyan-hot)); color: var(--on-cyan); box-shadow: var(--glow); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .65) 50%, transparent 70%);
  transform: translateX(-120%); animation: sweep 3.4s ease-in-out infinite;
}
@keyframes sweep { 55%, 100% { transform: translateX(120%); } }
.btn-danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--danger), inset 0 0 26px rgba(255, 90, 95, .16); flex: 1; }
.btn-danger:active { background: rgba(255, 90, 95, .14); }
.btn-secondary { flex: 1; background: transparent; color: var(--cyan); box-shadow: inset 0 0 0 1.5px var(--line-strong); padding: 0 12px; letter-spacing: .06em; }
.btn-secondary:active { background: var(--cyan-soft); }
.btn-ghost { background: transparent; color: var(--muted); min-height: 48px; letter-spacing: .12em; font-weight: 500; align-self: center; }
.btn-row { display: flex; gap: 10px; }

/* ---------- Connexion ---------- */

.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 12vh; }
.login-form { margin-top: 28px; }
.login-form .btn { margin-top: 6px; }

/* ---------- Réacteur ---------- */

.reactor {
  position: relative; display: block; width: min(56vw, 220px); aspect-ratio: 1; margin: 8px auto 18px; padding: 0; border: 0;
  background: transparent; color: var(--cyan); border-radius: 50%;
  filter: drop-shadow(0 0 6px rgba(92, 225, 255, .55));
  transition: transform .3s var(--ease);
}
button.reactor:active { transform: scale(.96); }
.reactor svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.r-accent { stroke: var(--gold); }
.r-spin { transform-origin: 50% 50%; animation: spin 18s linear infinite; }
.r-spin-rev { transform-origin: 50% 50%; animation: spin 26s linear infinite reverse; }
.r-spin-fast { transform-origin: 50% 50%; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.reactor-core {
  position: absolute; inset: 34%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #fff 0 18%, var(--cyan-hot) 30%, var(--cyan) 52%, rgba(92, 225, 255, 0) 72%);
  animation: pulse 2.6s ease-in-out infinite;
}
.reactor-mic { width: 30%; height: 30%; color: var(--on-cyan); stroke-width: 2.4; }
.reactor-glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(92, 225, 255, .32), transparent 65%); filter: blur(16px); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.92); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }

/* Réacteur en enregistrement : rouge, le cœur suit le niveau sonore */
.reactor-live { color: var(--danger); filter: drop-shadow(0 0 8px rgba(255, 90, 95, .55)); width: min(62vw, 250px); }
.reactor-live .r-accent { stroke: var(--cyan); }
.reactor-live .reactor-core {
  animation: none; transform: scale(calc(.8 + var(--level) * .55)); transition: transform .08s linear;
  background: radial-gradient(circle, #fff 0 16%, #FFC2C4 30%, var(--danger) 52%, rgba(255, 90, 95, 0) 72%);
}
.reactor-live .reactor-glow { animation: none; opacity: calc(.45 + var(--level)); background: radial-gradient(circle, rgba(255, 90, 95, .38), transparent 65%); }

/* ---------- Accueil ---------- */

.home-hero { padding: 4px 0 24px; display: flex; flex-direction: column; }
.home-hero .field-label { margin-top: 4px; }
.home-hero .btn { margin-top: 14px; }
.list-head { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.list-head .kicker { margin: 0; }
.meeting-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.meeting-item a {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 16px;
  background: linear-gradient(90deg, rgba(92, 225, 255, .06), rgba(92, 225, 255, .01)), var(--panel-solid);
  border: 1px solid var(--line); transition: border-color .2s, background .2s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.meeting-item a:active { border-color: var(--line-strong); background: var(--cyan-soft); }
.mi-title { font-weight: 600; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-sub { grid-column: 1; font: 400 13px var(--mono); color: var(--muted); }
.mi-chevron { grid-row: 1 / span 2; grid-column: 2; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip[data-tone="busy"] { color: var(--gold); }
.chip[data-tone="busy"]::before { animation: blink 1s steps(1) infinite; }
.chip[data-tone="error"] { color: var(--danger); }
.chip[data-tone="idle"] { color: var(--muted); }
.empty { color: var(--muted); font: 400 14px var(--mono); text-align: center; margin: 24px 0; }

/* ---------- Enregistrement ---------- */

.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); box-shadow: var(--glow-red); animation: blink 1.2s steps(1) infinite; }
.rec-label { color: var(--danger); text-shadow: 0 0 12px rgba(255, 90, 95, .4); }
.record-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 0 20px; }
.timer { margin: 4px 0 0; font: 300 clamp(56px, 18vw, 76px)/1 var(--mono); letter-spacing: .02em; color: var(--ink); text-shadow: var(--glow-text); font-variant-numeric: tabular-nums; }
.meter { display: flex; gap: 3px; height: 26px; align-items: flex-end; margin: 10px 0 6px; }
.meter span { width: 6px; height: 100%; background: var(--line); transition: background .08s; clip-path: polygon(0 2px, 100% 0, 100% 100%, 0 100%); }
.meter span.on { background: var(--cyan); box-shadow: var(--glow); }
.meter span.hot { background: var(--gold); }
.telemetry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin: 14px 0 0; }
.telemetry div { padding: 10px 8px; border: 1px solid var(--line); text-align: center; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.telemetry dt { font: 400 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.telemetry dd { margin: 4px 0 0; font: 500 22px/1 var(--mono); color: var(--cyan); font-variant-numeric: tabular-nums; }
.rec-status { margin: 14px 0 0; text-align: center; font: 400 14px/1.45 var(--mono); color: var(--ink-2); min-height: 2.9em; }
.rec-status[data-tone="warn"] { color: var(--gold); }
.rec-status[data-tone="alert"] { color: var(--danger); }

.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: rgba(3, 6, 11, .72); backdrop-filter: blur(4px); }
.sheet-panel {
  width: 100%; max-width: 560px; margin: 0 auto; padding: 24px var(--gutter) calc(var(--safe-b) + 24px);
  background: var(--panel-solid); border-top: 1px solid var(--line-strong); animation: power-on .4s var(--ease) both;
}
.sheet-title { margin: 0; font: 600 24px/1.15 var(--display); text-transform: uppercase; }
.sheet-text { margin: 8px 0 20px; color: var(--ink-2); }

/* ---------- Réunion ---------- */

.title-input {
  width: 100%; border: 0; outline: none; background: transparent; padding: 4px 0; resize: none; overflow: hidden;
  field-sizing: content; min-height: 1.3em;
  font: 600 26px/1.15 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.title-input:focus { border-bottom-color: var(--cyan); }
.meta-line { margin: 6px 0 16px; font: 400 13px var(--mono); color: var(--muted); letter-spacing: .04em; }

.status-panel {
  position: relative; margin: 6px 0 18px; padding: 20px 18px; overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--panel-solid);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.status-scan { position: absolute; inset: 0; pointer-events: none; }
.status-panel.is-busy .beam {
  position: absolute; left: 0; right: 0; height: 2px; background: var(--cyan-hot);
  box-shadow: 0 0 18px 4px rgba(92, 225, 255, .6); animation: beam 2.4s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes beam { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
.status-title { margin: 0; font: 500 14px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.status-panel.is-error { border-color: var(--danger); }
.status-panel.is-error .status-title { color: var(--danger); }
.status-text { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
.status-panel .btn-row:not(:empty) { margin-top: 16px; }

.player { width: 100%; height: 44px; margin: 0 0 18px; filter: invert(.88) hue-rotate(160deg) saturate(.7); }

.tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab {
  min-height: 48px; border: 0; background: transparent; color: var(--muted); position: relative;
  font: 500 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.tab[aria-selected="true"] { color: var(--cyan); text-shadow: var(--glow-text); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 2px; background: var(--cyan); box-shadow: var(--glow); }
.panel { padding-bottom: 24px; }

.segments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.segment { padding-left: 14px; border-left: 2px solid var(--spk, var(--cyan)); }
.seg-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 3px; }
.seg-speaker { font: 600 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--spk, var(--cyan)); }
.seg-time { font: 400 12px var(--mono); color: var(--muted); border: 0; background: none; padding: 4px 0; }
.seg-text { margin: 0; color: var(--ink); line-height: 1.6; }
.spk-1 { --spk: #5CE1FF; } .spk-2 { --spk: #E3B866; } .spk-3 { --spk: #A6F28C; }
.spk-4 { --spk: #C9A2FF; } .spk-5 { --spk: #FF9F6B; } .spk-6 { --spk: #7FB8FF; }

.prose { color: var(--ink); line-height: 1.65; overflow-wrap: anywhere; }
.prose.raw { white-space: pre-wrap; color: var(--ink-2); }
.prose h1, .prose h2, .prose h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; }
.prose h1 { font-size: 22px; margin: 0 0 6px; }
.prose h2 { font-size: 16px; color: var(--cyan); margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.prose h3 { font-size: 15px; margin: 18px 0 6px; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--cyan); }
.prose strong { color: var(--cyan-hot); font-weight: 600; }
.prose em { color: var(--muted); }
.summary-empty { color: var(--muted); font: 400 14px var(--mono); text-align: center; padding: 20px 0; }

.actionbar-meeting { gap: 10px; }

/* ---------- Réglages ---------- */

.settings-form { display: flex; flex-direction: column; }
.group { margin: 0 0 22px; padding: 0; border: 0; }
.section-label { display: flex; align-items: center; gap: 8px; color: var(--cyan); font: 400 13px var(--mono); letter-spacing: .22em; text-transform: uppercase; padding: 0 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); width: 100%; }
.settings-form > .btn-ghost { margin-top: 8px; }

/* ---------- Profils de voix ---------- */

.brand-voices { margin: 0 -6px 0 auto; }
.brand-voices + .brand-gear { margin-left: 0; }
.link { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.lede-sm { margin: 0 2px 18px; color: var(--ink-2); font-size: 15px; }

.presence { margin-top: 2px; }
.presence .field-label { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips:empty { display: none; }
.chip-toggle {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2);
  font: 500 15px var(--display); letter-spacing: .03em;
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); transition: background .2s, color .2s, border-color .2s;
}
.chip-toggle::before { content: "+ "; color: var(--muted); }
.chip-toggle[aria-pressed="true"] { background: var(--cyan-soft); color: var(--cyan); border-color: var(--cyan); text-shadow: var(--glow-text); }
.chip-toggle[aria-pressed="true"]::before { content: "✓ "; color: var(--cyan); }
.chip-toggle:disabled { opacity: .55; }

.voice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.voice-item {
  display: flex; align-items: center; gap: 4px; padding: 8px 6px 8px 4px;
  background: linear-gradient(90deg, rgba(92, 225, 255, .06), rgba(92, 225, 255, .01)), var(--panel-solid);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.voice-info { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 4px; }
.voice-name { font-weight: 600; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-sub { font: 400 12.5px var(--mono); color: var(--muted); }
.voice-play .ico { fill: currentColor; }
.icon-danger { color: var(--muted); }
.icon-danger:active { color: var(--danger); background: rgba(255, 90, 95, .12); }

.sheet-panel { max-height: 92dvh; overflow-y: auto; }
.sheet-panel .btn-row { flex-wrap: wrap; margin-top: 6px; }
.sheet-panel .btn-row .btn { flex: 1 1 40%; }
.read-card { margin: 16px 0 12px; padding: 14px 16px; border-left: 2px solid var(--cyan); background: var(--cyan-soft); }
.read-card .tag { margin: 0 0 6px; color: var(--cyan); }
.read-text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.vs-meter { display: flex; align-items: center; gap: 12px; margin: 6px 2px; font: 500 16px var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vs-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .08s linear; }
#voice-sheet[data-state="recording"] .vs-dot { background: var(--danger); box-shadow: var(--glow-red); transform: scale(calc(.8 + var(--level, 0) * 1.1)); }
#voice-sheet[data-state="recording"] .vs-meter { color: var(--danger); }
.sheet .player { margin: 8px 0 4px; }

.warning { margin: 0 0 14px; padding: 10px 14px; border: 1px solid rgba(227, 184, 102, .5); color: var(--gold); font: 400 13.5px/1.45 var(--mono); }

.speakers-box { margin: 0 0 18px; border: 1px solid var(--line); background: var(--panel-solid); }
.speakers-box summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; cursor: pointer; list-style: none;
  font: 500 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan);
}
.speakers-box summary::-webkit-details-marker { display: none; }
.speakers-box summary::after { content: "▾"; color: var(--muted); }
.speakers-box[open] summary::after { content: "▴"; }
.speakers { list-style: none; margin: 0; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.speaker-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; }
.speaker-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--spk, var(--cyan)); box-shadow: 0 0 8px var(--spk, var(--cyan)); }
.speaker-field { display: flex; flex-direction: column; min-width: 0; }
.speaker-label { font: 400 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.speaker-field .input { min-height: 44px; font-size: 16px; }
.speaker-row .btn-sm { min-height: 44px; font-size: 13px; padding: 0 10px; }
.speaker-known { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }

.ex-head { display: flex; justify-content: space-between; align-items: baseline; }
.ex-passages { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 34dvh; overflow-y: auto; }
.ex-passages.is-locked { opacity: .55; pointer-events: none; }
.ex-row { display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--line); cursor: pointer; }
.ex-row input { grid-row: 1 / span 2; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cyan); -webkit-appearance: auto; appearance: auto; }
.ex-time { font: 400 12px var(--mono); color: var(--cyan); }
.ex-text { font-size: 14px; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ex-hint { min-height: 1.4em; }
#extract-sheet[data-state="capturing"] .ex-hint { color: var(--cyan); }

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 24px); z-index: 50;
  transform: translate(-50%, 140%); opacity: 0; max-width: calc(100% - 32px);
  padding: 14px 20px; background: var(--panel-solid); color: var(--ink); border: 1px solid var(--cyan);
  font: 400 15px var(--mono); box-shadow: var(--glow); text-align: center; pointer-events: none;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .3s;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.toast[data-tone="error"] { border-color: var(--danger); color: var(--danger); }
/* Feuille ouverte : le toast passe en haut pour ne pas masquer ses boutons */
.sheet:not([hidden]) ~ .toast { bottom: auto; top: calc(var(--safe-t) + 16px); transform: translate(-50%, -160%); }
.sheet:not([hidden]) ~ .toast.is-visible { transform: translate(-50%, 0); }

@media (min-width: 600px) { .screen { padding-top: 32px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}