/* Topographie LiDAR (src/topo3d.js), direction « Instrument » (Henri, 30/09/2026, validée sur les
   maquettes output/topo-directions) : la vue 3D en plein écran, des panneaux en verre fumé
   par-dessus, la typographie système du site, AUCUNE couleur d'accent (noir, blanc, gris).
   Bureau : parcelle en haut à gauche, colonne d'outils à gauche, altimétrie, point touché, mesure
   et calques à droite, précision et couleur en bas au centre, Fermer en bas à droite.
   Téléphone (< 900 px) : barre haute (Fermer, parcelle, Partager), outils à droite, feuille du bas
   (altimétrie et sélecteurs), cadrage en feuille qui monte du bas. Tout tient dans l'écran. */
/* Les couleurs de la 3D en variables (lot 5, 29/10/2026) : sombres d'office, claires quand le fond de la scène est clair
   (bouton « Fond clair », ou thème clair de l'app à la première ouverture : src/topo3d.js). --tp-v : l'encre en transparence
   (filets, libellés, survols), --tp-n : le verre fumé, --tp-n2 : un ton au-dessus. */
:root { --tp-v: 255 255 255; --tp-n: 14 14 14; --tp-n2: 40 40 40; --tp-encre: #F2F2F2; --tp-creme: #F2EEE6; --tp-sur-encre: #0B0C0E; --tp-fond: #0B0C0E; --tp-erreur: #E3B5AA; --tp-plan: #1a1a1a; }
.tp.tp-clair, .mq:not(.mq-sombre) { --tp-v: 0 0 0; --tp-n: 252 252 251; --tp-n2: 236 236 234; --tp-encre: #111112; --tp-creme: #1B1D20; --tp-sur-encre: #FFFFFF; --tp-fond: #E9E6DF; --tp-erreur: #A23B2A; --tp-plan: #DCD9D2; }
.tp { background: var(--tp-fond); color: var(--tp-encre); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-feature-settings: "tnum"; overflow: hidden;
  /* au doigt, un appui un peu long sélectionnait toute la fenêtre : pas de sélection, sauf les chiffres */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tp dd, .tp .tp-z, .tp .tpi-gros { -webkit-user-select: text; user-select: text; }
.tp button { font: inherit; color: inherit; }
.tp :is(.tpi-outil, .tpi-seg button, .tpi-rond) { font-size: var(--t-13); font-weight: 500; } /* le dessin de bouton commun à l'app */
.tp svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tpi-verre { background: rgb(var(--tp-n) / 0.62); -webkit-backdrop-filter: blur(18px) saturate(0.6); backdrop-filter: blur(18px) saturate(0.6); border-radius: var(--r-panneau); box-shadow: inset 0 0 0 1px rgb(var(--tp-v) / 0.07); }
.tpi-lib { margin: 0 0 6px; font-size: var(--t-12); color: rgb(var(--tp-v) / 0.5); }
.tpi-tel { display: none !important; }

/* ── La vue : tout l'écran ── */
.tp-scene { position: absolute; inset: 0; overflow: hidden; background: var(--tp-fond); }
.tp-scene canvas { display: block; width: 100%; height: 100%; }
.tp-chargement { position: absolute; left: 50%; top: 50%; z-index: 4; width: min(320px, calc(100% - 40px)); transform: translate(-50%, -50%); padding: 14px 16px; border-radius: var(--r-panneau); background: rgb(var(--tp-n) / 0.8); box-shadow: inset 0 0 0 1px rgb(var(--tp-v) / 0.08); text-align: center; }
.tp-chargement[hidden] { display: none; }
.tp-chargement p { margin: 0 0 10px; font-size: var(--t-13); line-height: 1.4; }
.tp-chargement.tp-erreur p { margin: 0; color: var(--tp-erreur); }
.tp-chargement.tp-erreur .tp-barre { display: none; }
.tp-barre { height: 2px; border-radius: var(--r-rond); background: rgb(var(--tp-v) / 0.12); overflow: hidden; }
.tp-barre i { display: block; height: 100%; width: 0; background: var(--tp-encre); transition: width 0.2s; }
.tp-aide { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 8px 12px; border-radius: var(--r-moyen); background: rgb(var(--tp-n) / 0.8); color: rgb(var(--tp-v) / 0.75); font-size: var(--t-12); text-align: center; }
.tp-viseur { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1px solid rgb(var(--tp-v) / 0.8); border-radius: 50%; pointer-events: none; }
.tpi-toast { position: absolute; left: 50%; top: 20px; z-index: 40; transform: translateX(-50%); padding: 9px 14px; border-radius: var(--r-moyen); background: rgb(var(--tp-v) / 0.94); color: #111; font-size: var(--t-13); }
.tpi-toast[hidden] { display: none; }

/* ── Parcelle, en haut à gauche ── */
.tpi-haut { position: absolute; left: 20px; top: 20px; z-index: 5; display: flex; align-items: center; gap: 8px; }
.tpi-titre { display: flex; flex-direction: column; padding: 13px 18px; }
.tpi-titre small { font-size: var(--t-13); color: rgb(var(--tp-v) / 0.55); }
.tpi-titre b { margin-top: 2px; font-size: 23px; font-weight: 500; letter-spacing: -0.01em; }
.tpi-rond { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-bouton); cursor: pointer; }
.tpi-fermer { position: absolute; right: 20px; bottom: 20px; z-index: 5; }
.tpi-rond:hover { background: rgb(var(--tp-n2) / 0.8); }

/* ── Outils, colonne d'icônes à gauche ; l'infobulle au survol ── */
.tpi-outils { position: absolute; left: 20px; top: 50%; z-index: 5; transform: translateY(-50%); display: grid; gap: 2px; padding: 6px; }
.tpi-outil { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-bouton); font-size: var(--t-13); font-weight: 500; background: none; color: rgb(var(--tp-v) / 0.72); cursor: pointer; }
.tpi-outil:hover { background: rgb(var(--tp-v) / 0.08); color: var(--tp-encre); }
.tpi-outil[aria-pressed="true"], .tpi-outil[aria-expanded="true"] { background: var(--tp-encre); color: var(--tp-sur-encre); }
/* Surface et Autour sont des bascules d'affichage, pas des modes : allumées, elles restent discrètes
   (Autour est allumé d'office, un pavé blanc permanent se lisait comme un mode en cours) */
.tpi-outil[data-tp-surface][aria-pressed="true"], .tpi-outil[data-tp-autour][aria-pressed="true"] { background: rgb(var(--tp-v) / 0.14); color: var(--tp-encre); }
.tpi-outil:disabled { opacity: 0.3; cursor: default; background: none; }
.tpi-outils hr { width: 22px; margin: 4px auto; border: 0; border-top: 1px solid rgb(var(--tp-v) / 0.12); }
@media (hover: hover) {
  .tpi-outil::after { content: attr(data-l); position: absolute; left: 50px; top: 50%; transform: translateY(-50%); padding: 5px 8px; border-radius: var(--r-pastille); background: rgb(var(--tp-n) / 0.9); color: var(--tp-encre); font-size: var(--t-12); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
  .tpi-outil:hover::after { opacity: 1; }
}

/* ── À droite : altimétrie, point touché, mesure, calques ── */
.tpi-droite { position: absolute; right: 20px; top: 20px; bottom: 84px; z-index: 5; width: 272px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; scrollbar-width: none; pointer-events: none; }
.tpi-droite::-webkit-scrollbar { display: none; }
.tpi-droite > * { flex: none; pointer-events: auto; }
/* pendant la lecture, pas de panneaux vides */
.tpi-alti:has(.tp-alti:empty), .tp-bloc-calques:has(.tp-calques:empty) { display: none; }
.tpi-alti { padding: 16px 18px 18px; }
.tpi-gros { font-size: var(--t-22); font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.tpi-gros small { margin-left: 5px; font-size: var(--t-15); font-weight: 400; letter-spacing: 0; color: rgb(var(--tp-v) / 0.5); }
.tpi-quatre { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgb(var(--tp-v) / 0.08); }
.tpi-quatre > div { display: flex; flex-direction: column; min-width: 0; }
.tpi-quatre dd { order: 1; margin: 0; font-size: var(--t-17); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tpi-quatre dt { order: 2; font-size: var(--t-12); color: rgb(var(--tp-v) / 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-alti .tp-etat { margin: 0; color: rgb(var(--tp-v) / 0.5); font-size: var(--t-12); }
/* le point touché et la mesure */
.tp-info { position: relative; padding: 14px 16px; }
.tp-info[hidden] { display: none; }
.tp-info-titre { margin: 0; padding-right: 26px; color: rgb(var(--tp-v) / 0.5); font-size: var(--t-12); }
.tp-info-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: var(--r-bouton); background: none; color: rgb(var(--tp-v) / 0.5); font-size: var(--t-17); cursor: pointer; }
.tp-z { margin: 4px 0 8px; font-size: 26px; font-weight: 300; font-variant-numeric: tabular-nums; }
.tp-z small { font-size: var(--t-12); font-weight: 400; color: rgb(var(--tp-v) / 0.5); }
.tp-info dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: var(--t-13); }
.tp-info dt { color: rgb(var(--tp-v) / 0.5); }
.tp-info dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tp-m-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-top: 8px; font-size: var(--t-13); font-variant-numeric: tabular-nums; white-space: nowrap; -webkit-user-select: text; user-select: text; }
.tp-m-ligne b { grid-column: 1 / -1; font-weight: 500; color: rgb(var(--tp-v) / 0.55); font-size: var(--t-12); }
.tp-m-sommets { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 8px 0 0; color: rgb(var(--tp-v) / 0.5); font-size: var(--t-12); font-variant-numeric: tabular-nums; }
.tp-m-actions { display: flex; gap: 6px; margin-top: 12px; }
.tp-m-actions .bouton { flex: 1; height: var(--h-bouton, 30px); margin: 0; padding: 0 8px; border: 0; border-radius: var(--r-bouton); background: rgb(var(--tp-v) / 0.08); box-shadow: none; color: var(--tp-encre); font-size: var(--t-13); font-weight: 500; }
.tp-m-actions .bouton-primaire { background: var(--tp-encre); color: var(--tp-sur-encre); }
.tp-m-actions .bouton:disabled { opacity: 0.35; }
/* calques en interrupteurs, avec leurs nombres */
.tp-bloc-calques { padding: 14px 10px 10px; }
.tp-bloc-calques .tpi-lib { margin: 0 8px 6px; }
.tp-calques { display: grid; gap: 1px; }
.tp-calques label { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 8px; border-radius: var(--r-bouton); font-size: var(--t-14); cursor: pointer; }
.tp-calques label:hover { background: rgb(var(--tp-v) / 0.05); }
.tp-calques input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 28px; height: 16px; margin: 0; border-radius: var(--r-rond); background: rgb(var(--tp-v) / 0.18); cursor: pointer; transition: background 0.15s; }
.tp-calques input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--tp-v) / 0.55); transition: left 0.15s, background 0.15s; }
.tp-calques input:checked { background: var(--tp-encre); }
.tp-calques input:checked::after { left: 14px; background: var(--tp-sur-encre); }
.tp-calques i { flex: none; width: 8px; height: 8px; border-radius: 50%; opacity: 0.85; }
.tp-calques small { margin-left: auto; font-size: var(--t-12); color: rgb(var(--tp-v) / 0.4); font-variant-numeric: tabular-nums; }
.tp-calques .tp-vide { display: none; }

