/* ============================================
   WINGMAN EFB — Modern Dark Cockpit Theme
   Design System v2.0
   ============================================ */

/* --- DESIGN TOKENS --- */
:root {
    /* Backgrounds — layered depth system */
    --bg-base: #0f1117;
    --bg-surface: #181b23;
    --bg-elevated: #1e222d;
    --bg-input: #141720;

    /* Borders & Dividers */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.09);
    --border-focus: rgba(56, 139, 253, 0.5);

    /* Text hierarchy */
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #545d68;
    --text-inverse: #0f1117;

    /* Accent palette — aviation-inspired blue */
    --accent: #388bfd;
    --accent-hover: #58a6ff;
    --accent-subtle: rgba(56, 139, 253, 0.12);
    --accent-glow: rgba(56, 139, 253, 0.25);

    /* Secondary accent — amber for alerts/active tools */
    --amber: #f0883e;
    --amber-subtle: rgba(240, 136, 62, 0.12);
    --amber-glow: rgba(240, 136, 62, 0.3);

    /* Status */
    --success: #3fb950;
    --danger: #f85149;

    /* Shadows — soft elevation system */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-glow-blue: 0 0 20px rgba(56, 139, 253, 0.15);
    --shadow-glow-amber: 0 0 20px rgba(240, 136, 62, 0.15);

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-normal: 250ms var(--ease-out);
    --transition-slow: 400ms var(--ease-out);

    /* Sidebar */
    --sidebar-width: 260px;

    /* Typography aliases */
    --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* --- FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* ── iOS PWA : désactive le rubber-band scroll global ── */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

body {
    display: flex;
    /* ── Neutralise le tap flash bleu/gris sur iOS ── */
    -webkit-tap-highlight-color: transparent;
}

/* Tous les boutons et liens : feedback tap immédiat sans zoom */
button, a, [role="button"], .tb-seg-btn, .tb-ico-btn, .action-btn,
.bottom-nav-btn, .map-layer-btn, .airspace-ctrl-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* Texte non sélectionnable sur toute l'UI (sauf inputs) */
header, footer, nav, .bottom-bar, .top-bar, .sidebar,
.modal-header, .panel-header, .tb-flight-info {
    user-select: none;
    -webkit-user-select: none;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Offline banner ── */
.offline-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 16px;
    padding-top: calc(7px + env(safe-area-inset-top, 0px));
    background: rgba(240, 136, 62, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    pointer-events: none;
    animation: bannerSlideDown 0.3s var(--ease-out);
}
.offline-banner .offline-icon { font-size: 15px; }
@keyframes bannerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ============================================
   TOP BAR
   ============================================ */
.top-bar {
    min-height: 52px;
    background: #161b22;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 10px;
    z-index: 1200;
    flex-shrink: 0;
    box-sizing: content-box;
    padding-top: env(safe-area-inset-top, 0px);
}

/* ── Vertical divider (réutilisé dans toute la barre) ── */
.tb-vdiv {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.tb-vdiv--dim {
    height: 18px;
    background: rgba(255,255,255,0.05);
}

/* ── Gauche ── */
.tb-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* .tb-logo conservé pour compatibilité éventuelle mais non utilisé */
.tb-logo {
    height: 24px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.80;
}

.tb-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 10px 4px 4px;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.tb-profile:hover { background: rgba(255,255,255,0.05); }

.tb-avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 11px !important;
}

.tb-pilot-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* ── Centre — bande de données ── */
.tb-flight-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    min-width: 0;
}

.tb-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.tb-info-label {
    font-family: var(--font-ui);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
    line-height: 1;
}

.tb-info-value {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.03em;
    line-height: 1;
}

/* UTC en accent — horloge la plus importante */
.tb-utc {
    color: var(--accent);
    font-weight: 600;
}

/* ── Groupe chrono (label au-dessus, valeur+boutons inline) ── */
.tb-chrono-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.tb-chrono-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Micro-boutons ▶ ↺ inline avec la valeur */
.tb-ico-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    transition: color var(--transition-fast), background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    line-height: 1;
}
.tb-ico-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.06);
}
.tb-ico-btn--active,
.tb-ico-btn.utc-btn-active {
    color: var(--amber) !important;
}
.tb-ico-btn--sm {
    font-size: 10px;
    width: 18px;
    height: 18px;
}

/* ── Droite ── */
.tb-right {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* Segmented control OFF · IRL · SIM */
.tb-seg {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 7px;
    padding: 2px;
    gap: 1px;
    flex-shrink: 0;
}

.tb-seg-btn {
    background: transparent;
    border: none;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 4px 9px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    white-space: nowrap;
}
.tb-seg-btn:hover {
    color: var(--text-secondary);
}
.tb-seg-btn--active {
    background: rgba(56,139,253,0.15);
    color: #58a6ff;
}
/* Variante active IRL/SIM => amber quand position active */
.tb-seg-btn--live {
    background: rgba(240,136,62,0.15);
    color: var(--amber);
}

/* Action buttons (icônes) */
.tb-action-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 0;
    transition: color var(--transition-fast), background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.tb-action-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
}
.tb-action-btn.active,
.tb-action-btn:active {
    color: var(--accent);
    background: var(--accent-subtle);
}

/* ── Tracking infos (HDG, GS, ALT dans la top-bar) ── */
.tracking-info {
    display: none;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
    flex-shrink: 0;
}
.tk-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.tk-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    line-height: 1;
}
.tk-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}
.tk-sep {
    color: var(--text-muted);
    font-size: 9px;
}

