/* ============================================================
   Ocleiria Toolbox  styles communs des outils Image
   Réutilise style.css + audio.css (.drop, .tool-head, .crumb,
   .field, .select, .btn*, .bar, .mono, .reveal).
   ============================================================ */

.img { display:flex; flex-direction:column; gap:20px; }
/* Zone de travail (aperçu + options + actions + résultat) : espacement vertical */
.img > section, .img__work { display:flex; flex-direction:column; gap:18px; }

/* ---------- Scène / aperçu (damier pour la transparence) ---------- */
.stage {
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:280px; padding:16px; border:1px solid var(--border-color);
  border-radius:var(--radius-card); overflow:hidden;
  background-color:var(--secondary-bg);
  background-image:
    linear-gradient(45deg, rgba(120,120,120,.12) 25%, transparent 25%, transparent 75%, rgba(120,120,120,.12) 75%),
    linear-gradient(45deg, rgba(120,120,120,.12) 25%, transparent 25%, transparent 75%, rgba(120,120,120,.12) 75%);
  background-size:20px 20px; background-position:0 0, 10px 10px;
}
.stage img, .stage canvas {
  display:block; max-width:100%; max-height:62vh; height:auto;
  box-shadow:0 2px 14px rgba(27,26,23,.20); border-radius:2px; background:#fff;
}
.stage .loading { position:absolute; inset:0; background:color-mix(in srgb, var(--secondary-bg) 80%, transparent); }

/* ---------- Options ---------- */
.opts { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; }
.opts .field { margin:0; min-width:160px; }
.opts .field--grow { flex:1 1 220px; }
.check { display:inline-flex; align-items:center; gap:9px; font-size:.9rem; cursor:pointer; }
.check input { accent-color:var(--accent); width:16px; height:16px; }
.range-row { display:flex; align-items:center; gap:12px; }
.range-row input[type="range"] { flex:1; accent-color:var(--accent); }
.range-row .mono { min-width:52px; text-align:right; }

/* ---------- Comparatif avant/après ---------- */
.compare { display:flex; flex-wrap:wrap; gap:14px; }
.compare__item {
  flex:1 1 140px; background:var(--card-bg); border:1px solid var(--border-color);
  border-radius:var(--radius-card); padding:12px 14px;
}
.compare__k { font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-secondary); }
.compare__v { font-family:var(--font-title); font-size:1.2rem; font-weight:700; margin-top:2px; }
.compare__item--gain .compare__v { color:var(--ok); }

/* ---------- Sélection rectangulaire (recadrer / flouter) ---------- */
.sel-box {
  position:absolute; box-sizing:border-box; border:1.5px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent); cursor:move; touch-action:none;
}
.sel-box .sel-handle {
  position:absolute; width:14px; height:14px; background:var(--accent);
  border:2px solid var(--card-bg); border-radius:50%; touch-action:none;
}
.sel-box .sel-handle.br { right:-8px; bottom:-8px; cursor:nwse-resize; }
.sel-box .sel-remove {
  position:absolute; top:-10px; right:-10px; width:22px; height:22px; border-radius:50%;
  border:none; background:var(--down); color:#fff; cursor:pointer; font-size:.8rem; line-height:1;
}

/* ---------- Chargement / résultat / erreur ---------- */
.loading { display:flex; align-items:center; gap:10px; justify-content:center;
  color:var(--text-secondary); font-size:.9rem; padding:20px 0; }
.spinner { width:20px; height:20px; border-radius:50%;
  border:2px solid var(--border-color); border-top-color:var(--accent); animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.result {
  border:1px solid var(--ok); border-radius:var(--radius-card);
  background:color-mix(in srgb, var(--ok) 7%, var(--card-bg)); padding:18px;
  display:flex; flex-direction:column; gap:12px;
}
.result__head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.result__head b { font-size:1rem; }
.result__head span { font-size:.82rem; color:var(--text-secondary); font-family:var(--font-mono); }

.img-err {
  color:var(--down); font-size:.9rem; padding:12px 14px;
  border:1px solid var(--down); border-radius:var(--radius);
  background:color-mix(in srgb, var(--down) 8%, transparent);
}

.actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.actions .bar { flex:1 1 auto; grid-column:auto; margin-top:0; }