/* Otoolia — Simulateur de mécanique (styles limités à .me / .me-*) */
.me { --me-grid: #e6e6ef; --me-path: #1e6baf; --me-v: #1e6baf; --me-a: #d62839; --me-obj: #e7a13b; --me-ramp: #e9e2d0; }
:root[data-theme="dark"] .me { --me-grid: #2a2a3c; --me-path: #4a90d9; --me-v: #4a90d9; --me-a: #ff6b6b; --me-ramp: #3a3528; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .me { --me-grid: #2a2a3c; --me-path: #4a90d9; --me-v: #4a90d9; --me-a: #ff6b6b; --me-ramp: #3a3528; } }
.me-head h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: .2em; }
.me h2 { font-size: 1.05rem; margin: 0 0 10px; }
.me-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 var(--ot-space); }
.me-tb { border: 1px solid var(--ot-border); background: var(--ot-surface); color: var(--ot-text); border-radius: 999px; padding: 7px 16px; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; }
.me-tb[aria-pressed="true"] { background: var(--ot-brand); border-color: var(--ot-brand); color: var(--ot-brand-ink); }
.me-main { display: grid; gap: var(--ot-space); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .me-main { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.me-main > * { min-width: 0; }
.me-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 8px; }
.me-row[hidden], .me-f[hidden] { display: none; }
.me-f { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 600; color: var(--ot-text-soft); min-width: 0; }
.me-f .ot-input, .me-f .ot-select { min-height: 36px; padding: 4px 8px; font-size: .92rem; width: 130px; max-width: 100%; }
#me-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; margin-bottom: 10px; }
#me-params .ot-input { width: 100%; }
.me-ck { display: flex; gap: 6px; align-items: center; font-size: .86rem; }
.me-scene { width: 100%; display: block; border-radius: var(--ot-radius-s); background: var(--ot-surface-2); }
.me-graph { width: 100%; display: block; margin-top: 8px; }
.me-ctl { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; }
.me-ctl input[type=range] { flex: 1 1 180px; }
.me-tlab { font-size: .82rem; color: var(--ot-text-soft); font-variant-numeric: tabular-nums; min-width: 8em; }
.me-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.me-res div { background: var(--ot-surface-2); border-radius: var(--ot-radius-s); padding: 8px 10px; }
.me-res span { display: block; font-size: .74rem; color: var(--ot-text-soft); }
.me-res b { font-variant-numeric: tabular-nums; }
.me-explain { font-size: .88rem; color: var(--ot-text-soft); background: var(--ot-surface-2); border-radius: var(--ot-radius-s); padding: 8px 12px; margin: 10px 0 0; }
.me-sm { min-height: 32px; padding: 4px 12px; font-size: .85rem; }
.me-about { margin-top: calc(var(--ot-space) * 2); }