/* ── Plane marker icon (pas de fond blanc Leaflet) ── */
.plane-icon {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================
   BOTTOM TAB BAR — ForeFlight-style
   ============================================ */
.bottom-tabs {
    display: flex;
    align-items: stretch;
    background: #161b22;
    border-top: 1px solid rgba(255,255,255,0.06);
    z-index: 1200;
    flex-shrink: 0;
    min-height: 62px;
    order: 99;
    box-sizing: content-box;
    /* Safe area home bar — le fond s'étend sous la barre iOS */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    color: #484f58;
    cursor: pointer;
    padding: 8px 2px 6px;
    min-width: 0;
    transition: color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Inter', sans-serif;
}

.tab-btn:hover {
    color: #8b949e;
}

.tab-btn.active {
    color: #58a6ff;
    border-top-color: #58a6ff;
}

.tab-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.tab-icon {
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    line-height: 1;
    display: block;
}

/* ============================================
   SIDEBAR — legacy, now hidden
   ============================================ */
.app-sidebar { display: none !important; }
.portrait-header { display: none !important; }
.sidebar-only { display: none !important; }
.brand { display: none; }
.version-tag { display: none; }

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
html, body {
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    /* PWA full-bleed : le contenu s'étend sous la home bar iOS */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.app-content {
    flex: 1;
    height: 0; /* flex trick */
    min-height: 0;
    position: relative;
    background: var(--bg-base);
    overflow: hidden;
}

/* Legacy alias */
.app-main { display: contents; }

.content-view {
    display: none;
    height: 100%;
    width: 100%;
    overflow: auto;
    animation: viewFadeIn 0.4s var(--ease-out);
}

@keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   MAP VIEW
   ============================================ */
#map {
    height: 100% !important;
    width: 100%;
    background: var(--bg-base);
    /* GPU compositing — défilement fluide sur iPad */
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Tiles Leaflet : accélération GPU pour le pan/zoom */
.leaflet-tile-container {
    will-change: transform;
}
.leaflet-tile {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Layers pane : compositing isolé */
.leaflet-map-pane,
.leaflet-overlay-pane,
.leaflet-marker-pane,
.leaflet-shadow-pane {
    will-change: transform;
}

/* Désactive le menu contextuel (long press) sur la carte */
#map { -webkit-touch-callout: none; }

/* ── Leaflet Zoom ── */
.leaflet-control-zoom {
    border: none !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    margin-top: 12px !important;
    margin-left: 12px !important;
}

.leaflet-control-zoom a {
    background: rgba(22,27,34,0.92) !important;
    color: #c9d1d9 !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.15s !important;
}

.leaflet-control-zoom a:hover {
    background: rgba(56,139,253,0.18) !important;
    color: #58a6ff !important;
}

.leaflet-bar a {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.leaflet-bar a:last-child {
    border-bottom: none !important;
}

/* ── Leaflet Layer Switcher ── */
.leaflet-control-layers {
    background: rgba(22,27,34,0.94) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    color: #c9d1d9 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    padding: 8px 12px 8px 8px !important;
    margin-top: 12px !important;
    margin-right: 12px !important;
}

.leaflet-control-layers-toggle {
    width: 36px !important;
    height: 36px !important;
    background-color: rgba(22,27,34,0.92) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.leaflet-control-layers-expanded {
    padding: 10px 14px !important;
}

.leaflet-control-layers label {
    color: #c9d1d9 !important;
    margin-bottom: 4px;
    display: flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 4px;
    transition: background 0.15s;
}

.leaflet-control-layers label:hover {
    background: rgba(255,255,255,0.04);
    color: #f0f6fc !important;
}

.leaflet-control-layers-separator {
    border-top-color: rgba(255,255,255,0.08) !important;
    margin: 6px 0 !important;
}

/* ── Airspace toggle button ── */
.airspace-ctrl-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(22,27,34,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #8b949e;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 7px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: all 0.2s;
    margin-bottom: 8px !important;
}

.airspace-ctrl-btn:hover {
    background: rgba(30,36,48,0.95);
    color: #c9d1d9;
}

.airspace-ctrl-btn.active {
    background: rgba(56,139,253,0.14);
    border-color: rgba(56,139,253,0.5);
    color: #58a6ff;
}

/* ── Map layer buttons (Obstacles, Rép. VFR) — même style qu'airspace ── */
.map-layer-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(22,27,34,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #8b949e;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 7px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: all 0.2s;
    margin-bottom: 8px !important;
}
.map-layer-btn:hover {
    background: rgba(30,36,48,0.95);
    color: #c9d1d9;
}
.map-layer-btn.active {
    background: rgba(56,139,253,0.14);
    border-color: rgba(56,139,253,0.5);
    color: #58a6ff;
}
/* Obstacles actif => teinte ambre */
#obs-ctrl-btn.active {
    background: rgba(240,136,62,0.14);
    border-color: rgba(240,136,62,0.5);
    color: #f0883e;
}

/* Icônes SVG des marqueurs — pas de fond Leaflet par défaut */
.obs-icon,
.rp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Label permanent des points de report VFR */
.rp-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #8b949e;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 !important;
    white-space: nowrap;
}
.rp-label::before { display: none !important; }

/* Label hauteur permanent des obstacles (ex: "984'") */
.obs-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #f0883e;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
}
.obs-label::before { display: none !important; }
/* Hauteur ≥ ~984ft → rouge */
.obs-high + .obs-label,
.leaflet-tooltip.obs-label.obs-label-high {
    color: #e84040;
}

/* ── Leaflet attribution — discret ── */
.leaflet-control-attribution {
    background: rgba(22,27,34,0.7) !important;
    color: #484f58 !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 4px 0 0 0 !important;
}

.leaflet-control-attribution a {
    color: #58a6ff !important;
}

/* ============================================
   ROUTE BUILDER — Waypoints, segments, labels
   ============================================ */

/* Marqueur waypoint numéroté */
.route-wp {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 2.5px solid #0d1117;
    color: #0d1117;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;

    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    user-select: none;
}

/* WP passé — coche verte */
.route-wp-passed {
    background: #3fb950 !important;
    border-color: #2ea043 !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    opacity: 0.75;
}

/* Conteneur Leaflet du label (iconSize 1×1 → aucun décalage) */
.route-lbl-wrap {
    overflow: visible;
}

/* Label distance + cap le long du segment */
.route-lbl {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(13, 17, 23, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e6edf3;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.03em;
}

/* Bouton route actif */
#btn-route.route-active {
    background: var(--accent-subtle);
    border-color: transparent;
    color: var(--accent-hover);
    box-shadow: var(--shadow-glow-blue);
}

#btn-route.route-active::before {
    background: var(--accent);
    transform: translateY(-50%) scaleY(1);
}

.route-btn-info {
    font-size: 0.68em;
    opacity: 0.7;
    display: block;
    margin-top: 2px;
    font-weight: 400;
}

/* Ripple de long press */
.lp-ripple {
    position: absolute;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    border-radius: 50%;
    border: 2.5px solid var(--amber);
    background: rgba(240, 136, 62, 0.12);
    pointer-events: none;
    z-index: 800;
    animation: lpFill 0.5s ease-out forwards;
}

@keyframes lpFill {
    0%   { transform: scale(0.15); opacity: 1; }
    100% { transform: scale(1);    opacity: 0.6; }
}

/* Map floating notification */
.map-notification {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 1000;
    padding: 10px 20px;
    border-radius: var(--radius-lg);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    max-width: 480px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-lg);
}

.map-notif-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.map-notif-info {
    background: rgba(30, 34, 45, 0.92);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}

.map-notif-warning {
    background: rgba(240, 136, 62, 0.15);
    border: 1px solid var(--amber);
    color: var(--amber);
}

.map-notif-error {
    background: rgba(248, 81, 73, 0.15);
    border: 1px solid var(--danger);
    color: var(--danger);
}

/* Leaflet layer control — overlay section */
.leaflet-control-layers-overlays {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
}

/* Map popup overrides */
.leaflet-popup-content-wrapper {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text-primary) !important;
}

.leaflet-popup-tip {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
}

.leaflet-popup-close-button {
    color: var(--text-secondary) !important;
}

.leaflet-popup-close-button:hover {
    color: var(--text-primary) !important;
}

/* ============================================
   CARD SYSTEM
   ============================================ */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 20px;
    margin-bottom: 12px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.card:hover {
    border-color: var(--border-default);
    box-shadow: var(--shadow-md);
}

.card-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.web-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 11px 14px;
    margin-bottom: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    border-radius: var(--radius-md);
    outline: none;
    transition: all var(--transition-fast);
}

.web-input::placeholder {
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.web-input:hover {
    border-color: var(--border-default);
}

.web-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle), var(--shadow-glow-blue);
    background: var(--bg-base);
}

/* Select dropdown */
select.web-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

select.web-input option {
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 8px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-calc {
    background: var(--accent);
    color: white;
    border: none;
    padding: 12px 20px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    width: 100%;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.btn-calc::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.btn-calc:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-glow-blue), var(--shadow-md);
    transform: translateY(-1px);
}

.btn-calc:hover::after {
    opacity: 1;
}

.btn-calc:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* ============================================
   RESULT TEXT
   ============================================ */
.res-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    color: var(--accent-hover);
    padding: 4px 0;
    letter-spacing: 0.02em;
}

/* ============================================
   WEIGHT & BALANCE VIEW
   ============================================ */
.wb-container {
    display: flex;
    height: 100%;
    padding: 24px;
    gap: 24px;
}

.inputs-panel {
    width: 360px;
    flex-shrink: 0;
}

.graph-frame {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    min-height: 0;
}

.graph-frame img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* ============================================
   W&B — Champs de chargement
   ============================================ */
.wb-field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.wb-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wb-field-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wb-number-input {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    letter-spacing: 0.02em;
}

.wb-unit {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 22px;
    text-align: left;
}

.wb-field-hint {
    font-size: 11px;
    color: var(--text-subtle, #545d68);
    padding-left: 2px;
}

/* ============================================
   VAC VIEW — Nouvelle disposition
   ============================================ */
.vac-layout {
    display: flex;
    height: 100%;
    padding: 20px;
    gap: 20px;
}

/* ── Sidebar gauche ── */
.vac-sidebar {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vac-search-group {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.vac-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.vac-go-btn {
    flex-shrink: 0;
    width: 56px;
    margin: 0;
    padding: 11px 8px;
}

/* Info card */
.vac-info-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: border-color var(--transition-normal);
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vac-info-card:has(#vac-info-content:not([style*="none"])) {
    border-color: var(--accent-glow);
    background: linear-gradient(135deg, var(--bg-surface), rgba(56, 139, 253, 0.04));
}

.vac-info-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.vac-placeholder-icon {
    font-size: 1.8rem;
    opacity: 0.35;
}

.vac-placeholder-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.vac-info-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vac-icao-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent-hover);
    letter-spacing: 0.05em;
    line-height: 1;
}

.vac-airport-name {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 2px;
}

/* Action météo */
.vac-action-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    width: 100%;
}

.vac-action-btn:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent-hover);
    transform: translateX(2px);
}

/* Hint clavier */
.vac-kbd-hint {
    font-size: 0.68rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 8px;
}

.vac-kbd {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    padding: 2px 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--text-secondary);
}

/* ── Viewer principal ── */
.vac-viewer {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* Barre de navigation VAC */
.vac-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
    padding: 10px 16px;
    flex-shrink: 0;
    gap: 12px;
}

.vac-page-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    flex: 1;
    text-align: center;
}

.nav-btn-small {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 7px 16px;
    cursor: pointer;
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.nav-btn-small:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent-hover);
}

.nav-btn-small:active {
    transform: scale(0.96);
}

/* Image wrapper */
.vac-img-wrapper {
    flex: 1;
    overflow: auto;
    background: #111418;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12px;
    position: relative;
}

.vac-img-wrapper img {
    border-radius: var(--radius-sm);
    max-width: 100%;
    height: auto;
    display: block;
}

.vac-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    padding: 40px;
}

.vac-loader-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(17, 20, 24, 0.8);
    backdrop-filter: blur(4px);
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .vac-layout {
        flex-direction: column;
        padding: 12px;
        gap: 12px;
    }

    .vac-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .vac-search-group {
        flex: 1;
        min-width: 220px;
    }

    .vac-info-card {
        flex: 1;
        min-width: 180px;
    }

    .vac-action-btn, .vac-kbd-hint {
        width: auto;
    }
}

/* ── Compat ancien code (keep .stealth-split functional) ── */
.stealth-split {
    display: flex;
    height: 100%;
    padding: 24px;
    gap: 24px;
}

