:root {
  --rail: #1d2734; --rail-btn: #36465a; --rail-on: #e3eaf3; --accent: #1f6fe0;
  --panel: rgba(28, 38, 52, .86); --sheet: #243244; --sheet2: #2d3d52; --line: rgba(255,255,255,.12);
  --txt: #eef3f8; --muted: #9fb0c3; --ok: #34c759; --warn: #ff9f0a; --bad: #ff3b30;
  --vd-h: 34vh;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-l: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #111a24; color: var(--txt); font: 14px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; -webkit-touch-callout: none; touch-action: manipulation; }
input, select, textarea { font: inherit; color: var(--txt); background: #17212d; border: 1px solid #3c4d62; border-radius: 8px; padding: 9px 10px; -webkit-user-select: text; user-select: text; }
textarea { width: 100%; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; display: flex; padding: var(--safe-t) 0 0 var(--safe-l); }
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
#map-wrap { flex: 1; position: relative; min-height: 0; }
#map { position: absolute; inset: 0; background: #1a3a5c; }
body[data-map="dark"] #map { background: #0e1621; }
body[data-map="light"] #map { background: #d9dee4; }

/* Rail de contrôle (droite) */
#rail { width: 78px; background: var(--rail); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px calc(8px + var(--safe-b)); padding-right: calc(6px + var(--safe-r)); overflow-y: auto; scrollbar-width: none; flex-shrink: 0; }
#rail::-webkit-scrollbar { display: none; }
.rb { width: 64px; min-height: 58px; border-radius: 9px; background: var(--rail-btn); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; flex-shrink: 0; transition: background .15s; }
.rb svg { width: 30px; height: 30px; fill: #fff; stroke: #fff; }
.rb span { font-size: 8.5px; font-weight: 600; letter-spacing: .02em; color: #dfe6ee; }
.rb.on { background: var(--rail-on); }
.rb.on svg { fill: var(--accent); stroke: var(--accent); }
.rb.on span { color: var(--accent); }
.rb.disabled { opacity: .35; }
.rb .dot-mod { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.rb.status { background: #2d3a4b; }
.rb.status svg { width: 40px; height: 32px; stroke: none; }
.rb.status .cl { fill: var(--ok); }
.rb.status[data-wx="orange"] .cl { fill: var(--warn); }
.rb.status[data-wx="red"] .cl { fill: var(--bad); }
.rb.status .wbg { fill: var(--ok); stroke: #1d2734; stroke-width: 1.2; }
.rb.status[data-comm="busy"] .wbg { fill: #fff; } .rb.status[data-comm="busy"] .wifi path, .rb.status[data-comm="busy"] .wifi circle:last-child { stroke: #333; fill: #333; }
.rb.status[data-comm="bad"] .wbg { fill: var(--bad); }
.brand { margin-top: auto; font-weight: 800; font-size: 11px; letter-spacing: .12em; color: #cfd8e3; text-align: center; padding-top: 10px; opacity: .8; }
.brand small { display: block; font-size: 8px; letter-spacing: .3em; color: var(--muted); }

/* Panneaux d'info coin haut */
.info-panel { position: absolute; top: 10px; z-index: 800; background: var(--panel); border-radius: 8px; padding: 9px 13px 18px; font-size: 12.5px; min-width: 196px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#info-left { left: 10px; } #info-right { right: 10px; }
.info-panel table { border-collapse: collapse; } .info-panel td { padding: 1px 0; white-space: nowrap; }
.info-panel td:first-child { color: #dfe6ee; padding-right: 16px; } .info-panel td:last-child { color: #fff; font-variant-numeric: tabular-nums; }
.info-panel .gps { color: var(--muted); font-size: 11px; padding-bottom: 3px; }
.ip-toggle { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 36px; height: 14px; }
.ip-toggle::after { content: "⌃"; color: #fff; font-size: 14px; line-height: 14px; }
.info-panel.collapsed .ip-body tr:not(:first-child) { display: none; }
.info-panel.collapsed .ip-toggle::after { content: "⌄"; }

#top-btns { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 26px; z-index: 790; }
.round-btn { width: 50px; height: 50px; border-radius: 50%; background: rgba(40,52,68,.82); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.round-btn svg { width: 28px; height: 28px; fill: #fff; stroke: #fff; }
.round-btn.on { background: var(--rail-on); } .round-btn.on svg { fill: var(--accent); stroke: var(--accent); }
.round-btn.sm { width: 46px; height: 46px; position: absolute; z-index: 790; }
#btn-tools { left: 14px; bottom: 16px; } #btn-center { right: 14px; bottom: 16px; }
#btn-tools.on { background: var(--rail-on); } #btn-tools.on svg { stroke: var(--accent); }
#flight-tag { position: absolute; right: 70px; bottom: 0; z-index: 790; background: rgba(28,38,52,.9); border-radius: 8px 8px 0 0; padding: 6px 14px; font-weight: 600; font-size: 13px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
#flight-tag .chev { font-size: 14px; }
#warn-btn { position: absolute; right: 12px; top: 45%; z-index: 790; width: 40px; height: 40px; border-radius: 50%; background: var(--warn); color: #3a2400; font-weight: 900; font-size: 22px; box-shadow: 0 0 0 3px rgba(0,0,0,.25); }
#vd-toggle { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 790; display: flex; background: rgba(28,38,52,.9); border-radius: 8px 8px 0 0; overflow: hidden; }
#vd-toggle button { width: 42px; height: 28px; font-size: 18px; line-height: 28px; }
#vd-toggle button + button { border-left: 1px solid var(--line); }
#disclaimer { position: absolute; left: 50%; transform: translateX(-50%); bottom: 32px; font-size: 10px; color: rgba(255,255,255,.55); pointer-events: none; z-index: 780; white-space: nowrap; text-shadow: 0 1px 2px #000; }

.map-card { position: absolute; z-index: 800; background: var(--panel); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#winds-panel { left: 10px; top: 50%; transform: translateY(-50%); width: 108px; }
#imagery-panel { left: 10px; top: 175px; width: 220px; }
#expired-panel { right: 62px; top: 40%; width: 240px; }
.map-card h4 { margin: 0 0 6px; font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.fl-sel button { display: block; width: 100%; padding: 7px 0; margin: 4px 0; border-radius: 6px; background: #3a4b60; font-weight: 600; font-size: 12px; }
.fl-sel button.on { background: #fff; color: var(--accent); }

#vd { height: var(--vd-h); min-height: 230px; max-height: 360px; display: flex; flex-direction: column; background: #2c3a4d; border-top: 1px solid #0d1520; flex-shrink: 0; padding-bottom: var(--safe-b); }
#vd-plot { flex: 1; position: relative; min-height: 0; } #vd-plot canvas, #tl canvas { width: 100%; height: 100%; display: block; touch-action: none; }
#tl { height: 46px; flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.06); }
body.vd-closed #vd { height: auto; min-height: 0; } body.vd-closed #vd-plot { display: none; }
body.vd-big { --vd-h: 46vh; } body.vd-big #vd { max-height: 520px; }
body.timeview #vd-plot { display: none; } body.timeview #vd { height: auto; min-height: 0; }
body.stations #vd { display: none; } body.stations #vd-toggle { display: none; }

#stations-tabs { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 790; }
.seg { display: inline-flex; background: #17212d; border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { padding: 7px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; color: #cfd8e3; white-space: nowrap; position: relative; }
.seg button.on { background: #fff; color: #1b2532; }
.seg button .dot-mod { position: absolute; top: 3px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.seg.floating { box-shadow: 0 2px 10px rgba(0,0,0,.4); }

#edit-bar { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); z-index: 900; background: var(--panel); border-radius: 10px; padding: 6px 8px 6px 14px; display: flex; align-items: center; gap: 10px; font-weight: 600; }
#edit-bar button { width: 40px; height: 34px; border-radius: 8px; font-size: 18px; } #edit-bar .ok { background: var(--ok); } #edit-bar .ko { background: var(--bad); }

/* Leaflet */
.leaflet-container { font: inherit; background: transparent; }
.leaflet-control-attribution { background: rgba(0,0,0,.45) !important; color: #ccd !important; font-size: 9px !important; margin-left: 70px !important; }
.leaflet-control-attribution a { color: #9cf !important; }
.wpt-tip { background: #111b26; color: #fff; border: 0; font-size: 11px; padding: 3px 6px; } .wpt-tip::before { display: none; }
.ac-icon { pointer-events: none; } .ac-icon div { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.etops-pt { background: rgba(20,28,38,.85); color: #fff; border: 1px solid #ff3b30; border-radius: 4px; padding: 1px 5px; font-size: 10.5px; white-space: nowrap; transform: translate(8px, -10px); }
.apt-wrap { background: none; border: 0; }
.apt { position: relative; width: 16px; height: 16px; }
.apt .dot { position: absolute; inset: 2px; border-radius: 50%; border: 2px solid #9ec9ff; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.apt.k-dep .dot, .apt.k-arr .dot, .apt.k-altn .dot, .apt.k-etops .dot { border-color: #2f7bff; inset: 0; border-width: 3px; }
.apt.k-user .dot { border-color: #c38bff; }
.apt .lbl { position: absolute; left: 18px; top: -2px; background: #cfe0f5; color: #12355f; font: 700 11px/1 system-ui; padding: 3px 4px; border-radius: 3px; border: 1px solid #5d7fa6; white-space: nowrap; }
.apt.k-enroute .lbl, .apt.k-user .lbl { background: #e7edf4; color: #2b3f57; font-weight: 600; }
.apt.fav .lbl::after { content: " ★"; color: #e0a800; }
.apt .sxs { position: absolute; right: 13px; top: -12px; display: flex; gap: 1px; }
.apt .sx { font-style: normal; width: 14px; height: 14px; display: block; filter: drop-shadow(0 0 1px rgba(0,0,0,.7)); } .apt .sx svg { width: 14px; height: 14px; display: block; }
.sx.sn { color: #9fdcff; } .sx.ts { color: #ffd60a; } .sx.wd { color: #ff6b6b; } .sx.du { color: #e0a96d; } .sx.nt { color: #1b1b1b; background: var(--warn) !important; font-weight: 900; }
.apt-cluster span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #bcd6f5; color: #12355f; font: 700 11px system-ui; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.edit-wpt span { position: absolute; inset: 3px; background: #fff; border: 2px solid #1f6fe0; transform: rotate(45deg); }
.edit-wpt.moved span { background: #ffd60a; } .edit-wpt.end span { background: #1f6fe0; }
.edit-wpt b { position: absolute; left: 20px; top: -2px; background: rgba(0,0,0,.65); color: #fff; font-size: 10px; padding: 1px 4px; border-radius: 3px; white-space: nowrap; }
.tool-label { background: rgba(15,22,30,.88); color: #fff; border-radius: 5px; padding: 3px 6px; font: 600 11px system-ui; white-space: nowrap; border: 1px solid rgba(255,255,255,.35); transform: translate(-50%, -130%); display: inline-block; }
.tool-label.big { font-size: 12px; }
.tool-wrap { background: none; border: 0; }

/* Barre d'outils */
#tools-bar { position: absolute; left: 70px; bottom: 16px; z-index: 795; display: flex; gap: 8px; background: var(--panel); border-radius: 26px; padding: 4px; }
#tools-bar button { width: 44px; height: 44px; border-radius: 50%; background: #3a4b60; display: grid; place-items: center; }
#tools-bar button svg { width: 24px; height: 24px; fill: #fff; stroke: #fff; }
#tools-bar button.has { box-shadow: inset 0 0 0 2px #ffd60a; } #tools-bar button.on { background: #fff; } #tools-bar button.on svg { fill: var(--accent); stroke: var(--accent); }
#tool-editor { left: 70px; bottom: 74px; width: 300px; }
#tool-editor .te-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } #tool-editor .te-head b { flex: 1; }
#tool-editor .te-head button { width: 34px; height: 30px; border-radius: 7px; background: #3a4b60; }
#tool-editor p { margin: 4px 0 8px; color: var(--muted); font-size: 12px; }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .row > label { flex: 1; color: #dfe6ee; }
.row input[type=number] { width: 80px; }
.colors button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; } .colors button.on { border-color: #fff; }
#draw-host { position: absolute; inset: 0; z-index: 650; pointer-events: none; } #draw-host canvas { width: 100%; height: 100%; }
#draw-host.active { pointer-events: auto; touch-action: none; }

/* Feuilles / panneaux */
#sheet-host { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.sheet-back { position: absolute; inset: 0; background: rgba(0,0,0,.35); pointer-events: auto; }
.sheet { position: absolute; pointer-events: auto; background: var(--sheet); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.55); display: flex; flex-direction: column; max-height: calc(100% - 40px); overflow: hidden; animation: pop .16s ease-out; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }
.sheet.center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(640px, 94vw); animation: none; }
.sheet.top { left: 50%; top: 70px; transform: translateX(-50%); width: min(560px, 94vw); animation: none; }
.sheet.left { left: 10px; top: 10px; bottom: 10px; width: min(460px, 92vw); max-height: none; }
.sheet.right { right: 88px; top: 10px; bottom: 10px; width: min(460px, 92vw); max-height: none; }
.sheet.bottom { left: 50%; bottom: 12px; transform: translateX(-50%); width: min(780px, 96vw); animation: none; }
.sheet.wide { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1040px, 96vw); height: min(640px, 92vh); animation: none; }
.sh-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--sheet2); }
.sh-head h3 { margin: 0; font-size: 16px; flex: 1; } .sh-head .x { width: 32px; height: 32px; border-radius: 50%; background: #3a4b60; font-size: 16px; }
.sh-body { padding: 12px 14px; overflow: auto; -webkit-overflow-scrolling: touch; flex: 1; -webkit-user-select: text; user-select: text; }
.sh-foot { padding: 10px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.btn { padding: 10px 16px; border-radius: 9px; background: #3a4b60; font-weight: 600; } .btn.pri { background: var(--accent); } .btn.ok { background: #1f9d3a; } .btn.bad { background: #b3261e; } .btn.sm { padding: 6px 10px; font-size: 12.5px; } .btn:disabled { opacity: .4; }
.btn.block { width: 100%; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; font-size: 13px; } .kv > div:nth-child(odd) { color: var(--muted); }
.list { display: flex; flex-direction: column; gap: 6px; } .li { background: #2f3f54; border-radius: 9px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; }
.li.sel { outline: 2px solid var(--accent); } .li .grow { flex: 1; min-width: 0; } .li .t1 { font-weight: 700; } .li .t2 { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .cond { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #9ec9ff; flex-shrink: 0; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; } table.grid th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--line); } table.grid td { padding: 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.flt-head { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: end; gap: 8px; margin-bottom: 10px; }
.big-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 12px; background: #3a4b60; font-size: 16px; font-weight: 600; }
.editbox { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .editbox label { font-weight: 700; display: block; text-align: center; margin-bottom: 4px; } .editbox input { width: 100%; text-align: center; font-size: 22px; font-weight: 600; background: #0f1720; }
pre.raw { white-space: pre-wrap; word-break: break-word; font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; background: #17212d; border-radius: 8px; padding: 10px; margin: 6px 0 12px; }
.taf-hot { background: rgba(255,214,10,.25); color: #fff3b0; }
.notam { background: #17212d; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font: 12px/1.4 ui-monospace, Menlo, monospace; white-space: pre-wrap; } .notam.imp { border-left: 4px solid var(--warn); background: #2c2414; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; background: #3a4b60; } .tag.metar { color: #fff; }
.st-ok { color: var(--ok); } .st-warn { color: var(--warn); } .st-bad { color: var(--bad); }
.toggle { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; vertical-align: middle; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle span { position: absolute; inset: 0; border-radius: 14px; background: #4a5b70; transition: .15s; } .toggle span::after { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .15s; } .toggle input:checked + span { background: var(--c, var(--ok)); } .toggle input:checked + span::after { left: 23px; }
.frow { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid rgba(255,255,255,.06); } .frow > label { flex: 1; } .frow .eye { width: 26px; opacity: .8; }
.fsec { margin: 14px 0 4px; font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.range2 { position: relative; height: 40px; margin: 10px 4px; } .range2 input { position: absolute; width: 100%; top: 10px; pointer-events: none; -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; } .range2 input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); } .range2 input::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); } .range2 .track { position: absolute; left: 0; right: 0; top: 22px; height: 4px; background: #4a5b70; border-radius: 2px; } .range2 .fill { position: absolute; top: 22px; height: 4px; background: var(--accent); }
.legend-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; } .lg-card { background: #2f3f54; border-radius: 10px; padding: 10px; min-width: 170px; flex-shrink: 0; } .lg-card h5 { margin: 0 0 6px; font-size: 12px; } .lg-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 3px 0; } .sw { width: 22px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.wxinfo .kv { grid-template-columns: 130px 1fr; } .wxinfo .nav { display: flex; align-items: center; gap: 8px; }
.ctx-menu { position: fixed; z-index: 3000; background: #1b2532; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.6); padding: 4px; min-width: 170px; } .ctx-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 7px; } .ctx-menu button:active, .ctx-menu button:hover { background: #2f3f54; }
.ap-split { display: grid; grid-template-columns: 1fr 1fr; height: 100%; } .ap-split > div { overflow: auto; } .ap-chart { background: #d8dde3; position: relative; } .ap-chart canvas { width: 100%; height: 100%; display: block; }
.ap-panel .sh-body { padding: 0; } .ap-tabs { padding: 10px 14px 0; }
.ap-info { padding: 12px 14px; }
.login { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; background: radial-gradient(1200px 600px at 30% 20%, #23466d, #0f1722); }
.login .card { width: min(440px, 92vw); background: rgba(28,38,52,.92); border-radius: 18px; padding: 26px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.login h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: .08em; } .login h1 small { font-size: 13px; color: var(--muted); letter-spacing: .3em; margin-left: 6px; }
.login label { display: block; margin: 14px 0 6px; font-weight: 600; } .login input, .login select { width: 100%; }
.login .seg { width: 100%; } .login .seg button { flex: 1; }
.notice { background: #2c3b4f; border-left: 3px solid var(--accent); padding: 8px 10px; border-radius: 6px; font-size: 12.5px; color: #d6e2ef; margin: 10px 0; }
#toasts { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 6000; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: #1b2532; border: 1px solid #3a4b60; padding: 9px 14px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.5); font-size: 13px; max-width: 80vw; transition: opacity .35s; } .toast.ok { border-color: var(--ok); } .toast.warn { border-color: var(--warn); } .toast.err { border-color: var(--bad); } .toast.out { opacity: 0; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: sp .8s linear infinite; vertical-align: -2px; } @keyframes sp { to { transform: rotate(360deg); } }
.ofp-pre { font: 11.5px/1.35 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow: auto; background: #f4f1e8; color: #111; padding: 14px; border-radius: 8px; }

/* Écrans étroits (Split View iPad / iPhone) : rail en bas */
@media (max-width: 760px) {
  #app { flex-direction: column; }
  #rail { width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 6px 6px calc(6px + var(--safe-b)); order: 2; }
  .rb { width: 62px; min-height: 52px; } .brand { display: none; }
  #top-btns { gap: 12px; top: auto; bottom: 70px; } .round-btn { width: 44px; height: 44px; }
  .info-panel { font-size: 11px; min-width: 0; padding: 7px 9px 16px; } #info-right { display: none; }
  .sheet.right, .sheet.left { right: 6px; left: 6px; width: auto; }
  #vd { min-height: 180px; } #flight-tag { right: 64px; }
  #disclaimer { display: none; }
}
.row > label.toggle, .frow > label.toggle, label.toggle { flex: 0 0 48px; width: 48px; }

.apt .atis-b { display: inline-block; margin-left: 4px; background: #0a84ff; color: #fff; border-radius: 3px; padding: 0 3px; font-size: 10px; line-height: 13px; }
.apt .lbl.only { background: none; border: 0; padding: 0; }
.ac-icon.live div { filter: drop-shadow(0 0 4px rgba(255,214,10,.9)); }
.atis-box { background: #12243a; border-left: 4px solid #0a84ff; border-radius: 8px; padding: 8px 10px; margin: 6px 0 12px; }
.atis-box .t { font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; margin-top: 4px; }
.tag.atis { background: #0a84ff; color: #fff; }
/* Fenêtre d'information d'un objet météo (carte à gauche, style EFB) */
.wx-card { position: absolute; left: 10px; top: 50%; transform: translateY(-40%); z-index: 850; width: min(420px, 60%); background: rgba(22,30,42,.94); border-radius: 10px; padding: 14px 16px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.5); font-size: 13px; }
.wx-card table { border-collapse: collapse; width: calc(100% - 30px); }
.wx-card th { text-align: left; font-weight: 700; color: #fff; padding: 2px 14px 2px 0; white-space: nowrap; vertical-align: top; }
.wx-card td { color: #fff; padding: 2px 0; font-variant-numeric: tabular-nums; }
.wx-card .wx-x { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.85); color: #222; font-size: 13px; font-weight: 700; }
.wx-card .wx-raw { white-space: pre-wrap; font: 11.5px/1.4 ui-monospace, Menlo, monospace; color: #cfd8e3; background: rgba(0,0,0,.25); border-radius: 6px; padding: 6px 8px; margin: 8px 0 0; max-height: 120px; overflow: auto; }
.wx-card .wx-dots { display: flex; gap: 7px; justify-content: center; margin-top: 10px; }
.wx-card .wx-dots button { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.wx-card .wx-dots button.on { background: #fff; }
.sw-ico { width: 18px; height: 18px; flex-shrink: 0; } .sw-ico svg { width: 18px; height: 18px; display: block; }

#vd-info { position: absolute; right: 8px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75); background: rgba(20,26,34,.6); color: #fff; font: 700 13px/20px Georgia, serif; font-style: italic; text-align: center; padding: 0; z-index: 3; }
/* iPad mini / petits écrans en paysage : rail compact pour garder les 11 boutons visibles */
@media (max-height: 800px) and (min-width: 721px) {
  #rail { gap: 4px; padding-top: 6px; }
  .rb { min-height: 51px; } .rb svg { width: 26px; height: 26px; } .rb.status svg { width: 36px; height: 28px; }
  .brand { display: none; }
}