/* ============================================================
   Compléments de style (version 2026-10) — s'ajoutent à base.css
   ============================================================ */

.calc-status { font-size: 0.62rem; color: var(--orange); max-width: 170px; line-height: 1.2; }
.value-chip { font-size: 0.7rem; color: var(--accent); min-width: 42px; font-family: var(--font-num); }
.tide-info { font-size: 0.7rem; color: #64b4ff; font-family: var(--font-num); white-space: nowrap; }
.mini-input { width: 50px; padding: 4px; background: var(--bg-card); border: 1px solid #333; color: #fff; border-radius: 4px; font-size: 11px; }
.mini-select { padding: 4px; background: var(--bg-card); border: 1px solid #333; color: #fff; border-radius: 4px; font-size: 11px; }
.mini-unit { color: #888; font-size: 10px; }
.point-indicator { cursor: default; }
#wpIndicator { cursor: pointer; }
#selectModeBtn.active { box-shadow: 0 0 0 1px var(--accent) inset; }

/* --- Panneau de résultat --- */
.result-float { width: 320px; max-height: calc(100% - 24px); overflow-y: auto; }
.result-float-title { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.result-actions { display: flex; align-items: center; gap: 4px; }
.mini-btn { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); border-radius: 4px; cursor: pointer; font-size: 0.75rem; padding: 1px 6px; }
.mini-btn:hover { border-color: var(--accent); color: var(--accent); }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 6px 0 8px; }
.result-cell { display: flex; flex-direction: column; gap: 1px; }
.result-cell .result-label { font-size: 0.62rem; color: var(--text-dim); letter-spacing: 0.5px; }
.result-cell .result-value { font-size: 0.85rem; font-family: var(--font-num); color: var(--text); }
#resultBody.collapsed { display: none; }
.allure-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 2px 0 8px; background: var(--bg-dark); }
.allure-bar span { display: block; height: 100%; }
.allure-legend { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.6rem; color: var(--text-dim); margin: -4px 0 8px; }
.allure-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; vertical-align: middle; }
#routeGraph { width: 100%; height: 110px; display: block; border-radius: 6px; background: var(--bg-bar); cursor: crosshair; }
.check-box { margin-top: 8px; padding: 8px; border-radius: 6px; font-size: 0.72rem; line-height: 1.4; }
.check-box.ok { background: rgba(0, 255, 163, 0.08); border: 1px solid rgba(0, 255, 163, 0.3); color: var(--green); }
.check-box.warn { background: rgba(255, 165, 2, 0.08); border: 1px solid rgba(255, 165, 2, 0.35); color: var(--orange); }
.check-box .check-title { font-weight: 600; margin-bottom: 2px; }
.check-box .check-detail { color: var(--text-dim); font-size: 0.66rem; }
.check-box ul { margin: 4px 0 0 14px; }
.check-box li { cursor: pointer; }
.check-box li:hover { text-decoration: underline; }
.compare-box { margin-top: 8px; font-size: 0.7rem; }
.compare-box table { width: 100%; border-collapse: collapse; }
.compare-box td, .compare-box th { padding: 2px 4px; border-bottom: 1px solid var(--border); text-align: left; }
.compare-box .swatch { display: inline-block; width: 10px; height: 3px; vertical-align: middle; margin-right: 4px; }

.calc-progress { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1200; background: rgba(13, 21, 32, 0.95);
    border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; display: flex; align-items: center; gap: 8px; font-size: 0.75rem; }
.loading-spinner.small { width: 14px; height: 14px; border-width: 2px; margin: 0; }

/* --- Frise --- */
.timeline-track { position: relative; }
.timeline-marks { position: absolute; inset: 0; pointer-events: none; }
.timeline-marks .mk { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.18); }
.timeline-marks .mk.day { background: rgba(236, 230, 214, 0.203); width: 2px; }
.timeline-marks .route { position: absolute; top: 35%; bottom: 35%; background: rgba(255, 107, 107, 0.35); border-radius: 2px; }