.side-panel {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.side-panel .card { margin-bottom: 0; }

.viewer-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
}

.pdf-nav-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.vac-img-container {
    flex: 1;
    overflow: auto;
    background: var(--bg-base);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 8px;
}

.vac-img-container img { border-radius: var(--radius-sm); }

/* ============================================
   METEO VIEW — Dashboard météo
   ============================================ */
.meteo-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.meteo-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px 12px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.meteo-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-left: 4px;
}

.meteo-dashboard {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Header aéroport */
.meteo-header {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
}

.meteo-airport-info {
    flex: 1;
}

.meteo-icao {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent-hover);
    letter-spacing: 0.04em;
    line-height: 1;
}

.meteo-name {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.meteo-obs-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.meteo-fltcat {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid;
    flex-shrink: 0;
}

/* Bande de résumé */
.meteo-summary-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.meteo-summary-item {
    flex: 1;
    min-width: 100px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.meteo-sum-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.meteo-sum-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Instruments */
.meteo-instruments {
    display: flex;
    gap: 14px;
    align-items: stretch;
}

.meteo-instrument-card {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    transition: border-color var(--transition-normal);
}

.meteo-instrument-card:hover {
    border-color: var(--border-default);
}

.meteo-inst-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    align-self: flex-start;
}

.meteo-inst-sublabel {
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
    text-align: center;
}

.meteo-instrument-card canvas {
    max-width: 100%;
    height: auto;
}

/* METAR brut */
.meteo-raw-card {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}

.meteo-raw-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.meteo-raw-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--accent-hover);
    line-height: 1.7;
    word-break: break-all;
    white-space: pre-wrap;
}

/* TAF */
.meteo-taf-card {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}

/* Loader */
.meteo-loader-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.meteo-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-default);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Error state */
.meteo-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* Responsive meteo */
@media (max-width: 900px) {
    .meteo-instruments {
        flex-direction: column;
    }
    .meteo-summary-row {
        gap: 8px;
    }
    .meteo-summary-item {
        min-width: calc(50% - 4px);
    }
}

/* ============================================
   DOSSIER DE VOL VIEW (replaces old #view-log placeholder)
   ============================================ */
.dossier-container {
    height: 100%;
    overflow-y: auto;
    padding: 32px;
}

.dossier-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 16px;
}

.dossier-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.dossier-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    max-width: 460px;
}

.dossier-wip-badge {
    flex-shrink: 0;
    background: var(--amber-subtle);
    border: 1px solid var(--amber);
    color: var(--amber);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
    margin-top: 4px;
}

.dossier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.dossier-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.dossier-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(56,139,253,0.03), transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.dossier-card:hover {
    border-color: var(--border-default);
    box-shadow: var(--shadow-md);
}

.dossier-card:hover::after {
    opacity: 1;
}

.dossier-card-icon {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 4px;
}

.dossier-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.dossier-card-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.55;
    flex: 1;
}

.dossier-card-tag {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    padding: 3px 10px;
    border-radius: 20px;
    width: fit-content;
}

@media (max-width: 900px) {
    .dossier-container { padding: 16px; }
    .dossier-header { flex-direction: column; gap: 10px; }
    .dossier-grid { grid-template-columns: 1fr; }
}

/* ============================================
   MAP POPUP BUTTONS (inline styles override)
   ============================================ */
.popup-btn {
    width: 100%;
    cursor: pointer;
    border: none;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: all var(--transition-fast);
    text-align: center;
}

.popup-btn-primary {
    background: var(--accent);
    color: white;
}

.popup-btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-glow-blue);
}

.popup-btn-secondary {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    margin-top: 6px;
}

.popup-btn-secondary:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent-hover);
}

/* ============================================
   RESPONSIVE — MOBILE & TABLET
   ============================================ */
@media (max-width: 900px) {
    :root {
        --sidebar-width: 100%;
    }

    body { flex-direction: column; }

    .app-sidebar {
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        padding: 8px 12px;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        overflow-x: auto;
        gap: 4px;
    }

    .app-sidebar::before { display: none; }

    .brand { display: none; }

    .tool-nav {
        flex-direction: row;
        gap: 4px;
        flex: 1;
    }

    .tool-nav hr { display: none; }

    .nav-btn {
        width: auto;
        font-size: 0.7rem;
        white-space: nowrap;
        padding: 8px 12px;
        border-radius: var(--radius-sm);
    }

    .nav-btn::before { display: none; }

    .nav-btn.active {
        background: var(--accent-subtle);
        border-bottom: 2px solid var(--accent);
    }

    #btn-measure {
        width: auto;
        white-space: nowrap;
        font-size: 0.7rem;
        padding: 8px 12px;
    }

    .version-tag { display: none; }

    .app-main { height: calc(100vh - 56px); }

    .wb-container,
    .stealth-split {
        flex-direction: column;
        padding: 16px;
        gap: 16px;
    }

    .inputs-panel,
    .side-panel {
        width: 100%;
    }

    .graph-frame {
        min-height: 300px;
    }
}

/* ============================================
   RESULT GRID (W&B results)
   ============================================ */
.result-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.result-item {
    text-align: center;
    padding: 8px 4px;
    background: var(--bg-input);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.result-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.result-value {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.status-badge {
    text-align: center;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.status-badge.status-ok {
    background: rgba(63, 185, 80, 0.1);
    color: var(--success);
    border: 1px solid rgba(63, 185, 80, 0.2);
}

.status-badge.status-danger {
    background: rgba(248, 81, 73, 0.1);
    color: var(--danger);
    border: 1px solid rgba(248, 81, 73, 0.2);
}

.input-row {
    display: flex;
    gap: 0;
}

/* ============================================
   TAKEOFF PERFORMANCE VIEW
   ============================================ */
.perf-container {
    display: flex;
    height: 100%;
    padding: 24px;
    gap: 24px;
}

.perf-runway-panel {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.runway-svg-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p {
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 280px;
}

/* Factor breakdown rows */
.factor-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: 10px;
}

.factor-row:last-child {
    border-bottom: none;
}

.factor-total {
    border-top: 1px solid var(--border-default);
    margin-top: 6px;
    padding-top: 10px;
}

.factor-icon {
    font-size: 0.85rem;
    width: 24px;
    text-align: center;
}

.factor-label {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.factor-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    font-weight: 600;
}

/* ============================================
   FLEET MANAGER VIEW
   ============================================ */
.fleet-container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
}

.fleet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.fleet-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.btn-add-aircraft {
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-add-aircraft:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-glow-blue);
    transform: translateY(-1px);
}

.fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.aircraft-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.aircraft-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.aircraft-card:hover {
    border-color: var(--border-default);
    box-shadow: var(--shadow-md);
}

.aircraft-card:hover::before {
    opacity: 1;
}

.ac-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ac-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ac-card-immat {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--accent);
    margin-top: 2px;
}

.ac-card-type {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
}

.ac-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.ac-stat {
    padding: 8px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    text-align: center;
}

.ac-stat-label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 2px;
}

.ac-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ac-card-actions {
    display: flex;
    gap: 8px;
}

.ac-btn-edit,
.ac-btn-delete {
    flex: 1;
    padding: 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.ac-btn-edit {
    background: var(--bg-input);
    color: var(--text-secondary);
}

.ac-btn-edit:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent-hover);
}

.ac-btn-delete {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

.ac-btn-delete:hover {
    background: rgba(248, 81, 73, 0.1);
    border-color: rgba(248, 81, 73, 0.3);
    color: var(--danger);
}

/* ============================================
   MODAL (Aircraft Editor)
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.25s var(--ease-out);
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: modalSlideUp 0.3s var(--ease-out);
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.modal-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: rgba(248, 81, 73, 0.1);
    color: var(--danger);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.form-section {
    margin-bottom: 20px;
}

.form-section:last-child {
    margin-bottom: 0;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
}

.btn-modal-cancel {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.modal-footer .btn-calc {
    width: auto;
    padding: 10px 28px;
}

/* Station row in modal */
.station-row,
.envelope-point-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.station-row .web-input,
.envelope-point-row .web-input {
    margin-bottom: 0;
    flex: 1;
}

.btn-remove-row {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.btn-remove-row:hover {
    color: var(--danger);
    background: rgba(248, 81, 73, 0.1);
}

.btn-add-station {
    background: transparent;
    border: 1px dashed var(--border-default);
    color: var(--text-muted);
    padding: 8px;
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    transition: all var(--transition-fast);
}

.btn-add-station:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

/* Fuel checkbox in station */
.station-fuel-check {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.station-fuel-check input[type="checkbox"] {
    accent-color: var(--accent);
}

/* ============================================
   RESPONSIVE — ADDITIONS
   ============================================ */
@media (max-width: 900px) {
    .perf-container {
        flex-direction: column;
        padding: 16px;
        gap: 16px;
    }

    .perf-runway-panel {
        min-height: 400px;
    }

    .fleet-container {
        padding: 16px;
    }

    .fleet-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .nav-btn {
        font-size: 0.65rem;
        padding: 6px 8px;
    }

    .card { padding: 14px; }

    .wb-container,
    .stealth-split {
        padding: 10px;
        gap: 10px;
    }
}


/* ============================================
   LOG DE NAV — Journal de navigation VFR
   ============================================ */

/* ── Conteneur principal ── */
.navlog-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg-base);
}

/* ── Barre d'en-tête ── */
.navlog-header-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--bg-surface);
    border-bottom: 2px solid var(--border-default);
    flex-shrink: 0;
    flex-wrap: wrap;
    min-height: 52px;
}

