/* Materiau commun de l'interface : "panneau de verre"
   ---------------------------------------------------------------
   Fond bleu nuit translucide + flou d'arriere-plan + liseré clair.
   Utilise par les panneaux (filtres, inventaire), la barre d'outils,
   la recherche, les fonds historiques et la barre du bas, pour que
   toute l'interface partage un seul materiau et une seule palette. */

:root {
    --verre-fond: rgba(20, 28, 56, .72);
    --verre-fond-opaque: #1b2652;
    --verre-flou: blur(16px) saturate(1.25);
    --verre-lisere: rgba(255, 255, 255, .16);
    --verre-survol: rgba(255, 255, 255, .12);
    --verre-texte: #fff;
    --verre-texte-2: rgba(255, 255, 255, .65);
    --verre-icone: #cfe6f8;
    --accent: #157bbd;
    --accent-2: #f58c00;
    --police-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.verre {
    background: var(--verre-fond);
    backdrop-filter: var(--verre-flou);
    -webkit-backdrop-filter: var(--verre-flou);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--verre-lisere);
    color: var(--verre-texte);
    font-family: var(--police-ui);
}

/* Sans backdrop-filter, un fond translucide devient illisible sur une
   orthophoto : on repasse en opaque. Idem si le systeme demande de
   reduire la transparence. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .verre { background: var(--verre-fond-opaque); }
}
@media (prefers-reduced-transparency: reduce) {
    .verre {
        background: var(--verre-fond-opaque);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Bouton d'icone generique sur verre */
.verre-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--verre-texte);
    font: 500 13px var(--police-ui);
    cursor: pointer;
    text-decoration: none;
}
.verre-bouton i { font-size: 14px; color: var(--verre-icone); }
.verre-bouton:hover { background: var(--verre-survol); color: var(--verre-texte); }
.verre-bouton:focus-visible { outline: 2px solid var(--verre-icone); outline-offset: -2px; }
.verre-bouton.actif { background: var(--accent); }
.verre-bouton.actif i { color: #fff; }

/* Barre d'outils en haut a gauche : filtres + vue d'ensemble */
#outils-haut {
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
}
#outils-haut[hidden] { display: none; }
#outils-haut .outils-sep {
    width: 1px;
    align-self: stretch;
    margin: 5px 2px;
    background: rgba(255, 255, 255, .14);
}
#left-side-panel-open { position: relative; }

/* Pastille : nombre de filtres desactives (ui.js appliquerFiltres) */
#filtres-pastille {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--accent-2);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(20, 28, 56, .9);
    font-variant-numeric: tabular-nums;
}
#filtres-pastille[hidden] { display: none; }

/* Boutons de fermeture (croix) : remise a zero du style natif des <button> */
.closebtn,
.closeModal {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.sidenav .closebtn:hover { color: #f1f1f1; }