/* =========================================================================
   TV AÉROCLUB — Feuille de style du dashboard mural (LFEJ)
   Thème « cockpit de nuit », pensé pour un affichage TV 16:9 vu de loin.
   Toutes les tailles sont en vw/vh pour rester nettes quelle que soit la dalle.
   ========================================================================= */

:root {
  /* Palette */
  --bg: #0B1118;
  --panel: #121A24;
  --panel-alt: #182230;
  --panel-deep: #0E1824;
  --border: #223041;
  --border-soft: #1a2734;

  --text: #E8EEF5;
  --text-2: #9FB0C3;
  --text-muted: #73869C;

  --accent: #3A7BFF;
  --wind: #5AA8FF;

  /* Catégories météo (codes couleur aéronautiques) */
  --vfr: #78B965;
  --mvfr: #2E6FD8;
  --ifr: #C0392B;
  --lifr: #8E44AD;

  --ok: #78B965;
  --warn: #F5A623;
  --danger: #E25555;

  /* Composants (défauts thème sombre) */
  --strip-now-bg: #16232f;
  --strip-maint-bg: #211d12;
  --ctr-active-fg: #d9f0cf;
  --badge-instr-fg: #cfe3ff; --badge-instr-bg: rgba(58,123,255,.16);  --badge-instr-bd: #27477A;
  --badge-solo-fg:  #d9f0cf; --badge-solo-bg:  rgba(120,185,101,.14); --badge-solo-bd:  #3d5a34;
  --badge-maint-fg: #ffe3b0; --badge-maint-bg: rgba(245,166,35,.16);  --badge-maint-bd: #7a5a1f;

  /* Rose des vents */
  --dial-bg: #0E1824; --dial-north: #FF453A; --dial-major: #F5F7FA;
  --dial-minor: #8A98A8; --dial-wind: #5AA8FF;
  --dial-rwy-pave: #33404E; --dial-rwy-mark: #E8EEF5;

  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --gap: 0.6vw;
}

/* =========================================================================
   THÈME CLAIR (premium) — neutres froids, panneaux blancs, texte bleu-nuit.
   ========================================================================= */
[data-theme="light"] {
  --bg: #E8EAEF;
  --panel: #F7F8FB;
  --panel-alt: #F0F2F6;
  --panel-deep: #F3F5F9;
  --border: #DDE1E9;
  --border-soft: #E8EBF1;

  --text: #263241;
  --text-2: #5B6A7B;
  --text-muted: #909CAB;

  --accent: #4E79C0;
  --wind: #4E79C0;

  --vfr: #3E9E6B;
  --mvfr: #4E79C0;
  --ifr: #CC6B6B;
  --lifr: #9A6FBE;

  --ok: #3E9E6B;
  --warn: #E0A24A;
  --danger: #D07777;

  --strip-now-bg: #E9F2EC;
  --strip-maint-bg: #F6EEDD;
  --ctr-active-fg: #3E8A63;
  --badge-instr-fg: #4E79C0; --badge-instr-bg: rgba(78,121,192,.10); --badge-instr-bd: #CBD8EC;
  --badge-solo-fg:  #3E8A63; --badge-solo-bg:  rgba(62,158,107,.10); --badge-solo-bd:  #C4E0CF;
  --badge-maint-fg: #B07E2E; --badge-maint-bg: rgba(224,162,74,.14);  --badge-maint-bd: #E9D6B0;

  --dial-bg: #F3F5F9; --dial-north: #CF6E6E; --dial-major: #6B7A8C;
  --dial-minor: #B4BECA; --dial-wind: #4E79C0;
  --dial-rwy-pave: #C6CDD6; --dial-rwy-mark: #4A5A6C;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.screen {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--gap);
  padding: var(--gap);
}

/* ---- HEADER ----------------------------------------------------------- */
.header {
  background: var(--panel);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.4vw;
  height: 6.4vh;
  min-height: 54px;
}
.brand { display: flex; flex-direction: column; line-height: 1.05; }
.brand .name { font-weight: 700; font-size: 1.9vw; letter-spacing: .02em; }
.brand .sub { font-size: .95vw; color: var(--text-muted); letter-spacing: .28em; text-transform: uppercase; }
.date { text-align: center; font-weight: 600; font-size: 1.7vw; text-transform: capitalize; letter-spacing: .02em; }
.clocks { display: flex; justify-content: flex-end; gap: 1.6vw; font-family: var(--font-mono); }
.clock { text-align: right; line-height: 1; }
.clock .val { font-size: 1.9vw; font-weight: 600; font-variant-numeric: tabular-nums; }
.clock .lbl { font-size: .8vw; color: var(--text-muted); letter-spacing: .24em; }
.clock.utc .val { color: var(--wind); }