.navlog-header-fields {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
}

.navlog-hf-group {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 20px;
    flex-wrap: nowrap;
}

.navlog-atis-group {
    border-left: 1px solid var(--border-subtle);
    padding-left: 16px;
}

.navlog-atis-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-inverse);
    background: var(--accent);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    margin-right: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.navlog-lbl {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.navlog-unit {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: -2px;
}

.navlog-hf-input {
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 4px 7px;
    width: 88px;
    outline: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.navlog-hf-input:focus {
    border-color: var(--accent);
    background: var(--bg-elevated);
}

.navlog-hf-short { width: 60px; }
.navlog-hf-xs    { width: 46px; text-align: center; }

.navlog-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.navlog-import-btn {
    font-size: 12px;
    padding: 6px 14px;
    white-space: nowrap;
}

/* ── Corps ── */
.navlog-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Table de navigation ── */
.navlog-table-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-width: 0;
}

.navlog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 720px;
}

.navlog-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.nl-th {
    padding: 9px 5px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border-bottom: 2px solid var(--accent);
    white-space: nowrap;
    user-select: none;
}

.nl-th-repere,
.nl-th-rnav { text-align: left; padding-left: 8px; }

/* Largeurs de colonnes */
.nl-th-alt    { width: 62px; }
.nl-th-rm     { width: 56px; }
.nl-th-d      { width: 64px; }
.nl-th-tsv    { width: 68px; }
.nl-th-repere { min-width: 130px; }
.nl-th-he     { width: 68px; }
.nl-th-hr     { width: 68px; }
.nl-th-vfr    { width: 72px; }
.nl-th-rnav   { min-width: 100px; }
.nl-th-del    { width: 32px; }

/* ── Lignes ── */
.navlog-row {
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

.navlog-row:hover {
    background: rgba(56, 139, 253, 0.045);
}

/* Ligne de départ — légèrement mis en valeur */
.navlog-row:first-child {
    background: rgba(56, 139, 253, 0.07);
}

.navlog-row:first-child:hover {
    background: rgba(56, 139, 253, 0.12);
}

.navlog-row td {
    padding: 3px 3px;
    vertical-align: middle;
}

/* ── Inputs dans les cellules ── */
.nl-cell {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 3px 5px;
    text-align: center;
    outline: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.nl-cell:focus {
    border-color: var(--accent);
    background: var(--bg-elevated);
}

.nl-cell::placeholder {
    color: var(--text-muted);
    opacity: 0.45;
}

.nl-repere {
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    min-width: 120px;
}

.nl-rnav {
    text-align: left;
    min-width: 90px;
}

/* ── Cellules calculées (Tsv, HE) ── */
.navlog-calc-cell {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-subtle);
    padding: 4px 6px !important;
    white-space: nowrap;
}

/* ── Bouton supprimer ligne ── */
.nl-del-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 3px 5px;
    border-radius: var(--radius-sm);
    line-height: 1;
    display: block;
    margin: 0 auto;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.nl-del-btn:hover {
    color: var(--danger);
    background: rgba(248, 81, 73, 0.10);
}

/* ── Ligne TOTAUX ── */
.navlog-totaux-row {
    background: var(--bg-elevated);
    border-top: 2px solid var(--border-default);
}

.navlog-totaux-lbl {
    padding: 9px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: right;
}

.navlog-totaux-val {
    padding: 9px 6px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--amber);
}

/* ── Panneau droit ── */
.navlog-right-panel {
    width: 295px;
    min-width: 260px;
    border-left: 1px solid var(--border-default);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

.navlog-panel-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 11px 14px 9px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
}

/* ── Gestion carburant ── */
.navlog-fuel-card {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-default);
}

.navlog-fuel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.navlog-fuel-table tr {
    border-bottom: 1px solid var(--border-subtle);
}

.nf-lbl {
    padding: 6px 14px;
    color: var(--text-secondary);
    white-space: nowrap;
    font-size: 12px;
}

.nf-val {
    padding: 4px 12px 4px 4px;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    white-space: nowrap;
    font-size: 12px;
}

/* Ligne calculée (réserve 10 %) */
.nf-calc-row .nf-lbl,
.nf-calc-row .nf-val {
    color: var(--text-muted);
    font-size: 11px;
}

/* TOTAL nécessaire */
.nf-total-row {
    background: var(--bg-elevated);
}

.nf-total-row .nf-lbl { font-weight: 600; color: var(--text-primary); }
.nf-total-row .nf-val { font-weight: 700; color: var(--amber); }

/* TOTAL bloc */
.nf-bloc-row {
    background: rgba(240, 136, 62, 0.08);
}

.nf-bloc-row .nf-lbl { font-weight: 700; color: var(--amber); }
.nf-bloc-row .nf-val { font-weight: 700; color: var(--amber); font-size: 13px; }

.navlog-mini-input {
    width: 54px;
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 2px 5px;
    text-align: right;
    outline: none;
    transition: border-color var(--transition-fast);
}

.navlog-mini-input:focus {
    border-color: var(--accent);
}

/* ── Observations ── */
.navlog-obs-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.navlog-textarea {
    flex: 1;
    background: var(--bg-input);
    border: none;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.65;
    padding: 10px 14px;
    resize: none;
    outline: none;
    min-height: 90px;
    transition: background var(--transition-fast);
}

.navlog-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.navlog-textarea:focus {
    background: var(--bg-elevated);
}

