/* ============================================================
   theme.css — identité Suroît « table à cartes de nuit » (21/10/2026)
   Encre marine, papier de carte, jaune des balises cardinales pour
   l'action, rouge / vert de bâbord / tribord. Chargé après base.css
   et app.css : il remplace leurs couleurs, polices et finitions.
   ============================================================ */

:root {
    --ink: #101c24;          /* fond : encre de la carte de nuit */
    --hull: #172833;         /* panneaux */
    --hull-2: #1d3240;       /* champs, cartes internes */
    --rope: #2b404c;         /* filets, bordures */
    --paper: #ece6d6;        /* texte : papier de carte */
    --mist: #93a6af;         /* texte secondaire */
    --cardinal: #f0b429;     /* action principale */
    --port: #d9574c;         /* bâbord, alerte */
    --starboard: #3fae72;    /* tribord, OK */

    --bg-dark: var(--ink);
    --bg-bar: #13222c;
    --bg-subbar: var(--hull);
    --bg-card: var(--hull-2);
    --border: var(--rope);
    --text: var(--paper);
    --text-dim: var(--mist);
    --accent: var(--cardinal);
    --accent-glow: rgba(236, 230, 214, 0.08);
    --accent-dim: #c8921a;
    --green: var(--starboard);
    --red: var(--port);
    --orange: #e8963a;
    --gold: var(--cardinal);

    --font-ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-num: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
}

html, body { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
body { background: var(--ink); color: var(--paper); letter-spacing: 0.005em; }
button, input, select, textarea { font-family: inherit; }

/* ---------- Ascenseurs : fins, invisibles tant qu'on ne survole pas ---------- */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: rgba(236, 230, 214, 0.22) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
*:hover::-webkit-scrollbar-thumb { background: rgba(236, 230, 214, 0.22); }
::-webkit-scrollbar-thumb:hover { background: rgba(236, 230, 214, 0.4) !important; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.sub-bar::-webkit-scrollbar-thumb { background: transparent; }

/* Un seul défilement dans le panneau de route : le résumé ne défile plus seul */
.route-summary { max-height: none !important; overflow: visible !important; }

/* ---------- Barre principale ---------- */
.main-bar {
    background: var(--bg-bar);
    box-shadow: none;
    border-bottom: 1px solid var(--rope);
}
.logo, .av-logo span {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--paper);
    font-family: var(--font-num);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.main-btn {
    border-radius: 0;
    color: var(--mist);
    font-weight: 500;
    font-size: 0.86rem;
    border-bottom: 2px solid transparent;
    height: 100%;
    padding: 0 0.85rem;
}
.main-btn:hover { background: transparent; color: var(--paper); }
.main-btn.active {
    background: transparent !important;
    color: var(--paper) !important;
    border-bottom-color: var(--cardinal);
    box-shadow: none !important;
}
.main-btn .icon { opacity: 0.8; }
.main-btn .icon .glyph svg { width: 17px; height: 17px; }

/* ---------- Sous-barres ---------- */
.sub-bar { background: var(--hull); border-bottom: 1px solid var(--rope); }
.sub-section-title {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.74rem !important;
    font-weight: 600;
    color: var(--mist);
}
.sub-divider { background: var(--rope); }

/* ---------- Boutons ---------- */
.sub-btn, .timeline-btn, .zoom-btn, .mini-btn, .toggle-opt, .user-btn, .auth-form button {
    background: transparent;
    border: 1px solid var(--rope);
    color: var(--paper);
    border-radius: 4px;
    box-shadow: none;
    font-weight: 500;
    transition: border-color 0.12s, background-color 0.12s, color 0.12s;
}
.sub-btn:hover, .timeline-btn:hover, .zoom-btn:hover, .mini-btn:hover, .toggle-opt:hover, .user-btn:hover {
    background: rgba(236, 230, 214, 0.06);
    border-color: rgba(236, 230, 214, 0.38);
    color: var(--paper);
    box-shadow: none;
}
.sub-btn.active, .toggle-opt.active {
    background: var(--hull-2);
    border-color: rgba(236, 230, 214, 0.5);
    color: var(--paper);
    box-shadow: inset 0 -2px 0 var(--cardinal);
}
.sub-btn.primary, .auth-form button, button.primary {
    background: var(--cardinal);
    border-color: var(--cardinal);
    color: #1b1406;
    font-weight: 600;
    box-shadow: none;
}
.sub-btn.primary:hover, .auth-form button:hover, button.primary:hover {
    background: #f6c449;
    border-color: #f6c449;
    color: #1b1406;
    box-shadow: none;
    transform: none;
}
.sub-btn:focus-visible, .main-btn:focus-visible, .mini-btn:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible {
    outline: 2px solid var(--cardinal);
    outline-offset: 1px;
}
.sub-btn:disabled { opacity: 0.4; }

/* ---------- Champs ---------- */
.sub-input, .sub-select, .mini-input, .mini-select, .auth-form input {
    background: var(--ink);
    border: 1px solid var(--rope);
    color: var(--paper);
    border-radius: 4px;
}
.sub-input:focus, .sub-select:focus, .auth-form input:focus {
    border-color: var(--cardinal);
    box-shadow: none;
}
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--cardinal); }