/* Bascule de thème */
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 1.1vw; }
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 2.4vw; height: 2.4vw; min-width: 34px; min-height: 34px; padding: 0;
  background: var(--panel-alt); border: 1px solid var(--border); color: var(--text-2);
  cursor: pointer; transition: color .2s, border-color .2s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--wind); }
.theme-toggle svg { width: 1.4vw; height: 1.4vw; min-width: 18px; min-height: 18px; }
.theme-toggle .i-sun { display: block; }
.theme-toggle .i-moon { display: none; }
[data-theme="light"] .theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* ---- CORPS ------------------------------------------------------------ */
.body { display: grid; grid-template-columns: 1fr 1.08fr; gap: var(--gap); min-height: 0; }
.col-left { display: grid; grid-template-rows: 1fr auto; gap: var(--gap); min-height: 0; }
.panel { background: var(--panel); border: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }

/* Fréquences */
.freqs .panel-body { overflow: visible; }
.freq-list { display: flex; flex-direction: column; }
.freq { display: flex; align-items: center; justify-content: space-between; gap: 1vw; padding: .45vw 1.1vw; border-bottom: 1px solid var(--border-soft); }
.freq:last-child { border-bottom: none; }
.freq-name { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.freq-name .fn { font-size: 1.15vw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.freq-name .fr { font-size: .82vw; color: var(--text-muted); letter-spacing: .06em; }
.freq-val { font-family: var(--font-mono); font-size: 1.7vw; font-weight: 600; color: var(--wind); font-variant-numeric: tabular-nums; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; padding: .7vw 1.1vw; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: 1.5vw; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.panel-head .meta { font-family: var(--font-mono); font-size: .85vw; color: var(--text-muted); }
.panel-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }

/* ---- PLANNING (flight strips) ---------------------------------------- */
.strips-scroll { position: absolute; inset: 0; overflow: hidden; }
.strips { display: flex; flex-direction: column; gap: .55vw; padding: .8vw; }
.strip {
  display: grid;
  grid-template-columns: 8.5vw 1fr auto;
  align-items: stretch;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-left: .42vw solid var(--text-muted);
}
.strip.now { border-left-color: var(--ok); background: var(--strip-now-bg); }
.strip.soon { border-left-color: var(--accent); }
.strip.done { opacity: .45; border-left-color: var(--text-muted); }
.strip.maint { border-left-color: var(--warn); background: var(--strip-maint-bg); opacity: 1; }

.strip .time {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: .5vw .3vw; background: var(--panel-deep); border-right: 1px solid var(--border);
  font-family: var(--font-mono);
}
.strip .time .t { font-size: 1.85vw; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.strip .time .sep { font-size: .75vw; color: var(--text-muted); margin: .05vw 0; }
.strip .time .allday { font-size: 1.05vw; font-weight: 700; letter-spacing: .06em; color: var(--wind); text-align: center; line-height: 1.1; }
.strip .time .cont { font-size: 1.6vw; color: var(--text-muted); line-height: 1; }

.strip .info { display: flex; flex-direction: column; justify-content: center; padding: .5vw .9vw; gap: .15vw; min-width: 0; }
.strip .ac { font-size: 1.55vw; font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .crew { font-size: 1.1vw; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .note { font-size: .9vw; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.strip .side { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: .5vw 1vw; gap: .35vw; }
.badge { font-size: 1vw; font-weight: 700; letter-spacing: .1em; padding: .3vw .7vw; border: 1px solid var(--border); white-space: nowrap; }
.badge.instr { color: var(--badge-instr-fg); background: var(--badge-instr-bg); border-color: var(--badge-instr-bd); }
.badge.solo { color: var(--badge-solo-fg); background: var(--badge-solo-bg); border-color: var(--badge-solo-bd); }
.badge.maint { color: var(--badge-maint-fg); background: var(--badge-maint-bg); border-color: var(--badge-maint-bd); }
.status { font-family: var(--font-mono); font-size: .85vw; color: var(--text-muted); letter-spacing: .06em; }
.status.now { color: var(--ok); }
.status.soon { color: var(--wind); }

.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6vw; color: var(--text-muted); }
.empty .big { font-size: 2vw; font-weight: 600; color: var(--text-2); }
.empty .small { font-size: 1.1vw; }

/* ---- MÉTÉO ------------------------------------------------------------ */
.wx { position: absolute; inset: 0; display: flex; flex-direction: column; padding: .8vw; gap: .7vw; overflow: hidden; }
.wx-top { display: grid; grid-template-columns: 1fr 1.15fr; gap: .9vw; align-items: stretch; }

.cat-col { display: flex; flex-direction: column; gap: .6vw; min-width: 0; }
.cat { border: 1px solid var(--border); padding: .7vw .9vw; display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; gap: .9vw; background: var(--panel-alt); }
.cat-main { display: flex; flex-direction: column; justify-content: center; gap: .2vw; min-width: 0; }
.cat .cat-lbl { font-size: .85vw; color: var(--text-muted); letter-spacing: .22em; text-transform: uppercase; }
.cat .cat-val { font-size: 3.4vw; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.cat[data-cat="VFR"] { border-color: var(--vfr); }   .cat[data-cat="VFR"] .cat-val { color: var(--vfr); }
.cat[data-cat="MVFR"] { border-color: var(--mvfr); } .cat[data-cat="MVFR"] .cat-val { color: var(--mvfr); }
.cat[data-cat="IFR"] { border-color: var(--ifr); }   .cat[data-cat="IFR"] .cat-val { color: var(--ifr); }
.cat[data-cat="LIFR"] { border-color: var(--lifr); } .cat[data-cat="LIFR"] .cat-val { color: var(--lifr); }

.svfr {
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  align-self: stretch; width: 5.8vw; min-width: 74px;
  background: var(--warn); color: #0B1118;
  font-weight: 800; letter-spacing: .04em; line-height: 1.05;
  box-shadow: 0 0 .6vw var(--warn);
  animation: svfrGlow 2s ease-in-out infinite;
}
.svfr .l1 { font-size: 1.55vw; }
.svfr .l2 { font-size: 1.3vw; }
@keyframes svfrGlow {
  0%, 100% { box-shadow: 0 0 .35vw var(--warn); }
  50% { box-shadow: 0 0 1.6vw var(--warn); }
}

.kv { display: grid; grid-template-columns: 1fr; gap: .45vw; }
.kv .row { display: flex; justify-content: space-between; align-items: baseline; gap: .6vw; border-bottom: 1px solid var(--border-soft); padding-bottom: .35vw; }
.kv .k { font-size: .95vw; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase; }
.kv .v { font-family: var(--font-mono); font-size: 1.35vw; font-weight: 600; color: var(--text); }

.dial-wrap { border: 1px solid var(--border); background: var(--panel-deep); display: flex; align-items: center; justify-content: center; padding: .4vw; min-height: 0; }
.dial-wrap svg { width: 100%; height: 100%; max-height: 28vh; }
/* Couleurs de la rose des vents (pilotées par le thème) */
#dial .dial-bg { fill: var(--dial-bg); }
#dial .dial-north { stroke: var(--dial-north); }
#dial .dial-major { stroke: var(--dial-major); }
#dial .dial-minor { stroke: var(--dial-minor); }
#dial .dial-arc { stroke: var(--dial-major); fill: none; }
#dial .dial-sector { fill: var(--dial-wind); }
#dial .rwy-pave { fill: var(--dial-rwy-pave); }
#dial .rwy-center { stroke: var(--dial-rwy-mark); stroke-width: 1.6; fill: none; }
#dial .rwy-key { fill: var(--dial-rwy-mark); }

/* Vignette « seuil de piste » dans la tuile Piste service */
.rwy-thumb { display: flex; align-items: center; justify-content: center; height: 4.2vw; min-height: 48px; margin: auto 0; }
.rwy-thumb svg { height: 100%; width: auto; display: block; }
.rwy-thumb .rt-empty { font-family: var(--font-mono); font-size: 1.6vw; color: var(--text-muted); }
.rwy-thumb .rt-pave { fill: var(--dial-rwy-pave); }
.rwy-thumb .rt-mark { fill: var(--dial-rwy-mark); }
.rwy-thumb .rt-center { stroke: var(--dial-rwy-mark); stroke-width: 1.4; fill: none; }
.rwy-thumb .rt-num { fill: var(--dial-rwy-mark); font-family: var(--font-mono); font-weight: 600; }

/* Barre de catégorie (fine, sans libellés) */
.catbar { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 1.2vh; min-height: 10px; border: 1px solid var(--border); background: var(--panel-alt); }
.catbar .seg { background: var(--col); opacity: .35; transition: opacity .3s; }
.catbar .seg.active { opacity: 1; }
.catbar .cat-cursor { position: absolute; top: -3px; bottom: -3px; width: 4px; background: var(--text); transform: translateX(-50%); box-shadow: 0 0 .5vw rgba(0, 0, 0, .5); pointer-events: none; display: none; transition: left .3s; }

/* Tuiles performances / piste */
.wx-mid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5vw; }
.tile { border: 1px solid var(--border); background: var(--panel-alt); padding: .5vw .6vw; display: flex; flex-direction: column; justify-content: flex-start; gap: .2vw; }
.tile .k { font-size: .82vw; color: var(--text-muted); letter-spacing: .12em; text-transform: uppercase; }
.tile .v { font-family: var(--font-mono); font-size: 1.5vw; font-weight: 600; font-variant-numeric: tabular-nums; margin: auto 0; }

/* METAR / TAF bruts — ligne unique défilante */
.raw { display: flex; flex-direction: column; gap: .6vw; margin-top: auto; }
.raw .block { display: flex; align-items: center; gap: 1vw; border: 1px solid var(--border); background: var(--panel-deep); padding: .6vw 1vw; overflow: hidden; }
.raw .tag { flex: 0 0 auto; min-width: 4.4vw; font-size: .88vw; color: var(--text-muted); letter-spacing: .2em; font-weight: 700; }
.raw .rawline { position: relative; flex: 1 1 auto; overflow: hidden; height: 2.1vw; }
.raw .rawtrack { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); white-space: nowrap; font-family: var(--font-mono); font-size: 1.3vw; color: var(--text); }
.raw .rawline.wrap { height: auto; }
.raw .rawline.wrap .rawtrack { position: static; transform: none; white-space: normal; display: block; }

/* ---- FOOTER ----------------------------------------------------------- */
.footer { background: var(--panel); border: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 5.6vh; min-height: 48px; overflow: hidden; }
.ctr { display: flex; align-items: center; gap: .6vw; padding: 0 1.2vw; height: 100%; border-right: 1px solid var(--border); font-weight: 700; letter-spacing: .14em; font-size: 1.1vw; }
.ctr .dot { width: 1.25vw; height: 1.25vw; border-radius: 50%; background: var(--danger); box-shadow: 0 0 1vw var(--danger); animation: ctrPulse 2.0s ease-in-out infinite; }
@keyframes ctrPulse { 0%, 100% { opacity: 1; } 50% { opacity: .50; } }
.ctr.active { color: var(--ctr-active-fg); }
.ctr.active .dot { background: var(--ok); box-shadow: 0 0 1vw var(--ok); }
.ctr.inactive { color: var(--text-2); }

.ticker { position: relative; height: 100%; overflow: hidden; }
.ticker .track { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 1.1vw; color: var(--text-2); will-change: transform; }
.wifi { display: flex; align-items: center; gap: .5vw; padding: 0 1.2vw; height: 100%; border-left: 1px solid var(--border); font-family: var(--font-mono); font-size: 1.1vw; font-weight: 600; }
.wifi .lbl { color: var(--text-muted); font-family: var(--font-display); letter-spacing: .1em; }
.wifi .val { color: var(--wind); }

/* État dégradé (données indisponibles) */
.stale { color: var(--warn) !important; }

@media (prefers-reduced-motion: reduce) {
  .ticker .track { transform: translateY(-50%) !important; animation: none !important; }
  .ctr .dot { animation: none !important; }
  .svfr { animation: none !important; }
}