/* ---------- Historique : remplacement explicite et rétention ---------- */
.instant-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.instant-dialog::backdrop { background: rgba(45, 27, 61, .62); backdrop-filter: blur(3px); }
.instant-dialog__card { padding: clamp(22px, 4vw, 36px); }
.instant-dialog__card .btn + .btn { margin: 10px 0 0 10px; }
.history-replace-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.history-replace-option { position: relative; padding: 4px; border: 2px solid rgba(65,40,47,.16); border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.history-replace-option:hover { border-color: var(--primary); box-shadow: 0 6px 14px rgba(65,40,47,.14); }
.history-replace-option img { width: 100%; aspect-ratio: 3 / 4; border-radius: 8px; object-fit: cover; }
.history-replace-option span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 2px 0; font-size: .68rem; }
.history-replace-option em { position: absolute; top: 8px; left: 8px; padding: 2px 5px; border-radius: 999px; background: var(--rose); color: #fff; font: 800 .58rem var(--font-body); font-style: normal; }
@media (max-width: 620px) {
  .history-replace-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .instant-dialog__card .btn { width: 100%; margin: 10px 0 0 !important; }
}

.orientation-pick--compact { margin: 14px 0; }
.orientation-pick--compact .orientation-card { padding: 11px 12px; }
.orientation-pick--compact .orientation-card span { font-size: .8rem; }

/* Étape 3 : le résultat est visible avant le choix de format. */
.step3-hero { display: grid; grid-template-columns: minmax(170px, 250px) minmax(0, 1fr); gap: 24px; align-items: center; margin: 0 0 26px; padding: 18px; border: var(--border); border-radius: var(--radius); background: rgba(255,255,255,.7); }
.step3-artwork { overflow: hidden; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.step3-artwork img { width: 100%; aspect-ratio: var(--ratio-affiche, 3 / 4); object-fit: cover; }
@media (max-width: 620px) { .step3-hero { grid-template-columns: 1fr; } .step3-artwork { width: min(100%, 270px); margin: 0 auto; } }