/* ---------- Panneaux flottants et fenêtres ---------- */
.result-float, .modal, .layers-panel, .fleet-panel, .nav-panel, .user-dropdown-menu, .file-dropdown-menu, .sk-panel {
    background: var(--hull) !important;
    border: 1px solid var(--rope) !important;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(3, 8, 12, 0.55) !important;
    backdrop-filter: none;
}
.modal-header, .lp-head, .sk-head { border-bottom: 1px solid var(--rope); }
.modal-title, .result-float-title, #resultTitle {
    color: var(--paper) !important;
    font-family: var(--font-num);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}
.modal-close, .result-float-close { color: var(--mist); }
.modal-close:hover, .result-float-close:hover { color: var(--paper); background: transparent; }
.modal-overlay { background: rgba(6, 12, 16, 0.6); backdrop-filter: none; }

/* Chiffres : condensés, alignés, sans police machine à écrire */
.result-value, .result-cell .result-value, .value-chip, .tide-info, .timeline-time, .timeline-info-value,
.cursor-info-value, .polar-table, table.roadbook, .line-box .v, .passage-row, .nav-panel .nav-grid b, .sk-val {
    font-family: var(--font-num) !important;
    font-variant-numeric: tabular-nums;
}
.result-cell .result-value { font-size: 1.15rem; font-weight: 500; color: var(--paper); }
.sk-val { font-weight: 600; }

/* Étiquettes : en minuscules, discrètes */
.result-cell .result-label, .polar-lib-group, .lp-title, .sk-lab, .fleet-sec, .dropdown-header, .field-title,
.timeline-info-label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 0.74rem !important;
    color: var(--mist) !important;
    font-weight: 500;
}
.polar-lib-group { color: var(--paper) !important; font-weight: 600; margin-top: 0.9rem; }
.value-chip { color: var(--paper); }

/* Panneau de route */
.result-grid { gap: 10px 16px; margin: 8px 0 12px; }
.allure-bar { height: 6px; border-radius: 0; }
#routeGraph { background: var(--ink) !important; border-radius: 4px; }
.check-box { border-radius: 0 4px 4px 0; background: transparent !important; border: none !important; border-left: 3px solid; padding: 6px 10px; }
.check-box.ok { border-left-color: var(--starboard); color: var(--paper); }
.check-box.warn { border-left-color: var(--orange); color: var(--paper); }
.check-box .check-title { color: var(--paper); }
.check-box.warn .check-title { color: var(--orange); }
.check-box .check-detail { color: var(--mist); }
.route-summary { font-size: 0.82rem; line-height: 1.5; }
.route-summary b { color: var(--paper); font-weight: 600; }

/* Bibliothèque */
.polar-lib-item { border-radius: 4px; }
.polar-lib-item:hover { background: rgba(236, 230, 214, 0.06); }
.polar-lib-item .cat { color: var(--mist); }

/* Menus */
.dropdown-item:hover { background: rgba(236, 230, 214, 0.06); color: var(--paper); }

/* Messages */
.status-msg {
    background: var(--hull-2) !important;
    color: var(--paper) !important;
    border: 1px solid var(--rope) !important;
    border-left: 3px solid var(--mist) !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 24px rgba(3, 8, 12, 0.5) !important;
}
.status-msg.success { border-left-color: var(--starboard) !important; }
.status-msg.error { border-left-color: var(--port) !important; }

/* Frise et barre du bas */
.timeline { background: var(--bg-bar); border-top: 1px solid var(--rope); }
.timeline-progress { background: var(--cardinal) !important; }
.timeline-thumb { background: var(--paper) !important; border-color: var(--cardinal) !important; box-shadow: none !important; }
.timeline-marks .mk.day { background: rgba(240, 180, 41, 0.5); }

