/* ============================================================================
   THEME "AIGUILLEUR DU CIEL" — sombre, phosphore vert/ambre, monospace.
   Concu pour TV OLED 4K, Apple TV, iPad, Mac et iPhone (echelle fluide).
   ============================================================================ */
:root{
  --bg:        #05080c;
  --bg-panel:  #0a1017;
  --bg-panel2: #0d151f;
  --line:      #14202e;
  --line2:     #1e3247;
  --green:     #3fff9f;   /* phosphore radar */
  --green-dim: #1c7f56;
  --amber:     #ffb43a;
  --red:       #ff4d5e;
  --cyan:      #46d5ff;
  --txt:       #c9dbe8;
  --txt-dim:   #6d8296;
  /* echelle fluide : petit sur telephone, grand sur TV */
  --u: clamp(13px, 0.9vw + 0.5vh, 30px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:
    radial-gradient(1200px 700px at 70% -10%, #0b1a24 0%, transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:"SF Mono",ui-monospace,"JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  font-size:var(--u);
  line-height:1.35;
  letter-spacing:.02em;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* -------------------------------- BARRE ----------------------------------- */
.bar{
  display:flex; align-items:center; gap:1.5em;
  padding:.55em 1em;
  background:linear-gradient(180deg,#0c1723,#070d13);
  border-bottom:1px solid var(--line2);
}
.ident{ display:flex; align-items:baseline; gap:.6em; }
.ident .iata{ font-size:1.9em; font-weight:800; color:var(--green);
  text-shadow:0 0 18px rgba(63,255,159,.35); letter-spacing:.06em; }
.ident .icao{ color:var(--txt-dim); font-size:1em; border:1px solid var(--line2);
  padding:.05em .4em; border-radius:.25em; }
.ident .apname{ color:var(--txt); opacity:.7; font-size:.95em; }
.clocks{ margin-left:auto; display:flex; gap:1.4em; }
.clock{ text-align:right; }
.clock .lbl{ display:block; font-size:.6em; color:var(--txt-dim); letter-spacing:.25em; }
.clock span:last-child{ font-size:1.5em; font-variant-numeric:tabular-nums; color:var(--cyan); }
.livewrap{ display:flex; align-items:center; gap:.45em; color:var(--green);
  font-size:.75em; letter-spacing:.2em; }
.livewrap .dot{ width:.7em; height:.7em; border-radius:50%; background:var(--green);
  box-shadow:0 0 10px var(--green); animation:pulse 1.6s infinite; }
.livewrap.stale{ color:var(--red); }
.livewrap.stale .dot{ background:var(--red); box-shadow:0 0 10px var(--red); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* -------------------------------- GRILLE ---------------------------------- */
.grid{
  height:calc(100vh - 3.4em);
  display:grid;
  grid-template-columns: 1fr minmax(20em, 27vw);
  gap:.7em; padding:.7em;
}
.panel{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:.5em;
  overflow:hidden;
  display:flex; flex-direction:column;
  min-height:0;
}
.panel-h{
  padding:.5em .8em;
  font-size:.72em; letter-spacing:.22em; color:var(--txt-dim);
  background:var(--bg-panel2);
  border-bottom:1px solid var(--line);
  text-transform:uppercase; flex:none;
}
.panel-h .sub{ color:var(--txt-dim); opacity:.7; letter-spacing:.1em; }
.panel-h.dep{ color:var(--amber); }
.panel-h.arr{ color:var(--green); }

/* --------------------------------- CARTE ---------------------------------- */
.map-panel{ min-width:0; }
#map{ flex:1; background:#04070a; }
.leaflet-container{ background:#04070a; font-family:inherit; }
.leaflet-control-attribution{ background:rgba(0,0,0,.55)!important; color:#5b6f80!important; }
.leaflet-control-attribution a{ color:#7fa; }
.leaflet-bar a{ background:#0d151f; color:var(--txt); border-color:var(--line2); }

/* icone avion */
.plane{ transform-origin:center; will-change:transform; }
.plane svg{ display:block; filter:drop-shadow(0 0 4px rgba(63,255,159,.5)); }
.plane .lbl{
  position:absolute; left:14px; top:-2px; white-space:nowrap;
  font-size:11px; color:var(--green); text-shadow:0 0 4px #000,0 0 4px #000;
}
.plane.special svg{ filter:drop-shadow(0 0 6px var(--red)); }
.plane.special .lbl{ color:var(--red); }

/* --------------------------- COLONNE DROITE ------------------------------- */
.side{ display:grid; grid-template-rows:auto 1fr 1fr; gap:.7em; min-height:0; }

/* meteo */
.wx-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.wx-cell{ background:var(--bg-panel); padding:.55em .7em; }
.wx-cell .k{ display:block; font-size:.6em; letter-spacing:.18em; color:var(--txt-dim); }
.wx-cell .v{ font-size:1.35em; color:var(--txt); font-variant-numeric:tabular-nums; }
.wx-cell .v .unit{ font-size:.55em; color:var(--txt-dim); margin-left:.2em; }
.wx-raw{ padding:.5em .8em; font-size:.78em; color:var(--green-dim);
  border-top:1px solid var(--line); word-break:break-word; background:#070d12; }

/* tableaux vols */
.board .rows{ overflow-y:auto; min-height:0; flex:1; }
.row{
  display:grid;
  grid-template-columns: 4.2em 1fr 4.6em 3.2em;
  gap:.5em; align-items:center;
  padding:.5em .8em;
  border-bottom:1px solid var(--line);
}
.row .time{ font-size:1.1em; color:var(--cyan); font-variant-numeric:tabular-nums; }
.row .time.rev{ color:var(--amber); }
.row .dest{ overflow:hidden; }
.row .dest .apt{ display:block; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .dest .co{ font-size:.72em; color:var(--txt-dim); }
.row .dest .actype{
  display:inline-block; font-size:.9em; color:var(--cyan);
  border:1px solid #1d4a5c; border-radius:.25em; padding:0 .35em; margin-left:.15em;
  letter-spacing:.02em;
}
.row .fno{ font-size:.85em; color:var(--txt-dim); text-align:right; }
.row .st{ font-size:.62em; text-align:right; letter-spacing:.06em; padding:.15em .35em;
  border-radius:.25em; border:1px solid transparent; }
.st.ontime{ color:var(--green); border-color:var(--green-dim); }
.st.delay{ color:var(--amber); border-color:#7a5514; }
.st.cancel{ color:var(--red); border-color:#7a1f28; }
.st.board,.st.dep,.st.arr{ color:var(--cyan); border-color:#1d4a5c; }
.rows .empty{ padding:1.2em; color:var(--txt-dim); text-align:center; font-size:.85em; }

/* ---------------------------- RESPONSIVE ---------------------------------- */
/* Tablette / telephone : on empile, la carte passe au-dessus */
@media (max-width:820px){
  :root{ --u:15px; }
  .grid{ grid-template-columns:1fr; grid-template-rows:45vh auto; height:auto; overflow:auto; }
  body{ overflow:auto; }
  .side{ grid-template-rows:auto auto auto; }
  .board .rows{ max-height:44vh; }
  .apname{ display:none; }
}
/* Grand ecran / TV 4K : on agrandit encore et on aere */
@media (min-width:2200px){
  :root{ --u:26px; }
  .row{ padding:.7em 1em; }
}