/* THALARK — viewer 3D interactif (three.js) */

.th3d {
  position: relative;
  height: 100svh;
  min-height: 620px;
  background: #e9e9e4;
  color: #20221d;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
}

.th3d canvas { display: block; width: 100%; height: 100%; outline: none; }

/* ---- bandeau haut ---- */
.th3d-top {
  position: absolute; top: 26px; left: 5vw; right: 5vw;
  display: flex; justify-content: space-between; gap: 20px;
  font: 12px var(--mono, ui-monospace, monospace);
  letter-spacing: .04em; z-index: 3; pointer-events: none;
}

.th3d-title {
  position: absolute; top: 13%; left: 5vw; z-index: 2; pointer-events: none;
  mix-blend-mode: multiply;
}
.th3d-title > span { font-size: clamp(20px, 2.6vw, 38px); display: block; }
.th3d-title h2 {
  font-size: clamp(58px, 9vw, 150px); font-weight: 500; line-height: .95;
  letter-spacing: -.07em; margin: 6px 0 0;
}

/* ---- panneau mécanismes ---- */
.th3d-panel {
  position: absolute; right: 5vw; top: 50%; transform: translateY(-50%);
  width: min(330px, 36vw); z-index: 4;
  background: #ffffffcc; backdrop-filter: blur(14px);
  border: 1px solid #20221d1a; border-radius: 18px;
  padding: 20px 20px 14px;
  max-height: 74svh; overflow-y: auto;
}
.th3d-panel h3 {
  font: 12px var(--mono, ui-monospace, monospace);
  letter-spacing: .08em; text-transform: uppercase;
  color: #6a6f61; margin: 0 0 16px;
}

.th3d-mech { margin-bottom: 15px; }
.th3d-mech:last-of-type { margin-bottom: 6px; }
.th3d-mech-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 6px;
}
.th3d-mech-head label { font-size: 14px; font-weight: 500; }
.th3d-mech-head output {
  font: 11px var(--mono, ui-monospace, monospace); color: #6a6f61;
  min-width: 38px; text-align: right;
}
.th3d-mech input[type=range] {
  width: 100%; height: 26px; accent-color: #20221d; cursor: pointer;
}

.th3d-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.th3d-btn {
  flex: 1 1 auto; min-width: 120px;
  background: #20221d; color: #e2ff54; border: 0; border-radius: 30px;
  padding: 12px 16px; font-size: 13px; cursor: pointer;
}
.th3d-btn.ghost { background: none; color: #20221d; border: 1px solid #20221d40; }
.th3d-btn[aria-pressed=true] { background: #dfff59; color: #161914; }
.th3d-btn:disabled { opacity: .4; cursor: default; }

/* ---- bas de page ---- */
.th3d-bottom {
  position: absolute; bottom: 26px; left: 5vw; z-index: 4;
  max-width: min(430px, 46vw);
}
.th3d-status { font-size: 14px; line-height: 1.45; margin: 0; }
.th3d-hint {
  font: 11px var(--mono, ui-monospace, monospace);
  color: #6a6f61; margin: 8px 0 0;
}

/* ---- chargement ---- */
.th3d-loader {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-content: center; gap: 14px;
  background: #e9e9e4; transition: opacity .5s ease;
}
.th3d-loader[hidden] { display: none; }
.th3d.is-ready .th3d-loader { opacity: 0; pointer-events: none; }
.th3d-bar {
  width: min(260px, 50vw); height: 3px; background: #20221d26; overflow: hidden;
}
.th3d-bar i {
  display: block; height: 100%; width: 0%; background: #20221d;
  transition: width .3s ease;
}
.th3d-loader p {
  font: 12px var(--mono, ui-monospace, monospace);
  color: #6a6f61; margin: 0; text-align: center;
}

.th3d-error {
  position: absolute; inset: auto 5vw 26px; z-index: 7;
  font-size: 14px; color: #8a2b12;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .th3d { height: auto; min-height: 0; }
  .th3d-stage { height: 62svh; position: relative; }
  .th3d-title { top: 9%; }
  .th3d-title h2 { font-size: 15vw; }
  .th3d-panel {
    position: static; transform: none; width: auto; max-height: none;
    margin: 0 5vw 26px; border-radius: 16px; background: #fff;
  }
  .th3d-bottom { position: static; margin: 0 5vw 22px; max-width: none; }
  .th3d-top { top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .th3d-loader, .th3d-bar i { transition: none; }
}