/* Indicateurs */
.status-badge { border-radius: 4px; }
.loading-spinner { border-top-color: var(--cardinal) !important; }

/* ---------- Pictogrammes (remplacent les émojis, voir js/app/glyph.js) ---------- */
.glyph { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.glyph svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.glyph.emo { filter: grayscale(1) brightness(1.6) contrast(0.9); font-size: 0.95em; opacity: 0.85; }

/* Contrôles Leaflet accordés au thème */
.leaflet-bar a, .leaflet-control-zoom a { background: var(--hull) !important; color: var(--paper) !important; border-color: var(--rope) !important; }
.leaflet-control-attribution { background: rgba(16, 28, 36, 0.75) !important; color: var(--mist) !important; }
.leaflet-control-attribution a { color: var(--paper) !important; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: 0.01ms !important; } }

/* Téléphone : les onglets ne montrent que leur pictogramme */
.main-btn .icon .glyph { display: inline-flex !important; }
@media screen and (max-width: 768px) {
    .main-btn { padding: 0 0.7rem; }
    .main-btn .icon .glyph svg { width: 20px; height: 20px; }
}

/* Bandeau de mise à jour */
.update-banner { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 5000; display: flex; align-items: center; gap: 10px;
    background: var(--hull-2); border: 1px solid var(--rope); border-left: 3px solid var(--cardinal); border-radius: 4px; padding: 8px 10px 8px 14px;
    box-shadow: 0 8px 24px rgba(3, 8, 12, 0.5); font-size: 0.85rem; color: var(--paper); }

/* ---------- Menu en roue (clic droit maintenu sur la carte, js/app/radial.js) ---------- */
.radial { position: fixed; z-index: 4500; width: 264px; height: 264px; pointer-events: none; user-select: none; }
.radial.hidden { display: none; }
.radial svg { position: absolute; inset: 0; filter: drop-shadow(0 8px 20px rgba(3, 8, 12, 0.55)); }
.rd-sector { fill: rgba(23, 40, 51, 0.94); stroke: var(--rope); stroke-width: 1; transition: fill 0.08s; }
.rd-sector.on { fill: var(--cardinal); stroke: var(--cardinal); }
.rd-hub { fill: var(--ink); stroke: var(--rope); stroke-width: 1; }
.rd-label { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; text-align: center;
    font-family: var(--font-num); font-size: 11px; font-weight: 500; color: var(--paper); line-height: 1.1; }
.rd-label > span { display: block; }
.rd-label .glyph svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rd-label.on { color: #1b1406; font-weight: 600; }
.rd-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; text-align: center; font-family: var(--font-num); font-size: 9.5px; color: var(--mist); line-height: 1.15; }
body.radial-open .leaflet-container { cursor: crosshair; }
body.radial-armed .leaflet-container { cursor: crosshair; }

/* ---------- Lecture de la route (js/app/routeplus.js) ---------- */
.sail-stats { margin: 6px 0 4px; }
.sail-stats.hidden { display: none; }
.sail-bar { display: flex; height: 6px; overflow: hidden; background: var(--hull-2); }
.sail-bar span { display: block; height: 100%; }
.sail-list { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 0.78rem; color: var(--mist); }
.sail-list span { display: inline-flex; align-items: center; gap: 5px; }
.sail-list i { width: 10px; height: 10px; display: inline-block; }
.sail-list b { color: var(--paper); font-weight: 500; font-family: var(--font-num); }
.sail-list .dim { opacity: 0.8; }
.arr-layer { position: absolute; left: 0; top: 0; z-index: 1100; pointer-events: none; will-change: transform; }
.arr-stack { display: flex; flex-direction: column; background: rgba(16, 28, 36, 0.94); border: 1px solid var(--rope); box-shadow: 0 8px 24px rgba(3,8,12,0.55); font-family: var(--font-num); font-size: 11.5px; white-space: nowrap; }
.arr-row { display: grid; grid-template-columns: 10px minmax(0, 190px) auto auto; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; color: var(--paper); border-top: 1px solid rgba(43,64,76,0.6); }
.arr-row:first-child { border-top: none; }
.arr-row i { width: 10px; height: 10px; display: block; }
.arr-row.main { background: rgba(236,230,214,0.06); }
.arr-name { overflow: hidden; text-overflow: ellipsis; }
.arr-time { font-weight: 600; text-align: right; }
.arr-delta { color: var(--mist); text-align: right; min-width: 56px; }
.arr-row:first-child .arr-delta { color: var(--cardinal); }
.route-tip { position: fixed; z-index: 4200; pointer-events: none; background: var(--hull); border: 1px solid var(--rope); border-left: 3px solid var(--cardinal); padding: 6px 10px; font-size: 11.5px; color: var(--paper); box-shadow: 0 8px 24px rgba(3,8,12,0.5); min-width: 190px; }
.route-tip.hidden { display: none; }
.route-tip div { display: flex; justify-content: space-between; gap: 14px; line-height: 1.5; }
.route-tip span { color: var(--mist); }
.route-tip b { font-family: var(--font-num); font-weight: 500; }

