:root{
    --bg: #f7f9f8;
    --panel: #ffffff;
    --line: #dde3e0;
    --text: #1b2420;
    --text-dim: #6b7a73;
    --accent: #1f8a5c;
    --accent-dim: #a8d9c3;
    --mono: "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
    --sans: -apple-system, "Segoe UI", Inter, sans-serif;
}
*{ box-sizing: border-box; }
html, body{
    margin:0; padding:0; height:100%;
    background: var(--bg);
    font-family: var(--sans);
    color: var(--text);
    overflow: hidden;
}
.app{
    display:flex; flex-direction:column; height:100vh;
}
header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    flex-shrink:0;
    gap: 16px;
}
header .home-link{
    display:flex; align-items:center; justify-content:center;
    width: 28px; height: 28px;
    flex-shrink:0;
    color: var(--text-dim);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    transition: color .15s, border-color .15s;
}
header .home-link:hover,
header .home-link:focus-visible{
    color: var(--accent);
    border-color: var(--accent);
}
header .titles{
    display:flex; align-items:baseline; gap:12px; min-width:0;
    margin-right:auto; /* garde le titre à gauche, près du bouton d'accueil */
}
header h1{
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    margin:0;
    white-space: nowrap;
}
header .sub{
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}

#style-select{
    flex-shrink: 0;
    appearance: none;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 6px 28px 6px 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0L5 6L10 0Z' fill='%237f9188'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
#style-select:hover{
    border-color: var(--accent-dim);
}
#style-select:focus{
    outline: none;
    border-color: var(--accent);
}

.maps{
    flex: 1;
    display: flex;
    position: relative;
    min-height: 0;
}
.pane{
    flex: 1;
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.pane + .pane{
    border-left: 1px solid var(--line);
}
/* La carte occupe tout l'espace disponible AU-DESSUS de la barre de statut,
   et s'arrête à son bord supérieur (min-height:0 permet au flex item de
   rétrécir correctement). */
.pane .map{
    flex: 1;
    min-height: 0;
}
.pane-label{
    position:absolute; top:12px; left:12px; z-index:5;
    background: rgba(255,255,255,0.88);
    border: 1px solid var(--line);
    padding: 5px 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--accent);
    pointer-events:none;
}
.pane-label .name{
    color: var(--text);
    font-weight: 600;
    margin-left: 6px;
}
/* Barre de statut dans le flux normal (sous la carte), et non plus en
   overlay : elle ne recouvre plus les contrôles du bas (attribution,
   échelle), donc plus besoin de transparence. */
.status{
    flex-shrink: 0;
    display:flex; justify-content:space-between;
    padding: 5px 10px;
    background: var(--panel);
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-dim);
}
.status span b{ color: var(--text); font-weight: 500; }

.divider{
    position:absolute; top:0; bottom:0; left:50%;
    width:1px;
    background: var(--accent-dim);
    z-index:6;
    pointer-events:none;
}

.maplibregl-ctrl-attrib{
    background: rgba(255,255,255,0.75) !important;
    color: var(--text-dim) !important;
}
.maplibregl-ctrl-attrib a{ color: var(--text-dim) !important; }
.maplibregl-ctrl-group{
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    box-shadow:none !important;
}
.maplibregl-ctrl-group button{ background: transparent !important; }
.maplibregl-ctrl-group button + button{ border-top: 1px solid var(--line) !important; }
/* Bouton "Recentrer" (FitBoundsControl) : icône SVG en ligne, même teinte que les icônes MapLibre. */
/* Sélecteur plus spécifique que ".maplibregl-ctrl-group button" (display:block) de MapLibre,
   sinon le flex est ignoré et le SVG en ligne se cale sur la ligne de base du texte. */
.maplibregl-ctrl-group button.maplibregl-ctrl-fit{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#333;
}
.maplibregl-ctrl-fit svg{ display:block; }
/* Icônes MapLibre déjà sombres par défaut : pas d'inversion nécessaire sur fond clair. */
/* Sélecteur de couches (LayerControl) */
.layer-control{
    font-family: var(--sans);
    font-size: 12px;
    color: var(--text);
    max-width: min(260px, calc(100vw - 80px));
}
.layer-control summary{
    cursor: pointer;
    padding: 6px 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    user-select: none;
}
.layer-control[open] summary{ border-bottom: 1px solid var(--line); }
.layer-control__list{
    padding: 4px 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}
.layer-row{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    cursor: pointer;
}
.layer-row:hover{ background: var(--bg); }
/* Taille fixe des cases : sert de base à l'indentation des enfants de groupe */
.layer-row input{
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.layer-row--group{ font-weight: 600; }
.layer-row--group label{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    cursor: pointer;
}
.layer-group__toggle{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px !important;
    height: 16px !important;
    padding: 0;
    border: 0;
    color: var(--text-dim);
    cursor: pointer;
    margin-left: auto;
    transition: transform 0.15s;
}
.layer-group.is-collapsed .layer-group__toggle{ transform: rotate(-90deg); }
.layer-group.is-collapsed .layer-group__children{ display: none; }
/* Case des enfants alignée sous le nom du groupe : marge (10) + case (14) + écart (8) */
.layer-group__children .layer-row{ padding-left: 32px; }
.layer-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.layer-swatch{
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.layer-swatch--polygon{
    background: var(--swatch-fill);
    border: 2px solid var(--swatch-stroke);
    border-radius: 2px;
}
.layer-swatch--line{
    height: 3px;
    background: var(--swatch);
    border-radius: 2px;
}
.layer-swatch--point{
    width: 12px;
    height: 12px;
    background: var(--swatch);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--line);
}