/* --- Modales génériques --- */
.modal-overlay { z-index: 3000; }
.modal-body { padding: 1rem; }
.modal-scroll { max-height: 60vh; overflow-y: auto; padding: 0.5rem 1rem; }
.modal-note { font-size: 0.72rem; color: var(--text-dim); padding: 0.4rem 1rem; line-height: 1.45; }
.modal-footer { margin-top: 1rem; display: flex; gap: 0.5rem; justify-content: flex-end; }
.modal-content { background: var(--bg-subbar); border: 1px solid var(--border); border-radius: 10px; width: 92vw; color: var(--text); box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.modal-content .modal-header h3 { font-size: 0.95rem; margin: 0; }
.center-pad { text-align: center; padding: 1.5rem; font-size: 0.8rem; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; margin: 0 auto 0.5rem; }
.run-info { font-size: 0.8rem; color: var(--accent); margin-bottom: 0.8rem; text-align: center; }
.field-title { font-weight: 600; font-size: 0.8rem; margin: 0.8rem 0 0.4rem; display: block; }
.radio-row { display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.78rem; margin-top: 0.4rem; }
.radio-row label { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem; background: var(--bg-card); border-radius: 6px; cursor: pointer; }
.radio-row label.col { flex-direction: column; align-items: flex-start; background: none; padding: 0; }
.error-box { text-align: center; padding: 1rem; color: var(--red); }
.form-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 1rem; align-items: center; font-size: 0.8rem; }
.form-grid small { color: var(--text-dim); }
.form-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 0.8rem 1rem 0.2rem; font-size: 0.78rem; }
.text-area { padding: 0.7rem; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: inherit; resize: vertical; }
.wide-btn { width: 100%; padding: 0.8rem; font-size: 0.9rem; justify-content: center; }
.grib-active { margin-bottom: 1rem; padding: 0.8rem; background: var(--bg-dark); border-radius: 6px; }
.grib-active-label { font-size: 0.7rem; color: var(--text-dim); margin-bottom: 0.2rem; }
.grib-active-name { font-weight: 600; color: var(--accent); font-size: 0.9rem; }
.grib-active-meta { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.2rem; }
.grib-list-title { font-size: 0.8rem; font-weight: 600; margin: 1rem 0 0.5rem; color: var(--text-dim); }
#scanChart { display: block; margin: 0.5rem auto; background: var(--bg-bar); border-radius: 6px; cursor: pointer; }

/* --- Feuille de route --- */
table.roadbook { width: 100%; border-collapse: collapse; font-size: 0.72rem; font-family: var(--font-num); }
table.roadbook th { position: sticky; top: 0; background: var(--bg-subbar); color: var(--text-dim); font-weight: 600; text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--border); }
table.roadbook td { text-align: right; padding: 3px 6px; border-bottom: 1px solid rgba(30, 58, 80, 0.5); white-space: nowrap; }
table.roadbook td.l, table.roadbook th.l { text-align: left; }
table.roadbook tr.man td { color: var(--gold); }
table.roadbook tr:hover td { background: rgba(236, 230, 214, 0.032); cursor: pointer; }
.tack-s { color: #2ecc71; } .tack-p { color: #ff6b6b; }

/* --- Polaire --- */
.polar-view { display: flex; gap: 1rem; padding: 0.8rem; flex-wrap: wrap; }
.polar-side { flex: 1; min-width: 180px; font-size: 0.75rem; }
.polar-table { margin-top: 0.6rem; font-family: var(--font-num); font-size: 0.7rem; line-height: 1.6; color: var(--text-dim); }
.polar-table b { color: var(--text); }
.polar-lib-list { max-height: 55vh; overflow-y: auto; padding: 0.4rem 0.8rem; }
.polar-lib-item { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.6rem; border-radius: 6px; cursor: pointer; font-size: 0.8rem; }
.polar-lib-item:hover { background: var(--accent-glow); }
.polar-lib-item .cat { font-size: 0.65rem; color: var(--text-dim); }
.polar-lib-group { font-size: 0.68rem; color: var(--accent); letter-spacing: 1px; margin: 0.7rem 0 0.2rem; }

/* --- Zones --- */
.zone-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.8rem; }
.zone-item input[type=text] { flex: 1; background: var(--bg-dark); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 3px 6px; }

