#map {
        height: calc(100vh - 52px);
        width: 100%;
        margin-top: 52px;
        position: relative;
    }
    .panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;

        height: 260px;
        min-height: 56px;
        max-height: 100vh;

        background: white;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.25);
        z-index: 2000;

        font-family: Arial;
        display: flex;
        flex-direction: column;

        touch-action: none;
    }

    .panel-header {
        height: 56px;
        min-height: 56px;
        cursor: ns-resize;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;

        background: white;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;

        position: sticky;
        top: 0;
        z-index: 10;
    }

    .panel-content {
        padding: 10px;
        overflow-y: auto;
        flex: 1;
    }

    .panel-handle {
        width: 50px;
        height: 6px;
        border-radius: 3px;
        background: #bbb;
    }

    .panel-summary {
        font-weight: bold;
        font-size: 14px;
    }

 

    .topControls {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
        flex-wrap: wrap;
    }

    .topControls select {
        padding: 4px;
    }

    .infoTable {
        width: 100%;
        border-collapse: collapse;
        font-size: 20px;
    }

    .infoTable td {
        padding: 4px 6px;
        vertical-align: top;
    }

    .infoTable td:first-child {
        width: 90px;
        font-weight: bold;
        color: #444;
        white-space: nowrap;
    }

    .infoTable tr:nth-child(even) {
        background: #f7f7f7;
    }

    .boat-icon {
        background: transparent;
        border: none;
    }

    .boat-svg {
        transform-origin: center center;
    }

    .record-control {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 6px;
    }

   .record-btn {
        width: 28px;
        height: 28px;

        cursor: pointer;

        background: white;

        border: 2px solid black;
        border-radius: 50%;

        position: relative;
        padding: 0;
    }

    .record-btn::before {
        content: "";

        position: absolute;

        width: 18px;
        height: 18px;

        background: red;
        border-radius: 50%;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
    }

    .record-btn.recording::before {
        width: 12px;
        height: 12px;

        border-radius: 2px;

        animation: recBlink 1s infinite;
    }

    @keyframes recBlink {
        50% {
            opacity: 0.3;
        }
    }

    @media (max-width: 768px) {

        .panel-summary {
            font-size: 18px;
        }

        .infoTable {
            font-size: 18px;
        }

        .infoTable td:first-child {
            width: 110px;
        }

        .topControls {
            font-size: 18px;
        }

        .topControls select {
            font-size: 18px;
            padding: 8px;
        }

        button {
            font-size: 18px;
        }

        #recordStatus {
            font-size: 18px;
            font-weight: bold;
        }

        .record-btn {
            width: 40px;
            height: 40px;
        }

        .record-btn::before {
            width: 24px;
            height: 24px;
        }
    }

    
    #topBar {
        position:fixed;
        top:0;
        left:0;
        right:0;
        height:52px;
        background:white;
        z-index:3000;
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:0 12px;
        box-shadow:0 2px 8px rgba(0,0,0,0.18);
        font-family:Arial;
    }

    .top-logo {
        display:flex;
        align-items:center;
        gap:8px;
        font-size:22px;
        font-weight:bold;
        color:#003b73;
    }

    .top-logo span {
        letter-spacing:0.3px;
    }

    .top-actions {
        display:flex;
        align-items:center;
        gap:8px;
    }

    .top-icon-btn {
        width:38px;
        height:38px;

        border:none;
        border-radius:50%;

        background:#f0f6ff;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:0;
        line-height:1;

        font-size:20px;
        cursor:pointer;
    }

    .top-icon-btn:hover {
        background:#dcecff;
    }
    
    #mapButtons {
        position: absolute;
        inset: 52px 0 0 0; /* sous la barre Sailonics */
        pointer-events: none;
        z-index: 2000;
    }

    #satelliteToggle,
    #gpsCenterBtn {
        pointer-events: auto;
    }

    #satelliteToggle {
        position: absolute;
        left: 15px;
        bottom: 20px;

        z-index: 2000;

        width: 60px;
        height: 46px;

        background: white;
        border-radius: 6px;
        overflow: hidden;

        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        cursor: pointer;

        display: flex;
        flex-direction: column;
    }

    #satelliteToggle:hover {
        transform: scale(1.03);
    }

    .map-thumb {
        flex: 1;
        background-size: cover;
        background-position: center;
    }

    .map-thumb.satellite {
        background-image: url("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/8/84/131");
    }

    .map-thumb.plan {
        background-image: url("https://a.tile.openstreetmap.org/8/131/84.png");
    }

    #satelliteToggle span {
        height: 14px;
        line-height: 14px;  

        font-size: 9px;
        font-weight: 600;
        text-align: center;
        
        background: white;
    }

    #gpsCenterBtn {
        position: absolute;
        right: 12px;
        bottom: 20px;

        z-index: 2000;

        width: 46px;
        height: 46px;

        background: white;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);

        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;
    }

    #gpsCenterBtn svg {
        width: 24px;
        height: 24px;
    }