/* ── Mémo bas de page ── */
.navlog-memo-bar {
    display: flex;
    gap: 32px;
    align-items: center;
    padding: 8px 16px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.navlog-memo {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

.navlog-memo-title {
    font-weight: 700;
    color: var(--amber);
    margin-right: 4px;
}


/* ============================================
   SYSTÈME DE PROFILS UTILISATEURS
   ============================================ */

.profile-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 8px 0 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    user-select: none;
    flex-shrink: 0;
}

.profile-badge:hover {
    background: var(--bg-surface);
    border-color: var(--border-default);
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-sub {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 1px;
}

.profile-chevron {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Menu déroulant */
.profile-menu {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: -8px 0 12px;
    box-shadow: var(--shadow-md);
    z-index: 200;
    position: relative;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.profile-menu-item:hover {
    background: var(--bg-surface);
}

.profile-menu-item-active {
    background: var(--accent-subtle);
}

.pmi-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pmi-name {
    flex: 1;
    font-weight: 500;
}

.pmi-check {
    color: var(--accent);
    font-size: 12px;
}

.profile-menu-add {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-subtle);
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.profile-menu-add:hover {
    background: var(--accent-subtle);
}

/* Modal petite taille */
.modal-sm {
    max-width: 380px;
    width: 100%;
}

/* ============================================
   LOG DE NAV — Ajouts v2 (Rc°, MTO, combobox)
   ============================================ */

/* Combobox avion */
.navlog-hf-select {
    appearance: none;
    -webkit-appearance: none;
    width: 160px;
    cursor: pointer;
}

/* Immat read-only */
.navlog-immat-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    white-space: nowrap;
}

/* Colonne Rc° */
.nl-th-rc  { width: 56px; }

.nl-rc {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
    background: transparent;
    padding: 4px 4px !important;
}

/* Rc° corrigé → affiché en amber */
.nl-rc.nl-rc-corr {
    color: var(--amber);
    background: var(--amber-subtle);
    font-weight: 600;
}

/* Cellule MTO / OBS */
.nl-th-mto { text-align: left; padding-left: 8px; min-width: 160px; }

.nl-mto-cell {
    padding: 3px 4px !important;
    vertical-align: top;
}

.nl-mto-top {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
}

.nl-icao-input {
    width: 52px;
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 2px 5px;
    text-align: center;
    text-transform: uppercase;
    outline: none;
    transition: border-color var(--transition-fast);
}

.nl-icao-input:focus {
    border-color: var(--accent);
}

.nl-fetch-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 2px 5px;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

.nl-fetch-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.nl-fetch-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.nl-wind-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

.nl-wind-ok {
    color: var(--success);
    background: rgba(63, 185, 80, 0.12);
}

.nl-wind-err {
    color: var(--danger);
    background: rgba(248, 81, 73, 0.12);
}

/* Champ notes dans la cellule MTO */
.nl-rnav {
    width: 100%;
    min-width: 80px;
}

/* ==========================================
   DOSSIER DE VOL — v2 (sections dynamiques)
   ========================================== */

.dossier-container {
    padding: 20px 24px;
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dossier-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.dossier-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.dossier-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Section bloc ── */
.dossier-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 16px 20px 18px;
    margin-bottom: 16px;
}

.dossier-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.dossier-section-ttl {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dossier-ttl-dim {
    color: var(--text-muted);
}

.dossier-hint-txt {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.dossier-save-route-btn {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: rgba(56,139,253,0.25);
    font-size: 11px;
    padding: 4px 10px;
}

.dossier-save-route-btn:hover {
    background: var(--accent);
    color: #fff;
}

/* ── Message vide ── */
.dossier-empty-msg {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px 12px;
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    line-height: 1.5;
}

.dossier-empty-msg strong {
    color: var(--text-secondary);
}

.dossier-empty-msg em {
    color: var(--text-secondary);
    font-style: normal;
}

/* ── Plans de vol (liste de lignes) ── */
.dossier-items-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dossier-plan-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    transition: border-color var(--transition-fast);
}

.dossier-plan-row:hover {
    border-color: var(--border-default);
}

.dossier-plan-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.dossier-plan-info {
    flex: 1;
    min-width: 0;
}

.dossier-plan-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dossier-plan-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.dossier-meta-pill {
    font-size: 10px;
    font-weight: 600;
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: 999px;
    padding: 2px 7px;
    font-family: 'JetBrains Mono', monospace;
}

.dossier-meta-date {
    font-size: 11px;
    color: var(--text-muted);
}

.dossier-plan-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.dossier-action-btn {
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    cursor: pointer;
    background: var(--bg-elevated);
    transition: all var(--transition-fast);
}

.dossier-action-load {
    color: var(--accent);
    border-color: rgba(56,139,253,0.3);
}

.dossier-action-load:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.dossier-action-del {
    color: var(--text-muted);
    border-color: transparent;
    padding: 4px 8px;
}

.dossier-action-del:hover {
    color: var(--danger);
    border-color: rgba(248,81,73,0.3);
    background: rgba(248,81,73,0.08);
}

/* ── VAC grid ── */
.dossier-vac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.dossier-vac-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color var(--transition-fast);
}

.dossier-vac-card:hover {
    border-color: var(--border-default);
}

.dossier-vac-icao {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.04em;
}

.dossier-vac-name {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.dossier-vac-date {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.dossier-vac-btns {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.dossier-vac-btns .dossier-action-btn {
    flex: 1;
    text-align: center;
    font-size: 11px;
    padding: 4px 6px;
}

/* ── Future cards ── */
.dossier-future-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.dossier-future-card {
    background: var(--bg-elevated);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    opacity: 0.6;
}

.dossier-future-icon {
    font-size: 22px;
    margin-bottom: 6px;
}

.dossier-future-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.dossier-future-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Route save modal summary ── */
.dossier-route-summary {
    display: flex;
    gap: 8px;
    align-items: center;
}

.dossier-rs-pts, .dossier-rs-dist {
    font-size: 12px;
    font-weight: 600;
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: 999px;
    padding: 3px 10px;
    font-family: 'JetBrains Mono', monospace;
}

/* ── VAC save button style variant ── */
.vac-save-btn {
    background: rgba(63, 185, 80, 0.08);
    color: var(--success);
    border: 1px solid rgba(63, 185, 80, 0.25);
}

.vac-save-btn:hover {
    background: var(--success);
    color: #0f1117;
}

/* ============================================
   UTC CLOCK + CHRONO WIDGET
   ============================================ */
.utc-widget {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.utc-clock-row,
.utc-chrono-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.utc-chrono-row {
    margin-top: 6px;
}

.utc-lbl {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    width: 28px;
    flex-shrink: 0;
}

.utc-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.04em;
    flex: 1;
}

.utc-chrono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    flex: 1;
    transition: color var(--transition-fast);
}

.utc-chrono.chrono-running {
    color: var(--amber);
}

.utc-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.utc-btn:hover,
.utc-btn:active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.utc-btn.utc-btn-active {
    background: var(--amber-subtle);
    color: var(--amber);
    border-color: var(--amber);
}

.utc-btn-sm {
    width: 26px;
    height: 26px;
    font-size: 12px;
}

/* ============================================
   DENSITÉ D'ALTITUDE WIDGET
   ============================================ */
.da-widget {
    margin-top: 16px;
}

.da-display {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0;
}

.da-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.da-value.da-warn { color: var(--amber); }
.da-value.da-danger { color: var(--danger); }
.da-value.da-ok { color: var(--success); }

.da-unit {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.da-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    margin-left: auto;
}

.da-badge-neutral  { background: var(--bg-elevated); color: var(--text-muted); }
.da-badge-normal   { background: rgba(63,185,80,0.12); color: var(--success); }
.da-badge-elevated { background: var(--amber-subtle); color: var(--amber); }
.da-badge-high     { background: rgba(248,81,73,0.12); color: var(--danger); }

.da-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.da-hint {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.da-qnh-input {
    width: 100px;
    font-size: 13px;
    padding: 5px 8px;
    height: 32px;
}

.da-formula {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 8px;
    opacity: 0.7;
    line-height: 1.6;
}

/* ============================================
   NAVLOG — COLONNE Cc°
   ============================================ */
.nl-th-cc,
.nl-cc {
    width: 52px;
    min-width: 44px;
    text-align: center;
    color: var(--amber);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

.nl-th-cc {
    color: var(--amber);
    font-weight: 600;
}

/* ============================================
   CHECKLIST VIEW
   ============================================ */
#view-checklist {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    overflow-y: auto;
}

.checklist-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(100vh - 80px);
}

.checklist-toolbar {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-elevated);
    flex-shrink: 0;
}

.cl-select-row,
.cl-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cl-select-row select,
.cl-actions-row select {
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    padding: 6px 10px;
    height: 36px;
    flex: 1;
    min-width: 100px;
    cursor: pointer;
}

.cl-select-row select:focus,
.cl-actions-row select:focus {
    outline: none;
    border-color: var(--accent);
}

.cl-progress-bar-wrap {
    height: 3px;
    background: var(--bg-elevated);
    border-bottom: none;
    flex-shrink: 0;
}

.cl-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--success));
    transition: width 0.4s var(--ease-out);
    border-radius: 0;
}

.cl-items-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.cl-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cl-item:last-child {
    border-bottom: none;
}

.cl-item:hover {
    background: rgba(255,255,255,0.03);
}

.cl-item.cl-done {
    opacity: 0.5;
}

.cl-check-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--border-default);
    background: transparent;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    font-size: 13px;
    color: transparent;
}

.cl-check-btn:hover {
    border-color: var(--accent);
}

.cl-item.cl-done .cl-check-btn {
    background: var(--success);
    border-color: var(--success);
    color: #0f1117;
}

.cl-item-label {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.cl-item.cl-done .cl-item-label {
    text-decoration: line-through;
    color: var(--text-muted);
}

.cl-item-expected {
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent);
    background: var(--accent-subtle);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.cl-item-del {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    padding: 0;
}

.cl-item:hover .cl-item-del {
    opacity: 1;
}

.cl-item-del:hover {
    background: rgba(248,81,73,0.1);
    color: var(--danger);
}

#cl-progress {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
}

.cl-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.cl-empty-icon {
    font-size: 40px;
    margin-bottom: 8px;
}

/* ============================================
   BRIEFING MÉTÉO TABLE
   ============================================ */
.briefing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 4px;
}

.briefing-table th {
    text-align: left;
    padding: 6px 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-subtle);
}

.briefing-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: middle;
}

.briefing-table tr:last-child td {
    border-bottom: none;
}

.briefing-table tbody tr:hover td {
    background: rgba(255,255,255,0.02);
}

.br-icao {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    color: var(--accent);
}

.br-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-block;
}