/* ── En bas au centre : précision et couleur ── */
.tpi-bas { position: absolute; left: 50%; bottom: 20px; z-index: 5; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; }
.tpi-seg { display: flex; gap: 2px; }
.tpi-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-pastille); background: none; color: rgb(var(--tp-v) / 0.6); font-size: var(--t-13); font-weight: 500; cursor: pointer; white-space: nowrap; }
.tpi-seg button:hover { color: var(--tp-encre); }
.tpi-seg button[aria-pressed="true"] { background: rgb(var(--tp-v) / 0.13); color: var(--tp-encre); }
.tpi-sep { width: 1px; height: 20px; margin: 0 4px; background: rgb(var(--tp-v) / 0.12); }
.tpi-feuille { display: none; }

/* ── Cadrage : panneau flottant à côté des outils ── */
.tp-gauche { position: absolute; left: 84px; top: 124px; bottom: 20px; z-index: 6; width: 320px; display: none; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; }
.tp-cadrage-ouvert .tp-gauche { display: flex; }
.tp-gauche > * { flex: none; }
.tp-gauche .tp-tete { display: flex; align-items: center; justify-content: space-between; }
.tp-gauche h2 { margin: 0; font-size: var(--t-12); font-weight: 400; color: rgb(var(--tp-v) / 0.5); letter-spacing: 0; text-transform: none; }
.tp-x { width: 30px; height: 30px; border: 0; border-radius: var(--r-bouton); background: none; color: rgb(var(--tp-v) / 0.55); font-size: var(--t-17); cursor: pointer; }
.tp-plan { position: relative; height: 260px; border-radius: var(--r-moyen); overflow: hidden; background: var(--tp-plan); }
.tp-aide-plan { margin: 0; color: rgb(var(--tp-v) / 0.5); font-size: var(--t-12); }
.tp-reglage { display: grid; grid-template-columns: 72px minmax(0, 1fr) 52px; align-items: center; gap: 8px; font-size: var(--t-13); color: rgb(var(--tp-v) / 0.55); }
.tp-recentrer { width: 100%; margin: 2px 0 4px; }
.tp-reglage output { text-align: right; color: var(--tp-encre); font-variant-numeric: tabular-nums; }
.tp-reglage input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.tp-reglage input::-webkit-slider-runnable-track { height: 3px; border-radius: var(--r-rond); background: linear-gradient(to right, var(--tp-encre) var(--tp-v, 50%), rgb(var(--tp-v) / 0.15) var(--tp-v, 50%)); }
.tp-reglage input::-moz-range-track { height: 3px; border-radius: var(--r-rond); background: rgb(var(--tp-v) / 0.15); }
.tp-reglage input::-moz-range-progress { height: 3px; border-radius: var(--r-rond); background: var(--tp-encre); }
.tp-reglage input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.tp-reglage input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
.tp-gauche .pg-seg { display: flex; gap: 2px; height: 34px; padding: 2px; border-radius: var(--r-moyen); background: rgb(var(--tp-v) / 0.06); box-shadow: none; }
.tp-gauche .pg-seg button { flex: 1; height: 30px; border: 0; border-radius: var(--r-bouton); background: none; color: rgb(var(--tp-v) / 0.6); font-size: var(--t-13); }
.tp-gauche .pg-seg button[aria-pressed="true"] { background: rgb(var(--tp-v) / 0.13); color: var(--tp-encre); box-shadow: none; }
.tp-charger { width: 100%; height: 38px; margin: 2px 0 0; border: 0; border-radius: var(--r-moyen); background: var(--tp-encre); color: var(--tp-sur-encre); font-size: var(--t-14); font-weight: 600; box-shadow: none; }
.tp-charger.tp-modifie { box-shadow: 0 0 0 2px rgb(var(--tp-v) / 0.4); }
.tp-etat { margin: 0; color: rgb(var(--tp-v) / 0.5); font-size: var(--t-12); line-height: 1.4; }
.tp-etat.tp-erreur { color: var(--tp-erreur); }
.tp-gauche .pg-info { margin: 0; padding: 10px 12px; border-radius: var(--r-moyen); background: rgb(var(--tp-v) / 0.04); color: rgb(var(--tp-v) / 0.5); font-size: var(--t-12); line-height: 1.45; }

