/* Outil « bureau assis-debout en 3D » (composants/outil-bureau3d.html) — univers planche d'ergonome du theme.css. */
.outil-bureau3d { background: var(--papier, #fafbf8); border: 1px solid var(--calque-2, #dfe3df); border-top: 4px solid var(--orange, #f06a1d); padding: 20px; margin: 24px 0; }
.outil-bureau3d * { box-sizing: border-box; }
.outil-bureau3d [hidden] { display: none !important; }
.b3-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.b3-champ { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 15px; min-width: 0; }
.b3-champ input, .b3-champ select { font: inherit; font-size: 17px; padding: 8px 10px; border: 2px solid var(--beton, #565c5f); background: #fff; color: var(--encre, #22252a); min-width: 0; width: 100%; }
.b3-posture { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; border: 0; padding: 0; margin: 14px 0 6px; font-family: var(--mono); font-size: 16px; }
.b3-posture legend { float: left; margin-right: 12px; color: var(--gris, #4f5559); }
.b3-posture label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.b3-posture input { width: 20px; height: 20px; accent-color: var(--sauge-fonce, #3d5c46); }
.b3-curseur { display: block; font-family: var(--mono); font-size: 15px; margin: 8px 0 4px; }
.b3-curseur input { display: block; width: 100%; min-height: 44px; accent-color: var(--orange-texte, #b0430b); }
.b3-curseur input:disabled { opacity: .45; }
.b3-bornes { color: var(--gris, #4f5559); }
.b3-scene { position: relative; margin: 12px 0; background: var(--calque, #eef0ee); border: 1px solid var(--calque-2, #dfe3df); }
.b3-poster { display: block; width: 100%; height: auto; max-height: 300px; }
.b3-canvas { width: 100%; height: min(62vh, 460px); min-height: 280px; }
.b3-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.b3-canvas canvas:active { cursor: grabbing; }
.b3-lancer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.b3-commandes { position: absolute; top: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.b3-commandes button { font-family: var(--mono); font-size: 14px; min-width: 44px; min-height: 44px; padding: 4px 10px; background: var(--papier, #fafbf8); color: var(--encre, #22252a); border: 2px solid var(--beton-fonce, #2f3437); cursor: pointer; }
.b3-commandes button[aria-pressed="true"] { background: var(--beton-fonce, #2f3437); color: var(--papier, #fafbf8); }
.b3-commandes button:focus-visible, .b3-lancer:focus-visible { outline: 3px solid var(--orange, #f06a1d); outline-offset: 2px; }
.b3-aide { margin: 0; padding: 8px 12px; font-size: 15px; color: var(--gris, #4f5559); background: var(--papier, #fafbf8); border-top: 1px solid var(--calque-2, #dfe3df); }
.b3-cotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; margin: 16px 0 8px; }
.b3-cotes div { background: var(--calque, #eef0ee); padding: 10px 12px; border-left: 3px solid var(--sauge-fonce, #3d5c46); }
.b3-cotes dt { font-family: var(--mono); font-size: 14px; color: var(--gris, #4f5559); }
.b3-cotes dd { margin: 4px 0 0; font-family: var(--mono); font-size: 19px; }
.b3-verdict { font-size: 18px; }
.b3-fiche, .b3-position, .b3-ecran-verdict { font-size: 16px; }
.b3-fiche { color: var(--gris, #4f5559); }
.b3-ecran-verdict:empty { display: none; }
.b3-tableau { margin-top: 12px; }
.b3-tableau table { width: 100%; border-collapse: collapse; font-size: 15px; }
.b3-tableau caption { text-align: left; font-family: var(--titre); font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.b3-tableau th, .b3-tableau td { padding: 8px 6px; border-bottom: 1px solid var(--calque-2, #dfe3df); text-align: left; vertical-align: middle; }
.b3-tableau tbody th { font-family: var(--titre); }
.b3-v { font-family: var(--mono); font-weight: 700; }
.b3-oui { color: var(--sauge-fonce, #3d5c46); }
.b3-oui::before, .b3-juste::before { content: "✓ "; }
.b3-non { color: var(--orange-texte, #b0430b); }
.b3-non::before { content: "✗ "; }
.b3-juste { color: #6b4b00; }
.b3-nd { color: var(--gris, #4f5559); font-weight: 400; }
.b3-btn { text-align: right; }
.b3-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.b3-note { margin-top: 16px; font-size: 15px; color: var(--gris, #4f5559); border-top: 1px dashed var(--calque-2, #dfe3df); padding-top: 12px; }
@media (max-width: 760px) {
  .outil-bureau3d { padding: 14px; }
  .b3-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .b3-tableau tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--calque-2, #dfe3df); }
  .b3-tableau th, .b3-tableau td { display: block; border: 0; padding: 2px 0; text-align: left; }
  .b3-tableau tbody th { position: static; box-shadow: none; max-width: none; min-width: 0; }
  .b3-tableau td[data-label]::before { content: attr(data-label) " : "; font-family: var(--mono); color: var(--gris, #4f5559); font-weight: 400; }
  .b3-tableau td.b3-v[data-cle="assis"]::after { content: " (assis)"; font-weight: 400; color: var(--gris, #4f5559); }
  .b3-tableau td.b3-v[data-cle="debout"]::after { content: " (debout)"; font-weight: 400; color: var(--gris, #4f5559); }
  .b3-btn { text-align: left; padding-top: 6px !important; }
  .b3-canvas { height: 58vh; min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .outil-bureau3d * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (max-width: 760px) { .b3-tableau .tableau { padding: 4px 12px; } }