/* Composant autonome : états de la matière */
.matter-lab {
  --background: #ffffff;
  --foreground: #18181b;
  --muted-foreground: #71717a;
  --card: #f4f4f5;
  --card-foreground: #18181b;
  --border: #d4d4d8;
  --input: #e4e4e7;
  --blue: #2795e9;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color-scheme: light;
  background: var(--background);
}
.matter-lab *,
.matter-lab *::before,
.matter-lab *::after {
  box-sizing: border-box;
}
.matter-lab .text-small {
  font-size: 0.82rem;
}
.matter-lab .text-muted {
  color: var(--muted-foreground);
}
.matter-lab .form-label {
  display: grid;
  gap: 5px;
  font-size: 0.9rem;
  font-weight: 500;
}
.matter-lab .form-select {
  width: 100%;
  min-height: 38px;
  padding: 7px 34px 7px 10px;
  color: var(--foreground);
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 9px;
  font: inherit;
}
.matter-lab .form-range {
  accent-color: var(--blue);
}
.matter-lab .vertical-range {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  background: transparent;
}
.matter-lab .vertical-range::-webkit-slider-runnable-track {
  width: 3px;
  height: 100%;
  background: transparent;
}
.matter-lab .vertical-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-left: -7.5px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: var(--background);
}
.matter-lab .vertical-range::-moz-range-track {
  width: 3px;
  background: transparent;
}
.matter-lab .vertical-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: var(--background);
}
.matter-lab .card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.matter-lab {
      display: grid;
      gap: 14px;
      width: 100%;
      color: var(--foreground);
    }
    .matter-lab .temperature-control p {
      margin: 0;
    }
    .matter-lab [hidden] {
      display: none !important;
    }
    .matter-lab .lab-toolbar {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
    }
    .matter-lab .lab-toolbar .form-label,
    .matter-lab .simulation-layout > * {
      min-width: 0;
    }
    .matter-lab .simulation-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 76px;
      gap: 12px;
      align-items: stretch;
      margin-top: 10px;
    }
    .matter-lab .simulation-layout:has(> .temperature-control[hidden]) {
      grid-template-columns: minmax(0, 1fr);
    }
    .matter-lab .temperature-control {
      display: grid;
      grid-template-rows: auto auto minmax(150px, 1fr) auto auto;
      justify-items: center;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .matter-lab .temperature-value {
     font-weight: 500;
     white-space: nowrap;
    }
    .matter-lab .temperature-slider {
     position: relative;
     display: grid;
     place-items: center;
     width: 100%;
     height: 100%;
     min-height: 150px;
    }
    .matter-lab .temperature-track-bg {
     position: absolute;
     top: 8px;
     bottom: 8px;
     width: 3px;
     background: var(--border);
     border-radius: 999px;
     pointer-events: none;
    }
    .matter-lab .vertical-range {
     position: relative;
     z-index: 1;
     writing-mode: vertical-lr;
     direction: rtl;
     width: 22px;
      height: 100%;
      min-height: 150px;
      margin: 0;
    }
    .matter-lab .temperature-short {
      display: none;
    }
    .matter-lab .lab-stage {
      position: relative;
      overflow: hidden;
      padding: 0;
    }
    .matter-lab canvas {
      display: block;
      width: 100%;
      height: clamp(250px, 50vw, 380px);
    }
    .matter-lab .state-note {
      position: absolute;
      left: 14px;
      top: 12px;
      max-width: calc(100% - 28px);
      padding: 7px 10px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--card) 88%, transparent);
      color: var(--card-foreground);
      border: 1px solid var(--border);
      backdrop-filter: blur(8px);
      pointer-events: none;
    }
    .matter-lab .state-word {
      font-weight: 500;
    }
    @media (max-width: 480px) {
      .matter-lab .simulation-layout {
        grid-template-columns: minmax(0, 1fr) 66px;
        gap: 8px;
      }
      .matter-lab .state-note {
        border-radius: 12px;
      }
      .matter-lab .temperature-full {
        display: none;
      }
      .matter-lab .temperature-short {
        display: inline;
      }
    }