/* KeoLive — écran déporté des départs (TV, tablette, smartphone). Aucun défilement. */
:root {
  --t1: #00ABC4; --t2: #B7007A; --t1-text: #0091a7; --t2-text: #B7007A;
  --bg: #dde3ec; --surface: #ffffff; --surface-2: #f3f5f9; --border: #d6dde7;
  --text: #0a1626; --muted: #4c5a6f; --faint: #8592a5;
  --head-1: #0a1830; --head-2: #12305e; --head-muted: #9fb3d1;
  --go: #d12b2b; --soon: #b45d00; --green: #138a3f;
  --row-h: clamp(44px, 6.2vh, 74px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t1-text: #2fd0e8; --t2-text: #ff5cbc;
    --bg: #060c18; --surface: #0d1626; --surface-2: #111c30; --border: #1b2840;
    --text: #e6ecf5; --muted: #93a2b9; --faint: #5f6f88; --head-1: #040914; --head-2: #0b1d3d;
    --go: #ff6b6b; --soon: #ffb14d; --green: #3ddc7a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --t1-text: #2fd0e8; --t2-text: #ff5cbc;
  --bg: #060c18; --surface: #0d1626; --surface-2: #111c30; --border: #1b2840;
  --text: #e6ecf5; --muted: #93a2b9; --faint: #5f6f88; --head-1: #040914; --head-2: #0b1d3d;
  --go: #ff6b6b; --soon: #ffb14d; --green: #3ddc7a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--text); display: flex; flex-direction: column;
  font: 16px/1.3 "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mono, .time, .clock, .rame { font-variant-numeric: tabular-nums; }

.bar {
  flex: none; display: flex; align-items: center; gap: 2vw; padding: 0 2.2vw; height: clamp(56px, 9vh, 96px);
  background: linear-gradient(100deg, var(--head-1), var(--head-2)); color: #fff;
}
.brand { display: flex; align-items: center; gap: 10px; }
.mark { width: clamp(28px, 4.4vh, 44px); aspect-ratio: 1; border-radius: 22%; background: linear-gradient(135deg, var(--t1), #1f5eff 55%, var(--t2)); }
.name { font-weight: 800; font-size: clamp(17px, 2.6vh, 28px); letter-spacing: -.02em; }
.name span { font-weight: 400; color: var(--head-muted); }
.title { font-size: clamp(15px, 2.4vh, 26px); color: var(--head-muted); }
.title b { color: #fff; }
.spacer { flex: 1; }
.date { text-align: right; font-weight: 650; font-size: clamp(13px, 2vh, 22px); text-transform: capitalize; }
.date .sub { font-size: .72em; color: var(--head-muted); font-weight: 500; text-transform: none; }
.clock { font-size: clamp(26px, 5vh, 56px); font-weight: 700; letter-spacing: -.03em; padding-left: 2vw; border-left: 1px solid rgba(255, 255, 255, .15); }
.clock small { font-size: .5em; color: var(--head-muted); }

.board { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 1.6vh 2.2vw; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.rows { flex: 1; min-height: 0; overflow: hidden; }
.row {
  display: grid; align-items: center; gap: 1.4vw; padding: 0 1.6vw; height: var(--row-h);
  grid-template-columns: 6.6em 4.8em minmax(10em, 1.8fr) 6.2em 5.6em 3.8em 3.2em minmax(7em, 1.1fr);
  border-bottom: 1px solid var(--border); font-size: clamp(15px, 2.7vh, 30px);
}
.row.head > div { font-size: clamp(11px, 1.5vh, 16px); }
.row.head { height: auto; padding-top: 1vh; padding-bottom: 1vh; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 750; background: var(--surface-2); }
.row:nth-child(even):not(.head) { background: var(--surface-2); }
.time { font-weight: 800; font-size: 1.25em; letter-spacing: -.02em; }
.L-T1 .time { color: var(--t1-text); } .L-T2 .time { color: var(--t2-text); }
.when { color: var(--muted); font-weight: 650; }
.when .soon { color: var(--soon); font-weight: 800; }
.when .go { color: var(--go); font-weight: 800; animation: blink 1.2s infinite; }
.row.leaving { opacity: .55; }
.from { white-space: nowrap; }
.from b { font-weight: 800; }
.from span, .time .at { font-size: .55em; color: var(--muted); font-weight: 700; margin-left: .3em; letter-spacing: .04em; }
.cont { font-size: .6em; color: var(--faint); font-weight: 600; }
.line { display: inline-grid; place-items: center; min-width: 2.2em; padding: .1em .35em; border-radius: .3em; color: #fff; font-weight: 800; font-size: .85em; }
.line.T1 { background: var(--t1); } .line.T2 { background: var(--t2); }
.dest { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.circ { font-weight: 700; white-space: nowrap; }
.tag { font-size: .48em; font-weight: 800; letter-spacing: .04em; padding: .2em .5em; border-radius: .4em; vertical-align: middle; background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.drv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drv .ln { font-weight: 800; }
.drv .none { color: var(--faint); }
.rame { font-weight: 700; }
.msg { padding: 6vh 2vw; text-align: center; color: var(--muted); font-size: clamp(16px, 2.6vh, 28px); }
@keyframes blink { 50% { opacity: .35; } }

/* Tablette : on retire les colonnes « Dans » et « Rame ». */
@media (max-width: 1100px) {
  .row { grid-template-columns: 6em minmax(8em, 1.6fr) 5.8em 5em 3em minmax(6em, 1fr); font-size: clamp(14px, 2.4vh, 22px); }
  .row > :nth-child(2), .row > :nth-child(6) { display: none; }
  .title { display: none; }
}
/* Smartphone : chaque départ sur deux lignes. */
@media (max-width: 640px) {
  :root { --row-h: auto; }
  .bar { padding: 0 14px; gap: 10px; height: 56px; }
  .brand .name { display: none; }
  .clock { font-size: 26px; padding-left: 10px; }
  .board { margin: 10px; border-radius: 12px; }
  .row.head { display: none; }
  .row {
    grid-template-columns: 5.6em 1fr auto auto; grid-template-areas: "time drv drv when" "from circ line dest";
    gap: 3px 10px; padding: 9px 14px; font-size: 16px;
  }
  .row > :nth-child(2) { display: block; grid-area: when; text-align: right; font-size: 14px; }
  .row > :nth-child(6) { display: none; }
  .time { grid-area: time; font-size: 20px; }
  .drv { grid-area: drv; font-size: 16px; }
  .from { grid-area: from; font-size: 13px; color: var(--muted); }
  .circ { grid-area: circ; font-size: 13px; color: var(--muted); }
  .ln-badge { grid-area: line; font-size: 14px; }
  .dest { grid-area: dest; font-size: 13px; text-align: right; }
}

/* Code PIN */
.pin { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(3, 8, 20, .7); backdrop-filter: blur(8px); padding: 16px; }
.pin form { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 28px; text-align: center; }
.pin .mark.big { width: 52px; margin: 0 auto 12px; }
.pin h2 { margin: 0 0 4px; } .pin p { margin: 0 0 16px; color: var(--muted); }
.pin input { width: 100%; height: 54px; font-size: 26px; text-align: center; letter-spacing: .4em; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.pin .err { min-height: 22px; color: var(--go); font-size: 14px; font-weight: 650; margin: 6px 0; }
.pin button { width: 100%; height: 46px; border: 0; border-radius: 12px; background: #1f5eff; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }