/* The shared frame of a tool: a scene and a row of three sliders under it. */
@font-face { font-family: "NM"; src: url(../assets/PPNeueMontreal-Book.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NM"; src: url(../assets/PPNeueMontreal-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }

.outil-scene { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #fffdf9; }
.outil-reglages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 22px 4px 4px; }
.curseur { display: flex; flex-direction: column; gap: 10px; font-size: 17px; letter-spacing: -0.01em; color: #26224d; cursor: pointer; }
.curseur-tete { display: flex; justify-content: space-between; }
.curseur-val { color: #4d4970; font-variant-numeric: tabular-nums; }
.curseur input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: none; margin: 0; cursor: pointer; }
.curseur input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #26224d var(--p, 50%), rgba(38, 34, 77, 0.2) var(--p, 50%)); }
.curseur input::-moz-range-track { height: 2px; background: rgba(38, 34, 77, 0.2); }
.curseur input::-moz-range-progress { height: 2px; background: #26224d; }
.curseur input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #f2541b; margin-top: -8px; box-shadow: 0 2px 6px rgba(38, 34, 77, 0.3); transition: transform 150ms; }
.curseur input:active::-webkit-slider-thumb { transform: scale(1.2); }
.curseur input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #f2541b; box-shadow: 0 2px 6px rgba(38, 34, 77, 0.3); }
@media (max-width: 760px) { .outil-reglages { grid-template-columns: 1fr; gap: 18px; } }