/* Scene « maison » 3D, reprise telle quelle de TED (Ted/web_ui_css_scene3d.py). */
/* Scene « maison » 3D (proposition A) - prefixe t3-. Le ciel est un degrade CSS
   derriere le canevas (transparent) ; l'horizon a la couleur du brouillard 3D. */
.t3 {
  --t3-top: #8fbbe6; --t3-mid: #c9ddf0; --t3-hz: #e2e9f0;
  --t3-text: #0f172a; --t3-muted: #64748b; --t3-card: rgba(255, 255, 255, .62); --t3-line: rgba(15, 23, 42, .38);
  position: relative; width: 100%; aspect-ratio: 1.7; overflow: hidden; border-radius: 22px; isolation: isolate;
  background: linear-gradient(180deg, var(--t3-top) 0%, var(--t3-mid) 30%, var(--t3-hz) 52%);
  font-family: inherit; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  transition: background 1.5s;
}
.t3.t3-dark { --t3-text: #f1f5f9; --t3-muted: #a5b4c8; --t3-card: rgba(10, 16, 30, .55); --t3-line: rgba(226, 232, 240, .45); }
.t3-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: grab; }
.t3-canvas:active { cursor: grabbing; }
.t3-leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.t3-leads line { stroke: var(--t3-line); stroke-width: 1; }
.t3-leads circle { fill: var(--t3-text); stroke: var(--t3-card); stroke-width: 2; }
.t3-tags { position: absolute; inset: 0; pointer-events: none; font-size: clamp(10px, 1.45cqw, 13.5px); container-type: normal; }
.t3 { container-type: inline-size; }
.t3-tag {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; border: 0; font: inherit; color: var(--t3-text);
  display: flex; flex-direction: column; align-items: flex-start; gap: .15em; text-align: left;
  padding: .5em .75em .55em; border-radius: 12px; background: var(--t3-card);
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 6px 22px rgba(15, 23, 42, .12); transition: opacity .4s;
}
.t3-tag.hide { opacity: 0; pointer-events: none; }
.t3-v { font-size: 1.6em; font-weight: 600; letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t3-c { display: flex; align-items: center; gap: .45em; font-size: .72em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3-muted); white-space: nowrap; }
.t3-c i { width: .62em; height: .62em; border-radius: 50%; flex: none; }
.t3-c em { font-style: normal; max-width: 15em; overflow: hidden; text-overflow: ellipsis; }
.t3-s { font-size: .82em; color: var(--t3-text); opacity: .8; white-space: nowrap; }
.t3-s:empty { display: none; }
.t3-tag[data-state="off"] .t3-v { opacity: .6; }
.t3-tag[data-state="v2g"] .t3-c i { background: var(--c-v2g, #f59e0b) !important; }
.t3-bar { position: relative; width: 9em; height: .38em; border-radius: 1em; background: rgba(100, 116, 139, .28); margin-top: .3em; }
.t3-bar b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1em; background: var(--c-ev, #06b6d4); }
.t3-tag[data-state="v2g"] .t3-bar b { background: var(--c-v2g, #f59e0b); }
.t3-bar u { position: absolute; top: -.25em; bottom: -.25em; width: 2px; margin-left: -1px; background: var(--t3-text); }
.t3-chips { display: flex; flex-direction: column; gap: .2em; margin-top: .3em; }
.t3-chips:empty { display: none; }
.t3-chip { font-size: .82em; color: var(--t3-muted); white-space: nowrap; }
.t3-chip b { color: var(--t3-text); font-weight: 600; }
@container (max-width: 520px) {
  .t3-tag { padding: .35em .55em .4em; border-radius: 9px; }
  .t3-v { font-size: 1.3em; }
  .t3-c em { max-width: 9em; }
  /* telephone : detail seulement pour les batteries et les voitures */
  .t3-tag:not([data-tag="batt"]):not([data-tag^="ev"]) .t3-s { display: none; }
}