/* ── Téléphone : tout à l'écran ── */
@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-chargement { left: 12px; right: 72px; width: auto; transform: translateY(-50%); } /* jamais sous la colonne d'outils */
  .tpi-tel { display: grid !important; }
  .tpi-bureau { display: none !important; }
  /* barre haute : Fermer, la parcelle, Partager */
  .tpi-haut { left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 10px); }
  .tpi-rond { width: 40px; height: 40px; border-radius: var(--r-bouton); }
  .tpi-titre { flex: 1; min-width: 0; height: 40px; padding: 0 16px; border-radius: var(--r-panneau); justify-content: center; }
  .tpi-titre b { order: 1; margin: 0; font-size: var(--t-15); font-weight: 600; line-height: 1.15; }
  .tpi-titre small { order: 2; font-size: var(--t-12); }
  /* outils à droite */
  .tpi-outils { left: auto; right: 12px; top: calc(env(safe-area-inset-top) + 62px); transform: none; padding: 5px; border-radius: var(--r-panneau); }
  .tpi-outil { width: 40px; height: 40px; border-radius: var(--r-bouton); }
  .tpi-outil::after { display: none; }
  /* la feuille du bas : l'altimétrie et les deux sélecteurs */
  .tpi-feuille { display: block; position: absolute; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 8px); z-index: 5; padding: 8px 14px 14px; border-radius: var(--r-panneau); transition: transform 0.3s; }
  .tp-cadrage-ouvert .tpi-feuille { transform: translateY(130%); }
  .tpi-poignee { width: 36px; height: 5px; margin: 0 auto 10px; border-radius: var(--r-fin); background: rgb(var(--tp-v) / 0.3); }
  .tpi-feuille .tpi-alti { position: static; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tpi-feuille .tp-alti { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: end; }
  .tpi-feuille .tp-alti > .tpi-lib { grid-column: 1; margin-bottom: 2px; font-size: var(--t-12); }
  .tpi-feuille .tpi-gros { grid-column: 1; grid-row: 2; font-size: 38px; }
  .tpi-feuille .tpi-quatre { grid-column: 2; grid-row: 1 / 3; display: block; margin: 0; padding: 0; border: 0; text-align: right; font-size: var(--t-13); }
  .tpi-feuille .tpi-quatre > div { display: inline; }
  .tpi-feuille .tpi-quatre > div:nth-child(1)::after { content: ' → '; color: rgb(var(--tp-v) / 0.45); }
  .tpi-feuille .tpi-quatre > div:nth-child(2)::after { content: ' m'; }
  .tpi-feuille .tpi-quatre > div:nth-child(3) { display: block; }
  .tpi-feuille .tpi-quatre > div:nth-child(3)::before { content: 'pente '; color: rgb(var(--tp-v) / 0.45); }
  .tpi-feuille .tpi-quatre > div:nth-child(4), .tpi-feuille .tpi-quatre dt { display: none; }
  .tpi-feuille .tpi-quatre dd { display: inline; font-size: var(--t-13); font-weight: 400; }
  .tpi-feuille .tpi-bas { position: static; transform: none; display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; margin-top: 12px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tpi-feuille .tpi-sep { display: none; }
  .tpi-feuille .tpi-seg { padding: 2px; border-radius: var(--r-bouton); background: rgb(var(--tp-v) / 0.07); }
  .tpi-feuille .tpi-seg button { flex: 1 1 0; min-width: 0; height: 30px; padding: 0 3px; border-radius: var(--r-pastille); font-size: var(--t-13); }
  /* par-dessus la vue : le point touché, la mesure (en haut, à gauche des outils), les calques */
  .tp-scene .tp-info { position: absolute; left: 12px; right: 64px; top: calc(env(safe-area-inset-top) + 62px); z-index: 6; padding: 12px 14px; border-radius: var(--r-panneau); }
  .tp-scene .tp-info dl { grid-template-columns: auto 1fr auto 1fr; gap: 1px 8px; font-size: var(--t-12); }
  .tp-scene .tp-z { margin: 2px 0 6px; font-size: var(--t-22); }
  .tp-scene .tp-info dt:nth-of-type(5), .tp-scene .tp-info dd:nth-of-type(5) { display: none; }
  .tp-scene .tp-m-ligne { font-size: var(--t-12); margin-top: 4px; }
  .tp-scene .tp-bloc-calques { display: none; position: absolute; right: 64px; top: calc(env(safe-area-inset-top) + 62px); z-index: 6; width: min(262px, calc(100vw - 84px)); border-radius: 22px; }
  .tp-scene .tp-calques label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tp-calques-ouvert .tp-scene .tp-bloc-calques { display: block; }
  .tp-scene .tp-calques label { min-height: 40px; font-size: var(--t-15); }
  .tp-aide { bottom: 190px; }
  /* le cadrage : une feuille qui monte du bas */
  .tp-gauche { display: flex; left: 8px; right: 8px; top: auto; bottom: calc(env(safe-area-inset-bottom) + 8px); width: auto; max-height: 86svh; padding: 10px 14px 16px; border-radius: 24px; background: rgb(var(--tp-n) / 0.9); transform: translateY(110%); transition: transform 0.3s; }
  .tp-cadrage-ouvert .tp-gauche { transform: none; }
  .tp-plan { height: 40svh; }
  .tp-gauche .pg-info, .tp-aide-plan { display: none; }
  /* Audit du 06/10/2026 au téléphone (Henri : « le module LiDAR sur téléphone, ce n'est pas terrible ») :
     1. le verre à 62 % laissait passer le nuage et les icônes sous les panneaux : au téléphone, panneaux presque opaques ;
     2. la barre du bas sur deux lignes pleine largeur (les libellés de précision se chevauchaient, « Calque · Altitude » sortait de l'écran) ;
     3. la colonne d'outils ne descend plus sous la feuille du bas (iPhone SE : 667 px) : elle défile ;
     4. le cadrage laisse voir la vue 3D au-dessus de sa feuille. */
  .tpi-verre, .tp-gauche { background: rgb(var(--tp-n) / 0.94); }
  .tpi-feuille .tpi-bas { grid-template-columns: 1fr; }
  .tpi-feuille .tpi-seg { display: flex; width: 100%; }
  .tpi-feuille .tpi-seg button { height: 44px; font-size: var(--t-13); }
  .tpi-outils { max-height: calc(100svh - env(safe-area-inset-top) - 62px - 168px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .tpi-outils::-webkit-scrollbar { display: none; }
  .tp-plan { height: 30svh; }
  /* les réglages secondaires (rotation, voisines, fond, luminosité, rejouer) vivent dans le menu « … » */
  .tpi-outils .tpi-second { display: none; }
  .tp-plus:not([hidden]) { position: absolute; right: 64px; top: calc(env(safe-area-inset-top) + 62px); z-index: 7; width: min(260px, calc(100vw - 84px)); display: grid; gap: 2px; padding: 6px; border-radius: var(--r-panneau); }
  .tp-plus-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-moyen); background: none; color: var(--tp-encre); font: inherit; font-size: var(--t-15); text-align: left; }
  .tp-plus-item:active { background: rgb(var(--tp-v) / 0.1); }
  .tp-plus-item svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .tp-plus-item span { flex: 1; }
  .tp-plus-item i { font-style: normal; font-size: var(--t-13); color: rgb(var(--tp-v) / 0.5); }
  .tp-plus-item[aria-pressed="true"] i { color: var(--tp-encre); }
}

/* La balade (30/09) : l'aide, la croix de marche et la hauteur des yeux, à maintenir à la souris */
.tp-aide { display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 16px; max-width: calc(100% - 40px); }
.tp-aide[hidden] { display: none; }
.tpb-texte { max-width: 380px; font-size: var(--t-12); line-height: 1.45; color: rgb(var(--tp-v) / 0.72); text-align: left; }
.tpb-pad { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 34px); gap: 3px; }
.tpb-pad button, .tpb-haut button, .tpb-sortir { border: 0; border-radius: var(--r-bouton); background: rgb(var(--tp-v) / 0.1); color: var(--tp-encre); font: inherit; font-size: var(--t-13); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.tpb-pad button:active, .tpb-haut button:active { background: var(--tp-encre); color: var(--tp-sur-encre); }
.tpb-pad [data-tpb="av"] { grid-column: 2; grid-row: 1; }
.tpb-pad [data-tpb="ga"] { grid-column: 1; grid-row: 2; }
.tpb-pad [data-tpb="re"] { grid-column: 2; grid-row: 2; }
.tpb-pad [data-tpb="dr"] { grid-column: 3; grid-row: 2; }
.tpb-haut { display: grid; grid-template-rows: 34px auto 34px; justify-items: center; gap: 3px; }
.tpb-haut button { width: 34px; font-size: var(--t-17); }
.tpb-haut output { font-size: var(--t-12); color: var(--tp-encre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tpb-sortir { height: 34px; padding: 0 14px; }

/* La topo ouverte : le panneau des couches de la carte d'accueil (src/calques.js, fixe au téléphone et en fenêtre
   étroite) ne passe plus par-dessus (Henri, 06/10). Ses données (PLU, risques) se voient DANS la topo. */
/* overflow: hidden laisse le navigateur faire défiler la topo quand le focus va dans une feuille cachée sous l'écran
   (cadrage, visite) : au téléphone tout l'écran montait de 1 000 px (audit du 06/10/2026). clip interdit ce défilement. */
.tp, .tp-scene { overflow: clip; }
body.tp-ouvert { overflow: hidden; }
body.tp-ouvert .legende-carte, body.tp-ouvert #carte .cc-panneau { display: none !important; }
.tpd-lib { margin-top: 12px !important; }
.tp-calques i.tpd-plu { background: linear-gradient(90deg, #C65D4B 0 25%, #DE9C5C 25% 50%, #D8C36F 50% 75%, #7DA06C 75%); border-radius: var(--r-fin); width: 12px; }
.tp-calques i.tpd-pprn { background: linear-gradient(90deg, #a0e0ff 0 33%, #40c0ff 33% 66%, #0000ff 66%); border-radius: var(--r-fin); width: 12px; }
.tp-calques i.tpd-bati { background: #E9E7E1; border-radius: var(--r-fin); width: 12px; box-shadow: inset 0 0 0 1px #2A2B2E; }
.tp-calques i.tpd-defrich { background: linear-gradient(90deg, #C9A227 0 50%, #8E3B2E 50%); border-radius: var(--r-fin); width: 12px; }
.tpd-etat { margin: 6px 8px 0; font-size: var(--t-12); color: rgb(var(--tp-v) / 0.6); }
.tpd-etat:empty { display: none; }
.tpd-etat p { margin: 6px 0 2px; color: rgb(var(--tp-v) / 0.5); }
.tpd-etat ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.tpd-etat li { display: flex; align-items: center; gap: 7px; color: rgb(var(--tp-v) / 0.82); }
.tpd-etat li i { flex: none; width: 10px; height: 10px; border-radius: var(--r-fin); }
/* la date du vol LiDAR à côté du titre « Calques » */
.tpd-date { color: rgb(var(--tp-v) / 0.38); }
/* le panneau des calques défile quand la légende des données s'allonge (au bureau) */
@media (min-width: 900px) { .tp-bloc-calques { max-height: calc(100vh - 330px); overflow-y: auto; overscroll-behavior: contain; } }
/* les calques du cadastre (src/topo-voisines.js) : la jauge sous son interrupteur, alignée sur le nom */
.tp-calques .tpv-op { padding: 0 8px 4px 46px; grid-template-columns: 52px minmax(0, 1fr) 44px; }
.tp-calques .tpv-op input { width: 100%; height: 22px; border-radius: 0; background: transparent; }
.tp-calques .tpv-op input::after { content: none; }
.tp-calques .tpv-op input:disabled { opacity: .35; cursor: default; }
.tp-calques i.tpv-topo { width: 12px; height: 8px; border-radius: var(--r-fin); background: repeating-linear-gradient(0deg, #9A6B47 0 1px, transparent 1px 3px), #E9E2D3; }
.tp-calques i.tpv-limites { width: 12px; height: 0; border-radius: 0; border-top: 1.5px solid #E8E2D4; }
.tp-calques i.tpv-numeros { width: 12px; height: 8px; border-radius: var(--r-fin); background: rgba(14, 14, 14, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
/* Au bureau, la mise en page du téléphone (30/10/2026) garde des proportions de bureau : le titre à sa largeur, la
   feuille du bas et celle du cadrage centrées, pas d'un bord à l'autre de l'écran */
@media (min-width: 900px) {
  .tpi-titre { flex: 0 1 auto; }
  .tpi-feuille { left: 50%; right: auto; width: min(560px, calc(100% - 16px)); transform: translateX(-50%); }
  .tp-cadrage-ouvert .tpi-feuille { transform: translate(-50%, 130%); }
  .tp-gauche { left: 50%; right: auto; width: min(640px, calc(100% - 16px)); transform: translate(-50%, 110%); }
  .tp-cadrage-ouvert .tp-gauche { transform: translateX(-50%); }
}