/* ---------- Tableau de marche (js/app/roadbook.js) ---------- */
.rb-bar { display: flex; align-items: center; gap: 16px; padding: 8px 16px; border-bottom: 1px solid var(--rope); flex-wrap: wrap; }
.rb-step { display: flex; align-items: center; gap: 8px; }
.rb-count { color: var(--mist); font-size: 0.78rem; font-family: var(--font-num); }
#rbTablePane.hidden, .rb-chart.hidden { display: none; }
table.roadbook { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
table.roadbook thead th { position: sticky; top: 0; background: var(--hull); z-index: 1; color: var(--mist); font-weight: 500; font-size: 0.72rem; padding: 6px 7px; border-bottom: 1px solid var(--rope); text-align: right; white-space: nowrap; }
table.roadbook td { padding: 4px 7px; border-bottom: 1px solid rgba(43,64,76,0.55); text-align: right; white-space: nowrap; }
table.roadbook th.l, table.roadbook td.l { text-align: left; }
table.roadbook tbody tr:nth-child(even) td { background: rgba(236,230,214,0.025); }
table.roadbook tbody tr:hover td { background: rgba(236,230,214,0.07); cursor: pointer; }
table.roadbook tr.man td { color: var(--cardinal); }
table.roadbook tr.sel td { background: rgba(240,180,41,0.14) !important; }
table.roadbook tr.last td { font-weight: 600; }
.rb-sw { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: 0; }
.tack-s { color: var(--starboard); font-size: 0.72em; } .tack-p { color: var(--port); font-size: 0.72em; }
.rb-chart { padding: 10px 16px 14px; }
.rb-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.76rem; color: var(--mist); margin-top: 6px; }
.rb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rb-legend i { width: 14px; height: 3px; display: inline-block; }
.rb-legend .dim { opacity: 0.8; }
#rbChartSum .xp-cards { margin-bottom: 8px; }
#roadbookModal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
#roadbookModal .modal-header > span:last-child { display: flex; align-items: center; gap: 6px; }
#roadbookModal .modal-header .sub-btn { display: inline-flex; }