.trace-nav-btn {
        border: none;
        background: white;
        color: black;
        font-size: 24px;
        cursor: pointer;
        padding: 2px 8px;
    }

    .trace-nav-btn:disabled {
        color: #bbb;
        cursor: default;
    }

.threshold-box {
    background:#f7f9fc;
    border-radius:12px;
    padding:12px;
    margin-top:8px;
}

.threshold-line {
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:#666;
    margin-bottom:8px;
}

.threshold-slider {
    position: relative;
    margin: 24px 0;
}

.threshold-slider input {
    width:100%;
    margin-top:5px;
}

.threshold-slider.blue strong { color:#007bff; }
.threshold-slider.green strong { color:green; }
.threshold-slider.orange strong { color:#ff8c00; }
.threshold-slider.red strong { color:red; }

.slider-value {
    position: absolute;
    top: -20px;

    transform: translateX(-50%);

    font-size: 12px;
    font-weight: bold;

    background: white;
    padding: 2px 5px;
    border-radius: 4px;

    border: 1px solid #ccc;
}
.wind-slider {
    width: 100%;
    height: 10px;

    appearance: none;
    border-radius: 5px;
    outline: none;
}

.wind-slider::-webkit-slider-thumb {
    appearance: none;

    width: 18px;
    height: 18px;

    border-radius: 50%;
    background: white;

    border: 2px solid #444;

    cursor: pointer;
}

.wind-slider.blue {
    background: #007bff;
}

.wind-slider.green {
    background: #00a000;
}

.wind-slider.orange {
    background: #ff8c00;
}

.wind-slider.red {
    background: #ff3030;
}

.time-switch {
    display:flex;
    align-items:center;
    gap:8px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    inset: 0;

    border-radius: 20px;

    background: #007bff;

    cursor: pointer;
}

.slider:before {
    content: "";

    position: absolute;

    width: 22px;
    height: 22px;

    top: 3px;
    left: 3px;

    background: white;
    border-radius: 50%;

    transition: 0.2s;
}

.switch input:checked + .slider:before {
    transform: translateX(24px);
}
#time12Label,
#time24Label {
    color: black;
    font-weight: normal;
}

.time-active {
    font-weight: bold !important;
}
.time-switch-box {
    display:flex;
    justify-content:flex-start;
    padding-left:30px;
}


.current-slider {
    width:100%;
    height:10px;
    appearance:none;
    border-radius:5px;
    outline:none;
}

.current-slider::-webkit-slider-thumb {
    appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:white;
    border:2px solid #444;
    cursor:pointer;
}

.current-slider.weak {
    background:#ffd700;
}

.current-slider.medium {
    background:#ff8c00;
}


.dual-current-slider {
    position:relative;
    height:58px;
    margin:28px 0 8px 0;
}

.dual-current-track {
    position:absolute;
    left:0;
    right:0;
    top:28px;
    height:10px;
    border-radius:6px;
    background:#ff8c00;
}

.dual-current-slider input[type="range"] {
    position:absolute;
    left:0;
    top:22px;
    width:100%;
    pointer-events:none;
    appearance:none;
    background:none;
}

.dual-current-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events:auto;
    appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:white;
    border:2px solid #444;
    cursor:pointer;
}

.dual-current-slider input[type="range"]::-moz-range-thumb {
    pointer-events:auto;
    width:18px;
    height:18px;
    border-radius:50%;
    background:white;
    border:2px solid #444;
    cursor:pointer;
}

.dual-slider-value {
    position:absolute;
    top:0;
    transform:translateX(-50%);
    font-size:12px;
    font-weight:bold;
    background:white;
    padding:2px 5px;
    border-radius:4px;
    border:1px solid #ccc;
    white-space:nowrap;
}
.multi-wind-slider {
    position:relative;
    height:68px;
    margin:32px 0 8px 0;
}

.multi-wind-track {
    position:absolute;
    left:0;
    right:0;
    top:32px;
    height:10px;
    border-radius:6px;
}

.multi-wind-slider input[type="range"] {
    position:absolute;
    left:0;
    top:26px;
    width:100%;
    pointer-events:none;
    appearance:none;
    background:none;
}

.multi-wind-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events:auto;
    appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:white;
    border:2px solid #444;
    cursor:pointer;
}

.multi-wind-slider input[type="range"]::-moz-range-thumb {
    pointer-events:auto;
    width:18px;
    height:18px;
    border-radius:50%;
    background:white;
    border:2px solid #444;
    cursor:pointer;
}

.multi-slider-value {
    position:absolute;
    top:0;
    transform:translateX(-50%);
    font-size:12px;
    font-weight:bold;
    background:white;
    padding:2px 5px;
    border-radius:4px;
    border:1px solid #ccc;
    white-space:nowrap;
}