/* --- Carte --- */
.route-point-marker { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 6px rgba(0,0,0,0.6); }
.route-point-marker.start { background: #00ff88; }
.route-point-marker.end { background: #ff6b6b; }
.route-point-marker.wp { background: #ffa502; width: 13px; height: 13px; border-width: 2px; }
.cursor-info-value.dim { color: var(--text-dim); margin-left: 6px; }
#cursorExtra { font-size: 0.62rem; color: var(--text-dim); }
.leaflet-container { background: var(--bg-dark); }
.zone-draw-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 1100; background: rgba(13,21,32,0.95);
    border: 1px solid var(--red); color: var(--text); border-radius: 8px; padding: 6px 12px; font-size: 0.75rem; display: flex; gap: 8px; align-items: center; }

@media screen and (max-width: 768px) {
    .result-float { width: calc(100% - 20px); left: 10px; right: 10px; max-height: 45%; }
    .tide-info { display: none; }
    .calc-status { max-width: 110px; }
}

/* Mode test : plan d'eau fictif, sans fond de carte */
.leaflet-container.test-mode-map { background: #12324a; }

/* ---------- Chrono de régate ---------- */
.regate-timer { max-width: min(340px, 96vw); }
.regate-timer-display { font-variant-numeric: tabular-nums; font-size: clamp(2.6rem, 12vw, 3.6rem) !important; letter-spacing: 1px; }
.regate-timer-controls { flex-wrap: wrap; justify-content: center; }
.regate-timer-btn { min-width: 64px; min-height: 40px; font-size: 0.85rem; }   /* boutons utilisables avec des gants / en mer */
.regate-timer-time-btn { min-width: 44px; min-height: 34px; }
.line-box { margin: 0.5rem 0.6rem; padding: 0.4rem 0.5rem; border: 1px solid rgba(236, 230, 214, 0.135); border-radius: 8px; font-size: 0.78rem; text-align: left; }
.line-box .lb-row { display: flex; justify-content: space-between; gap: 0.5rem; padding: 2px 0; color: var(--text-dim, #9ab); }
.line-box .v { color: #fff; font-family: var(--font-num); text-align: right; }
.line-box .v.ok { color: #2ecc71; }
.line-box .v.alert { color: #ff4757; font-weight: 700; }
.line-box .lb-btns { display: flex; gap: 0.4rem; justify-content: center; margin-top: 0.4rem; }
.timer-passages { margin: 0.3rem 0.6rem; font-size: 0.75rem; max-height: 120px; overflow-y: auto; }
.passage-row { display: flex; justify-content: space-between; gap: 0.5rem; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: var(--font-num); }
.passage-row .dim, .timer-passages .dim, .passage-times .dim { color: #778; }
.timer-opt { font-size: 0.7rem; justify-content: center; margin: 0.3rem 0 0.6rem; }
.regate-info-panel { bottom: 90px !important; max-width: min(300px, 92vw); }
.regate-timer { width: min(340px, 94vw) !important; max-height: calc(100vh - 70px); overflow-y: auto; }
.line-box .lb-row > span:first-child { white-space: nowrap; }

/* ---------- Comparaison de modèles, instruments, suivi ---------- */
.cmp-row { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 0.8rem; }
.cmp-row .cmp-meta { grid-column: 2; color: var(--text-dim, #9ab); font-size: 0.72rem; }
.cmp-row.dim { opacity: 0.5; cursor: default; }
.inst-row { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--border); }
.inst-row .mini-btn { margin-left: 2px; }
.nav-panel { position: fixed; right: 16px; bottom: 90px; z-index: 950; width: min(300px, 92vw); background: rgba(0,20,40,0.95); border: 1px solid #2f80ed; border-radius: 10px; font-size: 0.8rem; box-shadow: 0 4px 20px rgba(0,0,0,0.45); }
.nav-panel .nav-head { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.7rem; color: #7fb7ff; border-bottom: 1px solid rgba(47,128,237,0.35); }
.nav-panel .nav-grid { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.7rem; padding: 0.5rem 0.7rem; }
.nav-panel .nav-grid span { color: #9ab; }
.nav-panel .nav-grid b { color: #fff; font-family: var(--font-num); font-weight: 600; text-align: right; }
.nav-panel .nav-btns { display: flex; justify-content: center; padding: 0 0.5rem 0.6rem; }
#instrumentsBtn { margin-left: 4px; }
#instruments { flex-wrap: wrap; }
.swatch { display: inline-block; width: 14px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }


/* ---- Outils experts ---- */
.xp-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.5rem 1rem 0; border-bottom: 1px solid var(--border); }
.xp-tab { background: transparent; border: 1px solid var(--border); border-bottom: none; color: var(--text-dim, #9ab); padding: 0.35rem 0.6rem; border-radius: 6px 6px 0 0; font-size: 0.78rem; cursor: pointer; }
.xp-tab.active { background: rgba(255,255,255,0.08); color: var(--text, #fff); }
.xp-body { padding-bottom: 0.8rem; }
.xp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.35rem 1rem; font-size: 0.8rem; }
.xp-row small { color: var(--text-dim, #9ab); }
.xp-sep { border-top: 1px solid var(--border); margin: 0.5rem 1rem; }
.xp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; padding: 0.4rem 1rem; }
.xp-card { background: rgba(255,255,255,0.05); border-radius: 8px; padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.74rem; color: var(--text-dim, #9ab); }
.xp-card b { font-size: 1.05rem; color: var(--text, #fff); }
#expertModal canvas { display: block; margin: 0.4rem auto; max-width: calc(100% - 2rem); }
#expertModal .roadbook { margin: 0 1rem; width: calc(100% - 2rem); }
.loss-lo { color: #06d6a0; } .loss-mid { color: #ffd166; } .loss-hi { color: #ff6b6b; font-weight: 600; }
.route-point-marker.wp.mark-port { background: #ff4d4d; border-radius: 3px; }
.route-point-marker.wp.mark-stbd { background: #2ecc71; border-radius: 3px; }

/* ---- Résumé de la route et analyse IA ---- */
.route-summary { font-size: 0.74rem; line-height: 1.45; color: var(--text, #e6edf3); padding: 0.2rem 0.1rem 0.4rem; max-height: 34vh; overflow-y: auto; }
.route-summary p { margin: 0.3rem 0; }
.route-summary .brief-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin: 0.4rem 0 0.2rem; }
.brief-phases { margin: 0.2rem 0 0.3rem 1.1rem; padding: 0; }
.brief-phases li { margin: 0.18rem 0; }
.ai-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.4rem; padding: 0.6rem 1rem 0; }
.ai-thumb { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border); }
.ai-text { padding: 0.2rem 1rem 1rem; font-size: 0.85rem; line-height: 1.55; }
.ai-text h4 { margin: 0.8rem 0 0.2rem; font-size: 0.9rem; color: #8ab4f8; }
.ai-text ul { margin: 0.2rem 0 0.4rem 1.2rem; padding: 0; }

/* Capteurs live : calque au-dessus des canevas vent (400) et route (450) */
.live-overlay { position: absolute; inset: 0; z-index: 460; pointer-events: none; overflow: hidden; }
.live-chip { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 3px; padding: 2px 6px 2px 4px; border-radius: 10px;
  background: rgba(12,17,24,.9); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 1px 3px rgba(0,0,0,.5);
  font: 600 11px/14px system-ui, sans-serif; color: #fff; white-space: nowrap; pointer-events: auto; cursor: pointer; will-change: transform; }
.live-chip svg { display: block; flex: none; }
.live-chip b { font-weight: 700; }
.live-chip i { font-style: normal; font-weight: 500; color: #ffb3a8; font-size: 10px; }
.live-chip i::before { content: '/'; color: #8b98a6; margin-right: 1px; }
.live-chip:hover { border-color: #fff; z-index: 1; }
.live-old { opacity: .55; }
.live-tooltip { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; background: #1d2733; color: #e8eef4; border: 1px solid #3b4a5a; border-radius: 6px; padding: 6px 9px; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.live-tooltip.hidden { display: none; }
.live-tip { font: 12px/1.35 system-ui, sans-serif; min-width: 190px; }
.live-tip-h { font-weight: 700; margin-bottom: 4px; display: flex; justify-content: space-between; gap: 12px; }
.live-tip-h span { font-weight: 400; color: #9fb0c0; font-size: 11px; white-space: nowrap; }
.live-tip table { border-collapse: collapse; width: 100%; }
.live-tip td { padding: 1px 0; }
.live-tip td:first-child { color: #9fb0c0; padding-right: 10px; }
.live-tip td:nth-child(2), .live-tip td:nth-child(3) { text-align: right; padding-left: 8px; white-space: nowrap; }
.live-tip small { color: #9fb0c0; }
.live-tip .live-diff td { border-top: 1px solid #3b4a5a; padding-top: 3px; }
.live-tip .live-bad { color: #ffb347; font-weight: 700; }

/* Comparaison de routes (Fleet) — panneau flottant sur la carte */
.fleet-panel { position: absolute; top: 56px; left: 12px; z-index: 470; width: min(400px, calc(100% - 24px)); max-height: calc(100% - 140px); display: flex; flex-direction: column;
  background: rgba(13,21,32,.95); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.45); font: 12px/1.35 system-ui, sans-serif; color: #e8eef4; }
.fleet-panel.hidden { display: none; }
.fleet-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-bottom: 1px solid var(--border); }
.fleet-panel.collapsed .fleet-head { border-bottom: none; }
.fleet-title { font-weight: 700; }
.fleet-time { flex: 1; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.fleet-ic { background: none; border: none; color: #9fb0c0; cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 4px; }
.fleet-ic:hover { background: #22303f; color: #fff; }
.fleet-body { overflow-y: auto; }
.fleet-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border-bottom: 1px solid var(--border); cursor: pointer; }
.fleet-row:last-child { border-bottom: none; }
.fleet-row.hover { background: #1a2736; }
.fleet-row.main { background: rgba(236, 230, 214, 0.032); box-shadow: inset 3px 0 0 #fff; }
.fleet-row.off .fleet-main { opacity: .5; }
.fleet-eye { background: none; border: none; padding: 4px 2px; cursor: pointer; }
.fleet-sw { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid; box-sizing: border-box; }
.fleet-row.main .fleet-sw { background: #fff !important; border-color: #fff !important; }
.fleet-main { flex: 1; min-width: 0; }
.fleet-l1 { display: flex; align-items: center; gap: 6px; }
.fleet-rank { flex: none; width: 17px; height: 17px; border-radius: 50%; background: #22303f; color: #cfe0ee; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.fleet-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-tag { flex: none; font-size: 10px; background: #fff; color: var(--bg-bar); border-radius: 3px; padding: 0 4px; font-weight: 700; }
.fleet-l2 { color: #9fb0c0; margin-top: 1px; }
.fleet-l3 { margin-top: 3px; }
.fl-cond { color: #9fb0c0; }
.fl-gap { color: #ffb347; font-weight: 600; }
.fl-lead { color: #2ed573; font-weight: 600; }
.fl-ok { color: #2ed573; }
.fleet-btns { display: flex; align-items: center; gap: 2px; flex: none; }
.fleet-foot { padding: 6px 12px; border-top: 1px solid var(--border); color: #9fb0c0; }
.fleet-foot a { color: var(--accent); }
@media (max-width: 700px) { .fleet-panel { top: auto; bottom: 70px; max-height: 40vh; } }

/* Calques (bouton et panneau sur la carte) */
.layers-btn { position: absolute; bottom: 172px; right: 10px; z-index: 1000; background: rgba(13,21,32,.92); color: #e8eef4; border: 1px solid var(--border); border-radius: 8px;
  width: 32px; height: 32px; padding: 0; font-size: 16px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; }
html.big-ui .layers-btn { width: 48px; height: 44px; bottom: 210px; }
.layers-btn:hover, .layers-btn.active { border-color: var(--accent); color: var(--accent); }
.layers-panel { position: absolute; bottom: 60px; right: 52px; z-index: 1001; width: min(330px, calc(100% - 70px)); max-height: calc(100% - 90px); overflow-y: auto;
  background: rgba(13,21,32,.97); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.5); color: #e8eef4; font-size: 12px; }
.layers-panel.hidden { display: none; }
.lp-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 6px 12px; font-weight: 700; border-bottom: 1px solid var(--border); }
.lp-sec { padding: 8px 12px; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.lp-sec:last-child { border-bottom: none; }
.lp-title { width: 100%; font-size: 10px; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; }
.lp-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.lp-lab { color: #9fb0c0; }
.layers-panel .toggle-group { flex-wrap: wrap; }

/* Mode nuit : tout passe au rouge sombre (vision nocturne) */
html.night body { filter: grayscale(1) contrast(1.1); }
html.night::after { content: ''; position: fixed; inset: 0; background: #b00000; mix-blend-mode: multiply; pointer-events: none; z-index: 2147483000; }

/* Gros boutons (tablette à bord) */
html.big-ui .main-btn { padding: 10px 16px; font-size: 15px; }
html.big-ui .sub-btn, html.big-ui .sub-select, html.big-ui .sub-input, html.big-ui .toggle-opt { font-size: 15px; padding: 9px 13px; min-height: 42px; }
html.big-ui .checkbox-label { font-size: 15px; }
html.big-ui .checkbox-label input { width: 20px; height: 20px; }
html.big-ui .timeline-btn, html.big-ui .zoom-btn { min-width: 48px; min-height: 44px; font-size: 18px; }
html.big-ui .fleet-panel, html.big-ui .layers-panel, html.big-ui .live-tip { font-size: 15px; }
html.big-ui .sub-section-title { font-size: 11px; }

/* Saildocs */
.sd-grid { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 6px 1rem; align-items: center; font-size: 12px; }
.sd-grid label { display: flex; align-items: center; gap: 5px; }
.sd-req { margin: 8px 1rem; padding: 10px 12px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 6px; color: #7CFC9A; font: 13px/1.4 var(--font-num); white-space: pre-wrap; word-break: break-all; user-select: all; }

/* Instruments (Signal K) */
.sk-panel { position: absolute; left: 12px; bottom: 70px; z-index: 471; width: min(360px, calc(100% - 24px)); background: rgba(13,21,32,.95); border: 1px solid var(--border); border-radius: 10px; color: #e8eef4; box-shadow: 0 6px 22px rgba(0,0,0,.45); }
.sk-panel.hidden { display: none; }
.sk-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 12px; font-weight: 700; font-size: 12px; border-bottom: 1px solid var(--border); }
.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.sk-cell { background: var(--bg-subbar); padding: 5px 10px; }
.sk-lab { font-size: 10px; color: var(--text-dim); letter-spacing: .05em; }
.sk-val { font: 700 20px/1.2 var(--font-num); font-variant-numeric: tabular-nums; }
.sk-val small { font-size: 11px; font-weight: 400; color: #9fb0c0; }
.sk-cell.ok .sk-val { color: #2ed573; } .sk-cell.mid .sk-val { color: #ffd166; } .sk-cell.low .sk-val { color: #ff6b6b; }
.sk-alarm { padding: 6px 12px; background: rgba(255,107,107,.15); color: #ffb3a8; font-size: 12px; border-top: 1px solid #3b2a2a; }
.sk-help ol { margin: 6px 0 0 18px; padding: 0; } .sk-help li { margin: 3px 0; }
html.big-ui .sk-val { font-size: 28px; }
.fleet-sec { padding: 6px 12px 4px; font-size: 10px; letter-spacing: .06em; color: var(--text-dim); font-weight: 700; border-top: 1px solid var(--border); background: var(--bg-subbar); }
.fleet-sw.sq { border-radius: 3px; }
.fleet-cls { flex: none; font-size: 10px; color: #9fb0c0; border: 1px solid #3b4a5a; border-radius: 3px; padding: 0 4px; }

/* Logo Avel Vor */
.av-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #e8eef4; font: 700 17px 'Inter', system-ui, sans-serif; white-space: nowrap; }
.av-logo:hover { color: #fff; }
@media (max-width: 900px) { .av-logo span { display: none; } }