.hkw-card {
    --hkw-navy: #073b63;
    --hkw-blue: #086ca8;
    --hkw-cyan: #1fb8d0;
    --hkw-line: #d9e5ed;
    --hkw-soft: #f3f8fb;
    width: 100%;
    max-width: 1180px;
    box-sizing: border-box;
    margin: 1.25rem auto;
    overflow: hidden;
    border: 1px solid #cbdce7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(7, 59, 99, .14);
    color: #183242;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.hkw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 26px;
    background: linear-gradient(120deg, var(--hkw-navy), #075887 62%, #0b83ac);
    color: #fff;
}

.hkw-header h2 {
    margin: 2px 0 5px;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.85rem);
    line-height: 1.15;
}

.hkw-kicker,
.hkw-meta {
    margin: 0;
}

.hkw-kicker {
    color: #aeefff;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .09em;
}

.hkw-meta {
    color: #dceff7;
    font-size: .82rem;
}

.hkw-meta span {
    padding: 0 6px;
}

.hkw-badge {
    min-width: 112px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    text-align: center;
    font-size: .72rem;
    letter-spacing: .08em;
    line-height: 1.05;
}

.hkw-badge strong {
    font-size: 1.18rem;
}

.hkw-card [hidden] {
    display: none !important;
}

.hkw-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 18px 22px;
    border-bottom: 1px solid #cfe0e9;
    background: linear-gradient(180deg, #f7fbfd, #edf6fa);
}

.hkw-search {
    position: relative;
    z-index: 5;
    width: min(100%, 590px);
}

.hkw-search > label {
    display: block;
    margin: 0 0 6px;
    color: var(--hkw-navy);
    font-size: .82rem;
    font-weight: 800;
}

.hkw-search-control {
    position: relative;
}

.hkw-search-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    color: #337894;
    font-size: 1.35rem;
    line-height: 1;
    transform: translateY(-52%);
    pointer-events: none;
}

.hkw-card .hkw-city-input {
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 9px 42px;
    border: 2px solid #86b6ca;
    border-radius: 10px;
    outline: 0;
    background: #fff;
    box-shadow: 0 2px 7px rgba(7, 59, 99, .08);
    color: #173c51;
    font: 700 .96rem/1.2 Inter, "Segoe UI", Arial, sans-serif;
    appearance: none;
}

.hkw-card .hkw-city-input:focus {
    border-color: var(--hkw-blue);
    box-shadow: 0 0 0 3px rgba(8, 108, 168, .17);
}

.hkw-card .hkw-city-input::-webkit-search-cancel-button {
    cursor: pointer;
}

.hkw-search-results {
    position: absolute;
    top: 72px;
    right: 0;
    left: 0;
    z-index: 20;
    max-height: 330px;
    overflow-y: auto;
    border: 1px solid #9fc4d5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(7, 59, 99, .24);
}

.hkw-card .hkw-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 9px 13px;
    border: 0;
    border-bottom: 1px solid #dce9ef;
    border-radius: 0;
    background: #fff;
    color: #183b4e;
    text-align: left;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}

.hkw-card .hkw-search-result:last-child {
    border-bottom: 0;
}

.hkw-card .hkw-search-result:hover,
.hkw-card .hkw-search-result:focus,
.hkw-card .hkw-search-result.is-active {
    outline: 0;
    background: #e6f5fb;
    color: #073b63;
}

.hkw-result-name {
    font-size: .9rem;
    font-weight: 800;
}

.hkw-result-details {
    color: #587583;
    font-size: .74rem;
    white-space: nowrap;
}

.hkw-search-status {
    min-height: 18px;
    margin: 5px 2px 0;
    color: #55717f;
    font-size: .72rem;
}

.hkw-search-status.hkw-search-error {
    color: #9a2727;
    font-weight: 700;
}

.hkw-coverage {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 22px;
    color: #496978;
    font-size: .72rem;
}

.hkw-coverage strong {
    color: var(--hkw-navy);
    font-size: .95rem;
}

.hkw-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-color: #9bb9ca #edf4f7;
}

.hkw-stale {
    margin: 0;
    padding: 10px 18px;
    border-bottom: 1px solid #e7c56c;
    background: #fff6d8;
    color: #704f00;
    font-size: .82rem;
    font-weight: 700;
}

.hkw-table {
    width: 100%;
    min-width: 820px;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
}

.hkw-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 7px;
    border: 0;
    border-bottom: 2px solid #b8d2e1;
    background: #e8f3f8;
    color: #17435c;
    text-align: center;
    text-transform: uppercase;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}

.hkw-table tbody th,
.hkw-table tbody td {
    padding: 8px 7px;
    border: 0;
    border-bottom: 1px solid var(--hkw-line);
    background: #fff;
    text-align: center;
    white-space: nowrap;
}

.hkw-table .hkw-loading {
    height: 110px;
    background: #fff !important;
    color: #426677;
    text-align: center;
    font-weight: 700;
}

.hkw-table .hkw-load-error {
    color: #942424;
}

.hkw-table tbody tr:nth-child(even) th,
.hkw-table tbody tr:nth-child(even) td {
    background: var(--hkw-soft);
}

.hkw-table tbody tr:hover th,
.hkw-table tbody tr:hover td {
    background: #eaf7fb;
}

.hkw-table tbody tr.hkw-new-day th,
.hkw-table tbody tr.hkw-new-day td {
    border-top: 3px solid var(--hkw-cyan);
}

