:root {
  --bg: #0a1a3f;
  --bg-row: #0f2456;
  --bg-row-alt: #0c1f4b;
  --line: #1d3670;
  --yellow: #ffd200;
  --white: #ffffff;
  --muted: #9fb1d9;
  --orange: #ff9a1f;
  --red: #ff4a4a;
  --green: #4ade80;
  --line-j: #cdc83f;
  --col-time: 96px;
  --col-voie: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--white);
  font-family: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-top: var(--safe-top);
}

/* ---------- en-tête ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo-j {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--line-j);
  color: #000;
  font-weight: 800; font-size: 20px;
}
.title {
  font-size: 22px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase;
}
.clock {
  font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 700;
  color: var(--yellow);
  background: #000;
  padding: 2px 10px 2px 12px;
  border-radius: 6px;
}
.clock small { font-size: 18px; opacity: .8; }

/* ---------- onglets ---------- */
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px 12px;
}
.tabs button {
  appearance: none;
  border: 2px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  padding: 8px 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
}
.tabs .tab-arrow { font-size: 12px; opacity: .7; }
.tabs button[aria-selected="true"] {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--bg);
}

/* ---------- tableau ---------- */
main { flex: 1; }

.board-head {
  display: grid;
  grid-template-columns: var(--col-time) minmax(0, 1fr) var(--col-voie);
  gap: 10px;
  padding: 6px 16px;
  background: #061230;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.board-head .col-voie { text-align: center; }

.board { list-style: none; }

.row {
  display: grid;
  grid-template-columns: var(--col-time) minmax(0, 1fr) var(--col-voie);
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-row);
  border-bottom: 1px solid var(--line);
  min-height: 96px;
}
.row:nth-child(even) { background: var(--bg-row-alt); }

.time { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.hour {
  font-size: 28px;
  white-space: nowrap;
  letter-spacing: -0.5px;
  font-weight: 800;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hour s { display: block; font-size: 15px; color: var(--muted); font-weight: 600; }
.eta {
  white-space: nowrap;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.eta.imminent { color: var(--yellow); animation: blink 1s steps(2, start) infinite; }

.info { min-width: 0; }
.dest-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.line-badge {
  flex: none;
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--line-j);
  color: #000;
  font-size: 14px; font-weight: 800;
}
.dest {
  min-width: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.meta {
  margin-top: 4px;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mission:not(:empty) {
  color: var(--white);
  font-weight: 800;
  letter-spacing: 1px;
  border: 1px solid var(--muted);
  border-radius: 3px;
  padding: 0 4px;
}
.state {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
}
.state.ok { color: var(--green); }
.state.late { color: var(--orange); }
.state.cancel { color: var(--red); }
.state small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; margin-top: 2px; }

.row.cancelled .hour,
.row.cancelled .dest { text-decoration: line-through; opacity: .6; }

.voie {
  justify-self: center;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 3px solid var(--white);
  border-radius: 8px;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.voie.unknown {
  border-color: var(--line);
  color: var(--muted);
  font-size: 22px;
}
.voie.known {
  background: var(--white);
  color: var(--bg);
  animation: pop .4s ease-out;
}
.voie.hidden { display: none; }

/* sens vers Paris : pas de colonne voie, la destination prend la place */
body.no-voie { --col-voie: 0px; }
body.no-voie .col-voie { display: none; }

/* très petits écrans */
@media (max-width: 359px) {
  :root { --col-time: 84px; --col-voie: 52px; }
  .hour { font-size: 24px; }
  .dest { font-size: 17px; }
}

.empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
}

/* bandeau d'info défilant */
.ticker {
  overflow: hidden;
  background: var(--yellow);
  color: #000;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 0;
  white-space: nowrap;
}
.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 18s linear infinite;
}

/* ---------- pied ---------- */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px calc(10px + var(--safe-bottom));
  color: var(--muted);
  font-size: 12px;
}
.foot .error { color: var(--orange); }
#refresh {
  appearance: none; border: 1px solid var(--line); background: transparent;
  color: var(--white); font-size: 20px; width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer;
}
#refresh.spin { animation: spin .8s linear infinite; }

@keyframes blink { to { visibility: hidden; } }
@keyframes pop { from { transform: scale(.6); } to { transform: scale(1); } }
@keyframes scroll { to { transform: translateX(-100%); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 640px) {
  body { max-width: 640px; margin: 0 auto; }
  :root { --col-time: 120px; --col-voie: 72px; }
  .hour { font-size: 36px; }
  .dest { font-size: 24px; }
}