/* ============================================================
   op-editor.css  -  Editeur de gravure interactif
   ============================================================ */
.op-mockup-wrap { position: relative; width: 100%; margin-bottom: 10px; overflow: hidden; border-radius: 8px; }
.op-mockup-canvas {
  display: block; width: 100%; height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  cursor: grab;
}
.op-mockup-canvas:active { cursor: grabbing; }

.op-editor-toolbar {
  margin-top: 10px;
  background: #fff;
  border: 1px solid #e8dfd2;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  opacity: .55;
}
.op-editor-toolbar.op-ed-active { opacity: 1; }
.op-editor-toolbar .op-ed-hint {
  flex: 1 0 100%;
  font-size: 12.5px;
  color: #8a8378;
}
.op-editor-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #5d564b;
  margin: 0;
}
.op-editor-toolbar input[type="range"] {
  width: 110px;
  accent-color: #c89b5a;
}
.op-editor-toolbar .op-ed-reset {
  margin-left: auto;
  background: none !important;
  border: 1px solid #d9cfc0 !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  font-size: 12.5px !important;
  color: #8a7142 !important;
  cursor: pointer;
  box-shadow: none !important;
}
@media (max-width: 600px) {
  .op-editor-toolbar input[type="range"] { width: 90px; }
}