/* Blower Door Unit : scènes 3D (héros maison en coupe, porte soufflante éclatée).
   Toutes les classes sont préfixées .bdu3d pour ne pas entrer en collision avec le site.
   Variables reprises des tokens du site quand elles existent. */
bdu-scene-3d, .bdu3d {
  --bdu3d-ink: var(--bdu-graphite, #2A2826);
  --bdu3d-muted: var(--bdu-gris, #5E5B56);
  --bdu3d-line: var(--bdu-gris-trait, #9C9890);
  --bdu3d-red: var(--bdu-rouge, #C8102E);
  --bdu3d-paper: var(--bdu-beton-clair, #EFEDE9);
  --bdu3d-sans: var(--ill-font-sans, "Public Sans", system-ui, sans-serif);
  --bdu3d-mono: var(--ill-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  display: block;
  position: relative;
  color: var(--bdu3d-ink);
  font-family: var(--bdu3d-sans);
}
.bdu3d__stage { position: absolute; inset: 0; overflow: hidden; }
.bdu3d--hero { aspect-ratio: 16 / 10; width: 100%; }
@media (max-width: 760px) { .bdu3d--hero { aspect-ratio: 4 / 5; } }

/* Poster de repli : affiché d'emblée (LCP léger), masqué en fondu quand la 3D tourne. */
.bdu3d__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .6s ease; }
.bdu3d__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
bdu-scene-3d.is-live .bdu3d__poster { opacity: 0; pointer-events: none; }
.bdu3d__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity .6s ease; }
bdu-scene-3d.is-live .bdu3d__canvas { opacity: 1; }
.bdu3d__mention {
  position: absolute; top: 14px; right: 16px; z-index: 3;
  font: 500 11px/1 var(--bdu3d-sans); letter-spacing: .02em; color: var(--bdu3d-muted);
  padding: 5px 8px; border: 1px solid rgba(42, 40, 38, .18); background: rgba(255, 255, 255, .7);
}

/* ---------- surcouche ---------- */
.bdu3d__overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease .2s; }
bdu-scene-3d.is-live .bdu3d__overlay { opacity: 1; }
.bdu3d__leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bdu3d__leaders path { stroke: var(--bdu3d-ink); stroke-width: 1; fill: none; opacity: 0; transition: opacity .4s ease; stroke-opacity: .55; }
.bdu3d__leaders circle { fill: var(--bdu3d-red); opacity: 0; transition: opacity .4s ease; }

.bdu3d__tag {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px;
  white-space: nowrap; transition: opacity .45s ease; will-change: transform;
  margin-top: -10px;
}
.bdu3d__tag-n {
  display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  border: 1px solid var(--bdu3d-ink); background: #fff;
  font: 500 10.5px/1 var(--bdu3d-mono); font-variant-numeric: tabular-nums;
}
.bdu3d__tag-t {
  font: 500 12.5px/1.25 var(--bdu3d-sans); color: var(--bdu3d-ink);
  background: rgba(255, 255, 255, .86); padding: 3px 6px 3px 5px;
}
.bdu3d__tag-t small { display: block; font-weight: 400; font-size: 11px; color: var(--bdu3d-muted); margin-top: 2px; }
.bdu3d__tag--part { opacity: 0; align-items: flex-start; }
.bdu3d__tag--part.is-on { opacity: 1; }
.bdu3d__tag--part .bdu3d__tag-t { background: transparent; padding-top: 2px; white-space: normal; max-width: 210px; }
.bdu3d--tight .bdu3d__tag--part small { display: none; }

.bdu3d__cote {
  position: absolute; left: 0; top: 0; translate: -50% -140%;
  font: 400 10.5px/1 var(--bdu3d-mono); color: var(--bdu3d-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Lecture de pression */
.bdu3d__hud { position: absolute; left: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 34px); width: min(300px, 46%); }
.bdu3d__hud-row { display: flex; justify-content: space-between; gap: 12px; font: 500 11.5px/1.2 var(--bdu3d-sans); color: var(--bdu3d-muted); }
.bdu3d__hud-mode { color: var(--bdu3d-ink); }
.bdu3d__hud-v { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 10px; }
.bdu3d__hud-num { font: 400 clamp(34px, 4.2vw, 52px)/1 var(--bdu3d-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-width: 4ch; }
.bdu3d__hud-u { font: 500 14px/1 var(--bdu3d-sans); color: var(--bdu3d-muted); }
.bdu3d__scale { position: relative; height: 18px; border-top: 1px solid var(--bdu3d-ink); }
.bdu3d__scale-fill { position: absolute; left: 0; top: -1.5px; height: 2px; width: 100%; background: var(--bdu3d-red); transform-origin: left; transform: scaleX(0); }
.bdu3d__scale b { position: absolute; top: 0; width: 1px; height: 5px; background: var(--bdu3d-ink); }
.bdu3d__scale b em { position: absolute; top: 7px; left: 0; translate: -50% 0; font: 400 9.5px/1 var(--bdu3d-mono); font-style: normal; color: var(--bdu3d-muted); }
.bdu3d__scale b:last-child em { translate: -80% 0; }
.bdu3d__hud-foot { margin-top: 8px; font: 400 11px/1.3 var(--bdu3d-sans); color: var(--bdu3d-muted); }

.bdu3d__replay {
  position: absolute; right: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 34px);
  pointer-events: auto; cursor: pointer; opacity: 0; transition: opacity .4s ease;
  font: 500 12px/1 var(--bdu3d-sans); color: var(--bdu3d-ink); background: transparent;
  border: 0; border-bottom: 1px solid currentColor; padding: 4px 0;
}
.is-done .bdu3d__replay { opacity: 1; }
.bdu3d__replay:focus-visible { outline: 2px solid var(--bdu3d-ink); outline-offset: 3px; }

/* Cartouche (vue éclatée) */
.bdu3d__titleblock {
  position: absolute; right: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 34px);
  display: grid; border: 1px solid var(--bdu3d-ink); background: rgba(255, 255, 255, .8);
  font: 400 11px/1.2 var(--bdu3d-sans); color: var(--bdu3d-muted); min-width: 180px;
}
.bdu3d__titleblock span { padding: 6px 10px; }
.bdu3d__titleblock span + span { border-top: 1px solid rgba(42, 40, 38, .25); }
.bdu3d__titleblock span:first-child { color: var(--bdu3d-ink); font-weight: 600; font-size: 12.5px; }

/* Version compacte (mobile) : numéros seuls sur la scène, légende sous la scène */
.bdu3d--compact .bdu3d__tag-t { display: none; }
.bdu3d--compact .bdu3d__tag { translate: -50% 0; }
.bdu3d--compact .bdu3d__tag--part { translate: 0 0; }
.bdu3d--compact .bdu3d__cote { display: none; }
.bdu3d--compact .bdu3d__hud { width: calc(100% - 32px); bottom: 14px; }
.bdu3d--compact .bdu3d__hud-num { font-size: 30px; }
.bdu3d--compact .bdu3d__hud-v { margin: 2px 0 6px; }
.bdu3d--compact .bdu3d__hud-foot { display: none; }
.bdu3d--compact .bdu3d__replay { bottom: auto; top: 14px; left: 16px; right: auto; }
.bdu3d--compact .bdu3d__titleblock { display: none; }
.bdu3d__legend { display: none; }
@media (max-width: 760px) {
  .bdu3d__legend {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 14px 0 0; padding: 0; list-style: none;
    font: 400 13px/1.3 var(--bdu3d-sans); color: var(--bdu3d-ink); counter-reset: l;
  }
  .bdu3d__legend li { display: flex; gap: 8px; align-items: baseline; }
  .bdu3d__legend li::before {
    counter-increment: l; content: counter(l); flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px;
    border: 1px solid var(--bdu3d-ink); border-radius: 50%; font: 500 10px/1 var(--bdu3d-mono);
  }
}

/* Éclaté au défilement : le parent fournit la course, l'enfant reste collant */
.bdu3d-explode { position: relative; height: 260vh; }
.bdu3d-explode > bdu-scene-3d { position: sticky; top: 0; height: 100vh; height: 100svh; }
.bdu3d-explode.is-static { height: auto; }
.bdu3d-explode.is-static > bdu-scene-3d { position: relative; height: auto; aspect-ratio: 16 / 10; }
@media (max-width: 760px) { .bdu3d-explode.is-static > bdu-scene-3d { aspect-ratio: 4 / 5; } }

@media (prefers-reduced-motion: reduce) {
  .bdu3d__poster, .bdu3d__canvas, .bdu3d__overlay, .bdu3d__tag { transition: none; }
}