/* Le cube de vues de la topo LiDAR (src/topo-cube.js) : en haut à droite de la vue au bureau, comme dans Revit (à
   gauche de la colonne des chiffres et des calques, 272 px à 20 px du bord), en haut à gauche sous le titre à
   la tablette en portrait et au téléphone (la colonne d'outils y est à droite et la feuille en bas). Faces en verre
   fumé comme les panneaux de la topo, aucune couleur d'accent : la case visée s'éclaircit. */
.tc { position: absolute; z-index: 5; right: 304px; top: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px 8px; border-radius: var(--r-panneau); user-select: none; -webkit-user-select: none; }
/* z-index 5 : un panneau ouvert (Calques, Mesurer…, z-index 6) passe devant le cube ; au téléphone le cube cachait l'en-tête des Calques (Safari iOS, 29/10/2026) */
.tc-scene { width: 84px; height: 84px; display: grid; place-items: center; perspective: 420px; cursor: grab; touch-action: none; }
.tc.tc-prise .tc-scene, .tc.tc-prise .tc-case { cursor: grabbing; }
.tc-cube { position: relative; width: 58px; height: 58px; transform-style: preserve-3d; }
.tc-face { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); border: 1px solid rgb(var(--tp-v) / 0.55); border-radius: var(--r-fin); background-color: rgb(var(--tp-n2) / 0.92); backface-visibility: hidden; -webkit-backface-visibility: hidden; background-size: 33.4% 33.4%; background-repeat: no-repeat; }
.tc-dessus { transform: rotateX(90deg) translateZ(29px); background-color: rgb(var(--tp-n2) / 0.95); }
.tc-dessous { transform: rotateX(-90deg) translateZ(29px); }
.tc-sud { transform: translateZ(29px); }
.tc-nord { transform: rotateY(180deg) translateZ(29px); }
.tc-est { transform: rotateY(90deg) translateZ(29px); }
.tc-ouest { transform: rotateY(-90deg) translateZ(29px); }
.tc-lib { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(var(--tp-v) / 0.92); font: 600 var(--t-10)/1 -apple-system, system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none; }
.tc-case { margin: 0; padding: 0; border: 0; border-radius: var(--r-fin); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: none; }
.tc-case:focus-visible { outline: 2px solid var(--tp-creme); outline-offset: -2px; }
.tc-bas { display: flex; gap: 6px; }
.tc-bouton { display: inline-grid; place-items: center; min-width: 36px; height: 30px; padding: 0 9px; border: 0; border-radius: var(--r-moyen); background: rgb(var(--tp-v) / 0.07); color: rgb(var(--tp-v) / 0.9); font: 500 var(--t-12)/1 -apple-system, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tc-bouton svg { width: 16px; height: 16px; }
.tc-bouton[aria-pressed="true"] { background: rgb(var(--tp-v) / 0.9); color: var(--tp-sur-encre); }
@media (hover: hover) { .tc-bouton:hover { background: rgb(var(--tp-v) / 0.14); } .tc-bouton[aria-pressed="true"]:hover { background: var(--tp-creme); } }
.tc-nom { min-height: 14px; margin: 0; color: rgb(var(--tp-v) / 0.6); font: 400 var(--t-11)/1.25 -apple-system, system-ui, sans-serif; text-align: center; max-width: 140px; }

/* Tablette en portrait et téléphone : sous la barre du titre, à gauche ; cases plus grandes au doigt */
@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 ») */ {
  .tc { left: 12px; right: auto; top: calc(env(safe-area-inset-top) + 64px); bottom: auto; padding: 10px 8px 6px; }
  .tc-scene { width: 96px; height: 96px; }
  .tc-cube { width: 66px; height: 66px; }
  .tc-dessus { transform: rotateX(90deg) translateZ(33px); }
  .tc-dessous { transform: rotateX(-90deg) translateZ(33px); }
  .tc-sud { transform: translateZ(33px); }
  .tc-nord { transform: rotateY(180deg) translateZ(33px); }
  .tc-est { transform: rotateY(90deg) translateZ(33px); }
  .tc-ouest { transform: rotateY(-90deg) translateZ(33px); }
  .tc-bouton { min-width: 44px; height: 44px; }
}
/* Au doigt (tablette, téléphone) : un cube plus grand, des cases de 25 px au moins */
@media (pointer: coarse) {
  .tc-scene { width: 112px; height: 112px; }
  .tc-cube { width: 76px; height: 76px; }
  .tc-dessus { transform: rotateX(90deg) translateZ(38px); }
  .tc-dessous { transform: rotateX(-90deg) translateZ(38px); }
  .tc-sud { transform: translateZ(38px); }
  .tc-nord { transform: rotateY(180deg) translateZ(38px); }
  .tc-est { transform: rotateY(90deg) translateZ(38px); }
  .tc-ouest { transform: rotateY(-90deg) translateZ(38px); }
  .tc-lib { font-size: var(--t-11); }
}
@media (max-width: 520px) { .tc-nom { display: none; } }