.br-cat-vfr   { background: rgba(63,185,80,0.15); color: var(--success); }
.br-cat-mvfr  { background: rgba(88,166,255,0.15); color: #58a6ff; }
.br-cat-ifr   { background: rgba(248,81,73,0.15); color: var(--danger); }
.br-cat-lifr  { background: rgba(192,132,252,0.15); color: #c084fc; }

.briefing-copy-btn {
    margin-top: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 6px 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.briefing-copy-btn:hover {
    background: var(--accent-subtle);
    color: var(--accent);
    border-color: var(--accent);
}

.briefing-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
    padding: 16px 0;
}

.briefing-error {
    color: var(--danger);
    font-size: 13px;
    padding: 12px;
    background: rgba(248,81,73,0.08);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--danger);
}

/* ============================================
   TAF PARSÉ — forecast periods
   ============================================ */
.taf-periods {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.taf-period {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.taf-period.taf-vfr   { border-left-color: var(--success); }
.taf-period.taf-mvfr  { border-left-color: #58a6ff; }
.taf-period.taf-ifr   { border-left-color: var(--danger); }
.taf-period.taf-lifr  { border-left-color: #c084fc; }

.taf-period-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
    min-width: 110px;
}

.taf-period-type {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    background: var(--accent-subtle);
    color: var(--accent);
}

.taf-period-type.tempo { background: var(--amber-subtle); color: var(--amber); }
.taf-period-type.becmg { background: rgba(63,185,80,0.1); color: var(--success); }

.taf-period-wind {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
    min-width: 100px;
}

.taf-period-vis {
    color: var(--text-secondary);
    min-width: 70px;
}

.taf-period-sky {
    color: var(--text-secondary);
    flex: 1;
}

.taf-period-cat {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

.taf-raw-toggle {
    font-size: 11px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: 8px;
    text-decoration: underline dotted;
    display: block;
}

.taf-raw-toggle:hover {
    color: var(--text-secondary);
}

/* ============================================
   EXPORT PDF / PRINT
   ============================================ */
#print-header {
    display: none;
}

@media print {
    /* Masquer tout sauf le log de nav */
    body { overflow: visible !important; display: block !important; }
    .app-sidebar,
    .view-header,
    .navlog-actions,
    .navlog-toolbar,
    .btn,
    button,
    .nl-del-btn,
    .nl-add-btn-row,
    tfoot,
    #print-header + .content-view:not(#view-navlog),
    .content-view:not(#view-navlog) { display: none !important; }

    .app-content { margin: 0 !important; padding: 0 !important; }

    #view-navlog {
        display: block !important;
        padding: 0 !important;
    }

    #print-header {
        display: block !important;
        font-size: 12px;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid #333;
    }

    #print-meta {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        font-size: 11px;
        color: #333;
    }

    #print-meta span { margin-right: 16px; }
    #print-meta strong { color: #000; }

    .navlog-container {
        overflow: visible !important;
        height: auto !important;
    }

    .navlog-table {
        font-size: 10px;
        width: 100%;
        border-collapse: collapse;
        color: #000;
    }

    .navlog-table th,
    .navlog-table td {
        border: 1px solid #ccc !important;
        padding: 4px 6px !important;
        background: white !important;
        color: #000 !important;
    }

    .navlog-table thead th {
        background: #f0f0f0 !important;
        font-weight: 700;
    }

    .nl-del-btn { display: none !important; }

    @page {
        margin: 15mm;
        size: A4 landscape;
    }
}

/* ============================================
   RESPONSIVE — Portrait & small screens
   ============================================ */

/* Map always fills its container */
#map {
    height: 100% !important;
    width: 100% !important;
}

/* Scrollable views */
#view-wb,
#view-perf,
#view-meteo,
#view-navlog,
#view-log,
#view-vac,
#view-checklist,
#view-fleet {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    /* Compact top-bar on small screens */
    .top-bar { padding: 4px 8px; gap: 6px; }
    .tb-pilot-name { max-width: 70px; font-size: 11px; }
    .tb-info-label { font-size: 7px; }
    .tb-info-value { font-size: 13px; }
    .tb-ico-btn { width: 18px; height: 18px; font-size: 10px; }
    .tb-action-btn { width: 32px; height: 32px; }
    .tb-seg-btn { padding: 3px 7px; font-size: 9px; }

    /* Compact bottom tabs on small screens */
    .tab-icon { font-size: 18px; }
    .tab-label { font-size: 8px; }
    .tab-btn { padding: 6px 4px; min-width: 52px; }

    /* Nav log horizontal scroll */
    .navlog-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Leaflet controls — repositioned */
    .leaflet-top.leaflet-right { top: 8px; right: 8px; }
    .leaflet-control-layers {
        font-size: 11px !important;
        max-height: 40vh;
        overflow-y: auto;
    }
}

/* ============================================
   ROUTE — styles communs (lignes + label Direct-To)
   ============================================ */

/* Halo blanc sous les lignes */
.route-seg-bg {
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Direct-To : label flottant permanent sur la ligne */
.dt-info-label {
    background:    rgba(26, 26, 46, 0.92) !important;
    border:        1.5px solid rgba(255,255,255,0.18) !important;
    border-radius: 20px !important;
    color:         #e6edf3 !important;
    font-family:   'JetBrains Mono', monospace !important;
    font-size:     0.72rem !important;
    font-weight:   700 !important;
    padding:       4px 12px !important;
    white-space:   nowrap !important;
    box-shadow:    0 2px 12px rgba(0,0,0,0.5) !important;
    pointer-events: none !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    letter-spacing: 0.04em !important;
}

.dt-info-label::before {
    display: none !important;
}

/* ============================================
   AIRPORT MARKERS — OpenAIP
   ============================================ */

/* Le divIcon Leaflet : pas de fond ni de bordure par défaut */
.ap-icon {
    background: none !important;
    border:     none !important;
    cursor:     pointer;
}

/* Halo légèrement plus grand au survol */
.ap-icon:hover svg circle:first-child {
    fill-opacity: 0.35 !important;
}

/* ── Wrapper du popup (injecté par Leaflet) ── */
.ap-popup-wrapper .leaflet-popup-content-wrapper {
    background:    rgba(22, 27, 34, 0.97);
    border:        1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    box-shadow:    0 8px 32px rgba(0,0,0,0.6);
    padding:       0;
    overflow:      hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ap-popup-wrapper .leaflet-popup-content {
    margin: 0;
    width: 260px !important;
}

.ap-popup-wrapper .leaflet-popup-tip-container { display: none; }

/* ── Popup interior ── */
.ap-popup {
    font-family: var(--font-ui);
    color:       var(--text-primary);
    font-size:   12px;
}

.ap-popup-header {
    display:          flex;
    align-items:      baseline;
    gap:              8px;
    padding:          10px 12px 8px;
    border-bottom:    1px solid var(--border-subtle);
    background:       rgba(56, 139, 253, 0.07);
}

.ap-icao {
    font-family:   var(--font-mono);
    font-size:     14px;
    font-weight:   700;
    color:         var(--accent-hover);
    letter-spacing: 0.04em;
    flex-shrink:   0;
}

.ap-name {
    font-size:     11px;
    color:         var(--text-secondary);
    line-height:   1.3;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.ap-popup-body {
    padding:    8px 12px;
    display:    flex;
    flex-direction: column;
    gap:        4px;
}

.ap-row {
    font-size:  11px;
    color:      var(--text-secondary);
    padding:    2px 0;
}

.ap-section {
    font-size:     9px;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:         var(--text-muted);
    margin-top:    6px;
    margin-bottom: 2px;
}

.ap-freq {
    display:    block;
    font-family: var(--font-mono);
    font-size:  11px;
    color:      var(--text-primary);
    padding:    2px 0;
}

.ap-freq em {
    font-style: normal;
    color:      var(--text-secondary);
    font-size:  10px;
    margin-left: 4px;
}

.ap-rwy {
    display:   block;
    font-size: 11px;
    color:     var(--text-secondary);
    padding:   2px 0;
}

/* ── Direct-To button inside popup ── */
.ap-popup-direct {
    display:          block;
    width:            100%;
    padding:          9px 12px;
    margin:           0;
    background:       rgba(248, 216, 73, 0.12);
    border:           none;
    border-top:       1px solid rgba(248, 216, 73, 0.2);
    color:            #f8d849;
    font-family:      var(--font-ui);
    font-size:        12px;
    font-weight:      600;
    letter-spacing:   0.03em;
    cursor:           pointer;
    transition:       background 0.15s;
    text-align:       center;
}

.ap-popup-direct:hover,
.ap-popup-direct:active {
    background: rgba(248, 216, 73, 0.22);
}

/* ============================================
   DIRECT-TO — Top-bar button + line
   ============================================ */

/* Bouton Direct-To dans la top-bar */
.direct-to-btn {
    position: relative;
}

.direct-to-btn.active {
    background:  rgba(248, 216, 73, 0.18) !important;
    border-color: rgba(248, 216, 73, 0.45) !important;
    color:        #f8d849 !important;
    box-shadow:   0 0 12px rgba(248, 216, 73, 0.25) !important;
}

.direct-to-btn.active svg {
    color: #f8d849;
    stroke: #f8d849;
}

/* Pulsing dot indicator when Direct-To is active */
.direct-to-btn.active::after {
    content:          '';
    position:         absolute;
    top:              5px;
    right:            5px;
    width:            6px;
    height:           6px;
    border-radius:    50%;
    background:       #f8d849;
    animation:        dt-pulse 1.5s ease-in-out infinite;
}

@keyframes dt-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.4; transform: scale(0.6);  }
}

/* ============================================
   MAP OVERLAY BUTTONS — style commun
   (RainViewer, OpenSky — même look qu'Airspaces)
   ============================================ */

.map-overlay-btn {
    display:          flex;
    align-items:      center;
    gap:              6px;
    background:       rgba(22,27,34,0.92);
    backdrop-filter:  blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color:            #8b949e;
    border:           1px solid rgba(255,255,255,0.08);
    padding:          7px 12px;
    font-family:      'Inter', sans-serif;
    font-size:        11px;
    font-weight:      600;
    letter-spacing:   0.02em;
    cursor:           pointer;
    border-radius:    8px;
    white-space:      nowrap;
    box-shadow:       0 2px 8px rgba(0,0,0,0.4);
    transition:       all 0.2s;
    margin-bottom:    8px !important;
    position:         relative;
}

.map-overlay-btn:hover {
    background: rgba(30,36,48,0.95);
    color:      #c9d1d9;
}

.map-overlay-btn.active {
    background:   rgba(56,139,253,0.14);
    border-color: rgba(56,139,253,0.5);
    color:        #58a6ff;
}

/* ============================================
   RAINVIEWER — Panneau radar
   ============================================ */

.rv-ctrl-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
}

