/* Le panneau Calques du LiDAR, repris (Henri, 29/10/2026 : « ajoute des effets plus stylés quand je clique sur les éléments
   des calques, améliore les logos et l'alignement ») : une colonne interrupteur | pastille | nom | nombre, des pastilles d'une
   seule forme (carré arrondi de 14 px, filet fin), les réglages d'opacité alignés sur les noms ; au toucher la ligne s'enfonce,
   l'interrupteur glisse avec un léger ressort, la pastille pulse à l'allumage (classe posée par src/topo-outils-liste.js),
   un calque éteint s'estompe. Sobre : aucune couleur d'interface, seulement celles des données. */
.tp .tp-calques { gap: 2px; }
.tp .tp-calques > label { display: grid; grid-template-columns: 28px 16px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 0 10px; border-radius: var(--r-moyen); transition: background .18s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; }
.tp .tp-calques > label:active { transform: scale(.985); background: rgb(var(--tp-v) / .08); }
.tp .tp-calques > label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .2s ease; }
.tp .tp-calques > label > small { margin-left: 0; justify-self: end; transition: opacity .2s ease; }
/* la pastille : une forme pour toutes, la couleur ou le dégradé des données gardés */
.tp .tp-calques > label > i { justify-self: center; width: 14px !important; height: 14px; border-radius: var(--r-fin) !important; opacity: 1; box-shadow: inset 0 0 0 1px rgb(var(--tp-v) / .16); transition: opacity .2s ease, transform .2s ease; }
.tp .tp-calques > label > i.tpd-bati { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
/* éteint : le nom et la pastille s'estompent */
.tp .tp-calques > label:has(input:not(:checked)) > :is(span, small, i) { opacity: .42; }
/* l'interrupteur : glisse avec un ressort, l'ombre du bouton marque la matière */
.tp .tp-calques > label > input { width: 28px; height: 16px; transition: background .2s ease; }
.tp .tp-calques > label > input::after { box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: left .28s cubic-bezier(.3, 1.45, .55, 1), background .2s ease, width .15s ease; }
.tp .tp-calques > label:active > input::after { width: 15px; }   /* le bouton s'étire sous le doigt, comme iOS */
.tp .tp-calques > label:active > input:checked::after { left: 11px; }
/* la pulsation à l'allumage */
@keyframes tpc-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.tp .tp-calques > label.tpc-pulse > i { animation: tpc-pulse .38s cubic-bezier(.3, 1.4, .5, 1); }
/* les réglages d'opacité commencent sous les noms (10 + 28 + 12 + 16 + 12 = 78 px) */
.tp .tp-calques .tpv-op { padding-left: 78px !important; }
/* les intertitres du panneau au même retrait que les lignes */
.tp .tp-bloc-calques .tpi-lib { padding-left: 10px; }
@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 ») */ { .tp .tp-calques > label { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .tp .tp-calques > label, .tp .tp-calques > label > *, .tp .tp-calques > label > input::after { transition: none !important; animation: none !important; } }
.tp .tp-calques > label.tp-vide { display: none; }   /* un calque sans point (Eau à 0) reste caché */