/* Direction : carte aéronautique VFR. Papier vert pâle le jour, carte de nuit marine le soir.
   Une seule chose forte : la route magenta entre les deux aéroports. */

:root {
  --paper: #E9EEE2;
  --paper-deep: #DDE4D3;
  --ink: #17222E;
  --ink-soft: #4E5B66;
  --airspace: #2A5FA0;
  --route: #A8236F;
  --terrain: #CDBF98;
  --warn: #9A4A00;

  --sans: "Sofia Sans", system-ui, sans-serif;
  --cond: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --xcond: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;

  /* Unité d'échelle : tout le layout grandit avec l'écran (du 800×480 à la tablette). */
  --u: min(1vw, 1.75vh);
  --gutter: max(16px, calc(var(--u) * 3.5));
  --shift-x: 0px;
  --shift-y: 0px;
  color-scheme: light;
}

:root[data-theme="night"] {
  --paper: #0B1A2C;
  --paper-deep: #10233A;
  --ink: #DCE6EE;
  --ink-soft: #8FA2B4;
  --airspace: #6B9BDA;
  --route: #E266AE;
  --terrain: #3B4A50;
  --warn: #F0A85A;
  color-scheme: dark;
}

@media (orientation: portrait) {
  :root { --u: min(2.1vw, 1.15vh); }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(var(--u) * 2.2);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  cursor: none;
  transition: background-color 2s ease, color 2s ease;
}

/* Quadrillage discret de carte, en fond. */
body {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--airspace) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--airspace) 7%, transparent) 1px, transparent 1px);
  background-size: calc(var(--u) * 12) calc(var(--u) * 12);
}

.screen {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36%);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "flight sky"
    "status status";
  gap: calc(var(--u) * 2) calc(var(--u) * 4);
  padding: var(--gutter);
  padding-top: max(var(--gutter), env(safe-area-inset-top));
  padding-bottom: max(calc(var(--gutter) * 0.6), env(safe-area-inset-bottom));
  transform: translate(var(--shift-x), var(--shift-y));
  transition: transform 4s ease;
}

@media (orientation: portrait) {
  .screen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "flight" "sky" "status";
  }
}

/* ---------- Vol principal ---------- */

.flight {
  grid-area: flight;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 3);
  min-width: 0;
  transition: opacity 0.6s ease;
}
.flight.is-leaving { opacity: 0; }

.boot, .quiet-note {
  font-size: calc(var(--u) * 3);
  color: var(--ink-soft);
  margin: 0;
  max-width: 28ch;
}

.ident { display: flex; flex-wrap: wrap; align-items: center; gap: 0 calc(var(--u) * 2.5); }
/* Logo sur une pastille claire : lisible aussi sur la carte de nuit. */
.ident-logo {
  width: calc(var(--u) * 6.5);
  height: calc(var(--u) * 6.5);
  object-fit: contain;
  padding: calc(var(--u) * 0.6);
  background: #F4F6EE;
  border-radius: calc(var(--u) * 1.2);
  border: max(1px, calc(var(--u) * 0.15)) solid color-mix(in srgb, var(--airspace) 40%, transparent);
}
.ident-number {
  font-family: var(--cond);
  font-weight: 700;
  font-size: calc(var(--u) * 6);
  line-height: 1;
  letter-spacing: 0.01em;
}
.ident-airline {
  font-size: calc(var(--u) * 3.2);
  font-weight: 500;
  color: var(--ink-soft);
}

/* La route : codes géants reliés par un trait magenta, l'avion posé dessus. */
.route {
  display: grid;
  grid-template-columns: auto minmax(calc(var(--u) * 7), 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: calc(var(--u) * 2.5);
  align-items: center;
}
.route-code {
  font-family: var(--xcond);
  font-weight: 800;
  font-size: min(calc(var(--u) * 15), 21vw);
  line-height: 0.82;
  letter-spacing: -0.01em;
}
.route-city {
  grid-row: 2;
  font-size: calc(var(--u) * 2.5);
  color: var(--ink-soft);
  margin-top: calc(var(--u) * 1);
  max-width: 14ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.route-city.to { grid-column: 3; text-align: right; justify-self: end; }
.route-city.from { grid-column: 1; }

.track {
  position: relative;
  height: calc(var(--u) * 6);
  align-self: center;
}
/* Trait de route façon carte : ligne pleine + graduations. */
.track::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: max(2px, calc(var(--u) * 0.45));
  transform: translateY(-50%);
  background: var(--route);
  border-radius: 1px;
}
.track::after {
  content: "";
  position: absolute;
  inset: calc(50% - var(--u) * 1.1) 0 auto 0;
  height: calc(var(--u) * 2.2);
  background: repeating-linear-gradient(to right, var(--route) 0 max(1px, calc(var(--u) * 0.2)), transparent 0 calc(var(--u) * 4));
  -webkit-mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  opacity: 0.55;
}
.track.unknown::before {
  background: repeating-linear-gradient(to right, var(--route) 0 calc(var(--u) * 1.6), transparent 0 calc(var(--u) * 2.8));
}
.track-plane {
  position: absolute;
  top: 50%;
  left: var(--progress, 50%);
  width: calc(var(--u) * 6.5);
  height: calc(var(--u) * 6.5);
  transform: translate(-50%, -50%) rotate(90deg);
  color: var(--ink);
  z-index: 1;
  transition: left 4s linear;
  filter: drop-shadow(0 0 calc(var(--u) * 0.6) var(--paper)) drop-shadow(0 0 calc(var(--u) * 0.6) var(--paper));
}

.route-none {
  font-family: var(--cond);
  font-size: calc(var(--u) * 3.4);
  color: var(--ink-soft);
  margin: 0;
}
.route-none strong { color: var(--ink); font-weight: 700; }

/* Chiffres du vol */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2) calc(var(--u) * 5.5);
  margin: 0;
}
.fact { margin: 0; }
.fact dd {
  margin: 0;
  font-family: var(--cond);
  font-weight: 700;
  font-size: calc(var(--u) * 5.2);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fact dd small {
  font-weight: 500;
  font-size: 0.5em;
  margin-left: 0.15em;
  color: var(--ink-soft);
}
.fact dt {
  font-size: calc(var(--u) * 2.1);
  color: var(--ink-soft);
  margin-top: calc(var(--u) * 0.8);
}

.aircraft {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.5);
  min-height: calc(var(--u) * 9);
}
.aircraft-photo {
  flex: none;
  width: min(calc(var(--u) * 13), 18vh);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: max(1px, calc(var(--u) * 0.25)) solid var(--airspace);
  padding: max(1px, calc(var(--u) * 0.35));
  background: var(--paper-deep);
}
.aircraft-type { font-size: calc(var(--u) * 2.8); font-weight: 600; margin: 0; }
.aircraft-meta { font-size: calc(var(--u) * 2.1); color: var(--ink-soft); margin: 0; }

