@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap");

:root {
  --ink: #173d24;
  --muted: #5d685f;
  --paper: #eee9dd;
  --surface: #f8f4eb;
  --soft: #e5e0d4;
  --line: rgba(30, 62, 39, .17);
  --accent: #b65328;
  --light: #fff8e8;
  --shadow: 0 24px 70px rgba(31, 47, 34, .13);
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #dcd7ca; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: var(--sans); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #d05a29; outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.experience {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, .76fr) minmax(480px, 1.55fr) minmax(310px, .78fr);
  grid-template-rows: 76px minmax(600px, 1fr) 48px;
  background:
    linear-gradient(rgba(27, 64, 36, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 64, 36, .055) 1px, transparent 1px),
    var(--paper);
  background-size: 32px 32px;
}

.brand-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(238, 233, 221, .88); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 18px; color: inherit; text-decoration: none; }
.brand img { width: 126px; height: auto; }
.brand > span { padding-left: 18px; border-left: 1px solid var(--line); color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.prototype-label { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.prototype-label > span { width: 7px; height: 7px; border-radius: 50%; background: #5f9870; box-shadow: 0 0 0 5px rgba(95, 152, 112, .13); }

.intro { min-width: 0; padding: clamp(42px, 5vw, 78px) clamp(28px, 4vw, 62px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border-right: 1px solid var(--line); }
.eyebrow { margin: 0 0 18px; color: var(--accent); font: 500 10px/1.25 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.intro h1 { max-width: 530px; margin: 0; font-size: clamp(44px, 5vw, 78px); line-height: .94; letter-spacing: -.055em; font-weight: 600; }
.intro h1 em { font-family: var(--serif); font-weight: 500; }
.lead { max-width: 450px; margin: 28px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.scene-instructions { margin-top: 38px; display: grid; gap: 11px; color: var(--muted); font-size: 11px; }
.scene-instructions span { display: flex; align-items: center; gap: 10px; }
.scene-instructions b { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.34); color: var(--ink); font-size: 12px; }
.tour-button { min-height: 68px; margin-top: 36px; padding: 8px 18px 8px 9px; display: flex; align-items: center; gap: 13px; border: 1px solid transparent; border-radius: 17px; background: var(--ink); color: var(--light); cursor: pointer; text-align: left; box-shadow: 0 12px 28px rgba(23, 61, 36, .17); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.tour-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(23, 61, 36, .23); }
.tour-button[aria-pressed="true"] { background: var(--accent); }
.tour-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: rgba(255,255,255,.13); font-size: 13px; }
.tour-button > span:last-child { display: grid; gap: 4px; }
.tour-button strong { font-size: 12px; }
.tour-button small { color: rgba(255,248,232,.67); font-size: 9px; }

.scene-panel { position: relative; min-width: 0; overflow: hidden; background: #d7d7ca; isolation: isolate; touch-action: none; cursor: grab; }
.scene-panel.dragging { cursor: grabbing; }
#scene-canvas { width: 100%; height: 100%; display: block; }
.scene-gradient { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(238,233,221,.28), transparent 24%), linear-gradient(0deg, rgba(19,46,27,.22), transparent 34%); }
.scene-loading { position: absolute; z-index: 8; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: #d9d8ca; color: var(--ink); font: 500 10px/1 var(--mono); letter-spacing: .06em; transition: opacity .35s ease, visibility .35s ease; }
.scene-loading span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(182,83,40,.5); animation: load-pulse 1.4s ease infinite; }
.scene-panel.ready .scene-loading { opacity: 0; visibility: hidden; }
.scene-fallback { display: none; position: absolute; z-index: 9; inset: 0; place-items: center; padding: 30px; margin: 0; background: #e2ddd0; text-align: center; }
.scene-panel.failed .scene-fallback { display: grid; }
.scene-panel.failed #scene-canvas, .scene-panel.failed .scene-loading, .scene-panel.failed .hotspot { display: none; }

.hotspot { position: absolute; z-index: 4; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transform: translate(-50%, -50%); transition: opacity .2s ease; }
.hotspot-pulse { position: absolute; inset: 1px; border: 1px solid rgba(255,248,232,.78); border-radius: 50%; animation: hotspot-pulse 2.2s ease-out infinite; }
.hotspot-dot { position: relative; width: 13px; height: 13px; border: 3px solid rgba(255,248,232,.95); border-radius: 50%; background: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.hotspot[aria-pressed="false"] .hotspot-dot { background: #66736a; }
.hotspot-label { position: absolute; left: 27px; top: 50%; min-width: 118px; padding: 8px 10px; display: grid; gap: 3px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(20,49,29,.86); color: #fff8e8; box-shadow: 0 8px 25px rgba(12,25,16,.18); backdrop-filter: blur(9px); opacity: 0; pointer-events: none; text-align: left; transform: translate(0,-50%) translateX(-6px); transition: opacity .18s ease, transform .18s ease; }
.hotspot:hover .hotspot-label, .hotspot:focus-visible .hotspot-label { opacity: 1; transform: translate(0,-50%) translateX(0); }
.hotspot-label strong { font-size: 10px; }
.hotspot-label small { color: rgba(255,248,232,.7); font-size: 8px; white-space: nowrap; }

.wall-switch { position: absolute; z-index: 5; width: 92px; height: 58px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 0; border-radius: 11px; background: transparent; box-shadow: none; transform: translate(-50%,-50%); transition: opacity .2s ease; }
.wall-switch::before { content: "DOUBLE INTERRUPTEUR"; position: absolute; bottom: calc(100% + 7px); left: 50%; padding: 6px 8px; border-radius: 7px; background: rgba(20,49,29,.88); color: #fff8e8; font: 500 7px/1 var(--mono); letter-spacing: .06em; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(4px); transition: opacity .18s ease, transform .18s ease; }
.wall-switch:hover::before, .wall-switch:focus-within::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.wall-switch > button { position: relative; min-width: 0; min-height: 46px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; cursor: pointer; box-shadow: none; }
.wall-switch > button > span, .wall-switch > button::after { display: none; }
.wall-switch > button:focus-visible { outline: 3px solid #d05a29; outline-offset: 2px; background: rgba(255,248,232,.1); }
.wall-switch small { position: absolute; top: calc(100% + 10px); left: 50%; padding: 4px 6px; border-radius: 6px; background: rgba(20,49,29,.88); color: #fff8e8; font: 500 7px/1 var(--mono); white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(-50%); }
.wall-switch > button:hover small, .wall-switch > button:focus-visible small { opacity: 1; }
.wall-switch-cable { display: none; }
.wall-switch-cable.cable-main { right: 100%; }
.wall-switch-cable.cable-floor { left: 100%; color: rgba(32,82,48,.65); }

.view-status { position: absolute; z-index: 4; top: 18px; left: 18px; min-height: 54px; padding: 8px 13px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,.24); border-radius: 14px; background: rgba(246,242,233,.82); color: var(--ink); box-shadow: 0 9px 28px rgba(16,38,23,.12); backdrop-filter: blur(12px); }
.view-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #e08b3e; box-shadow: 0 0 0 5px rgba(224,139,62,.15), 0 0 18px rgba(224,139,62,.55); }
.view-status > span:last-child { display: grid; gap: 3px; }
.view-status small { color: var(--muted); font: 500 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.view-status strong { font-size: 11px; }
.reset-view { position: absolute; z-index: 4; right: 18px; bottom: 18px; min-height: 43px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; background: rgba(246,242,233,.82); color: var(--ink); cursor: pointer; box-shadow: 0 8px 25px rgba(16,38,23,.12); backdrop-filter: blur(12px); font-size: 10px; font-weight: 700; }
.reset-view span { font-size: 16px; }

.control-deck { min-width: 0; overflow-y: auto; padding: 28px 24px; display: grid; align-content: center; gap: 30px; border-left: 1px solid var(--line); background: rgba(248,244,235,.78); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-heading .eyebrow { margin-bottom: 9px; }
.section-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.025em; }
.power-all { width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 13px; background: #fffaf0; color: var(--accent); cursor: pointer; font-size: 18px; }
.power-all[aria-pressed="false"] { color: var(--muted); background: var(--soft); }
.preset-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preset-grid button { min-height: 68px; padding: 10px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.3); cursor: pointer; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.preset-grid button:hover { transform: translateY(-1px); background: rgba(255,255,255,.62); }
.preset-grid button.selected { border-color: rgba(23,61,36,.55); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(23,61,36,.08); }
.preset-grid button > span:last-child { display: grid; gap: 3px; }
.preset-grid strong { font-size: 10px; }
.preset-grid small { color: var(--muted); font-size: 8px; }
.preset-swatch { width: 25px; height: 25px; flex: 0 0 auto; border: 1px solid rgba(23,61,36,.12); border-radius: 50%; box-shadow: inset 0 0 12px rgba(255,255,255,.45); }
.swatch-day { background: #dcebdc; }
.swatch-warm { background: #ed9b4a; box-shadow: 0 0 14px rgba(237,155,74,.35); }
.swatch-focus { background: #f5e5bd; }
.swatch-night { background: #719779; }

.zones-section { padding-top: 25px; border-top: 1px solid var(--line); }
.zone-list { margin-top: 15px; display: grid; gap: 8px; }
.zone-control { padding: 9px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.3); }
.zone-toggle { width: 100%; min-height: 45px; padding: 0; display: grid; grid-template-columns: 38px minmax(0,1fr) 18px; align-items: center; gap: 9px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.zone-toggle > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.zone-toggle strong { font-size: 10px; }
.zone-toggle small { color: var(--muted); font-size: 8px; }
.zone-toggle i { width: 16px; height: 9px; padding: 2px; display: block; border-radius: 999px; background: #889087; transition: background .2s ease; }
.zone-toggle i::after { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: #fff; transform: translateX(0); transition: transform .2s ease; }
.zone-toggle[aria-pressed="true"] i { background: var(--ink); }
.zone-toggle[aria-pressed="true"] i::after { transform: translateX(7px); }
.zone-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--soft); color: var(--accent); font-size: 17px; }
.zone-control label { min-height: 30px; padding: 0 5px 0 47px; display: grid; grid-template-columns: 1fr 38px; align-items: center; gap: 8px; }
.zone-control output { color: var(--muted); font: 500 8px/1 var(--mono); text-align: right; }
input[type="range"] { width: 100%; height: 4px; appearance: none; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--fill, 50%), rgba(23,61,36,.14) var(--fill, 50%)); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { width: 15px; height: 15px; appearance: none; border: 3px solid #fffaf0; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 8px rgba(26,45,31,.25); }
input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid #fffaf0; border-radius: 50%; background: var(--accent); }

.lab-footer { grid-column: 1 / -1; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); color: var(--muted); font: 400 9px/1 var(--mono); }
.lab-footer p { margin: 0; }
.lab-footer p:first-child { display: flex; align-items: center; gap: 7px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #5f9870; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 22px; max-width: calc(100vw - 32px); padding: 11px 15px; border-radius: 12px; background: #173d24; color: #fff8e8; box-shadow: 0 14px 34px rgba(17,36,22,.25); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .22s ease, transform .22s ease; font-size: 11px; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes load-pulse { 0% { box-shadow: 0 0 0 0 rgba(182,83,40,.5); } 70%,100% { box-shadow: 0 0 0 12px rgba(182,83,40,0); } }
@keyframes hotspot-pulse { 0% { opacity: .8; transform: scale(.6); } 75%,100% { opacity: 0; transform: scale(1.75); } }

@media (max-width: 1180px) {
  .experience { grid-template-columns: minmax(260px,.78fr) minmax(460px,1.4fr); grid-template-rows: 70px minmax(540px,1fr) auto 46px; }
  .scene-panel { border-right: 0; }
  .control-deck { grid-column: 1 / -1; padding: 24px 28px; grid-template-columns: 1fr 1.15fr; align-items: start; overflow: visible; border-top: 1px solid var(--line); border-left: 0; }
  .zones-section { padding-top: 0; padding-left: 26px; border-top: 0; border-left: 1px solid var(--line); }
  .zone-list { grid-template-columns: repeat(2,1fr); }
  .zone-control label { padding-left: 5px; }
}

@media (max-width: 760px) {
  .experience { display: block; min-height: 100vh; padding-bottom: 22px; }
  .brand-bar { height: 64px; padding: 0 16px; }
  .brand img { width: 104px; }
  .brand > span { display: none; }
  .prototype-label { font-size: 8px; }
  .intro { padding: 38px 20px 32px; border-right: 0; }
  .intro h1 { font-size: clamp(42px, 13vw, 60px); }
  .lead { margin-top: 22px; }
  .scene-instructions { display: none; }
  .tour-button { margin-top: 27px; }
  .scene-panel { width: calc(100% - 24px); height: min(76vh, 590px); min-height: 440px; margin: 0 12px; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
  .hotspot-label { display: none; }
  .wall-switch { width: 104px; height: 56px; }
  .wall-switch > button { min-height: 44px; }
  .wall-switch::before, .wall-switch small { display: none; }
  .view-status { top: 13px; left: 13px; }
  .reset-view { right: 13px; bottom: 13px; }
  .control-deck { margin-top: 14px; padding: 27px 20px; display: grid; grid-template-columns: 1fr; gap: 28px; border: 0; background: transparent; }
  .zones-section { padding: 26px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .zone-list { grid-template-columns: 1fr; }
  .zone-control label { padding-left: 47px; }
  .lab-footer { min-height: 80px; padding: 20px; flex-direction: column; align-items: flex-start; justify-content: center; }
}

html.embed, html.embed body { width: 100%; height: 100%; min-height: 0; overflow: hidden; background: #e8e2d5; }
html.embed .experience { display: block; width: 100%; height: 100%; min-height: 0; padding: 0; }
html.embed .brand-bar, html.embed .intro, html.embed .control-deck, html.embed .lab-footer { display: none; }
html.embed .scene-panel { width: 100%; height: 100% !important; min-height: 0; border: 0; }
html.embed .view-status { top: 12px; left: 12px; transform: scale(.88); transform-origin: left top; }
html.embed .reset-view { right: 12px; bottom: 12px; }

@media (max-width: 390px) {
  .prototype-label { max-width: 135px; line-height: 1.35; text-align: right; }
  .intro h1 { font-size: 42px; }
  .preset-grid { grid-template-columns: 1fr; }
  .scene-panel { min-height: 410px; height: 68vh; }
  .view-status { max-width: calc(100% - 26px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}