/* ══════════════════════════════════════════════════════════════════════════════
   ASSOCE EXPLORER - Refined Civic Design
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
    --ex-font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ex-mono: 'JetBrains Mono', monospace;

    /* Ambre - palette Assoce centrée sur #ffbb09 */
    --ex-green-900: #78350f;
    --ex-green-800: #92400e;
    --ex-green-700: #b45309;
    --ex-green-600: #d97706;
    --ex-green-500: #f59e0b;
    --ex-green-400: #ffbb09;
    --ex-green-300: #fcd34d;
    --ex-green-200: #fde68a;
    --ex-green-100: #fef3c7;
    --ex-green-50:  #fffbeb;

    /* Stone neutrals - warm greys */
    --ex-stone-900: #1c1917;
    --ex-stone-800: #2a2a2a;
    --ex-stone-700: #44403c;
    --ex-stone-600: #57534e;
    --ex-stone-500: #78716c;
    --ex-stone-400: #a8a29e;
    --ex-stone-300: #d6d3d1;
    --ex-stone-200: #e7e5e4;
    --ex-stone-100: #f5f5f4;
    --ex-stone-50:  #fafaf9;

    /* Functional */
    --ex-accent: #ff9100;
    --ex-red: #fe5c5c;
    --ex-blue: #2563eb;

    /* Surfaces */
    --ex-surface: #ffffff;
    --ex-bg: #fdf6ec;

    /* Shadows */
    --ex-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
    --ex-shadow-md: 0 4px 12px rgba(28, 25, 23, 0.08);
    --ex-shadow-lg: 0 8px 30px rgba(28, 25, 23, 0.12);
    --ex-shadow-inner: inset 0 1px 3px rgba(28, 25, 23, 0.06);

    /* Transitions */
    --ex-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ex-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--ex-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--ex-bg);
    color: var(--ex-stone-800);
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--ex-stone-300);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ex-stone-400); }

/* ── Layout principal ── */
#app {
    display: flex;
    height: calc(100vh - 5em);
    overflow: hidden;
    background: var(--ex-surface);
    border-top: 1px solid var(--ex-stone-200);
}
#app.div, div { padding-left: 0; }

/* ── Colonnes ── */
.col {
    display: flex;
    flex-direction: column;
    width: 22em;
    flex-shrink: 0;
    border-right: 1px solid var(--ex-stone-200);
    overflow: hidden;
    background: var(--ex-surface);
}
.col-result {
    flex: 1;
    width: auto;
    min-width: 0;
    border-right: none;
    background: var(--ex-stone-50);
}

/* ── En-têtes de colonne ── */
.col-head {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0 1em;
    height: 2.75em;
    background: var(--ex-surface);
    border-bottom: 1px solid var(--ex-stone-200);
    flex-shrink: 0;
}
.col-head-title {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ex-green-800);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Blocs accordéon (col Géo) ── */
.acc-block {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}
.acc-block.acc-expanded {
    flex: 1;
    min-height: 0;
}
.acc-summary {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.55em 1em;
    background: var(--ex-stone-50);
    border-bottom: 1px solid var(--ex-stone-200);
    flex-shrink: 0;
    cursor: default;
}
.acc-summary-label {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ex-stone-600);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s var(--ex-ease);
}
.acc-summary-label.selected {
    text-transform: none;
    font-weight: 600;
    font-size: 0.85em;
    letter-spacing: 0;
    cursor: pointer;
    color: var(--ex-green-800);
}
.acc-summary-label.selected:hover {
    color: var(--ex-green-600);
}

/* ── Bouton Modifier ── */
.btn-edit {
    background: none;
    border: 2px solid var(--ex-stone-200);
    border-radius: 6px;
    padding: 0.2em 0.6em;
    font-size: 0.72em;
    font-family: var(--ex-font);
    font-weight: 500;
    cursor: pointer;
    color: var(--ex-stone-600);
    flex-shrink: 0;
    white-space: nowrap;
    transition: all 0.15s var(--ex-ease);
}
.btn-edit:hover {
    background: var(--ex-stone-100);
    border-color: var(--ex-stone-300);
    color: var(--ex-stone-800);
}

