/* <camera-dialog> : prise de photo par webcam. */

camera-dialog { display: contents; }
dialog.camera { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); overflow: auto; }
dialog.camera::backdrop { background: rgb(15 23 42 / .6); }
.cam-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--border); }
.cam-head h2 { font-size: 16px; }
.cam-body { padding: 16px 18px 18px; display: grid; gap: 12px; }
.cam-view { position: relative; aspect-ratio: 16 / 10; background: #000; border-radius: 10px; overflow: hidden; }
.cam-view video, .cam-view canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.cam-frame { position: absolute; inset: 12% 10%; border: 2px solid rgb(255 255 255 / .9); border-radius: 14px; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .35); pointer-events: none; }
.cam-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #fff; background: rgb(0 0 0 / .7); font-size: 14px; }
.cam-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cam-actions .spacer { flex: 1; }
.cam-actions select { min-height: 44px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); max-width: 100%; }
@media (max-width: 520px) { .cam-actions .btn { flex: 1; } .cam-actions .spacer { display: none; } .cam-actions select { width: 100%; } }