/* Convertisseur : même architecture d’aperçu canvas que les optimiseurs mobiles stables. */
.comparison-layer canvas {
  position:absolute;
  left:calc(50% + var(--pan-x));
  top:calc(50% + var(--pan-y));
  display:block;
  width:auto;
  height:auto;
  max-width:calc(100% - 28px);
  max-height:calc(100% - 28px);
  object-fit:contain;
  image-rendering:auto;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(var(--zoom));
  transform-origin:center center;
  will-change:left, top, transform;
}
.comparison-layer canvas[hidden] { display:none; }


/* Boutons de conversion explicites : aucune conversion automatique au chargement. */
.convert-buttons {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.convert-format {
  min-height:46px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  font-weight:700;
  cursor:pointer;
  padding:10px 12px;
}
.convert-format:hover { border-color:#94a3b8; }
.convert-format.selected {
  border-color:currentColor;
  box-shadow:0 0 0 2px rgba(15,23,42,.08);
}
@media (max-width:640px) {
  .convert-buttons { grid-template-columns:1fr; }
}


/* Mise à jour manuelle de l’aperçu pour le réglage fin de qualité. */
.quality-slider-row {
  display:flex;
  align-items:center;
  gap:12px;
}
.quality-slider-row .jpeg-quality {
  flex:1 1 auto;
  min-width:0;
}
.update-preview {
  flex:0 0 auto;
  min-height:40px;
  padding:8px 14px;
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  font-weight:700;
  cursor:pointer;
}
.update-preview:hover { border-color:#94a3b8; }
@media (max-width:640px) {
  .quality-slider-row { align-items:stretch; flex-direction:column; }
  .update-preview { width:100%; }
}

/* Couleurs des trois formats + état clairement désactivé pour le format actuel. */
.convert-format[data-format="jpg"] {
  background:#fff1e6;
  border-color:#f59e0b;
  color:#9a3412;
}
.convert-format[data-format="png"] {
  background:#eaf4ff;
  border-color:#60a5fa;
  color:#1d4ed8;
}
.convert-format[data-format="webp"] {
  background:#eaf9ef;
  border-color:#4ade80;
  color:#166534;
}
.convert-format:not(:disabled):hover {
  filter:brightness(.97);
  transform:translateY(-1px);
}
.convert-format.current-format,
.convert-format:disabled {
  background:#e5e7eb !important;
  border-color:#cbd5e1 !important;
  color:#64748b !important;
  cursor:not-allowed;
  opacity:.72;
  box-shadow:none;
  transform:none;
}

/* Le placeholder doit réellement disparaître une fois l'aperçu converti affiché. */
.comparison-after .placeholder[hidden] { display: none !important; }