/* ── Recherche dans liste ── */
.col-search {
    padding: 0.45em 0.7em;
    border-bottom: 1px solid var(--ex-stone-200);
    flex-shrink: 0;
    background: var(--ex-surface);
}
.col-search input {
    width: 100%;
    padding: 0.4em 0.65em;
    border: 1px solid var(--ex-stone-200);
    border-radius: 8px;
    font-size: 0.84em;
    font-family: var(--ex-font);
    background: var(--ex-stone-50);
    color: var(--ex-stone-800);
    transition: all 0.2s var(--ex-ease);
    outline: none;
}
.col-search input:focus {
    border-color: var(--ex-green-400);
    background: var(--ex-surface);
    box-shadow: 0 0 0 3px rgba(116, 198, 157, 0.15);
}
.col-search input::placeholder { color: var(--ex-stone-400); }

/* ── Listes scrollables ── */
.col-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ── Items liste ── */
.item {
    padding: 0.55em 1em;
    cursor: pointer;
    border-bottom: 1px solid var(--ex-stone-100);
    font-size: 0.86em;
    line-height: 1.4;
    transition: all 0.12s var(--ex-ease);
    position: relative;
}
.item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ex-green-500);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transform: scaleY(0.4);
    transition: all 0.2s var(--ex-ease);
}
.item:hover {
    background: var(--ex-green-50);
}
.item:hover::before {
    opacity: 0.4;
    transform: scaleY(0.6);
}
.item.active {
    background: var(--ex-green-100);
    color: var(--ex-green-900);
}
.item.active::before {
    opacity: 1;
    transform: scaleY(1);
}
.item.active .sub { color: var(--ex-green-700); }
.item.active .badge {
    background: var(--ex-green-700);
    color: white;
}
.item .name {
    display: block;
    font-weight: 500;
}
.item .sub {
    font-size: 0.78em;
    color: var(--ex-stone-500);
    margin-top: 0.15em;
}

.badge {
    display: inline-block;
    font-size: 0.65em;
    font-weight: 600;
    font-family: var(--ex-mono);
    padding: 0.15em 0.45em;
    border-radius: 5px;
    background: var(--ex-stone-200);
    color: var(--ex-stone-600);
    margin-left: 0.35em;
    vertical-align: middle;
    letter-spacing: 0.02em;
    transition: all 0.15s var(--ex-ease);
}

/* ── Titres de groupe ── */
.group-title {
    padding: 0.35em 1em;
    font-size: 0.65em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ex-stone-500);
    background: var(--ex-stone-50);
    border-bottom: 1px solid var(--ex-stone-200);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* ── Onglets activités ── */
.act-tabs {
    display: flex;
    border-bottom: 1px solid var(--ex-stone-200);
    flex-shrink: 0;
    overflow-x: auto;
    background: var(--ex-surface);
    gap: 0;
}
.act-tab {
    padding: 0.5em 0.8em;
    font-size: 0.76em;
    font-weight: 500;
    font-family: var(--ex-font);
    cursor: pointer;
    white-space: nowrap;
    color: var(--ex-stone-500);
    background: none;
    flex-shrink: 0;
    border: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transition: all 0.2s var(--ex-ease);
    position: relative;
}
.act-tab:hover {
    color: var(--ex-green-700);
    background: var(--ex-green-50);
}
.act-tab.active {
    color: var(--ex-green-800);
    font-weight: 700;
    border-bottom-color: var(--ex-green-600);
}

/* ── Colonne résultats : en-tête ── */
.res-head {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0 1em;
    height: 2.75em;
    background: var(--ex-surface);
    border-bottom: 1px solid var(--ex-stone-200);
    flex-shrink: 0;
    position: relative;
    z-index: 1000;
}
.res-head-title {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ex-green-800);
}
.view-btns {
    display: flex;
    gap: 3px;
    margin-left: auto;
    background: var(--ex-stone-100);
    padding: 3px;
    border-radius: 8px;
}
.view-btn {
    padding: 0.3em 0.7em;
    font-size: 0.74em;
    font-weight: 500;
    font-family: var(--ex-font);
    border: 2px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    color: var(--ex-stone-600);
    transition: all 0.15s var(--ex-ease);
}
.view-btn:hover {
    background: var(--ex-stone-200);
    color: var(--ex-stone-800);
}
.view-btn.active {
    background: var(--ex-surface);
    color: var(--ex-green-800);
    font-weight: 600;
    box-shadow: var(--ex-shadow-sm);
}

