/* La fiche flottante de la topo LiDAR (src/topo-fiche.js) : en bas à gauche au bureau ;
   au-dessus de la feuille du bas à la tablette en portrait et au téléphone. Grille libellé / valeur, sobre. */
.tf { position: absolute; z-index: 9; left: 50%; bottom: 84px; transform: translateX(-50%); width: min(380px, calc(100% - 24px)); padding: 12px 14px 12px; border-radius: var(--r-panneau); color: var(--tp-creme); font: 400 var(--t-13)/1.4 -apple-system, system-ui, sans-serif; }
.tf-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tf-tete b { display: block; font-size: var(--t-17); font-weight: 600; }
.tf-tete small { display: block; margin-top: 2px; color: rgb(var(--tp-v) / 0.6); font-size: var(--t-12); }
.tf-fermer { flex: none; display: grid; place-items: center; width: 32px; height: 28px; margin: -4px -6px 0 0; border: 0; border-radius: var(--r-bouton); background: rgb(var(--tp-v) / 0.07); color: inherit; cursor: pointer; touch-action: manipulation; }
.tf-fermer svg { width: 14px; height: 14px; }
.tf-lignes { margin: 10px 0 0; display: grid; gap: 6px; }
.tf-lignes div { display: grid; grid-template-columns: 116px 1fr; gap: 10px; }
.tf-lignes dt { color: rgb(var(--tp-v) / 0.6); }
.tf-lignes dd { margin: 0; overflow-wrap: anywhere; }
.tf-liens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tf-lien { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-moyen); background: rgb(var(--tp-v) / 0.08); color: var(--tp-creme); font: 500 var(--t-13)/1 -apple-system, system-ui, sans-serif; text-decoration: none; cursor: pointer; touch-action: manipulation; }
@media (hover: hover) { .tf-lien:hover, .tf-fermer:hover { background: rgb(var(--tp-v) / 0.15); } }
@media (pointer: coarse) { .tf-lien { min-height: 44px; } .tf-fermer { width: 44px; height: 44px; } }
/* au bureau, en bas à gauche contre la colonne d'outils : au centre, la fiche cachait la parcelle qu'elle décrit */
@media (min-width: 900px) { .tf { left: 84px; bottom: 84px; transform: none; } }
@media all /* la mise en page du téléphone, au bureau aussi (Henri, 30/10/2026 : « épure le lidar comme la version téléphonique ») */ { .tf { bottom: calc(env(safe-area-inset-bottom) + 200px); } }
/* La légende des zones (src/topo-donnees.js) : chaque ligne se touche pour montrer la zone entière */
.tpd-zone { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 2px 6px; margin: 0 -6px; border: 0; border-radius: var(--r-bouton); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.tpd-zone[aria-pressed="true"] { background: rgb(var(--tp-v) / 0.14); }
@media (hover: hover) { .tpd-zone:hover { background: rgb(var(--tp-v) / 0.08); } }
@media (pointer: coarse) { .tpd-zone { min-height: 40px; } }