/* Otoolia — Schémas de verrerie (styles limités à .vr / .vr-*) */
.vr-head h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: .2em; }
.vr h2 { font-size: 1.05rem; margin: 0 0 10px; }
.vr h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ot-text-soft); margin: 10px 0 6px; }
.vr-main { display: grid; gap: var(--ot-space); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .vr-main { grid-template-columns: 230px minmax(0, 1fr) 280px; } .vr-side { position: sticky; top: 12px; } }
.vr-main > * { min-width: 0; }
.vr-palg { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
@media (min-width: 1100px) { .vr-palg { grid-template-columns: 1fr 1fr; } }
.vr-pb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: 1px solid var(--ot-border); border-radius: 8px; background: var(--ot-surface); color: var(--ot-text); font: inherit; font-size: .72rem; line-height: 1.15; cursor: pointer; text-align: center; }
.vr-pb:hover { border-color: var(--ot-logo-blue); background: color-mix(in srgb, var(--ot-logo-blue) 6%, var(--ot-surface)); }
.vr-bar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 8px; }
.vr-bar .ot-select { min-height: 34px; padding: 2px 8px; width: auto; }
.vr-stage { border: 1px solid var(--ot-border); border-radius: var(--ot-radius-s); overflow: hidden; background: #fff; touch-action: none; user-select: none; -webkit-user-select: none; }
.vr-stage svg { display: block; width: 100%; height: auto; }
.vr-grid { stroke: #eef0f4; stroke-width: .25; }
.vr-it { cursor: grab; } .vr-it:active { cursor: grabbing; }
.vr-tip { cursor: crosshair; }
.vr-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; margin: 6px 0; }
.vr-f { display: flex; flex-direction: column; gap: 3px; font-size: .76rem; font-weight: 600; color: var(--ot-text-soft); min-width: 0; }
.vr-f .ot-input, .vr-f .ot-select { min-height: 32px; padding: 2px 6px; font-size: .9rem; width: 92px; }
.vr-f .ot-select { width: 170px; max-width: 100%; }
.vr-f input[type=range] { width: 120px; }
.vr-wide .ot-input { width: 100%; }
.vr-ck { display: flex; gap: 6px; align-items: center; font-size: .86rem; }
.vr-sm { min-height: 30px; padding: 3px 10px; font-size: .82rem; }
.vr-del { color: var(--ot-danger); }
.vr-help { font-size: .82rem; color: var(--ot-text-soft); margin: 6px 0 0; }
.vr-legend ul { margin: 0; padding-left: 1.1em; font-size: .86rem; }
.vr-legend li { margin: 3px 0; }
.vr-pdesc { font-size: .88rem; background: var(--ot-surface-2); border-radius: var(--ot-radius-s); padding: 8px 10px; margin: 0 0 8px; }
.vr-exp { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.vr-file { position: relative; overflow: hidden; } .vr-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vr-tex { width: 100%; min-height: 180px; font-family: var(--ot-mono); font-size: .78rem; margin-top: 8px; }
.vr-about { margin-top: calc(var(--ot-space) * 2); }
.vr-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ot-text); color: var(--ot-bg); padding: 10px 18px; border-radius: 999px; font-size: .9rem; z-index: 50; }
@media (max-width: 1099px) { .vr-main > :nth-child(2) { order: -1; } .vr-palg { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } }
.vr-stage { aspect-ratio: 320 / 260; overflow: auto; overscroll-behavior: contain; }
.vr-stage.is-zoomed { cursor: grab; }
.vr-stage svg { flex: none; max-width: none; }
.vr-grid--major { stroke: #dde1e8; }
.vr-zoom { display: inline-flex; align-items: center; gap: 4px; }
.vr-zoom .vr-sm { min-width: 34px; }
#vr-zlab { min-width: 3.4em; text-align: center; font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--ot-text-soft); }
.vr-colrow { display: flex; gap: 4px; align-items: center; }
.vr-col { width: 34px; height: 32px; padding: 0 2px; border: 1px solid var(--ot-border); border-radius: 6px; background: var(--ot-surface); cursor: pointer; }
.vr-tube { border: 1px solid var(--ot-border); border-radius: var(--ot-radius-s); padding: 2px 8px 6px; margin: 6px 0; }
.vr-tube legend { font-size: .78rem; font-weight: 700; color: var(--ot-text-soft); padding: 0 4px; }
.vr-tube .vr-f .ot-input[type=text] { width: 110px; }