body { position: relative; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--art-light-field);
  animation: art-light-drift var(--mo-d-ambient) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes art-light-drift {
  from { --art-light-x: 72%; --art-light-y: 18%; }
  to   { --art-light-x: 58%; --art-light-y: 34%; }
}
@property --art-light-x { syntax: "<percentage>"; inherits: true; initial-value: 72%; }
@property --art-light-y { syntax: "<percentage>"; inherits: true; initial-value: 18%; }

 
@media print { body::before { display: none; } }

 
 
.art-glass {
  background: var(--art-glass-bg);
  border: var(--art-border-hair) solid var(--art-glass-border);
  border-radius: var(--art-radius-3);
  backdrop-filter: blur(var(--art-glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--art-glass-blur)) saturate(1.15);
  box-shadow: var(--art-shadow-glass);
}
.art-glass--strong { background: var(--art-glass-bg-strong); }

 
.art-lines > * { display: block; overflow: hidden; }
.art-lines > * > span {
  display: block;
  translate: 0 var(--mo-x-line);
  transition: translate var(--mo-d-long) var(--mo-e-out);
}
.motion-ready .art-lines[data-mo-state="run"] > * > span,
.motion-ready .art-lines[data-mo-state="done"] > * > span,
.art-lines:not([data-mo-state]) > * > span { translate: 0 0; }
.art-lines > :nth-child(2) > span { transition-delay: var(--mo-s-wide); }
.art-lines > :nth-child(3) > span { transition-delay: calc(2 * var(--mo-s-wide)); }
.art-lines > :nth-child(4) > span { transition-delay: calc(3 * var(--mo-s-wide)); }

 
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .art-lines > * > span { translate: 0 0; transition: none; }
}

 
.art-maison {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 1000 / 720;
  isolation: isolate;
}
.art-maison__svg, .art-maison__canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: auto;
  display: block;
}
.art-maison[data-live="true"] .art-maison__svg { visibility: hidden; }

 
.art-maison__svg path { stroke: var(--art-argent); stroke-width: 1; fill: none; }
.art-maison__svg .m-ground, .art-maison__svg .m-wall, .art-maison__svg .m-cut,
.art-maison__svg .m-roof, .art-maison__svg .m-pole, .art-maison__svg .m-floor { stroke-opacity: 0.34; }
.art-maison__svg .m-section { stroke-opacity: 0.72; stroke-width: 1.4; }
.art-maison__svg .m-slab { stroke-opacity: 0.55; stroke-width: 1.2; }
.art-maison__svg .m-partition { stroke-opacity: 0.26; }
.art-maison__svg .m-door, .art-maison__svg .m-window, .art-maison__svg .m-tread, .art-maison__svg .m-hatch { stroke-opacity: 0.2; }
.art-maison__svg .m-mullion { stroke-opacity: 0.16; }
.art-maison__svg .m-rafter { stroke-opacity: 0.1; }
.art-maison__svg .art-maison__wiring path { stroke: var(--art-cuivre); stroke-width: 1.5; stroke-opacity: 1; }
.art-maison__svg .art-maison__fixtures path { stroke: var(--art-cuivre); stroke-width: 1.2; stroke-opacity: 1; }
.art-maison__svg .m-panel { stroke: var(--art-cuivre-vif); stroke-width: 1.6; }
.art-maison__svg .m-heater { stroke: var(--art-argent); stroke-opacity: 0.5; stroke-width: 1; }
.art-light .art-maison__svg path { stroke: var(--art-nuit-3); }
.art-light .art-maison__svg .art-maison__wiring path,
.art-light .art-maison__svg .art-maison__fixtures path { stroke: var(--art-cuivre-profond); }





