:root {
  --ink: #1b1f24; --muted: #6b7480; --line: #e3e7ec; --bg: #f7f9fb;
  --grey: #f0f2f5; --greybd: #cfd6de;
  --blue: #eef4ff; --bluebd: #9db8e8;
  --teal: #e9f6f4; --tealbd: #7fc6bd;
  --crit: #b3261e; --imp: #b56a00;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--bg); }
.wrap { max-width: 940px; margin: 0 auto; padding: 0 18px; }

.topbar { background: #11202e; color: #fff; padding: 16px 0; }
.topbar h1 { margin: 0; font-size: 1.35rem; }
.topbar .calltitle { color: #aecbe6; font-weight: 400; font-size: 1rem; }
.tagline { margin: 8px 0 0; color: #c8d6e2; font-size: .92rem; max-width: 800px; }
.back { color: #aecbe6; text-decoration: none; font-size: .9rem; display: inline-block; margin-bottom: 6px; }
.back:hover { text-decoration: underline; }

.note { color: var(--muted); margin: 18px 0; }
.empty { color: var(--crit); }

/* liste d'appels */
.calllist { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .calllist { grid-template-columns: 1fr; } }
.callcard { display: block; padding: 14px 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.callcard:hover { box-shadow: 0 4px 18px rgba(20,40,60,.10); transform: translateY(-1px); }
.callid { color: var(--muted); font-size: .78rem; font-family: ui-monospace, monospace; }
.calltitle { display: block; font-weight: 600; margin: 2px 0; }
.callmeta { color: var(--muted); font-size: .82rem; }

/* lecteur */
.player { position: sticky; top: 0; z-index: 5; background: var(--bg); display: flex; align-items: center;
  gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.playbtn { border: 0; background: #11202e; color: #fff; padding: 8px 16px; border-radius: 20px;
  cursor: pointer; font-size: .95rem; min-width: 72px; }
.playbtn:hover { background: #1d3346; }
.clock { font-family: ui-monospace, monospace; color: var(--muted); min-width: 48px; }
.seek { flex: 1; accent-color: #11202e; }
.revealall { font-size: .82rem; color: var(--muted); white-space: nowrap; }

/* légende */
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px auto; font-size: .78rem; }
.lg { padding: 3px 9px; border-radius: 12px; border: 1px solid var(--line); }
.lg.utt { background: #fff; } .lg.pausebox { background: var(--grey); border-color: var(--greybd); }
.lg.novbox { background: var(--blue); border-color: var(--bluebd); }
.lg.ragbox { background: var(--teal); border-color: var(--tealbd); }

/* timeline */
.timeline { padding-bottom: 50vh; }
.item { animation: fade .35s ease; cursor: pointer; }
.item.hidden { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.utt { display: flex; gap: 10px; padding: 4px 8px; border-left: 3px solid transparent; }
.utt .ts { color: var(--muted); font-family: ui-monospace, monospace; font-size: .8rem; padding-top: 2px; min-width: 42px; }
.utt.current { border-left-color: #11202e; background: #fff; }

.box { border-radius: 8px; padding: 9px 12px; margin: 9px 0; border: 1px solid; font-size: .93rem; }
.pausebox { background: var(--grey); border-color: var(--greybd); color: #41474e; }
.novbox { background: var(--blue); border-color: var(--bluebd); }
.ragbox { background: var(--teal); border-color: var(--tealbd); }
.endtag { color: var(--crit); font-weight: 600; }
.evt.current .box { box-shadow: 0 0 0 2px rgba(17,32,46,.18); }

.alerts { margin: 8px 0 0; padding-left: 18px; }
.al { margin: 7px 0; }
.al .altag { font-weight: 700; }
.al.crit .altag { color: var(--crit); }
.al.imp .altag { color: var(--imp); }
.cite { font-size: .8rem; color: #4a525b; margin-top: 2px; }
.cite .ct { color: var(--muted); }

.foot { color: var(--muted); font-size: .8rem; margin: 28px auto; padding-top: 14px; border-top: 1px solid var(--line); }