/* ══════════════════════════════════════════════════════════════════════════════
   BG Eraser — CSS spécifique à l'outil.
   Le chrome commun (tokens :root, header, tool-head, boutons, footer, toast…)
   vient de ../shared/innospira-ui.css, lié AVANT ce fichier. Ne pas le redéfinir.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  max-width: 1100px;
  width: 100%;
  margin: 20px auto 40px;
  padding: 0 24px;
  align-items: start;
}
.layout.is-empty { grid-template-columns: minmax(0, 720px); justify-content: center; }
.layout.is-empty .side { display: none; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

/* ── Zone de dépôt ── */
.dropzone {
  border: 2px dashed var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  padding: 56px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone:focus-visible, .is-dragover .dropzone {
  border-color: var(--brand);
  background: var(--brand-wash);
  outline: none;
}
.dropzone__icon { width: 44px; height: 44px; color: var(--brand-strong); margin-bottom: 10px; }
.dropzone p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.dropzone strong { color: var(--text); font-size: 17px; }
.dropzone .dropzone__formats {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted-2);
}

/* ── Scène d'aperçu ──
   Les deux <canvas> ont la même taille intrinsèque et occupent la même cellule
   de grille : ils se superposent au pixel près sans calcul en JS. */
.stage {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  height: clamp(240px, 50vh, 500px);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background:
    conic-gradient(var(--line) 90deg, var(--panel) 90deg 180deg,
                   var(--line) 180deg 270deg, var(--panel) 270deg)
    0 0 / 20px 20px;
}
/* Fonds de test : volontairement en dur, ils simulent le support sur lequel le
   logo sera posé et ne doivent PAS suivre le thème de l'interface. */
.stage[data-bg="light"]  { background: #fff; }
.stage[data-bg="dark"]   { background: #15151a; }
.stage[data-bg="custom"] { background: var(--stage-color, #3b5bdb); }
.is-dragover .stage { border-color: var(--brand); }

.stage canvas {
  grid-area: 1 / 1;
  max-width: 100%;
  max-height: 100%;
}
.stage__result { cursor: crosshair; }
.stage__orig { visibility: hidden; pointer-events: none; }
.stage.is-revealing .stage__orig,
.stage.is-comparing .stage__orig { visibility: visible; }
.stage.is-comparing .stage__result { visibility: hidden; }

/* Trait de balayage : traverse l'image de haut en bas, le fond disparaît derrière. */
.stage__scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--brand);
  box-shadow: 0 0 16px 3px var(--glow-brand);
  opacity: 0;
  pointer-events: none;
}
.stage__scan::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 56px;
  background: linear-gradient(to top, color-mix(in oklab, var(--brand) 30%, transparent), transparent);
}
.stage.is-revealing .stage__scan { opacity: 1; }

.stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 14px;
}
.stage-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--brand-wash);
  color: var(--text);
  font-size: 14px;
}

/* ── Pastilles de fond d'aperçu ── */
.swatches { display: flex; align-items: center; gap: 8px; }
.swatches__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.swatch {
  position: relative;
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
}
.swatch--checker {
  background:
    conic-gradient(var(--line-2) 90deg, var(--panel) 90deg 180deg,
                   var(--line-2) 180deg 270deg, var(--panel) 270deg)
    0 0 / 10px 10px;
}
.swatch--light  { background: #fff; }      /* mêmes fonds de test que la scène */
.swatch--dark   { background: #15151a; }
.swatch--custom { background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e); }
.swatch--custom.is-set { background: var(--stage-color); }
.swatch--custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.swatch[aria-pressed="true"], .swatch--custom.is-active {
  outline: 2px solid var(--spark);
  outline-offset: 2px;
}
.swatch:focus-visible, .swatch--custom:focus-within { outline: 2px solid var(--spark); outline-offset: 2px; }

.hold-btn { font-size: 14px; touch-action: none; user-select: none; -webkit-user-select: none; }

/* ── Réglages ── */
.control-group { margin-bottom: 20px; }
.control-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.control-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.control-row { display: flex; align-items: center; gap: 10px; }

.bg-row { display: flex; align-items: center; gap: 10px; }
.bg-chip {
  width: 38px; height: 38px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.bg-chip::-webkit-color-swatch-wrapper { padding: 0; }
.bg-chip::-webkit-color-swatch { border: none; }
.bg-chip::-moz-color-swatch { border: none; }
.bg-hex { font-family: var(--mono); font-size: 14px; color: var(--text); flex: 1; }
.mini-btn {
  font: 600 13px var(--font);
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.mini-btn:hover:not(:disabled) { background: var(--panel-2); }
.mini-btn:disabled { opacity: .45; cursor: default; }

input[type="range"] { flex: 1; min-width: 0; accent-color: var(--brand); }
.range-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-strong);
  min-width: 46px;
  text-align: right;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span {
  display: block;
  padding: 8px 6px;
  border-radius: 7px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.segmented input:checked + span { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
.segmented input:focus-visible + span { outline: 2px solid var(--spark); outline-offset: 1px; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle-label { font-size: 14px; cursor: pointer; }
.toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--line-2);
  border-radius: 24px;
  transition: background .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: var(--panel);
  border-radius: 50%;
  transition: transform .2s;
}
.toggle input:checked + .toggle-slider { background: var(--spark); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle input:focus-visible + .toggle-slider { outline: 2px solid var(--spark); outline-offset: 2px; }

.divider { border: none; border-top: 1px solid var(--line); margin: 20px 0 16px; }
.stat-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.stat-label { font-size: 14px; color: var(--muted); }
.stat-value { font-family: var(--mono); font-size: 14px; color: var(--text); }

.side .btn + .btn { margin-top: 8px; }

/* ── Responsive ── */
@media (max-width: 780px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 0 16px; gap: 16px; }
  .panel { padding: 16px; }
  .dropzone { padding: 40px 16px; }
  .stage { height: clamp(220px, 42vh, 360px); padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .dropzone, .toggle-slider, .toggle-slider::before { transition: none; }
}