/* Outillage de l'atelier (v1.85) — préfixe ot-. Thème clair, mur d'outillage et servantes animés (maquette validée). */
@keyframes ot-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes ot-shine { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(520%) skewX(-18deg); } }
@keyframes ot-led { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 5px currentColor); } 50% { opacity: .35; filter: none; } }
@keyframes ot-drawer { 0%, 55%, 100% { transform: translateY(0); } 65%, 90% { transform: translateY(9px); } }
@keyframes ot-spin { to { transform: rotate(360deg); } }
@keyframes ot-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ot-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ot-spark { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
@keyframes ot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ot-pop { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }

.ot-head { background: #fff; border: 1px solid #dce2eb; border-radius: 16px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ot-head .ot-ico { width: 52px; height: 52px; flex-shrink: 0; border: 2px solid #d7141b; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.ot-head .ot-ico svg { animation: ot-spin 9s linear infinite; }
.ot-head h1 { margin: 0; font-size: 26px; }
.ot-head .ot-sub { font-size: 13px; color: #5b6b85; }
.ot-head .ot-title { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
.ot-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.ot-chip { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px; background: #f6f8fb; border: 1px solid #dce2eb; }
.ot-chip.alert { border-color: #f5c2c5; }
.ot-chip .dot { width: 9px; height: 9px; border-radius: 50%; color: var(--c); background: var(--c); animation: ot-led 1.8s ease-in-out infinite; }
.ot-chip b { font-size: 20px; line-height: 1.1; display: block; }
.ot-chip small { font-size: 11.5px; color: #5b6b85; }

.ot-scene { position: relative; min-height: 470px; border-radius: 16px; overflow: hidden; border: 1px solid #dce2eb; background: radial-gradient(circle at 50% -10%, #fff 0%, #eef1f5 60%, #e2e7ee 100%); }
.ot-wall { position: absolute; inset: 0 0 auto 0; height: 205px; background-color: #dce2ea; background-image: radial-gradient(#8e9aae 2.2px, transparent 2.6px); background-size: 22px 22px; border-bottom: 6px solid #aeb8c7; }
.ot-wall::after { content: ''; position: absolute; top: 0; left: 0; width: 22%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: ot-shine 7s ease-in-out infinite; }
.ot-wall-label { position: absolute; left: 24px; top: 14px; font-size: 11px; font-weight: 600; letter-spacing: 2px; color: #5b6b85; z-index: 1; }
.ot-hang { position: absolute; transform-origin: 50% 3px; animation: ot-swing var(--d, 3.6s) ease-in-out var(--delay, 0s) infinite; }
.ot-hang i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #9aa6b8; margin: 0 auto; }
.ot-spark { position: absolute; animation: ot-spark 2.8s ease-in-out infinite; }
.ot-floor { position: absolute; left: 0; right: 0; top: 211px; bottom: 0; background: linear-gradient(180deg, #e9edf2 0%, #cdd4de 100%); }
.ot-floor::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 158px, rgba(245,158,11,.5) 158px 161px); opacity: .25; }
.ot-row { position: relative; z-index: 1; margin: 222px 24px 0; padding-bottom: 20px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 16px; align-items: end; }
.ot-row .ot-chest svg { max-width: 128px; }
.ot-chest { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: #13203a; transition: transform .35s cubic-bezier(.2,.8,.2,1); min-width: 0; }
.ot-chest:hover { transform: translateY(-8px); }
.ot-chest:focus-visible { outline: 3px solid #d7141b; outline-offset: 4px; border-radius: 10px; }
.ot-chest svg { width: 100%; max-width: 138px; height: auto; overflow: visible; }
.ot-chest .ot-num { width: 28px; height: 28px; border-radius: 8px; background: #0b1220; border: 1px solid #34445f; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; animation: ot-float 4s ease-in-out var(--delay, 0s) infinite; }
.ot-chest .ot-tag { width: 100%; display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 9px; background: #fff; box-shadow: 0 4px 12px rgba(19,32,58,.12); border: 1px solid #dce2eb; text-align: left; }
.ot-chest .ot-tag.manquants { border-color: #f5b5b9; } .ot-chest .ot-tag.retard { border-color: #f7d79b; }
.ot-tag .d { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--c); }
.ot-tag b { font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot-tag span { font-size: 11px; color: #5b6b85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ot-tag > div { min-width: 0; }
.ot-chest .dr { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ot-chest .tray { transition: opacity .4s; opacity: 0; }
.ot-chest.open .tray { opacity: 1; }
.ot-chest.open .dr1 { transform: translateY(16px); } .ot-chest.open .dr2 { transform: translateY(26px); } .ot-chest.open .dr3 { transform: translateY(34px); }
.ot-chest .wiggle { animation: ot-drawer 3.6s ease-in-out infinite; }
.ot-chest .led { animation: ot-led 1.2s ease-in-out infinite; }
.ot-chest .led.ok { animation: none; }
.ot-pick { position: absolute; right: 20px; top: 18px; width: 330px; max-width: calc(100% - 40px); background: #fff; border: 1px solid #dce2eb; border-radius: 14px; box-shadow: 0 14px 36px rgba(19,32,58,.18); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; animation: ot-pop .35s ease-out both; z-index: 2; }
.ot-bar { height: 8px; background: #eef1f5; border-radius: 4px; overflow: hidden; }
.ot-bar > i { display: block; height: 100%; border-radius: 4px; transform-origin: left; animation: ot-grow 1s cubic-bezier(.2,.8,.2,1) both; }
.ot-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; }
.ot-loss { display: flex; align-items: center; gap: 12px; }
.ot-loss .n { width: 120px; flex-shrink: 0; font-size: 13px; }
.ot-loss .ot-bar { flex: 1; height: 12px; border-radius: 6px; }
.ot-loss .ot-bar > i { background: linear-gradient(90deg, #d7141b, #ff6b72); }
.ot-move { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid #eef1f5; animation: ot-rise .6s ease-out both; }
.ot-move .t { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-move small { font-size: 11.5px; color: #5b6b85; flex-shrink: 0; }
.ot-k { flex-shrink: 0; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 3px 8px; min-width: 66px; text-align: center; background: #e5e7eb; color: #1f2937; }
.ot-k.casse, .ot-k.perte { background: #fee2e2; color: #991b1b; } .ot-k.achat, .ot-k.existant { background: #dbeafe; color: #1e3a8a; }
.ot-k.usure, .ot-k.rebut { background: #fef3c7; color: #92400e; } .ot-k.retrouve { background: #dcfce7; color: #166534; }

/* fiche de caisse */
.ot-box { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 16px; align-items: start; }
.ot-photo { position: relative; border-radius: 10px; overflow: hidden; background: repeating-linear-gradient(135deg, #e3e8f0 0 12px, #edf1f6 12px 24px); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: #5b6b85; font-size: 13px; text-align: center; padding: 10px; }
.ot-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ot-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ot-thumbs button { border: 2px solid transparent; border-radius: 7px; padding: 0; overflow: hidden; background: #eef1f5; aspect-ratio: 4 / 3; cursor: pointer; position: relative; }
.ot-thumbs button.on { border-color: #d7141b; }
.ot-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-thumbs span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10.5px; background: rgba(11,18,32,.7); color: #fff; padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot-mini { width: 46px; height: 36px; border-radius: 5px; object-fit: cover; background: repeating-linear-gradient(135deg, #e3e8f0 0 6px, #edf1f6 6px 12px); display: block; }
.ot-missing { color: #d7141b; font-weight: 700; }
.ot-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ot-shot { border: 2px dashed #c5cedb; border-radius: 9px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #f8fafc; cursor: pointer; position: relative; overflow: hidden; color: #5b6b85; font-size: 12px; text-align: center; padding: 4px; }
.ot-shot.done { border: 2px solid #16a34a; }
.ot-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ot-shot em { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 11px; background: rgba(11,18,32,.72); color: #fff; padding: 2px 4px; }
.ot-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ot-seg button { height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid #c5cedb; background: #fff; color: #5b6b85; font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer; }
.ot-seg button.ok { border-color: #16a34a; background: #dcfce7; color: #166534; }
.ot-seg button.ko { border-color: #d7141b; background: #fee2e2; color: #991b1b; }
.ot-seg button.br { border-color: #f59e0b; background: #fef3c7; color: #92400e; }
.ot-invline { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #eef1f5; flex-wrap: wrap; }
.ot-invline .nm { flex: 1 1 220px; min-width: 0; }
.ot-step { display: inline-flex; align-items: center; border: 1px solid #c5cedb; border-radius: 8px; overflow: hidden; }
.ot-step button { width: 34px; height: 34px; border: 0; background: #f3f5f9; font-size: 18px; cursor: pointer; }
.ot-step input { width: 46px; height: 34px; border: 0; text-align: center; font-weight: 600; font-size: 14px; font-family: inherit; }
.ot-sign { border: 1px dashed #9aa6b8; border-radius: 8px; background: #fff; touch-action: none; width: 100%; height: 110px; display: block; }
.ot-side { display: flex; flex-direction: column; gap: 14px; }
.ot-fold { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }

@media (max-width: 1100px) { .ot-box { grid-template-columns: 1fr; } .ot-grid2 { grid-template-columns: 1fr; } }
@media (max-width: 1280px) { .ot-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .ot-scene { height: auto; padding-bottom: 12px; }
  .ot-wall { height: 150px; } .ot-floor { top: 156px; }
  .ot-row { margin: 160px 12px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ot-pick { position: relative; right: auto; top: auto; margin: 12px; width: auto; max-width: none; }
}
.ot-static *, .ot-static *::before, .ot-static *::after { animation: none !important; }

html[data-theme="dark"] .ot-head, html[data-theme="dark"] .ot-pick, html[data-theme="dark"] .ot-chest .ot-tag { background: #111a2b; border-color: #24324d; color: #e6ecf5; }
html[data-theme="dark"] .ot-chip { background: #131d30; border-color: #24324d; }
html[data-theme="dark"] .ot-scene { background: radial-gradient(circle at 50% -10%, #24324d 0%, #0e1626 60%, #090e18 100%); border-color: #24324d; }
html[data-theme="dark"] .ot-wall { background-color: #1a2436; background-image: radial-gradient(#04070d 2.2px, transparent 2.6px); border-bottom-color: #2b3850; }
html[data-theme="dark"] .ot-floor { background: linear-gradient(180deg, #1b2333 0%, #0b111c 100%); }
html[data-theme="dark"] .ot-chest { color: #e6ecf5; }