:root {
  --maxw: 1200px;
  --gap: 16px;
  --radius: 14px;
  --border: rgba(0,0,0,0.12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #a3d1ff;
}

.site-header, .site-footer {
  padding: 14px 18px;
  background: rgb(255, 191, 101);
  border-bottom: 1px solid var(--border);
}
.site-footer {
  border-top: 1px solid var(--border);
  border-bottom: none;
}

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}


.layout {
  width: min(var(--maxw), calc(100% - 2 * var(--gap)));
  margin: var(--gap) auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}

.panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 14px;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

/* Le panel 3D : une hauteur stable */
.panel--three {
  min-height: 520px; /* tu peux garder 520 comme ton .panel */
}

/* Wrapper qui porte la "zone 3D" (hauteur stable) */
.three-wrap {
  position: relative;
  flex: 1;           /* prend le reste du panel */
  min-height: 420px; /* zone de rendu minimum */
  border-radius: 12px;
  overflow: hidden;
  background: #111;
}

/* Le div qui reçoit le canvas WebGL */
#three-root {
  position: absolute;
  inset: 0;
}

/* Le canvas Three.js injecté */
#three-root canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Canvas overlay FX */
.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

.hint {
  margin-top: 10px;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* Quiz */
.quiz fieldset {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin: 0 0 12px;
}
.quiz label { display: block; margin-top: 8px; }
.quiz button {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
}
.quiz button:hover { background: #f2f2f2; }
.quiz-result { margin-top: 12px; }

/* Responsive: empiler en mobile */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .panel { min-height: 420px; }
}