@font-face { font-family: Atkinson; src: url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: Atkinson; src: url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); font-weight: 700; }

:root {
  --bg: #0b1622; --panel: #0f1d2c; --panel2: #13243566; --line: #ffffff17; --line2: #ffffff26;
  --text: #e8eef5; --muted: #8fa1b3; --amber: #ffb021; --magenta: #e040fb; --sky: #3b8fd9;
  --g: #34c27a; --o: #ff9f1a; --r: #ef3b4f;
  --num: ui-rounded, "SF Pro Rounded", "Atkinson", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 Atkinson, system-ui, sans-serif; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 10px; padding: 8px 14px; color: var(--text); }
button.primary { background: linear-gradient(180deg, #4aa0ea, #2f7fcb); font-weight: 700; box-shadow: 0 4px 14px #2f7fcb55; }
button.ghost { background: #ffffff10; border: 1px solid var(--line); }
button.primary.synced { background: linear-gradient(180deg, #2fbf75, #239a5d); box-shadow: 0 4px 14px #239a5d55; }
button.ghost:hover { background: #ffffff1c; }
button.icon { background: none; padding: 4px 6px; color: var(--muted); }
button.icon:hover { color: var(--text); }
input, select { font: inherit; color: var(--text); background: #0006; border: 1px solid var(--line2); border-radius: 8px; padding: 7px 9px; }
input:focus { outline: 2px solid #3b8fd988; border-color: transparent; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* barre du haut */
.top { height: 58px; display: flex; align-items: center; gap: 22px; padding: 0 18px; background: linear-gradient(180deg, #13263a, #0e1c2b); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand b { display: block; font-size: 17px; letter-spacing: .3px; }
.brand span { font-size: 11.5px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; }
.dep-time { display: flex; align-items: center; gap: 8px; }
.dep-time label { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--amber); font-weight: 700; }
.top-actions { margin-left: auto; display: flex; gap: 8px; }

main { position: absolute; top: 58px; bottom: 0; left: 0; right: 0; display: flex; }

/* panneau gauche */
.side { width: 420px; flex: none; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); min-height: 0; }
.verdict { margin: 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, #17324c, #10233a); border: 1px solid var(--line2); position: relative; overflow: hidden; }
.verdict::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--vc, var(--sky)); }
.verdict.g { --vc: var(--g); } .verdict.o { --vc: var(--o); } .verdict.r { --vc: var(--r); }
.v-title { font-size: 17px; font-weight: 700; }
.v-sub { color: var(--muted); margin-top: 3px; font-size: 13px; }
.v-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.kpi { background: #0005; border-radius: 10px; padding: 7px 9px; }
.kpi small { display: block; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.kpi b { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 18px; }
.v-crit { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 99px; background: #ffffff10; white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--muted)); }
.chip.g { --c: var(--g); } .chip.o { --c: var(--o); } .chip.r { --c: var(--r); }

.search-row { padding: 0 14px 10px; }
.search { position: relative; }
.search input { width: 100%; padding: 10px 12px; }
.qres { position: absolute; top: 100%; left: 0; right: 0; background: #142739; border: 1px solid var(--line2); border-radius: 10px; margin-top: 4px; z-index: 20; max-height: 300px; overflow: auto; display: none; box-shadow: 0 12px 30px #0008; }
.qres div { padding: 8px 12px; cursor: pointer; display: flex; gap: 10px; }
.qres div:hover, .qres div.sel { background: #ffffff12; }
.qres b { width: 64px; flex: none; }

.tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border-radius: 0; padding: 10px 10px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 700; font-size: 13px; }
.tabs button.on { color: var(--text); border-bottom-color: var(--sky); }
.tab-body { flex: 1; overflow: auto; min-height: 0; }
.tab { display: none; padding: 12px 14px 30px; }
.tab.on { display: block; }
.empty-note { color: var(--muted); padding: 20px 4px; text-align: center; }

/* liste des points / branches */
.wp { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #ffffff08; border: 1px solid var(--line); }
.wp .dot { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #fff; color: #111; }
.wp.dep .dot, .wp.arr .dot { background: var(--magenta); color: #fff; }
.wp .nm { flex: 1; min-width: 0; }
.wp .nm b { display: block; }
.wp .nm span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.leg { margin: 0 0 0 22px; padding: 8px 0 8px 18px; border-left: 2px dashed #e040fb88; }
.leg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 10px; font-size: 12px; }
.leg-grid small { color: var(--muted); display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.leg-grid b { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 15px; }
.leg .alt { width: 74px; padding: 3px 6px; font-family: var(--num); }
.leg .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.route-tot { margin-top: 14px; padding: 12px; border-radius: 12px; background: #ffffff0a; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* tableaux */
table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.t th { text-align: left; color: var(--muted); font-weight: 700; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 4px; border-bottom: 1px solid var(--line); }
table.t td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t tr:hover td { background: #ffffff06; }
table.t tr { cursor: pointer; }
.sec-title { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); font-weight: 700; margin: 16px 0 8px; }
.sec-title:first-child { margin-top: 2px; }
.raw { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: #0006; padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; color: #cfe0f0; }
.soon { padding: 10px 4px; color: var(--muted); }
.soon h3 { color: var(--text); margin: 4px 0 8px; }
.soon a { color: var(--sky); }
.gap-warn { background: #ef3b4f1c; border: 1px solid #ef3b4f55; border-radius: 10px; padding: 9px 11px; margin-bottom: 10px; font-size: 13px; }

/* carte */
.mapwrap { flex: 1; position: relative; min-width: 0; }
#map { position: absolute; inset: 0 0 250px 0; }
.map-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #0f1d2ccc; backdrop-filter: blur(10px); border: 1px solid var(--line2); padding: 6px 14px; border-radius: 99px; font-size: 12px; color: var(--muted); pointer-events: none; transition: opacity .4s; white-space: nowrap; }
.legend { position: absolute; bottom: 262px; right: 12px; display: flex; gap: 12px; background: #0f1d2ccc; backdrop-filter: blur(10px); padding: 6px 12px; border-radius: 10px; font-size: 12px; border: 1px solid var(--line); }
.legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.legend .g { background: var(--g); } .legend .o { background: var(--o); } .legend .r { background: var(--r); }
.maplibregl-ctrl-group { background: #0f1d2c !important; border: 1px solid var(--line2); }
.maplibregl-ctrl-group button span { filter: invert(1); }
.maplibregl-popup-content { background: #142739; color: var(--text); border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 30px #0009; border: 1px solid var(--line2); }
.maplibregl-popup-tip { border-top-color: #142739 !important; border-bottom-color: #142739 !important; }
.maplibregl-popup-close-button { color: var(--muted); font-size: 18px; }
.pop b { font-size: 15px; } .pop .muted { font-size: 12px; }
.pop .btns { display: flex; gap: 6px; margin-top: 10px; }
.pop button { padding: 6px 10px; font-size: 12.5px; }
.wpm { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--magenta); box-shadow: 0 2px 8px #0008; cursor: grab; display: grid; place-items: center; font: 700 10px Atkinson; color: #111; }
.wpm.end { background: var(--magenta); color: #fff; border-color: #fff; width: 26px; height: 26px; }

/* profil */
.profile { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; background: linear-gradient(180deg, #0f1d2c, #0b1622); border-top: 1px solid var(--line2); display: flex; flex-direction: column; }
.p-head { display: flex; gap: 14px; align-items: baseline; padding: 9px 16px 2px; }
.p-head span { color: var(--muted); font-size: 12px; }
.p-body { flex: 1; position: relative; min-height: 0; }
#psvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ptip { position: absolute; pointer-events: none; background: #142739ee; border: 1px solid var(--line2); border-radius: 8px; padding: 6px 9px; font-size: 12px; display: none; white-space: nowrap; }

/* dialogues */
dialog { background: #12243a; color: var(--text); border: 1px solid var(--line2); border-radius: 16px; padding: 22px 24px; width: min(620px, 92vw); box-shadow: 0 30px 80px #000a; }
dialog::backdrop { background: #0009; backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 14px; font-size: 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.grid2 label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.plan { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #ffffff08; margin-bottom: 6px; }
.plan .nm { flex: 1; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 30px); opacity: 0; background: #142739; border: 1px solid var(--line2); padding: 10px 18px; border-radius: 99px; transition: .35s; z-index: 99; box-shadow: 0 10px 30px #0008; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid #fff4; border-top-color: #fff; border-radius: 50%; animation: sp 0.8s linear infinite; vertical-align: -2px; }
@keyframes sp { to { transform: rotate(360deg); } }

.print-only { display: none; }
@media print {
  body { background: #fff; color: #111; }
  .top, main, dialog, .toast { display: none !important; }
  .print-only { display: block; padding: 10mm; font: 11pt Atkinson, sans-serif; }
  .print-only h1 { font-size: 18pt; margin: 0 0 4mm; }
  .print-only table { width: 100%; border-collapse: collapse; }
  .print-only th, .print-only td { border: 1px solid #333; padding: 2mm; text-align: center; }
  .print-only th { background: #eee; }
  .print-only td.l { text-align: left; }
}

/* sélecteur de vue */
.views { display: flex; background: #0006; border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
.views button { background: none; padding: 6px 16px; border-radius: 8px; color: var(--muted); font-weight: 700; }
.views button.on { background: #ffffff18; color: var(--text); box-shadow: 0 1px 6px #0006; }
main[hidden] { display: none; }

/* onglet Appareil */
.acview { position: absolute; top: 58px; bottom: 0; left: 0; right: 0; overflow: auto; padding: 22px 26px 40px; background: radial-gradient(1200px 500px at 20% -10%, #1a3552 0%, transparent 60%), var(--bg); }
.ac-hero { display: grid; grid-template-columns: 240px 1fr 280px; gap: 24px; align-items: center; padding: 20px; border-radius: 18px; background: linear-gradient(135deg, #17324c, #0f2236); border: 1px solid var(--line2); box-shadow: 0 20px 50px #0006; }
.ac-photo { width: 240px; height: 160px; border-radius: 14px; overflow: hidden; background: #0005; border: 1px dashed var(--line2); display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.ac-photo img { width: 100%; height: 100%; object-fit: cover; }
.ac-reg { font-size: 34px; font-weight: 700; letter-spacing: 1px; }
.ac-model { color: var(--muted); margin-top: 2px; }
.ac-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 16px; }
.ac-kpi { background: #0005; border-radius: 12px; padding: 10px 12px; border: 1px solid var(--line); }
.ac-kpi small { display: block; font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); }
.ac-kpi b { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 24px; }
.ac-kpi span { color: var(--muted); margin-left: 4px; }
.ac-kpi em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ac-plan { width: 100%; height: auto; }
.ac-grid { align-items: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; margin-top: 18px; }
.ac-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 18px; }
.ac-card h3 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.ac-card h3 i { font-style: normal; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #2f7fcb, #1d5fa8); font-size: 14px; }
.ac-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ac-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.ac-fields label.wide { grid-column: 1 / -1; }
.ac-fields textarea { font: inherit; color: var(--text); background: #0006; border: 1px solid var(--line2); border-radius: 8px; padding: 8px; resize: vertical; }
.inp { display: flex; align-items: center; background: #0006; border: 1px solid var(--line2); border-radius: 8px; }
.inp:focus-within { outline: 2px solid #3b8fd988; }
.inp input { border: 0; background: none; flex: 1; min-width: 0; outline: none; font-family: var(--num); }
.inp span { padding: 0 10px; color: var(--muted); font-size: 12px; }
.navtag { font-size: 9px; letter-spacing: 1px; color: #0b1622; background: var(--amber); border-radius: 4px; padding: 1px 4px; vertical-align: 1px; }
.small { font-size: 12px; }
.tape { margin-top: 14px; overflow: visible; padding: 0 22px; }
.fuelbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-top: 16px; background: #0006; }
.fuel-leg { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 7px; font-size: 12px; color: var(--muted); }
.fuel-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.wb { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.wb .sub { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); font-weight: 700; margin-bottom: 10px; }
.wb-res { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cgbar { position: relative; height: 12px; background: #0006; border-radius: 6px; margin-top: 12px; }
.cgbar .env { position: absolute; top: 0; bottom: 0; background: #34c27a44; border: 1px solid #34c27a; border-radius: 6px; }
.cgbar .cg { position: absolute; top: -4px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--g); }
.cgbar .cg.r { background: var(--r); }
.ac-foot { margin-top: 18px; font-size: 12.5px; }
@media (max-width: 1250px) { .ac-hero { grid-template-columns: 200px 1fr; } .ac-plan { display: none; } .ac-kpis { grid-template-columns: repeat(3, 1fr); } }

/* route automatique */
.rt { margin: 0 14px 12px; padding: 11px 12px; border-radius: 12px; background: #ffffff08; border: 1px solid var(--line); }
.rt-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.rt-head span { font-size: 12px; }
.rt-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.ck { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 9px; background: #0005; border: 1px solid var(--line2); cursor: pointer; font-size: 13px; user-select: none; }
.ck input { accent-color: #3b8fd9; width: 15px; height: 15px; margin: 0; }
.ck:has(input:checked) { background: #3b8fd922; border-color: #3b8fd9; }
.rt-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.rt-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); width: 140px; }
.rt-row .inp input { padding: 6px 8px; }
.rt-row button { padding: 8px 12px; }
.rt-row button[disabled] { opacity: .7; }
.inp.mini { margin-left: 2px; } .inp.mini input { width: 58px; padding: 2px 4px; } .inp.mini span { padding: 0 6px 0 0; }
.rt-msg { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.rt-msg:empty { display: none; }

/* fiche de vol */
.card-empty { color: var(--muted); text-align: center; padding: 80px 20px; font-size: 15px; }
.cardsheet { max-width: 1180px; margin: 0 auto; }
.cs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.cs-head h1 { margin: 0; font-size: 26px; }
.cs-kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.cb { display: inline-flex; flex-direction: column; padding: 6px 11px; border-radius: 10px; background: #ffffff0d; border: 1px solid var(--line); font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; line-height: 1.2; }
.cb small { font-family: Atkinson; font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cb em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 400; }
.cb.cap { border-color: #e040fb66; background: #e040fb14; } .cb.cap small { color: #e79bf5; }
.cb.alt { border-color: #ffb02166; background: #ffb02114; } .cb.alt small { color: var(--amber); }
.cb.frq { border-color: #34c27a66; background: #34c27a14; } .cb.frq small { color: var(--g); }
.cb.xp { border-color: #3b8fd966; background: #3b8fd914; }
.cb input.ed { width: 92px; }
input.ed { background: transparent; border: 0; border-bottom: 1px dashed #ffffff33; border-radius: 0; padding: 1px 0; font-family: var(--num); font-weight: 700; color: var(--text); }
input.ed::placeholder { color: #ffffff40; font-weight: 400; }
input.ed.note { width: 110px; font-weight: 400; font-size: 12.5px; align-self: center; }
.cs-start { display: flex; align-items: center; gap: 14px; margin: 18px 0 10px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #17324c, #10233a); border: 1px solid var(--line2); }
.cs-pt { font-size: 20px; font-weight: 700; min-width: 120px; }
.cs-pt small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.cs-ch { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cs-asp { font-size: 12.5px; padding: 4px 9px; border-radius: 8px; background: #3b8fd91a; color: #9cc8f0; }
.cs-asp.out { background: #ffffff0a; color: var(--muted); }
.cs-asp small { color: var(--muted); }
.cs-t { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.cs-t th { text-align: left; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 2px 10px; }
.cs-t td { background: var(--panel); padding: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: middle; }
.cs-t td:first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; font-size: 18px; font-weight: 700; }
.cs-t td:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; }
.cs-t td:first-child { width: 64px; }
.cs-t tr.r-asp td { background: #13243a; }
.cs-t td.hr { min-width: 54px; border-bottom: 1px dashed #ffffff30; }
.cs-t tfoot td { background: none; border: 0; font-weight: 700; color: var(--muted); }
.ditto { color: var(--muted); }
.cs-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.cs-box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.cs-box h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--amber); }
.cs-fuel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cs-fuel td { padding: 5px 2px; border-bottom: 1px solid var(--line); }
.cs-fuel td:last-child { text-align: right; font-family: var(--num); font-weight: 700; }
.cs-fuel tr.tot td { color: var(--amber); } .cs-fuel tr.ok td:last-child { color: var(--g); } .cs-fuel tr.ko td:last-child { color: var(--r); }
.cs-arr { font-size: 16px; margin-bottom: 6px; }
.cs-foot { font-size: 12px; margin-top: 14px; }
.cs-t tfoot td:first-child { border: 0; font-size: 16px; }