.hkw-table tbody th {
    color: var(--hkw-navy);
    font-weight: 800;
}

.hkw-hour {
    color: #075887;
    font-weight: 800;
}

.hkw-condition {
    min-width: 112px;
    text-align: left !important;
}

.hkw-icon {
    display: inline-block;
    width: 28px;
    margin-right: 4px;
    text-align: center;
    font-size: 1.15rem;
}

.hkw-temperature {
    font-weight: 900;
}

.hkw-temp-cold { color: #225db4; background: #e5f0ff !important; }
.hkw-temp-cool { color: #087da1; }
.hkw-temp-mild { color: #278238; }
.hkw-temp-warm { color: #c27500; background: #fff6d8 !important; }
.hkw-temp-hot { color: #d64a16; background: #ffe8dc !important; }
.hkw-temp-extreme { color: #fff; background: #bb142c !important; }

.hkw-rain {
    color: #075da3;
    background: #dff2ff !important;
    font-weight: 800;
}

.hkw-direction {
    display: inline-block;
    min-width: 31px;
    margin-left: 3px;
    padding: 2px 4px;
    border-radius: 4px;
    background: #dfeaf0;
    color: #274c60;
    font-size: .7rem;
    font-weight: 800;
}

.hkw-gust-moderate { color: #986400; background: #fff4c9 !important; }
.hkw-gust-strong { color: #b5440a; background: #ffe5d4 !important; }
.hkw-gust-danger { color: #fff; background: #b7192f !important; }

.hkw-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
    padding: 12px 18px;
    background: #edf5f8;
    color: #4d6878;
    font-size: .72rem;
}

.hkw-footer a {
    color: #075f94;
    font-weight: 700;
}

.hkw-message {
    margin: 1rem 0;
    padding: 13px 16px;
    border-radius: 8px;
    font-family: "Segoe UI", Arial, sans-serif;
}

.hkw-error {
    border: 1px solid #e5b5b5;
    background: #fff0f0;
    color: #8a2020;
}

@media (max-width: 680px) {
    .hkw-card {
        border-radius: 10px;
    }

    .hkw-header {
        align-items: flex-start;
        padding: 17px;
    }

    .hkw-toolbar {
        display: block;
        padding: 15px;
    }

    .hkw-search {
        width: 100%;
    }

    .hkw-card .hkw-search-result {
        display: block;
    }

    .hkw-result-name,
    .hkw-result-details {
        display: block;
    }

    .hkw-result-details {
        margin-top: 3px;
        white-space: normal;
    }

    .hkw-coverage {
        display: none;
    }

    .hkw-badge {
        min-width: 86px;
    }

    .hkw-footer {
        display: block;
    }

    .hkw-footer span {
        display: block;
        margin: 4px 0;
    }
}

@media print {
    .hkw-card {
        box-shadow: none;
    }

    .hkw-table-wrap {
        overflow: visible;
    }

    .hkw-table {
        min-width: 0;
        font-size: 7pt;
    }
}

/* === Sélecteur Général / Orages / Neige — v2.3 === */
.hkw-tabs {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #cfe0e9;
    background: #fff;
}

.hkw-card .hkw-tab {
    appearance: none;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid #a9c5d4;
    border-radius: 999px;
    background: #f4f8fb;
    color: #214b61;
    font: 800 .84rem/1.2 Inter, "Segoe UI", Arial, sans-serif;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.hkw-card .hkw-tab:hover,
.hkw-card .hkw-tab:focus-visible {
    outline: 0;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(7, 59, 99, .12);
}

.hkw-card .hkw-tab.is-active {
    border-color: #0b6f9f;
    background: #0b6f9f;
    color: #fff;
    box-shadow: 0 6px 15px rgba(11, 111, 159, .22);
}

.hkw-card .hkw-tab-storm.is-active {
    border-color: #7b3fa1;
    background: linear-gradient(135deg, #563072, #8d4ca8);
    box-shadow: 0 6px 15px rgba(102, 55, 132, .24);
}

.hkw-card .hkw-tab-snow.is-active {
    border-color: #2787ad;
    background: linear-gradient(135deg, #176a91, #50a9c9);
    box-shadow: 0 6px 15px rgba(23, 106, 145, .24);
}

.hkw-panel[hidden] {
    display: none !important;
}

.hkw-storm-summary {
    margin: 0;
    padding: 11px 18px;
    border-bottom: 1px solid #d8c7e5;
    background: #f5eff9;
    color: #55306a;
    font-size: .82rem;
    font-weight: 800;
}

.hkw-storm-summary-warning {
    border-bottom-color: #e6c467;
    background: #fff6d8;
    color: #704f00;
}

.hkw-storm-wrap {
    background: #fff;
}

.hkw-storm-table {
    min-width: 1680px;
    font-size: .77rem;
}

.hkw-storm-table thead th {
    background: #f0e8f6;
    color: #4f2b63;
    border-bottom-color: #cbb6d8;
}

.hkw-storm-table tbody tr:nth-child(even) th,
.hkw-storm-table tbody tr:nth-child(even) td {
    background: #fbf8fd;
}

.hkw-thunder-risk,
.hkw-hazard {
    font-weight: 900;
}

.hkw-thunder-0 { background: #f2f4f5 !important; color: #53616a; }
.hkw-thunder-1 { background: #e8f7ea !important; color: #207438; }
.hkw-thunder-2 { background: #fff5c9 !important; color: #806400; }
.hkw-thunder-3 { background: #ffe3c7 !important; color: #a44600; }
.hkw-thunder-4 { background: #b81f37 !important; color: #fff; }

.hkw-hazard-0 { color: #3f6c4b; }
.hkw-hazard-1 { background: #eef7e9 !important; color: #397144; }
.hkw-hazard-2 { background: #fff0c4 !important; color: #8b6100; }
.hkw-hazard-3 { background: #ffd9d9 !important; color: #9b2323; }

.hkw-cape-mid {
    background: #fff2c8 !important;
    color: #805a00;
    font-weight: 800;
}

.hkw-cape-high {
    background: #ffd5bd !important;
    color: #a33e00;
    font-weight: 900;
}

.hkw-lightning-high {
    background: #eee3ff !important;
    color: #5f2e99;
    font-weight: 900;
}

.hkw-rain-heavy {
    background: #d9ebff !important;
    color: #075aa5;
    font-weight: 900;
}

.hkw-storm-type {
    min-width: 150px;
    color: #4d2a61;
    font-weight: 800;
}


.hkw-details-cell {
    min-width: 74px;
}

.hkw-card .hkw-details-button {
    margin: 0;
    padding: 5px 8px;
    border: 1px solid #af92c2;
    border-radius: 7px;
    background: #f5eff9;
    color: #5d3471;
    font: 800 .7rem/1.1 Inter, "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}

.hkw-card .hkw-details-button:hover,
.hkw-card .hkw-details-button:focus-visible {
    outline: 0;
    background: #e9dcf1;
}

.hkw-advanced-row td {
    padding: 0 !important;
    background: #f8f4fb !important;
}

.hkw-advanced-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(135px, 1fr));
    gap: 8px;
    padding: 10px 14px 12px;
    text-align: left;
}

.hkw-advanced-item {
    padding: 8px 10px;
    border: 1px solid #ddd0e6;
    border-radius: 8px;
    background: #fff;
}

.hkw-advanced-label,
.hkw-advanced-value {
    display: block;
}

.hkw-advanced-label {
    margin-bottom: 3px;
    color: #6c5875;
    font-size: .66rem;
    font-weight: 700;
}

.hkw-advanced-value {
    color: #47275a;
    font-size: .82rem;
    font-weight: 900;
}

.hkw-storm-note {
    margin: 0;
    padding: 13px 18px 15px;
    border-top: 1px solid #e1d7e8;
    background: #faf8fc;
    color: #665b6c;
    font-size: .72rem;
    line-height: 1.45;
}


/* === Risque de neige — v2.3 === */
.hkw-snow-summary {
    margin: 0;
    padding: 11px 18px;
    border-bottom: 1px solid #b9d8e5;
    background: #edf8fc;
    color: #175a76;
    font-size: .82rem;
    font-weight: 800;
}

.hkw-snow-summary-warning {
    border-bottom-color: #e6c467;
    background: #fff6d8;
    color: #704f00;
}

.hkw-snow-table {
    min-width: 1220px;
    font-size: .8rem;
}

.hkw-snow-table thead th {
    background: #e8f5fa;
    color: #175a76;
    border-bottom-color: #add2e0;
}

.hkw-snow-table tbody tr:nth-child(even) th,
.hkw-snow-table tbody tr:nth-child(even) td {
    background: #f7fbfd;
}

.hkw-snow-risk,
.hkw-stick {
    font-weight: 900;
}

.hkw-snow-0 { background: #f2f4f5 !important; color: #53616a; }
.hkw-snow-1 { background: #e8f7ea !important; color: #207438; }
.hkw-snow-2 { background: #fff5c9 !important; color: #806400; }
.hkw-snow-3 { background: #dceeff !important; color: #145d91; }
.hkw-snow-4 { background: #255f9a !important; color: #fff; }

.hkw-stick-0 { color: #66747c; }
.hkw-stick-1 { color: #36714a; }
.hkw-stick-2 { background: #e8f3ff !important; color: #205f95; }
.hkw-stick-3 { background: #cfe5ff !important; color: #114f86; }

.hkw-snow-note {
    margin: 0;
    padding: 13px 18px 15px;
    border-top: 1px solid #d2e6ee;
    background: #f8fcfd;
    color: #526b76;
    font-size: .72rem;
    line-height: 1.45;
}

/* === Ajustements v2.4 : dates groupées, vent/pluie colorés, diagrammes === */
.hkw-day-cell {
    min-width: 66px;
    padding: 7px 6px !important;
    vertical-align: middle;
    border-right: 1px solid #9ed7d7 !important;
    background: #dff8f6 !important;
    color: #075887 !important;
    text-align: center !important;
    white-space: normal !important;
}

.hkw-day-weekday,
.hkw-day-date {
    display: block;
    line-height: 1.15;
}

.hkw-day-weekday {
    margin-bottom: 4px;
    font-size: .76rem;
    font-weight: 900;
    text-transform: capitalize;
}

.hkw-day-date {
    font-size: .72rem;
    font-weight: 800;
}

.hkw-hour {
    min-width: 54px;
}

.hkw-wind-cell strong {
    display: inline-block;
    min-width: 58px;
}

.hkw-direction {
    display: inline-flex;
    min-width: 48px;
    margin-left: 5px;
    padding: 3px 5px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 6px;
    background: #edf3f6;
    color: #274c60;
    font-size: .69rem;
    font-weight: 900;
    line-height: 1;
}

.hkw-wind-arrow {
    display: inline-block;
    width: 15px;
    transform-origin: 50% 50%;
    font-size: .95rem;
    line-height: 1;
}

.hkw-wind-light { color: #26725b; }
.hkw-direction.hkw-wind-light { background: #e7f6ef; }
.hkw-wind-moderate { color: #32729b; }
.hkw-direction.hkw-wind-moderate { background: #e5f1f8; }
.hkw-wind-fresh { color: #8b6500; }
.hkw-direction.hkw-wind-fresh { background: #fff4c9; }
.hkw-wind-strong { color: #b34a0a; }
.hkw-direction.hkw-wind-strong { background: #ffe4cf; }
.hkw-wind-violent { color: #a4142d; }
.hkw-direction.hkw-wind-violent { background: #ffd9df; }

.hkw-rain-trace {
    background: #eef9ff !important;
    color: #35779a !important;
}
.hkw-rain-light {
    background: #dff3ff !important;
    color: #126493 !important;
}
.hkw-rain-moderate {
    background: #bfe7ff !important;
    color: #075b91 !important;
}
.hkw-rain-strong {
    background: #81c9f3 !important;
    color: #063f70 !important;
}
.hkw-rain-intense {
    background: #225ea8 !important;
    color: #fff !important;
}

.hkw-top-scroll {
    height: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid #d8c7e5;
    background: #fbf8fd;
    scrollbar-color: #9d7caf #eee6f3;
}

.hkw-top-scroll[hidden] {
    display: none !important;
}

.hkw-top-scroll > div {
    height: 1px;
}

.hkw-advanced-list {
    display: flex;
    width: min(100%, 520px);
    margin: 0;
    padding: 10px 14px 12px;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.hkw-advanced-list .hkw-advanced-item {
    display: flex;
    padding: 7px 10px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #ddd0e6;
    border-radius: 7px;
    background: #fff;
}

.hkw-advanced-list .hkw-advanced-label,
.hkw-advanced-list .hkw-advanced-value {
    display: block;
    margin: 0;
}

.hkw-advanced-list .hkw-advanced-label {
    color: #6c5875;
    font-size: .72rem;
    font-weight: 800;
}

.hkw-advanced-list .hkw-advanced-value {
    color: #47275a;
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}

.hkw-charts {
    display: grid;
    gap: 16px;
    padding: 20px 18px 22px;
    border-top: 1px solid #dbe7ee;
    background: #f7fafc;
}

.hkw-chart-card {
    overflow: hidden;
    border: 1px solid #d4e2ea;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(7, 59, 99, .07);
}

.hkw-chart-card h3 {
    margin: 0;
    padding: 13px 15px 8px;
    color: #123f5a;
    font-size: .94rem;
    font-weight: 900;
}

.hkw-chart-total {
    margin: -3px 15px 2px;
    color: #0a679a;
    font-size: .78rem;
    font-weight: 900;
}

.hkw-chart {
    min-height: 180px;
    padding: 0 8px 8px;
}

.hkw-chart-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 180px;
}

.hkw-chart-grid {
    stroke: #dce7ed;
    stroke-width: 1;
}

.hkw-chart-axis {
    fill: #607987;
    font: 700 11px/1 Inter, "Segoe UI", Arial, sans-serif;
}

.hkw-chart-xaxis {
    font-size: 10px;
}

.hkw-chart-axis-cumulative {
    fill: #315a8d;
}

.hkw-chart-line {
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hkw-series-temperature { stroke: #d45b29; }
.hkw-series-pressure { stroke: #5d4ba7; }
.hkw-series-wind { stroke: #1c7f8c; }
.hkw-series-gust { stroke: #d07a23; }
.hkw-series-rain-cumulative { stroke: #315a8d; stroke-width: 2.4; }
.hkw-chart-rain-bar { fill: #45a9dd; }

.hkw-chart-empty {
    display: flex;
    min-height: 170px;
    align-items: center;
    justify-content: center;
    color: #687f8a;
    font-size: .8rem;
    font-weight: 700;
}

@media (max-width: 680px) {
    .hkw-tabs {
        gap: 7px;
        padding: 11px 12px;
        overflow-x: auto;
    }

    .hkw-card .hkw-tab {
        flex: 0 0 auto;
        padding: 9px 12px;
        font-size: .78rem;
    }

    .hkw-storm-summary,
    .hkw-snow-summary,
    .hkw-storm-note,
    .hkw-snow-note {
        padding-right: 13px;
        padding-left: 13px;
    }

    .hkw-advanced-list {
        width: auto;
        padding: 9px;
    }

    .hkw-advanced-list .hkw-advanced-item {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .hkw-charts {
        padding: 14px 10px 16px;
    }

    .hkw-chart-card h3 {
        padding-right: 12px;
        padding-left: 12px;
        font-size: .86rem;
    }

    .hkw-chart {
        overflow-x: auto;
        padding-right: 3px;
        padding-left: 3px;
    }

    .hkw-chart-svg {
        width: 760px;
        max-width: none;
    }
}


/* === Ajustements v2.5 : jours colorés, vents par pas de 5, orages compacts === */
.hkw-day-cell {
    border-right-width: 2px !important;
}
.hkw-day-mon { background: #e5f1ff !important; border-right-color: #6da8e8 !important; color: #175a91 !important; }
.hkw-day-tue { background: #e8f7ea !important; border-right-color: #72b67d !important; color: #246b36 !important; }
.hkw-day-wed { background: #fff0df !important; border-right-color: #e6a45f !important; color: #8a4a08 !important; }
.hkw-day-thu { background: #efe7fb !important; border-right-color: #9f7bd1 !important; color: #5e3a8b !important; }
.hkw-day-fri { background: #e1f7f5 !important; border-right-color: #5ab7ad !important; color: #17675f !important; }
.hkw-day-sat { background: #fbe8f2 !important; border-right-color: #d986ad !important; color: #8c3c63 !important; }
.hkw-day-sun { background: #fff5ce !important; border-right-color: #d8ad3c !important; color: #7b5a00 !important; }

.hkw-storm-table {
    min-width: 1410px;
}

/* Date et heure restent visibles pendant le défilement horizontal. */
.hkw-storm-table thead th:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 8;
    min-width: 70px;
}
.hkw-storm-table thead th:nth-child(2) {
    position: sticky;
    left: 70px;
    z-index: 8;
    min-width: 58px;
    box-shadow: 4px 0 8px rgba(50, 31, 60, .08);
}
.hkw-storm-table tbody .hkw-day-cell {
    position: sticky;
    left: 0;
    z-index: 6;
    min-width: 70px;
}
.hkw-storm-table tbody .hkw-hour {
    position: sticky;
    left: 70px;
    z-index: 5;
    min-width: 58px;
    background: #f8f4fb !important;
    box-shadow: 4px 0 8px rgba(50, 31, 60, .06);
}
.hkw-storm-table tbody tr:hover .hkw-hour {
    background: #eee4f5 !important;
}

.hkw-details-cell {
    min-width: 178px;
    padding: 6px 7px !important;
    vertical-align: top;
}
.hkw-card .hkw-details-button {
    width: 100%;
    min-height: 29px;
}
.hkw-details-inline {
    width: 100%;
    margin-top: 7px;
    padding: 0;
    gap: 5px;
}
.hkw-details-inline[hidden] {
    display: none !important;
}
.hkw-details-inline .hkw-advanced-item {
    display: block;
    padding: 6px 7px;
    border-radius: 6px;
    text-align: left;
}
.hkw-details-inline .hkw-advanced-label {
    margin: 0 0 2px;
    font-size: .64rem;
    line-height: 1.15;
    white-space: normal;
}
.hkw-details-inline .hkw-advanced-value {
    font-size: .76rem;
    line-height: 1.15;
    white-space: nowrap;
}

.hkw-top-scroll {
    height: 20px;
    border-top: 1px solid #e2d6ea;
}

/* Teinte légère de la colonne Heure, assortie au jour. */
.hkw-hour-mon { background: #f3f8ff !important; }
.hkw-hour-tue { background: #f2faf3 !important; }
.hkw-hour-wed { background: #fff8f0 !important; }
.hkw-hour-thu { background: #f8f4fd !important; }
.hkw-hour-fri { background: #f1fbfa !important; }
.hkw-hour-sat { background: #fff5fa !important; }
.hkw-hour-sun { background: #fffaf0 !important; }
.hkw-storm-table tbody .hkw-hour-mon { background: #f3f8ff !important; }
.hkw-storm-table tbody .hkw-hour-tue { background: #f2faf3 !important; }
.hkw-storm-table tbody .hkw-hour-wed { background: #fff8f0 !important; }
.hkw-storm-table tbody .hkw-hour-thu { background: #f8f4fd !important; }
.hkw-storm-table tbody .hkw-hour-fri { background: #f1fbfa !important; }
.hkw-storm-table tbody .hkw-hour-sat { background: #fff5fa !important; }
.hkw-storm-table tbody .hkw-hour-sun { background: #fffaf0 !important; }

/* === Altitude visible et profil neige expert === */
.hkw-city-altitude {
    display: inline-flex;
    margin: 7px 0 4px;
    padding: 5px 9px;
    align-items: center;
    border: 1px solid #c8dbe3;
    border-radius: 999px;
    background: #f2f8fa;
    color: #245b70;
    font-size: .76rem;
    font-weight: 850;
    line-height: 1.2;
}
.hkw-city-altitude.hkw-altitude-missing {
    border-color: #e2ca84;
    background: #fff7dd;
    color: #795b05;
}

.hkw-snow-table {
    min-width: 1260px;
}

.hkw-snow-wind {
    min-width: 142px;
    white-space: nowrap;
}
.hkw-snow-wind strong {
    display: block;
    margin-bottom: 5px;
}
.hkw-thickness {
    min-width: 88px;
    font-weight: 900;
    color: #315f78;
}

.hkw-snow-details-cell {
    min-width: 205px;
}
.hkw-snow-profile {
    display: flex;
    width: 100%;
    margin-top: 7px;
    padding: 0;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}
.hkw-snow-profile[hidden] {
    display: none !important;
}
.hkw-profile-section {
    display: block;
    margin: 0;
    padding: 7px;
    border: 1px solid #c8dfe8;
    border-radius: 7px;
    background: #f8fcfe;
}
.hkw-profile-title {
    display: block;
    margin: 0 0 6px;
    color: #175a76;
    font-size: .7rem;
    font-weight: 900;
}
.hkw-profile-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hkw-profile-item {
    display: flex;
    padding: 4px 5px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 5px;
    background: #fff;
}
.hkw-profile-label {
    color: #59717c;
    font-size: .66rem;
    font-weight: 800;
}
.hkw-profile-value {
    color: #123f53;
    font-size: .74rem;
    font-weight: 900;
    white-space: nowrap;
}

/* La date et l'heure restent lisibles dans le tableau neige aussi. */
.hkw-snow-table thead th:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 8;
    min-width: 70px;
}
.hkw-snow-table thead th:nth-child(2) {
    position: sticky;
    left: 70px;
    z-index: 8;
    min-width: 58px;
    box-shadow: 4px 0 8px rgba(20, 78, 104, .08);
}
.hkw-snow-table tbody .hkw-day-cell {
    position: sticky;
    left: 0;
    z-index: 6;
    min-width: 70px;
}
.hkw-snow-table tbody .hkw-hour {
    position: sticky;
    left: 70px;
    z-index: 5;
    min-width: 58px;
    box-shadow: 4px 0 8px rgba(20, 78, 104, .06);
}


/* === Diagrammes AROME modernisés === */
.hkw-charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 24px 20px 28px;
    background:
        radial-gradient(circle at top left, rgba(45, 137, 184, .07), transparent 38%),
        #f5f9fb;
}

.hkw-chart-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #d7e5ec;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
    box-shadow: 0 10px 28px rgba(20, 67, 94, .09);
}

.hkw-chart-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #2487b2, #60b8d5 45%, #9bcddd);
    content: "";
}

.hkw-chart-card h3 {
    margin: 0;
    padding: 18px 18px 7px;
    color: #123e57;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.3;
}

.hkw-chart-total {
    margin: 0 18px 4px;
    color: #126d9c;
    font-size: .78rem;
    font-weight: 900;
}

.hkw-chart {
    min-height: 260px;
    padding: 4px 12px 14px;
}

.hkw-chart-metrics {
    display: flex;
    gap: 7px;
    margin: 2px 4px 8px;
    flex-wrap: wrap;
}

.hkw-chart-metric {
    display: inline-flex;
    min-height: 28px;
    padding: 5px 9px;
    align-items: center;
    gap: 6px;
    border: 1px solid #dce8ee;
    border-radius: 999px;
    background: #f6fafc;
    color: #466573;
    font-size: .69rem;
    font-weight: 800;
}

.hkw-chart-metric-label {
    color: #6d8792;
    font-weight: 750;
}

.hkw-chart-metric-value {
    color: #173f55;
    font-weight: 950;
}

.hkw-chart-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #a9c7d5 transparent;
}

.hkw-chart-svg {
    display: block;
    width: 100%;
    min-width: 660px;
    height: auto;
    min-height: 235px;
    overflow: visible;
}

.hkw-chart-grid {
    stroke: rgba(96, 128, 143, .22);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.hkw-chart-grid-vertical {
    stroke-dasharray: 3 6;
    opacity: .55;
}

.hkw-chart-axis {
    fill: #617985;
    font: 750 11px/1 Inter, "Segoe UI", Arial, sans-serif;
}

.hkw-chart-xaxis {
    fill: #486575;
    font-size: 10px;
    font-weight: 850;
}

.hkw-chart-legend-text {
    fill: #3d5968;
    font-weight: 850;
}

.hkw-chart-line {
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 1px 1px rgba(21, 56, 73, .12));
}

.hkw-chart-point {
    stroke: #fff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    cursor: help;
}

.hkw-chart-value-label {
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linejoin: round;
    font: 900 11px/1 Inter, "Segoe UI", Arial, sans-serif;
}

.hkw-chart-area {
    stroke: none !important;
    opacity: .14;
}

.hkw-series-temperature { stroke: #df6c2f; }
.hkw-chart-area.hkw-series-temperature { fill: #f2a06e; opacity: .18; }
.hkw-chart-value-label.hkw-series-temperature { fill: #b44b17; }

.hkw-series-pressure { stroke: #6758b3; }
.hkw-chart-area.hkw-series-pressure { fill: #9185cf; opacity: .14; }
.hkw-chart-value-label.hkw-series-pressure { fill: #514593; }

.hkw-series-wind { stroke: #197e91; }
.hkw-series-gust { stroke: #db7b25; }
.hkw-chart-wind-envelope {
    fill: #e8b16f;
    opacity: .16;
    stroke: none;
}

.hkw-series-rain-cumulative { stroke: #316b9d; }
.hkw-chart-rain-bar { fill: #5cb8de; }
.hkw-chart-rain-trace { fill: #9bd6ed; }
.hkw-chart-rain-light { fill: #62bfe4; }
.hkw-chart-rain-moderate { fill: #318fc8; }
.hkw-chart-rain-strong { fill: #2667b2; }
.hkw-chart-rain-intense { fill: #6551a8; }

.hkw-chart-day-band {
    pointer-events: none;
    opacity: .42;
}
.hkw-dayband-mon { fill: #eaf4ff; }
.hkw-dayband-tue { fill: #edf8ef; }
.hkw-dayband-wed { fill: #fff4e8; }
.hkw-dayband-thu { fill: #f4edfc; }
.hkw-dayband-fri { fill: #eaf9f7; }
.hkw-dayband-sat { fill: #fceef5; }
.hkw-dayband-sun { fill: #fff8dc; }
.hkw-dayband-other { fill: #f5f7f8; }

.hkw-chart-day-label {
    font: 900 10px/1 Inter, "Segoe UI", Arial, sans-serif;
    letter-spacing: .02em;
    text-transform: capitalize;
}
.hkw-daylabel-mon { fill: #3978b2; }
.hkw-daylabel-tue { fill: #397b47; }
.hkw-daylabel-wed { fill: #9a5d18; }
.hkw-daylabel-thu { fill: #6f4c9b; }
.hkw-daylabel-fri { fill: #28756e; }
.hkw-daylabel-sat { fill: #9c4a72; }
.hkw-daylabel-sun { fill: #846614; }
.hkw-daylabel-other { fill: #647b87; }

.hkw-chart-empty {
    min-height: 230px;
    border: 1px dashed #d5e1e7;
    border-radius: 12px;
    background: #fafcfd;
}

@media (max-width: 1040px) {
    .hkw-charts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .hkw-charts {
        gap: 14px;
        padding: 14px 9px 18px;
    }

    .hkw-chart-card {
        border-radius: 14px;
    }

    .hkw-chart-card h3 {
        padding: 15px 13px 7px;
        font-size: .9rem;
    }

    .hkw-chart-total {
        margin-right: 13px;
        margin-left: 13px;
    }

    .hkw-chart {
        min-height: 245px;
        padding: 3px 6px 10px;
        overflow: visible;
    }

    .hkw-chart-metrics {
        margin-right: 6px;
        margin-left: 6px;
    }

    .hkw-chart-metric {
        padding: 4px 8px;
        font-size: .65rem;
    }

    .hkw-chart-viewport {
        border-radius: 10px;
    }

    .hkw-chart-svg {
        width: 760px;
        min-width: 760px;
        max-width: none;
    }
}

/* === v2.8 : grands diagrammes + vraies infobulles + géolocalisation === */
.hkw-charts {
    grid-template-columns: 1fr !important;
    gap: 24px;
    padding: 26px 20px 30px;
}

.hkw-chart-card {
    width: 100%;
}

.hkw-chart-card h3 {
    padding: 20px 20px 8px;
    font-size: 1.08rem;
}

.hkw-chart-total {
    margin-right: 20px;
    margin-left: 20px;
    font-size: .86rem;
}

.hkw-chart {
    min-height: 420px;
    padding: 6px 16px 18px;
}

.hkw-chart-metrics {
    gap: 9px;
    margin: 4px 8px 12px;
}

.hkw-chart-metric {
    min-height: 32px;
    padding: 6px 11px;
    font-size: .76rem;
}

.hkw-chart-viewport {
    position: relative;
    min-height: 390px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 12px;
    background: #fff;
}

.hkw-chart-svg {
    display: block;
    width: 100%;
    min-width: 900px;
    min-height: 390px;
    max-width: none;
}

.hkw-chart-axis {
    font-size: 13px;
}

.hkw-chart-xaxis {
    font-size: 12px;
}

.hkw-chart-day-label {
    font-size: 12px;
}

.hkw-chart-legend-text {
    font-size: 12px;
}

.hkw-chart-line {
    stroke-width: 3.6;
}

.hkw-chart-point {
    transition: r .12s ease, filter .12s ease;
    cursor: crosshair;
}

.hkw-chart-point:hover,
.hkw-chart-point:focus {
    r: 7.2px;
    outline: none;
    filter: drop-shadow(0 0 4px rgba(20, 62, 83, .32));
}

.hkw-chart-rain-bar {
    cursor: crosshair;
}

.hkw-chart-rain-bar:hover,
.hkw-chart-rain-bar:focus {
    outline: none;
    filter: brightness(.92) drop-shadow(0 2px 3px rgba(20, 62, 83, .22));
}

.hkw-chart-tooltip {
    position: absolute;
    z-index: 40;
    max-width: 260px;
    padding: 8px 11px;
    border: 1px solid rgba(12, 70, 101, .16);
    border-radius: 9px;
    background: rgba(14, 49, 69, .96);
    box-shadow: 0 8px 24px rgba(5, 37, 55, .22);
    color: #fff;
    font: 800 12px/1.35 Inter, "Segoe UI", Arial, sans-serif;
    white-space: nowrap;
    pointer-events: none;
    transform: translateY(-100%);
}

.hkw-card .hkw-locate-button {
    display: inline-flex;
    min-height: 36px;
    margin: 8px 0 0;
    padding: 7px 12px;
    align-items: center;
    justify-content: center;
    border: 1px solid #8dbdd1;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(7, 59, 99, .06);
    color: #0b628f;
    font: 850 .78rem/1.15 Inter, "Segoe UI", Arial, sans-serif;
    cursor: pointer;
}

.hkw-card .hkw-locate-button:hover,
.hkw-card .hkw-locate-button:focus-visible {
    outline: none;
    border-color: #277fa8;
    background: #eaf7fc;
}

.hkw-card .hkw-locate-button:disabled,
.hkw-card .hkw-locate-button.is-loading {
    opacity: .65;
    cursor: wait;
}

/* Le bouton ajoute de la hauteur sous le champ : la liste de résultats descend. */
.hkw-search-results {
    top: 116px;
}

@media (max-width: 680px) {
    .hkw-charts {
        gap: 18px;
        padding: 16px 8px 20px;
    }

    .hkw-chart-card h3 {
        padding: 16px 13px 7px;
        font-size: .95rem;
    }

    .hkw-chart {
        min-height: 390px;
        padding: 4px 6px 12px;
    }

    .hkw-chart-viewport {
        min-height: 360px;
    }

    .hkw-chart-svg {
        width: 1050px;
        min-width: 1050px;
        min-height: 360px;
    }

    .hkw-chart-tooltip {
        font-size: 11px;
    }

    .hkw-card .hkw-locate-button {
        width: 100%;
    }
}


/* v2.8.1 — graphiques en traits uniquement, sans zones remplies */
.hkw-chart-area,
.hkw-chart-wind-envelope {
    display: none !important;
    fill: none !important;
    opacity: 0 !important;
}

.hkw-chart-line {
    stroke-width: 2.35 !important;
    filter: none !important;
}

.hkw-chart-point {
    r: 4px;
    fill: #fff !important;
    stroke-width: 2.2 !important;
}

.hkw-chart-point.hkw-series-temperature { stroke: #df6c2f !important; }
.hkw-chart-point.hkw-series-pressure { stroke: #6758b3 !important; }
.hkw-chart-point.hkw-series-wind { stroke: #197e91 !important; }
.hkw-chart-point.hkw-series-gust { stroke: #db7b25 !important; }
.hkw-chart-point.hkw-series-rain-cumulative { stroke: #316b9d !important; }

.hkw-chart-day-band {
    opacity: .20 !important;
}


/* v2.8.2 — correctif définitif des courbes SVG */
.hkw-chart-svg path.hkw-chart-line,
.hkw-chart-svg .hkw-chart-line {
    fill: none !important;
}

/* Le cumul des précipitations est centré sous le titre du graphique. */
.hkw-chart-card .hkw-chart-total {
    width: auto;
    margin: 4px auto 8px !important;
    padding: 0 16px;
    text-align: center !important;
}

.hkw-plugin-version {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border: 1px solid #cfdde4;
    border-radius: 999px;
    background: #f7fafb;
    color: #607985;
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}


/* v2.8.3 — journées nettement identifiables dans les diagrammes */
.hkw-chart-day-band {
    opacity: .38 !important;
}

.hkw-chart-day-strip {
    pointer-events: none;
    opacity: .94;
}
.hkw-daystrip-mon { fill: #9cc9f3; }
.hkw-daystrip-tue { fill: #9bd3a5; }
.hkw-daystrip-wed { fill: #f5bd7c; }
.hkw-daystrip-thu { fill: #c3a7e5; }
.hkw-daystrip-fri { fill: #8ed4cb; }
.hkw-daystrip-sat { fill: #e9a9c8; }
.hkw-daystrip-sun { fill: #efd26e; }
.hkw-daystrip-other { fill: #c8d4da; }

.hkw-chart-day-separator {
    pointer-events: none;
    stroke-width: 2.2;
    stroke-dasharray: 5 4;
    opacity: .72;
}
.hkw-dayseparator-mon { stroke: #4c8bc5; }
.hkw-dayseparator-tue { stroke: #4c925a; }
.hkw-dayseparator-wed { stroke: #c57a25; }
.hkw-dayseparator-thu { stroke: #7f5cac; }
.hkw-dayseparator-fri { stroke: #388d83; }
.hkw-dayseparator-sat { stroke: #b25f87; }
.hkw-dayseparator-sun { stroke: #ad8617; }
.hkw-dayseparator-other { stroke: #8399a3; }

.hkw-chart-day-label {
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .035em !important;
    paint-order: stroke;
    stroke: rgba(255,255,255,.82);
    stroke-width: 2px;
    stroke-linejoin: round;
}

@media (max-width: 720px) {
    .hkw-chart-day-label {
        font-size: 11px !important;
    }
}
/* v2.8.5 — courbes simplifiées : sans points visibles, jours plus gros, meilleure échelle */
.hkw-chart-value-label {
    display: none !important;
}

.hkw-chart-point,
.hkw-chart-hitpoint {
    vector-effect: non-scaling-stroke;
}

.hkw-chart-point {
    display: none !important;
}

.hkw-chart-hitpoint {
    fill: transparent !important;
    stroke: none !important;
    opacity: 0 !important;
    pointer-events: all !important;
}

.hkw-chart-line {
    fill: none !important;
    stroke-width: 2.8 !important;
}

.hkw-chart-day-strip {
    height: 46px;
    opacity: 1 !important;
}

.hkw-chart-day-label {
    font-size: 24px !important;
    font-weight: 1000 !important;
    letter-spacing: .01em !important;
    stroke-width: 3px !important;
}

.hkw-chart-axis {
    font-size: 16px !important;
    font-weight: 700 !important;
}

.hkw-chart-xaxis {
    font-size: 15px !important;
}

.hkw-chart-grid {
    opacity: .72;
}

@media (max-width: 900px) {
    .hkw-chart-day-label {
        font-size: 19px !important;
    }
    .hkw-chart-axis {
        font-size: 14px !important;
    }
    .hkw-chart-xaxis {
        font-size: 13px !important;
    }
}


/* v2.8.7 — échelle pluie pilotée par le cumul + plus d'air en haut des courbes */
.hkw-chart-day-label {
    font-size: 26px !important;
    font-weight: 1000 !important;
}

.hkw-chart-day-strip {
    opacity: 1 !important;
}

@media (max-width: 900px) {
    .hkw-chart-day-label {
        font-size: 20px !important;
    }
}

/* Module AROME unique : la carte partage la carte principale et ses onglets. */
.hkw-map-panel {
    padding: 0 !important;
}

.hkw-map-panel > .hkm-card {
    margin: 0;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.hkw-map-panel .hkm-header,
.hkw-map-panel .hkm-card > .hkw-footer {
    display: none;
}

.hkw-map-panel .hkm-toolbar {
    border-radius: 0;
}

.hkw-tab-map {
    color: #173f78;
}