/* ── Barre récapitulatif ── */
.res-recap {
    padding: 0.45em 1em;
    font-size: 0.78em;
    color: var(--ex-stone-500);
    background: var(--ex-green-50);
    border-bottom: 1px solid var(--ex-stone-200);
    flex-shrink: 0;
    font-style: italic;
    transition: all 0.3s var(--ex-ease);
}
.res-recap.recap-ready {
    font-style: normal;
    font-weight: 500;
    color: var(--ex-green-800);
    background: var(--ex-green-100);
    border-bottom-color: var(--ex-green-200);
}

/* ── Barre recherche résultats ── */
.res-search-bar {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.45em 0.7em;
    border-bottom: 1px solid var(--ex-stone-200);
    flex-shrink: 0;
    background: var(--ex-surface);
}
.res-search-bar input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 0.4em 0.65em;
    border: 1px solid var(--ex-stone-200);
    border-radius: 8px;
    font-size: 0.84em;
    font-family: var(--ex-font);
    background: var(--ex-stone-50);
    color: var(--ex-stone-800);
    outline: none;
    transition: all 0.2s var(--ex-ease);
}
.res-search-bar input[type="text"]:focus {
    border-color: var(--ex-green-400);
    background: var(--ex-surface);
    box-shadow: 0 0 0 3px rgba(116, 198, 157, 0.15);
}
.res-search-bar input[type="text"]::placeholder { color: var(--ex-stone-400); }

.dissolved-toggle {
    display: flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.76em;
    color: var(--ex-stone-500);
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    font-weight: 500;
    transition: color 0.15s;
}
.dissolved-toggle:hover { color: var(--ex-stone-700); }
.dissolved-toggle input {
    cursor: pointer;
    margin: 0;
    accent-color: var(--ex-green-600);
    width: 14px;
    height: 14px;
}

/* ── Zone contenu résultats ── */
#res-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
#res-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ── Carte ── */
#res-map {
    height: 58%;
    flex-shrink: 0;
    border-bottom: 2px solid var(--ex-stone-200);
}
#res-map-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ── Stats ── */
#res-stats {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* ── Items association ── */
.assoc-item {
    border-bottom: 1px solid var(--ex-stone-100);
    background: var(--ex-surface);
    transition: background 0.12s var(--ex-ease);
}
.assoc-item:hover { background: var(--ex-green-50); }
.assoc-item.hl {
    background: #fef9ee;
    border-left: 3px solid var(--ex-accent);
}
.assoc-link {
    display: block;
    padding: 0.65em 1em 0.6em;
    text-decoration: none;
    color: inherit;
}
.assoc-item .assoc-top {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
}
.assoc-item .aname {
    flex: 1;
    font-size: 0.84em;
    font-weight: 600;
    color: var(--ex-stone-800);
    line-height: 1.35;
}
.assoc-item .afiche {
    flex-shrink: 0;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--ex-green-700);
    opacity: 0.45;
    white-space: nowrap;
    align-self: center;
    transition: opacity 0.15s;
}
.assoc-item:hover .afiche { opacity: 1; }
.assoc-item .assoc-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5em;
    margin-top: 0.28em;
}
.assoc-item .acity {
    font-size: 0.76em;
    color: var(--ex-stone-500);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.assoc-item .adate {
    font-size: 0.72em;
    color: var(--ex-stone-400);
    flex-shrink: 0;
    white-space: nowrap;
}
.assoc-item .adisso {
    font-size: 0.68em;
    font-weight: 600;
    padding: 0.1em 0.45em;
    border-radius: 4px;
    background: #fee2e2;
    color: #b91c1c;
    flex-shrink: 0;
}

/* ── Message vide / chargement ── */
.empty {
    padding: 2em 1.5em;
    text-align: center;
    color: var(--ex-stone-400);
    font-size: 0.85em;
    font-style: italic;
    line-height: 1.5;
}
.loading {
    padding: 1.5em;
    text-align: center;
    color: var(--ex-green-600);
    font-size: 0.82em;
    font-weight: 500;
    animation: pulse 1.2s ease-in-out infinite;
}
.loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--ex-green-300);
    border-top-color: var(--ex-green-600);
    border-radius: 50%;
    margin-right: 0.5em;
    vertical-align: middle;
    animation: spin 0.8s linear infinite;
}
.error-msg {
    padding: 0.8em 1em;
    color: var(--ex-red);
    font-size: 0.82em;
    text-align: center;
    font-weight: 500;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Checkbox personnalisée ── */
.item.checkable {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
}
.item.checkable input[type=checkbox] {
    margin-top: 0.25em;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--ex-green-600);
    width: 15px;
    height: 15px;
}
.item.checkable.checked {
    background: var(--ex-green-50);
}
.item.checkable.checked .name { font-weight: 600; color: var(--ex-green-800); }

