/* Le panneau de précision de la topo (src/topo-precision.js) : les cartes d'Auguste Revit, en verre
   fumé « Instrument », sans couleur d'accent ; la carte choisie passe en blanc plein */
.tpp { position: absolute; z-index: 30; width: min(620px, calc(100vw - 16px)); padding: 14px; color: var(--tp-encre); box-shadow: inset 0 0 0 1px rgb(var(--tp-v) / 0.07), 0 10px 30px rgba(0, 0, 0, 0.35); }
.tpp-tete b { display: block; font-size: var(--t-17); font-weight: 600; }
.tpp-tete small { display: block; margin: 3px 0 12px; font-size: var(--t-12); color: rgb(var(--tp-v) / 0.55); }
.tpp-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tpp-carte { display: flex; flex-direction: column; gap: 3px; min-height: 118px; padding: 10px; border: 0; border-radius: var(--r-moyen); background: rgb(var(--tp-v) / 0.06); color: inherit; text-align: left; cursor: pointer; }
.tpp-carte:hover { background: rgb(var(--tp-v) / 0.1); }
.tpp-carte b { font-size: var(--t-14); font-weight: 600; margin-bottom: 2px; }
.tpp-carte span { font-size: var(--t-12); color: rgb(var(--tp-v) / 0.75); font-variant-numeric: tabular-nums; }
.tpp-carte small { margin-top: auto; font-size: var(--t-11); line-height: 1.3; color: rgb(var(--tp-v) / 0.5); }
.tpp-carte[aria-pressed="true"] { background: var(--tp-encre); color: var(--tp-sur-encre); }
.tpp-carte[aria-pressed="true"] span, .tpp-carte[aria-pressed="true"] small { color: rgb(var(--tp-n) / 0.7); }
.tpp-libre, .tpp-taille { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(var(--tp-v) / 0.08); }
.tpp-libre label { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--t-13); }
.tpp-libre label span { flex: 1; }
.tpp-libre input, .tpe input[type="number"], .tpe input[type="text"] { width: 110px; height: 30px; padding: 0 8px; border: 0; border-radius: var(--r-bouton); background: rgb(var(--tp-v) / 0.08); color: inherit; font: inherit; font-size: var(--t-13); font-variant-numeric: tabular-nums; }
.tpp-libre em { width: 26px; font-style: normal; font-size: var(--t-12); color: rgb(var(--tp-v) / 0.5); }
.tpp small { display: block; font-size: var(--t-12); color: rgb(var(--tp-v) / 0.45); }
.tpp-libre .bouton { margin-top: 10px; }
.tpp-actif .tpi-lib::after { content: ' · en cours'; }
.tpp-taille { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
.tpp-taille .tpi-lib, .tpp-taille small { grid-column: 1 / -1; margin: 0; }
.tpp-taille .tpi-seg { grid-column: 1 / -1; justify-self: start; }
.tpp-taille input { width: 100%; accent-color: var(--tp-encre); }
.tpp-taille output { font-size: var(--t-13); font-variant-numeric: tabular-nums; }
[data-tp-precision-plus] { font-size: 16px !important; letter-spacing: 1px; padding: 0 10px !important; }
@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 ») */ { .tpp-cartes { grid-template-columns: repeat(2, 1fr); } .tpp { max-height: 70svh; overflow: auto; z-index: 40; background: rgb(var(--tp-n) / 0.97); } }

/* Ajouter des points (src/topo-points.js) : une pastille au-dessus de la barre du bas */
.tp-plus-points { position: absolute; left: 50%; bottom: 76px; z-index: 5; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; font-size: var(--t-13); color: rgb(var(--tp-v) / 0.75); white-space: nowrap; }
.tp-plus-points button { font: inherit; color: var(--tp-encre); background: rgb(var(--tp-v) / 0.1); border: 0; border-radius: var(--r-bouton); padding: 6px 12px; cursor: pointer; }
.tp-plus-points button:hover { background: rgb(var(--tp-v) / 0.18); }
.tp-plus-note { color: rgb(var(--tp-v) / 0.5); padding-right: 9px; }
@media (max-width: 700px) { .tp-plus-points { white-space: normal; flex-wrap: wrap; max-width: calc(100% - 32px); } }
.tpi-feuille .tp-plus-points { position: static; transform: none; margin-top: 12px; max-width: none; }