/* ---------- Stratégie (js/app/strategy.js) ---------- */
.rb-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 12px 0; }
.rb-form label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--mist); }
.rb-durs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.rb-durs .checkbox-label { color: var(--paper); }
#robResult table, #scanTable table { margin-top: 8px; }
#scanTable tr.best td { color: var(--cardinal); }
.tag { display: inline-block; font-size: 0.7rem; padding: 1px 6px; border-radius: 2px; margin-left: 4px; font-weight: 600; }
.tag-best { background: var(--cardinal); color: #1b1406; }
.tag-comfy { background: var(--starboard); color: #06140c; }
.cons-box { border: 1px solid var(--rope); border-left: 3px solid var(--paper); padding: 8px 12px; margin: 8px 1rem; font-size: 0.82rem; line-height: 1.45; }
.cons-btns { display: flex; gap: 8px; margin-top: 8px; }
.haz-row { flex-wrap: wrap; gap: 4px 6px; }
.haz-row .mini-select { width: auto; }
.haz-overlay { image-rendering: pixelated; }

/* ---------- Bateau et voiles (js/app/boatplus.js) ---------- */
#polarModal .polar-view.hidden, .bp-pane.hidden { display: none !important; }
.bp-pane { padding: 10px 16px 14px; }
.bp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.bp-note { font-size: 0.8rem; color: var(--mist); margin: 6px 0 8px; line-height: 1.45; }
.bp-meas { display: grid; grid-template-columns: 420px 1fr; gap: 16px; align-items: start; }
.bp-meas canvas { width: 100%; max-width: 420px; height: auto; background: var(--ink); border: 1px solid var(--rope); }
.bp-actions { display: flex; gap: 8px; margin-top: 8px; }
.bp-edit-side { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 760px) { .bp-meas { grid-template-columns: 1fr; } }
.bp-row .lp-lab, .rb-step .lp-lab, .rb-durs .lp-lab { font-size: 0.78rem !important; color: var(--mist) !important; }

/* ---------- À bord (js/app/onboard.js) ---------- */
.inst-col { position: absolute; top: 0; right: 0; bottom: 0; width: 222px; z-index: 1150; background: var(--hull); border-left: 1px solid var(--rope); display: flex; flex-direction: column; gap: 0; overflow-y: auto; }
.inst-col.hidden { display: none; }
.ic-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 10px; border-bottom: 1px solid var(--rope); font-size: 0.72rem; color: var(--mist); }
.ic-head .live::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--starboard); margin-right: 6px; }
.ic-box { padding: 5px 10px 7px; border-bottom: 1px solid var(--rope); }
.ic-lab { font-size: 0.72rem; color: var(--mist); }
.ic-val { display: flex; flex-direction: column; align-items: center; background: var(--ink); border: 1px solid var(--rope); padding: 3px 0 4px; margin-top: 3px; font-family: var(--font-num); line-height: 1.1; }
.ic-val b { font-size: 1.45rem; font-weight: 600; color: var(--paper); }
.ic-val span { font-size: 1.05rem; color: var(--paper); }
.ic-val.big { font-size: 1.9rem; font-weight: 600; padding: 6px 0; color: var(--paper); }
.ic-val.ok { color: var(--starboard); } .ic-val.mid { color: var(--cardinal); } .ic-val.low { color: var(--port); }
.ic-rose { display: flex; justify-content: center; padding: 6px 0; border-bottom: 1px solid var(--rope); }
.ic-rose canvas { width: 200px; height: 200px; }
body.inst-col-on .result-float { right: 232px !important; }
body.inst-col-on .zoom-controls, body.inst-col-on .layers-btn { right: 232px !important; }
body.inst-col-on .layers-panel { right: 276px !important; }
body.inst-col-on .leaflet-control-attribution { margin-right: 222px; }
.ic-rose canvas { width: 176px; height: 176px; }
.ic-val b { font-size: 1.3rem; } .ic-val span { font-size: 0.95rem; } .ic-val.big { font-size: 1.6rem; padding: 4px 0; }
.ic-box { padding: 4px 10px 6px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.modal-header > span:last-child:not(.modal-title) { display: flex; align-items: center; gap: 6px; }
.modal-header .sub-btn { display: inline-flex; }

/* ---------- Sécurité (js/app/safety.js) ---------- */
.check-box.hidden { display: none; }
.danger-row { cursor: pointer; }
.danger-row:hover { color: var(--paper) !important; text-decoration: underline; }
.danger-icon, .tide-icon, .ais-icon { background: none !important; border: none !important; }
.tide-tag { display: flex; flex-direction: column; background: rgba(16,28,36,0.92); border: 1px solid var(--rope); border-left: 3px solid #4cc9f0; padding: 3px 7px; font-family: var(--font-num); white-space: nowrap; transform: translate(6px, -50%); }
.tide-tag b { font-size: 12px; color: var(--paper); } .tide-tag span { font-size: 11px; color: var(--paper); } .tide-tag small { font-size: 10px; color: var(--mist); }
.lp-note { font-size: 0.72rem; color: var(--mist); margin: 2px 0 4px; }

/* ---------- Confort (js/app/workspace.js) ---------- */
.drop-veil { position: fixed; inset: 0; z-index: 6000; background: rgba(16,28,36,0.72); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.drop-veil.hidden { display: none; }
.drop-veil div { border: 2px dashed var(--cardinal); padding: 28px 36px; color: var(--paper); font-size: 1rem; background: var(--hull); max-width: 520px; text-align: center; line-height: 1.5; }
body.map-full .main-bar, body.map-full .sub-bar { display: none !important; }
.views-list { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 6px; }
.view-chip { display: inline-flex; align-items: center; gap: 2px; }
kbd { display: inline-block; min-width: 22px; padding: 2px 7px; border: 1px solid var(--rope); border-bottom-width: 2px; border-radius: 3px; background: var(--hull-2); font-family: var(--font-num); font-size: 0.82rem; color: var(--paper); text-align: center; }
.help-table td { white-space: normal !important; }
.help-h { margin: 16px 0 6px; font-size: 0.82rem; color: var(--mist); font-weight: 600; }
.layers-btn { bottom: 210px !important; }
html.big-ui .layers-btn { bottom: 258px !important; }

/* Lot 8 : menus au-dessus de la sous-barre, sous-barre sans barre de défilement */
.main-bar { z-index: 3000 !important; }
.user-dropdown, .user-dropdown-menu { z-index: 9500 !important; }
.sub-bar { scrollbar-width: none !important; }
.sub-bar::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* Cartes de téléchargement GRIB empilées au-dessus du cadre Lat/Lon */
.download-notification { display: none !important; }
.dl-stack { position: fixed; left: 10px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.dl-card { pointer-events: auto; width: 270px; box-sizing: border-box; background: var(--ink, #101c24); border: 1px solid var(--cardinal, #f0b429); border-radius: 8px; padding: 10px 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.45); overflow: hidden; transition: opacity .3s ease, transform .3s ease, height .35s ease, padding .35s ease, margin .35s ease, border-width .35s ease; }
.dl-card.entering { opacity: 0; transform: translateY(12px); }
.dl-card.leaving { opacity: 0; height: 0 !important; padding-top: 0; padding-bottom: 0; border-width: 0; margin-top: -8px; }
.dl-card.ok { border-color: #3fb68b; } .dl-card.err { border-color: #d9574c; }
.dl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.dl-title { font-family: "Barlow Semi Condensed", Barlow, sans-serif; font-weight: 600; font-size: .9rem; color: var(--cardinal, #f0b429); letter-spacing: .02em; }
.dl-close { background: none; border: 0; color: #93a6af; font-size: 1.1rem; cursor: pointer; padding: 0 2px; line-height: 1; }
.dl-close:hover { color: #ece6d6; }
.dl-prog { height: 5px; background: #172833; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.dl-bar { height: 100%; width: 0; background: var(--cardinal, #f0b429); transition: width .3s ease; }
.dl-card.ok .dl-bar { background: #3fb68b; } .dl-card.err .dl-bar { background: #d9574c; }
.dl-text { font-size: .78rem; color: #93a6af; font-variant-numeric: tabular-nums; }

/* Choix du GRIB (onglet Route) : liste à cocher, plusieurs = une route par modèle */
.grib-pick { width: 240px; max-width: 240px; flex: 0 0 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; cursor: pointer; padding-right: 26px !important; position: relative; }
.grib-pick::after { content: ""; position: absolute; right: 10px; top: 50%; margin-top: -2px; border: 4px solid transparent; border-top-color: #93a6af; }
.grib-pick.multi { border-color: var(--cardinal, #f0b429) !important; color: var(--cardinal, #f0b429); }
.grib-pick-menu { position: fixed; z-index: 9000; width: min(420px, calc(100vw - 16px)); overflow-y: auto; background: #172833; border: 1px solid #2b404c; border-radius: 8px; box-shadow: 0 12px 34px rgba(0,0,0,.5); padding: 6px 0; scrollbar-width: none; }
.grib-pick-menu::-webkit-scrollbar { display: none; }
.gp-row { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; row-gap: 1px; padding: 8px 14px; cursor: pointer; align-items: center; }
.gp-row:hover { background: rgba(236,230,214,.05); }
.gp-row input { grid-row: span 2; accent-color: #f0b429; width: 15px; height: 15px; margin: 0; }
.gp-name { color: #ece6d6; font-size: .86rem; }
.gp-meta { color: #93a6af; font-size: .74rem; font-variant-numeric: tabular-nums; }
.gp-row.dim .gp-name, .gp-row.dim .gp-meta { opacity: .55; }
.gp-empty { padding: 12px 14px; color: #93a6af; font-size: .82rem; }
.gp-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid #2b404c; margin-top: 4px; padding: 8px 14px 4px; color: #93a6af; font-size: .74rem; }
#calculateBtn { min-width: 132px; justify-content: center; text-align: center; }

/* ============================================================
   1.4.0 — lisibilité : plus aucun texte noir sur fond sombre
   ============================================================ */
:root { color-scheme: dark; }   /* listes déroulantes, sélecteurs de date et d'heure, ascenseurs natifs en sombre */

/* champs sans classe (fenêtres créées par les scripts) : sombres, texte clair. :where() = priorité nulle,
   les styles propres à chaque champ restent prioritaires */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]), select, textarea) {
    background-color: var(--hull-2); color: var(--paper); border: 1px solid var(--rope); border-radius: 4px;
}
:where(option, optgroup) { background-color: var(--hull-2); color: var(--paper); }

/* bulles et fenêtres de la carte */
.leaflet-tooltip {
    background: rgba(16, 28, 36, 0.94); color: var(--paper); border: 1px solid var(--rope);
    border-radius: 5px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45); font-family: var(--font-ui);
}
.leaflet-tooltip-top::before { border-top-color: var(--rope); }
.leaflet-tooltip-bottom::before { border-bottom-color: var(--rope); }
.leaflet-tooltip-left::before { border-left-color: var(--rope); }
.leaflet-tooltip-right::before { border-right-color: var(--rope); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: var(--hull); color: var(--paper); border: 1px solid var(--rope); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.leaflet-popup-content-wrapper a { color: var(--cardinal); }
.leaflet-container a.leaflet-popup-close-button { color: var(--mist); }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--paper); }

/* outil de mesure : étiquette sombre bien visible sur tous les fonds */
.leaflet-tooltip.measure-tooltip {
    background: rgba(16, 28, 36, 0.94) !important; color: var(--paper) !important;
    border: 1px solid var(--cardinal) !important; border-radius: 5px; padding: 4px 9px;
    font: 600 13px/1.3 var(--font-num); white-space: nowrap; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5) !important;
}

/* choix des fonds gardés hors ligne */
.offline-bases { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--mist); margin-left: 6px; flex-wrap: wrap; }
.offline-bases label { display: inline-flex; gap: 3px; align-items: center; color: var(--paper); cursor: pointer; }

/* ---------- Portes, couloirs, choix de portes, marques (js/app/gates.js, 30/10/2026) ---------- */
.gt-tools { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.gt-tool { padding-left: 7px; padding-right: 7px; }
.gt-tool.gt-port { border-color: var(--port); }
.gt-tool.gt-stbd { border-color: var(--starboard); }
body.gt-active .gt-tool.on, .gt-tool:focus-visible { border-color: var(--cardinal); color: var(--cardinal); }
.gt-arrow { background: none; border: none; }
.gt-arrow svg { position: absolute; left: 0; top: 0; }
.gt-arrow span, .gt-num span, .gt-alt span {
    display: inline-block; white-space: nowrap; background: rgba(16, 28, 36, 0.92); color: var(--paper);
    border: 1px solid; border-radius: 9px; padding: 0 6px; font: 600 11px/16px var(--font-num);
}
.gt-arrow span { position: absolute; left: 24px; top: -4px; }
.gt-num, .gt-alt { background: none; border: none; }
.gt-num span { transform: translate(8px, -22px); }
.gt-alt span { transform: translate(-50%, -150%); }
.gt-end { background: none; border: none; }
.gt-end i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid; cursor: grab; }
.gt-menu {
    position: fixed; z-index: 4600; min-width: 230px; max-width: 300px; padding: 8px 10px; background: var(--hull);
    border: 1px solid var(--rope); border-radius: 6px; color: var(--paper); font-size: 12.5px; box-shadow: 0 8px 24px rgba(3, 8, 12, 0.55);
}
.gt-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.gt-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 5px 0; }
.gt-row input[type=number] { width: 70px; }
.gt-row input[type=text] { flex: 1; min-width: 120px; }
.gt-tag { color: var(--cardinal); font-size: 11px; }
.gt-dim { color: var(--mist); font-size: 11.5px; }
.gt-del { border-color: var(--port); }
.gt-bar {
    position: absolute; top: 46px; left: 50%; transform: translateX(-50%); z-index: 1001; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    max-width: calc(100% - 32px); padding: 6px 10px; background: rgba(16, 28, 36, 0.95); border: 1px solid var(--cardinal); border-radius: 6px;
    color: var(--paper); font-size: 12px;
}
.gt-bar.hidden { display: none; }
.gt-bar label { display: inline-flex; align-items: center; gap: 4px; }
.radial-sub .rd-label { width: 72px; font-size: 11px; line-height: 1.1; }
.radial-sub .rd-label > span:last-child { white-space: normal; }
body.m-on .gt-bar { top: calc(var(--m-top) + 52px); left: 12px; right: 12px; transform: none; max-width: none; font-size: 14px; }
body.m-on .gt-bar .mini-btn, body.m-on .gt-menu .mini-btn { min-height: 34px; padding: 4px 10px; font-size: 13px; }
body.m-on .gt-tools .gt-tool { min-height: 38px; }
body.m-on .gt-menu { left: 12px !important; right: 12px; max-width: none; font-size: 14px; }
.gt-tools-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.gt-tools-m .gt-dim { flex-basis: 100%; }
.gt-tools-m .m-btn { flex: 1 1 28%; }
.radial-sub .rd-label > span:last-child { white-space: pre-line; }

/* Cercle de passage (point de passage « à moins de R », gates.js) */
.gt-menu .gt-unit { width: auto; min-width: 70px; }
.gt-menu .gt-row b.gt-tag { font-size: inherit; }

/* coordonnées du curseur : toujours en bas à gauche de la carte, jamais déplacées */
#cursorInfo.cursor-info { left: 10px !important; bottom: 70px !important; top: auto !important; right: auto !important; transform: none !important; }

/* 1.4.0 — cadres de valeurs de taille fixe : ils ne grandissent plus quand les chiffres changent */
.cursor-info { min-width: 172px; box-sizing: border-box; }
.cursor-info, .cursor-info * , .ownship-chip, .timeline-info-value, .sk-val, .inst-col, .result-float, .fleet-panel { font-variant-numeric: tabular-nums; }
.cursor-info-row { justify-content: space-between; }
.cursor-info-value { text-align: right; min-width: 9ch; display: inline-block; }
.ownship-chip.os-float { min-width: 290px; box-sizing: border-box; justify-content: space-between; }
.ownship-chip .os-big { display: inline-block; min-width: 9.5em; }
.ownship-chip .os-sub { display: inline-block; min-width: 15em; white-space: nowrap; }
.timeline-info-value { display: inline-block; min-width: 5.2ch; text-align: right; }
.sk-val { display: inline-block; min-width: 4ch; }

/* ---- Mes pivots (pivots.js) : marqueur déplaçable A, B, C…, étiquette d'écart, zone du panneau de route ---- */
.pv-pin { background: none; border: none; }
.pv-pin span { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 50%;
    box-shadow: 0 0 0 1px var(--paper), 0 1px 6px rgba(0,0,0,.5); color: var(--ink); font: 700 11px var(--font-num, system-ui); cursor: grab; }
.leaflet-dragging .pv-pin span { cursor: grabbing; }
.leaflet-tooltip.pv-pin-tip { background: rgba(16,28,36,.92); color: var(--paper); border: 1px solid var(--rope); border-radius: 10px; padding: 1px 8px;
    font: 600 11.5px var(--font-num, system-ui); box-shadow: 0 1px 6px rgba(0,0,0,.4); white-space: nowrap; }
.leaflet-tooltip.pv-pin-tip::before { display: none; }
.pv-pin-tip b { color: var(--paper); }
.pv-pin-tip i { color: var(--mist); font-style: normal; font-weight: 400; }
.pv-spin { display: inline-block; width: 8px; height: 8px; border: 2px solid var(--mist); border-top-color: transparent; border-radius: 50%; vertical-align: -1px; animation: pvspin .8s linear infinite; }
@keyframes pvspin { to { transform: rotate(360deg); } }
.pv-both #pvPinArea { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--rope); }
.pv-pinsw { flex: 0 0 16px !important; height: 16px !important; border-radius: 50% !important; margin-top: 1px !important; color: var(--ink); font: 700 10px/16px var(--font-num, system-ui);
    text-align: center; font-style: normal; }
.pv-pinmain { flex: 1; min-width: 0; }
.pv-pname { cursor: text; border-bottom: 1px dotted var(--mist); }
.pv-del { float: right; margin-left: 6px; }
.pv-rename { width: 9em; font: inherit; background: var(--ink); color: var(--paper); border: 1px solid var(--cardinal); border-radius: 3px; padding: 0 4px; }
.pv-fix { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.pv-fix input[type=time] { background: var(--ink); color: var(--paper); border: 1px solid var(--rope); border-radius: 3px; font: 11.5px var(--font-num, system-ui); padding: 0 3px; color-scheme: dark; }
.pv-fix a { color: var(--cardinal); }