/* ── Séparateur ── */
.list-sep {
    height: 1px;
    background: var(--ex-stone-200);
    margin: 0.15em 0;
}

/* ── Recherche géographique autocomplete ── */
#geo-search-wrap {
    position: relative;
    flex-shrink: 0;
    padding: 0.5em 0.7em;
    border-bottom: 1px solid var(--ex-stone-200);
    background: var(--ex-surface);
}
#geo-search-wrap input {
    width: 100%;
    padding: 0.45em 0.65em;
    border: 1px solid var(--ex-stone-200);
    border-radius: 8px;
    font-size: 0.84em;
    font-family: var(--ex-font);
    background: var(--ex-stone-50);
    color: var(--ex-stone-800);
    outline: none;
    transition: all 0.2s var(--ex-ease);
}
#geo-search-wrap input:focus {
    border-color: var(--ex-green-400);
    background: var(--ex-surface);
    box-shadow: 0 0 0 3px rgba(116, 198, 157, 0.15);
}
#geo-search-wrap input::placeholder { color: var(--ex-stone-400); }
#geo-autocomplete {
    display: none;
    position: absolute;
    left: 0.7em;
    right: 0.7em;
    top: calc(100% - 0.3em);
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 0 0 10px 10px;
    box-shadow: var(--ex-shadow-lg);
    z-index: 200;
    max-height: 20em;
    overflow-y: auto;
}
#geo-autocomplete.open { display: block; }
.geo-sug {
    padding: 0.5em 0.8em;
    cursor: pointer;
    border-bottom: 1px solid var(--ex-stone-100);
    font-size: 0.84em;
    transition: background 0.1s;
}
.geo-sug:last-child { border-bottom: none; }
.geo-sug:hover { background: var(--ex-green-50); }
.geo-sug-name { font-weight: 600; color: var(--ex-stone-800); }
.geo-sug-sub { font-size: 0.77em; color: var(--ex-stone-500); margin-top: 0.1em; }
.geo-sug-type {
    display: inline-block;
    font-size: 0.62em;
    font-weight: 700;
    padding: 0.15em 0.45em;
    border-radius: 4px;
    margin-left: 0.5em;
    vertical-align: middle;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.type-dept    { background: #dbeafe; color: #1e40af; }
.type-epci    { background: #d1fae5; color: #065f46; }
.type-commune { background: var(--ex-green-100); color: var(--ex-green-800); }

/* ── Bouton supprimer sélection ── */
.btn-clear {
    background: none;
    border: 2px solid var(--ex-stone-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55em;
    height: 1.55em;
    font-size: 0.85em;
    line-height: 1;
    cursor: pointer;
    color: var(--ex-stone-500);
    flex-shrink: 0;
    border-radius: 5px;
    transition: all 0.15s var(--ex-ease);
}
.btn-clear:hover {
    color: var(--ex-red);
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.25);
}

/* ── Recherche activité autocomplete ── */
#act-search-wrap {
    position: relative;
    flex-shrink: 0;
    padding: 0.5em 0.7em;
    border-bottom: 1px solid var(--ex-stone-200);
    background: var(--ex-surface);
}
#act-search-wrap input {
    width: 100%;
    padding: 0.45em 0.65em;
    border: 1px solid var(--ex-stone-200);
    border-radius: 8px;
    font-size: 0.84em;
    font-family: var(--ex-font);
    background: var(--ex-stone-50);
    color: var(--ex-stone-800);
    outline: none;
    transition: all 0.2s var(--ex-ease);
}
#act-search-wrap input:focus {
    border-color: var(--ex-green-400);
    background: var(--ex-surface);
    box-shadow: 0 0 0 3px rgba(116, 198, 157, 0.15);
}
#act-search-wrap input::placeholder { color: var(--ex-stone-400); }
#act-autocomplete {
    display: none;
    position: absolute;
    left: 0.7em;
    right: 0.7em;
    top: calc(100% - 0.3em);
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 0 0 10px 10px;
    box-shadow: var(--ex-shadow-lg);
    z-index: 200;
    max-height: 20em;
    overflow-y: auto;
}
#act-autocomplete.open { display: block; }