.rv-panel {
    display:          flex;
    align-items:      center;
    gap:              8px;
    background:       rgba(22,27,34,0.92);
    backdrop-filter:  blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border:           1px solid rgba(255,255,255,0.08);
    border-radius:    8px;
    padding:          6px 10px;
    box-shadow:       0 2px 8px rgba(0,0,0,0.4);
    margin-bottom:    8px !important;
}

.rv-play-btn {
    background:  none;
    border:      none;
    color:       #58a6ff;
    font-size:   14px;
    cursor:      pointer;
    padding:     0 2px;
    line-height: 1;
    flex-shrink: 0;
}

.rv-slider {
    -webkit-appearance: none;
    appearance:    none;
    width:         110px;
    height:        4px;
    border-radius: 2px;
    background:    rgba(255,255,255,0.15);
    outline:       none;
    cursor:        pointer;
}

.rv-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:         14px;
    height:        14px;
    border-radius: 50%;
    background:    #58a6ff;
    cursor:        pointer;
    border:        2px solid #0d1117;
}

.rv-time-label {
    font-family: 'JetBrains Mono', monospace;
    font-size:   11px;
    font-weight: 600;
    color:       #e6edf3;
    white-space: nowrap;
    min-width:   38px;
}

/* ============================================
   OPENSKY — Icônes et popups
   ============================================ */

.os-icon {
    background: none !important;
    border:     none !important;
}

.os-count-badge {
    position:       absolute;
    top:            4px;
    right:          4px;
    background:     #58a6ff;
    color:          #0d1117;
    font-size:      8px;
    font-weight:    800;
    border-radius:  8px;
    padding:        1px 4px;
    line-height:    1.4;
    min-width:      14px;
    text-align:     center;
    pointer-events: none;
}

.os-count-badge:empty { display: none; }

.os-popup-wrapper .leaflet-popup-content-wrapper {
    background:    rgba(22,27,34,0.97);
    border:        1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    box-shadow:    0 8px 32px rgba(0,0,0,0.6);
    padding:       0;
    overflow:      hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.os-popup-wrapper .leaflet-popup-content { margin: 0; width: 200px !important; }
.os-popup-wrapper .leaflet-popup-tip-container { display: none; }

.os-popup { font-family: var(--font-ui); color: var(--text-primary); font-size: 12px; }

.os-popup-header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             8px;
    padding:         9px 12px 7px;
    border-bottom:   1px solid var(--border-subtle);
    background:      rgba(88,166,255,0.07);
}

.os-callsign {
    font-family:    var(--font-mono);
    font-size:      13px;
    font-weight:    700;
    color:          #58a6ff;
    letter-spacing: 0.04em;
}

.os-country { font-size: 10px; color: var(--text-muted); }

.os-popup-body {
    padding:        8px 12px;
    display:        flex;
    flex-direction: column;
    gap:            3px;
}

.os-row { font-size: 11px; color: var(--text-secondary); }




/* ============================================
   NAVLOG v2 — Log de Navigation VFR Français
   Grille 3 colonnes :
     Gauche 248px  (ALT | Rm | Rc | Cc | D | Tsv)
     Centre 110px  (REPÈRE / connecteur hexagonal)
     Droite 1fr    (HE | HR | VHF | R-NAV | ✕)
   ============================================ */

/* ── Conteneur principal ── */
.nl2-outer {
    display:        flex;
    flex-direction: column;
    background:     var(--bg-surface);
    border-radius:  var(--radius-md);
    border:         1px solid var(--border-default);
    overflow:       hidden;
}

/* ── Layout : log + panneau droit ── */
.nl2-layout {
    display:     flex;
    gap:         12px;
    padding:     0 12px 12px;
    align-items: flex-start;
    overflow-x:  auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Zone de log (colonne principale) ── */
.nl2-log-area {
    flex:      1;
    min-width: 540px;
    display:   flex;
    flex-direction: column;
}

/* ──────────────────────────────────────────
   GRILLE PARTAGÉE (en-têtes + lignes)
   ────────────────────────────────────────── */
.nl2-col-head,
.nl2-row {
    display:               grid;
    grid-template-columns: 248px 110px 1fr;
}

/* ── En-têtes de colonnes ── */
.nl2-col-head {
    border-bottom:  2px solid var(--border-default);
    background:     var(--bg-base);
    padding:        4px 0;
}

.nl2-ch-left {
    display:               grid;
    grid-template-columns: 44px repeat(5, 1fr);
    padding:               0 4px;
    border-right:          1px solid var(--border-default);
}

.nl2-ch-left span,
.nl2-ch-right span {
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.07em;
    color:          var(--text-muted);
    text-transform: uppercase;
    padding:        2px 1px;
}

.nl2-ch-mid {
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       9px;
    font-weight:     700;
    letter-spacing:  0.07em;
    color:           var(--text-muted);
    text-transform:  uppercase;
    border-right:    1px solid var(--border-default);
}

.nl2-ch-right {
    display:               grid;
    grid-template-columns: 44px 58px 66px 1fr 28px;
    padding:               0 4px;
}

/* ── Corps dynamique ── */
.nl2-body {
    display:        flex;
    flex-direction: column;
}

/* ──────────────────────────────────────────
   LIGNES
   ────────────────────────────────────────── */

/* Ligne de base */
.nl2-row {
    border-bottom: 1px solid var(--border-subtle);
    min-height:    44px;
}

/* Ligne de repère (waypoint) */
.nl2-wp-row {
    background: var(--bg-elevated);
    min-height: 44px;
}

/* Ligne de segment */
.nl2-seg-row {
    background: var(--bg-surface);
    min-height: 60px;
}

/* ──────────────────────────────────────────
   CELLULES — Gauche
   ────────────────────────────────────────── */
.nl2-left {
    display:      flex;
    align-items:  center;
    border-right: 1px solid var(--border-subtle);
    padding:      4px 4px;
    gap:          3px;
}

/* Cellule gauche d'un waypoint : badge seul */
.nl2-left-wp {
    justify-content: flex-start;
    gap:             8px;
    padding:         4px 8px;
}

/* Cellule gauche d'un segment : grille 6 colonnes alignée avec l'en-tête */
.nl2-left-seg {
    display:               grid;
    grid-template-columns: 44px repeat(5, 1fr);
    align-items:           center;
    padding:               4px;
    gap:                   2px;
}

/* ──────────────────────────────────────────
   CELLULES — Milieu
   ────────────────────────────────────────── */
.nl2-mid {
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-right:    1px solid var(--border-subtle);
}

/* Milieu waypoint : input REPÈRE */
.nl2-mid-wp {
    padding: 4px 8px;
}

/* Milieu segment : connecteur hexagonal */
.nl2-mid-seg {
    flex-direction: column;
    padding:        0;
    gap:            0;
    height:         100%;
}

/* ──────────────────────────────────────────
   CELLULES — Droite
   ────────────────────────────────────────── */
.nl2-right {
    display:     flex;
    align-items: center;
    padding:     4px 6px;
    gap:         4px;
}

/* Droite waypoint : grille calée sur l'en-tête */
.nl2-right-wp {
    display:               grid;
    grid-template-columns: 44px 58px 66px 1fr 28px;
    align-items:           center;
    padding:               4px 4px;
    gap:                   4px;
}

/* Droite segment : GS + WCA empilés */
.nl2-right-seg {
    flex-direction:  column;
    justify-content: center;
    align-items:     flex-start;
    padding:         4px 10px;
    gap:             3px;
}

/* ──────────────────────────────────────────
   BADGE DEP / 01 / ARR
   ────────────────────────────────────────── */
.nl2-wp-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       34px;
    height:          22px;
    padding:         0 5px;
    background:      var(--accent);
    color:           #fff;
    font-family:     var(--font-mono);
    font-size:       9px;
    font-weight:     700;
    letter-spacing:  0.06em;
    border-radius:   var(--radius-sm);
    flex-shrink:     0;
    text-transform:  uppercase;
}

/* ──────────────────────────────────────────
   INPUT REPÈRE
   ────────────────────────────────────────── */
.nl2-repere-input {
    flex:            1;
    width:           100%;
    background:      transparent;
    border:          none;
    border-bottom:   1.5px solid var(--border-default);
    border-radius:   0;
    color:           var(--text-primary);
    font-family:     var(--font-mono);
    font-size:       14px;
    font-weight:     700;
    letter-spacing:  0.04em;
    text-align:      center;
    padding:         2px 4px;
    text-transform:  uppercase;
    outline:         none;
    transition:      border-color var(--transition-fast);
}

.nl2-repere-input:focus {
    border-bottom-color: var(--accent);
}

/* ──────────────────────────────────────────
   VALEURS CALCULÉES (spans)
   ────────────────────────────────────────── */