/* ---------- Ciel : rose + liste ---------- */

.sky {
  grid-area: sky;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2.5);
  min-height: 0;
  min-width: 0;
}
@media (orientation: portrait) {
  /* En portrait : rose et légende côte à côte, liste pleine largeur dessous. */
  .sky .rose { width: 100%; display: flex; align-items: center; gap: calc(var(--u) * 3); }
  .sky .rose svg { width: 36%; flex: none; }
  .sky .bearing-note { text-align: left; font-size: calc(var(--u) * 3.2); margin: 0; }
}

.rose {
  margin: 0;
  flex: none;
  width: min(100%, 36vh);
  align-self: center;
}
.rose svg { display: block; width: 100%; height: auto; overflow: visible; }
.rose .ring { fill: none; stroke: var(--airspace); }
.rose .ring.inner { stroke-dasharray: 2 3; opacity: 0.6; }
.rose .tick { stroke: var(--airspace); }
.rose .cardinal {
  fill: var(--airspace);
  font-family: var(--cond);
  font-weight: 700;
  font-size: 13px;
  text-anchor: middle;
  dominant-baseline: central;
}
.rose .me { fill: var(--ink); }
.rose .blip { fill: var(--ink-soft); }
.rose .lead-line { stroke: var(--route); stroke-width: 1.6; stroke-dasharray: 3 3; }
.rose .lead { color: var(--route); }
.rose .lead path { fill: currentColor; }
.rose .blip, .rose .lead { transition: transform 4s linear; }

.rose figcaption, .bearing-note {
  text-align: center;
  font-family: var(--cond);
  font-size: calc(var(--u) * 2.4);
  color: var(--ink-soft);
  margin-top: calc(var(--u) * 0.6);
}
.bearing-note strong { color: var(--route); font-weight: 700; }
.nowrap { white-space: nowrap; }

.others { flex: 1; min-height: 0; overflow: hidden; }
.others h2 {
  font-size: calc(var(--u) * 2.1);
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0 0 calc(var(--u) * 0.8);
}
.others ol { list-style: none; margin: 0; padding: 0; }
.others li {
  display: grid;
  grid-template-columns: calc(var(--u) * 2.8) minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: calc(var(--u) * 1.5);
  align-items: baseline;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.8);
  border-top: max(1px, calc(var(--u) * 0.12)) solid color-mix(in srgb, var(--airspace) 35%, transparent);
  font-family: var(--cond);
  font-size: calc(var(--u) * 2.3);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.others li[hidden] { display: none; }
.others li > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.others .o-id { font-weight: 700; }
/* L'avion affiché en grand : même magenta que la route. */
.others li.is-current {
  background: color-mix(in srgb, var(--route) 13%, transparent);
  box-shadow: inset max(3px, calc(var(--u) * 0.45)) 0 0 var(--route);
}
.others li.is-current .o-id, .others li.is-current .o-dist { color: var(--route); }
.others .o-logo {
  width: calc(var(--u) * 2.8);
  height: calc(var(--u) * 2.8);
  object-fit: contain;
  align-self: center;
  background: #F4F6EE;
  border-radius: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.3);
}
.others .o-logo[hidden] { display: block; visibility: hidden; }
.others .o-route { color: var(--ink-soft); }
.others .o-dist { text-align: right; }

/* ---------- Pied ---------- */

.status {
  grid-area: status;
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 3);
  font-size: calc(var(--u) * 1.8);
  color: var(--ink-soft);
  min-width: 0;
}
.clock {
  font-family: var(--cond);
  font-weight: 700;
  font-size: calc(var(--u) * 3.2);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (orientation: portrait) {
  .status { flex-wrap: wrap; row-gap: calc(var(--u) * 0.5); }
  .credit { margin-left: 0; flex-basis: 100%; text-align: left; white-space: normal; }
}
.is-quiet .status .clock { display: none; }
.turns { display: inline-flex; gap: calc(var(--u) * 0.7); align-items: center; align-self: center; font-family: var(--cond); font-variant-numeric: tabular-nums; }
.turns i {
  width: calc(var(--u) * 1);
  height: calc(var(--u) * 1);
  border-radius: 50%;
  border: max(1px, calc(var(--u) * 0.18)) solid var(--ink-soft);
}
.turns i.on { background: var(--route); border-color: var(--route); }
.fresh.is-offline { color: var(--warn); font-weight: 600; }
.credit { margin-left: auto; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Ciel vide : l'heure prend la place ---------- */

.quiet { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.quiet-time {
  font-family: var(--xcond);
  font-weight: 800;
  font-size: calc(var(--u) * 26);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}