/* ── Leaflet zoom fix (box-sizing conflict) ── */
.leaflet-container * { box-sizing: initial; }
.leaflet-control-layers { font-family: var(--ex-font); font-size: 0.78em; border-radius: 8px !important; }
.leaflet-control-layers-expanded { padding: 8px 12px 6px; }
.ex-outlier-toggle {
    font-family: var(--ex-font);
    font-size: 0.72em;
    font-weight: 600;
    padding: 5px 10px;
    background: var(--ex-surface);
    color: var(--ex-stone-600);
    border: none;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
    cursor: pointer;
    white-space: nowrap;
}
.ex-outlier-toggle:hover { background: var(--ex-stone-100); }

/* ── Export menu ── */
#export-wrap { position: relative; }
#export-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 8px;
    box-shadow: var(--ex-shadow-lg);
    z-index: 300;
    min-width: 10em;
    overflow: hidden;
    animation: menuIn 0.15s var(--ex-ease);
}
@keyframes menuIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
#export-menu.open { display: block; }
.export-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    padding: 0.6em 1em;
    font-size: 0.82em;
    font-weight: 500;
    font-family: var(--ex-font);
    text-align: left;
    background: none;
    border: 2px solid transparent;
    cursor: pointer;
    color: var(--ex-stone-700);
    transition: all 0.1s;
}
.export-item:hover {
    background: var(--ex-green-50);
    color: var(--ex-green-800);
}

/* ── Listes ul/li ── */
ul.col-list, ul#res-list, ul#res-map-list { list-style: none; margin: 0; padding: 0; }
li.children-wrapper { padding: 0; margin: 0; }
li.children-wrapper > ul { list-style: none; padding: 0; margin: 0; }

/* ── Panneau Stats ── */
#res-stats { overflow-y: auto; flex: 1; min-height: 0; padding: 1.2em; background: var(--ex-stone-50); }
.stats-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.8em;
    margin-bottom: 1.2em;
}
.stat-card {
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 10px;
    padding: 1em;
    text-align: center;
    box-shadow: var(--ex-shadow-sm);
}
.stat-card.accent { border-color: var(--ex-green-300); background: var(--ex-green-50); }
.stat-card.danger { border-color: #fca5a5; background: #fff5f5; }
.stat-value { font-size: 1.7em; font-weight: 800; color: var(--ex-green-700); line-height: 1; }
.stat-card.danger .stat-value { color: var(--ex-red); }
.stat-label { font-size: 0.72em; color: var(--ex-stone-500); margin-top: 0.4em; font-weight: 500; line-height: 1.3; }
.stats-chart-wrap {
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 10px;
    padding: 1em 1em 0.5em;
    margin-bottom: 1em;
    box-shadow: var(--ex-shadow-sm);
}
.stats-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75em;
    gap: 1em;
    flex-wrap: wrap;
}
.stats-chart-title {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ex-stone-600);
}
.stats-chart-range {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.72em;
    color: var(--ex-stone-500);
}
.stats-chart-range label { white-space: nowrap; font-weight: 600; }
.stats-chart-range output { font-variant-numeric: tabular-nums; min-width: 2.8em; }
.stats-chart-range input[type="range"] {
    width: 100px;
    accent-color: var(--ex-green-500);
    cursor: pointer;
}
.stats-chart-legend {
    display: flex;
    justify-content: center;
    gap: 1.2em;
    padding: 0.4em 0 0.2em;
    font-size: 0.7em;
    color: var(--ex-stone-500);
}
.stats-legend-item { display: flex; align-items: center; gap: 0.35em; }
.stats-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ── Loading indicator ── */
#loading-indicator {
    display: none;
    align-items: center;
    gap: 0.45em;
    background: var(--ex-green-800);
    color: white;
    font-size: 0.7em;
    font-weight: 600;
    font-family: var(--ex-font);
    padding: 0.3em 0.75em 0.3em 0.55em;
    border-radius: 20px;
    box-shadow: var(--ex-shadow-md);
    animation: fadeSlideIn 0.2s var(--ex-ease);
    white-space: nowrap;
    flex-shrink: 0;
}
#loading-indicator.visible { display: flex; }
#loading-indicator::before {
    content: '';
    width: 9px;
    height: 9px;
    border: 1.5px solid rgba(255,255,255,0.35);
    border-top-color: white;
    border-radius: 50%;
    flex-shrink: 0;
    animation: spin 0.7s linear infinite;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    #app { flex-direction: column; height: auto; }
    .col {
        width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--ex-stone-200);
    }
    .col-result { max-height: none; }
    #res-map { height: 45vw; min-height: 180px; }
}