.art-maison__findings { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.art-maison__finding {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  --lead-x: var(--art-space-5);
  --lead-y: var(--art-space-4);
  translate: var(--lead-x) calc(-100% - var(--lead-y));
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: var(--art-space-2);
  align-items: center;
  padding: var(--art-space-2) var(--art-space-3);
  max-inline-size: 22ch;
  font-family: var(--art-font-body);
  color: var(--art-text-primary);
  

  background: var(--art-glass-bg-dense);
  border: var(--art-border-hair) solid var(--art-glass-border);
  border-radius: var(--art-radius-3);
  box-shadow: var(--art-shadow-overlay);
  opacity: 0;
  transition: opacity var(--mo-d-long) var(--mo-e-out), translate var(--mo-d-long) var(--mo-e-out);
}
.art-maison__finding[data-shown="true"],
.art-maison:not([data-live="true"]) .art-maison__finding { opacity: 1; }
.art-maison__finding[data-near="true"] {
  border-color: var(--art-border-control-hover);
  box-shadow: var(--art-shadow-overlay), var(--art-copper-glow);
}
.art-maison__finding::before {
   
  content: "";
  position: absolute;
  left: calc(-1 * var(--lead-x));
  bottom: calc(-1 * var(--lead-y));
  inline-size: var(--lead-x);
  block-size: var(--lead-y);
  border-left: var(--art-border-hair) solid var(--art-border-strong);
  border-bottom: var(--art-border-hair) solid var(--art-border-strong);
  opacity: 0.5;
}
 
.art-maison__finding--left { translate: calc(-100% - var(--lead-x)) calc(-100% - var(--lead-y)); }
.art-maison__finding--left::before { left: auto; right: calc(-1 * var(--lead-x)); border-left: 0; border-right: var(--art-border-hair) solid var(--art-border-strong); }
 
.art-maison__finding--up { --lead-y: var(--art-space-8); }
 
.art-maison__finding--right { --lead-y: 0px; translate: var(--lead-x) -50%; }
.art-maison__finding--right::before { bottom: 50%; block-size: 0; border-left: 0; }


@media (max-width: 1439px) {
  .art-maison__finding--right { --lead-y: var(--art-space-6); translate: -50% calc(-100% - var(--lead-y)); }
  .art-maison__finding--right::before {
    left: 50%; right: auto; bottom: calc(-1 * var(--lead-y));
    inline-size: 0; block-size: var(--lead-y);
    border-left: var(--art-border-hair) solid var(--art-border-strong); border-bottom: 0;
  }
}
.art-maison__finding-dot {
  grid-row: 1 / 3;
  inline-size: var(--art-space-2);
  block-size: var(--art-space-2);
  border-radius: var(--art-radius-dot);
  background: currentColor;
}
.art-maison__finding-level {
  font-size: var(--art-type-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.art-maison__finding-label {
  font-size: var(--art-type-caption);
  line-height: 1.3;
  color: var(--art-text-secondary);
}
.art-maison__finding--critique   .art-maison__finding-dot, .art-maison__finding--critique   .art-maison__finding-level { color: var(--art-echelle-critique); }
.art-maison__finding--corriger   .art-maison__finding-dot, .art-maison__finding--corriger   .art-maison__finding-level { color: var(--art-echelle-corriger); }
.art-maison__finding--surveiller .art-maison__finding-dot, .art-maison__finding--surveiller .art-maison__finding-level { color: var(--art-echelle-surveiller); }
@media (max-width: 599px) { .art-maison__findings { display: none; } }

.art-maison__caption {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 100%;
  margin: var(--art-space-4) 0 0;
  max-inline-size: 44ch;
  font-size: var(--art-type-micro);
  line-height: var(--art-lh-micro);
  color: var(--art-text-muted);
}
.art-maison__caption span { color: var(--art-text-secondary); font-weight: 600; }

.art-maison__canvas { cursor: crosshair; }

 
.art-maison--wiring { aspect-ratio: auto; }
.art-maison--wiring .art-maison__svg { position: relative; inset: auto; }
.art-maison--wiring .art-maison__svg .art-maison__structure path { stroke-opacity: 0.16; }
.art-maison--wiring .art-maison__svg .m-section, .art-maison--wiring .art-maison__svg .m-slab { stroke-opacity: 0.3; }
.art-maison--wiring .art-maison__svg .art-maison__wiring path { stroke-width: 2; stroke: var(--art-cuivre-vif); }
.art-maison--wiring .art-maison__svg .art-maison__fixtures path { stroke: var(--art-cuivre); }
.art-maison--wiring .art-maison__caption { position: static; margin-block-start: var(--art-space-3); }

@media (prefers-reduced-motion: reduce) {
  .art-maison__finding { transition: none; opacity: 1; }
}