.nl2-rm-val,
.nl2-rc-val,
.nl2-cc-val,
.nl2-dist-val,
.nl2-tsv-val {
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-family:   var(--font-mono);
    font-size:     11px;
    color:         var(--text-secondary);
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    padding:       1px 2px;
}

/* Mise en avant des valeurs calculées après correction vent */
.nl2-rc-val  { color: var(--accent-hover); }
.nl2-cc-val  { color: var(--text-primary); font-weight: 600; }
.nl2-dist-val{ color: var(--text-secondary); }
.nl2-tsv-val { color: var(--amber); }

.nl2-he-val {
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--font-mono);
    font-size:       11px;
    color:           var(--text-secondary);
}

.nl2-gs-val {
    font-family: var(--font-mono);
    font-size:   11px;
    font-weight: 600;
    color:       var(--amber);
}

.nl2-wca-val {
    font-family: var(--font-mono);
    font-size:   10px;
    color:       var(--text-muted);
}

/* ──────────────────────────────────────────
   INPUTS (HR, VHF, R-NAV, ALT)
   ────────────────────────────────────────── */
.nl2-input-xs,
.nl2-input-sm,
.nl2-input-md,
.nl2-alt-input,
.nl2-hr-input,
.nl2-vhf-input,
.nl2-rnav-input {
    background:    var(--bg-input);
    border:        1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color:         var(--text-primary);
    font-family:   var(--font-mono);
    font-size:     11px;
    padding:       3px 4px;
    outline:       none;
    text-align:    center;
    transition:    border-color var(--transition-fast);
    width:         100%;
}

.nl2-input-xs,
.nl2-alt-input  { width: 42px; flex-shrink: 0; }
.nl2-input-sm,
.nl2-hr-input   { width: 54px; flex-shrink: 0; }
.nl2-input-sm,
.nl2-vhf-input  { width: 62px; flex-shrink: 0; }
.nl2-input-md,
.nl2-rnav-input { width: 100%; }

.nl2-input-xs:focus, .nl2-input-sm:focus, .nl2-input-md:focus,
.nl2-alt-input:focus, .nl2-hr-input:focus, .nl2-vhf-input:focus,
.nl2-rnav-input:focus {
    border-color: var(--border-focus);
}

/* ──────────────────────────────────────────
   BOUTON SUPPRIMER
   ────────────────────────────────────────── */
.nl2-del-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           24px;
    height:          24px;
    background:      transparent;
    border:          1px solid transparent;
    border-radius:   var(--radius-sm);
    color:           var(--text-muted);
    font-size:       11px;
    cursor:          pointer;
    flex-shrink:     0;
    transition:      background var(--transition-fast), color var(--transition-fast),
                     border-color var(--transition-fast);
}

.nl2-del-btn:hover {
    background:   rgba(248, 81, 73, 0.12);
    color:        var(--danger);
    border-color: var(--danger);
}

/* ──────────────────────────────────────────
   CONNECTEUR HEXAGONAL (colonne milieu, seg-row)
   ── Ligne verticale + nœud hexagonal ──
   ────────────────────────────────────────── */
.nl2-hex-line {
    width:      2px;
    flex:       1;
    background: var(--border-default);
    align-self: stretch;
}

.nl2-hex-top { border-radius: 1px 1px 0 0; }
.nl2-hex-bot { border-radius: 0 0 1px 1px; }

.nl2-hex-node {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         1;
    flex-shrink:     0;
}

/* Bouton vent — forme hexagonale via clip-path */
.nl2-wind-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             3px;
    height:          28px;
    min-width:       28px;
    padding:         0 7px;
    background:      var(--bg-elevated);
    border:          1.5px solid var(--border-default);
    border-radius:   6px;
    color:           var(--text-muted);
    font-size:       13px;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background var(--transition-fast), border-color var(--transition-fast),
                     color var(--transition-fast);
    /* Forme hexagonale subtile */
    clip-path: polygon(12% 0%, 88% 0%, 100% 50%, 88% 100%, 12% 100%, 0% 50%);
}

.nl2-wind-btn:hover {
    background:   var(--accent-subtle);
    border-color: var(--accent);
    color:        var(--accent-hover);
    clip-path: polygon(12% 0%, 88% 0%, 100% 50%, 88% 100%, 12% 100%, 0% 50%);
}

.nl2-wind-btn.nl2-wind-ok {
    border-color: var(--success);
    background:   rgba(63, 185, 80, 0.10);
    color:        var(--success);
}

.nl2-wind-txt {
    font-family: var(--font-mono);
    font-size:   9px;
    font-weight: 600;
    color:       inherit;
    line-height: 1.2;
    text-align:  center;
}

/* ──────────────────────────────────────────
   BARRE TOTAUX
   ────────────────────────────────────────── */
.nl2-totaux-bar {
    display:               grid;
    grid-template-columns: 248px 110px 1fr;
    border-top:            2px solid var(--border-default);
    background:            var(--bg-base);
    padding:               5px 0;
}

.nl2-tot-left {
    display:      flex;
    align-items:  center;
    padding:      0 8px;
    border-right: 1px solid var(--border-subtle);
}

.nl2-tot-lbl {
    font-size:      9px;
    font-weight:    800;
    letter-spacing: 0.1em;
    color:          var(--text-muted);
    text-transform: uppercase;
}

.nl2-tot-mid {
    border-right: 1px solid var(--border-subtle);
}

.nl2-tot-right {
    display:     flex;
    align-items: center;
    gap:         20px;
    padding:     0 12px;
}

.nl2-tot-val {
    font-family: var(--font-mono);
    font-size:   12px;
    font-weight: 700;
    color:       var(--accent-hover);
}

/* ──────────────────────────────────────────
   SCROLLBAR dans la zone log (iPad)
   ────────────────────────────────────────── */
.nl2-log-area {
    overflow-y:                auto;
    max-height:                calc(100vh - 220px);
    -webkit-overflow-scrolling: touch;
}

/* ──────────────────────────────────────────
   IMPRESSION — nav log v2
   ────────────────────────────────────────── */
@media print {
    .nl2-del-btn  { display: none !important; }
    .nl2-wind-btn { border-color: #999 !important; }
    .nl2-wp-row   { background: #f5f5f5 !important; }
    .nl2-seg-row  { background: #fff    !important; }
}


/* ============================================
   NOTAM — Overlay + popups
   ============================================ */

/* ── Badge compteur ── */
.nt-count-badge {
    position:       absolute;
    top:            3px;
    right:          3px;
    background:     #f85149;
    color:          #fff;
    font-size:      8px;
    font-weight:    800;
    border-radius:  8px;
    padding:        1px 4px;
    min-width:      14px;
    text-align:     center;
    line-height:    1.4;
    pointer-events: none;
}
.nt-count-badge:empty { display: none; }

/* ── Spinner "en cours de chargement" ── */
@keyframes nt-spin { to { transform: rotate(360deg); } }
#nt-ctrl-btn.nt-fetching svg {
    animation: nt-spin 1s linear infinite;
}

/* ── Label sur la carte (centre du cercle) ── */
.nt-lbl {
    font-family:    var(--font-mono);
    font-size:      10px;
    font-weight:    800;
    letter-spacing: 0.06em;
    text-align:     center;
    text-shadow:    0 0 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7);
    pointer-events: none;
    white-space:    nowrap;
}

/* ── Popup wrapper Leaflet ── */
.nt-popup-wrap .leaflet-popup-content-wrapper {
    background:    rgba(14, 17, 23, 0.97);
    border:        1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-md);
    box-shadow:    0 8px 32px rgba(0,0,0,0.65);
    padding:       0;
    overflow:      hidden;
    backdrop-filter:         blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.nt-popup-wrap .leaflet-popup-content { margin: 0; width: 310px !important; }
.nt-popup-wrap .leaflet-popup-tip-container { display: none; }

/* ── Contenu popup ── */
.nt-popup {
    font-family: var(--font-ui);
    color:       var(--text-primary);
    font-size:   12px;
}

.nt-popup-head {
    display:     flex;
    align-items: center;
    gap:         7px;
    padding:     9px 12px 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.nt-type-badge {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    padding:        2px 7px;
    border:         1px solid;
    border-radius:  5px;
    font-family:    var(--font-mono);
    font-size:      10px;
    font-weight:    800;
    letter-spacing: 0.06em;
    flex-shrink:    0;
}

.nt-id {
    font-family:    var(--font-mono);
    font-size:      11px;
    font-weight:    600;
    color:          var(--text-secondary);
    flex-shrink:    0;
}

.nt-title {
    font-size:   11px;
    color:       var(--text-muted);
    margin-left: auto;
    white-space: nowrap;
}

.nt-times {
    padding:     5px 12px 4px;
    font-size:   11px;
    color:       var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

.nt-raw {
    margin:      0;
    padding:     8px 12px 10px;
    font-family: var(--font-mono);
    font-size:   10px;
    line-height: 1.55;
    color:       var(--text-secondary);
    white-space: pre-wrap;
    word-break:  break-word;
    max-height:  200px;
    overflow-y:  auto;
    -webkit-overflow-scrolling: touch;
}