/* ── Catégorie vide (aucune association) ── */
.item.cat-empty {
    opacity: 0.32;
    cursor: default;
}
.group-title.cat-empty {
    opacity: 0.32;
}

/* ── Subtle entrance animation ── */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.col {
    animation: fadeSlideIn 0.4s var(--ex-ease) both;
}
.col:nth-child(2) { animation-delay: 0.05s; }
.col:nth-child(3) { animation-delay: 0.1s; }

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Stone - inverted warm scale */
        --ex-stone-900: #fafaf9;
        --ex-stone-800: #e7e5e4;
        --ex-stone-700: #d6d3d1;
        --ex-stone-600: #a8a29e;
        --ex-stone-500: #78716c;
        --ex-stone-400: #4a4440;
        --ex-stone-300: #3a3430;
        --ex-stone-200: #2a2420;
        --ex-stone-100: #1e1914;
        --ex-stone-50:  #17120e;

        /* Amber - flipped for dark mode: bright values for foreground text */
        --ex-green-900: #fef9e7;
        --ex-green-800: #fbbf24;
        --ex-green-700: #f59e0b;
        --ex-green-600: #d97706;
        --ex-green-500: #fbbf24;
        --ex-green-400: #fbbf24;
        --ex-green-300: #fde68a;
        --ex-green-200: #451a03;
        --ex-green-100: #2c1800;
        --ex-green-50:  #1c0f00;

        /* Surfaces */
        --ex-surface: #1e1914;
        --ex-bg:      #141008;

        /* Shadows */
        --ex-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.4);
        --ex-shadow-md:    0 4px 14px rgba(0, 0, 0, 0.5);
        --ex-shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.6);
        --ex-shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    /* Highlighted association row */
    .assoc-item.hl { background: #2a1800; border-left-color: var(--ex-accent); }

    /* Geo suggestion type badges */
    .type-dept  { background: #1e3560; color: #93c5fd; }
    .type-epci  { background: #14452d; color: #86efac; }

    /* Dissolved / ceased badges */
    .assoc-item .adisso { background: #3b0a0a; color: #fca5a5; }

    /* Clear button */
    .btn-clear { border-color: var(--ex-stone-400); color: var(--ex-stone-600); }

    /* Focus glow - amber tint */
    .col-search input:focus,
    .res-search-bar input[type="text"]:focus,
    #geo-search-wrap input:focus,
    #act-search-wrap input:focus {
        box-shadow: 0 0 0 3px rgba(255, 187, 9, 0.18);
    }

    .stat-card.danger { border-color: #7f1d1d; background: #1a0808; }
    .stat-card.accent { background: var(--ex-green-50); }

    /* Improved contrast for secondary text */
    .item .sub       { color: var(--ex-stone-600); }
    .group-title     { color: var(--ex-stone-600); }
    .act-tab         { color: var(--ex-stone-600); }
    .badge           { background: var(--ex-stone-300); color: var(--ex-stone-700); }
    .view-btn        { color: var(--ex-stone-700); }
    .stat-label      { color: var(--ex-stone-600); }
    .col-search input::placeholder,
    .res-search-bar input[type="text"]::placeholder,
    #geo-search-wrap input::placeholder,
    #act-search-wrap input::placeholder { color: var(--ex-stone-500); }

    .leaflet-control-layers { background: var(--ex-surface); color: var(--ex-stone-800); border-color: var(--ex-stone-300); }
    .leaflet-control-layers-toggle { filter: invert(0.85); }
    .ex-outlier-toggle { background: var(--ex-surface); color: var(--ex-stone-400); }
    .ex-outlier-toggle:hover { background: var(--ex-stone-200); }
}