/* Mode édition (DA terracotta) : un liseré autour de l'écran et une pastille en haut */
.edit-mode-border {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--pz-a500);
  animation: pz-fade 240ms ease both;
}

.edit-mode-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 140px);
  padding: 5px 5px 5px 16px;
  background: var(--pz-surface);
  border: 1px solid var(--pz-line);
  border-radius: 999px;
  box-shadow: var(--pz-shadow-lg);
  transform: translateX(-50%);
  animation: edit-toast-in 260ms var(--pz-ease) both;
}
@keyframes edit-toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.edit-mode-toast-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--pz-a500);
  box-shadow: 0 0 0 4px var(--pz-a100);
}
.edit-mode-toast-text {
  font: 500 14px var(--pz-sans);
  color: var(--pz-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edit-mode-submit { flex: none; }
.edit-mode-toast-close { width: 36px; min-height: 36px; flex: none; }

@media (max-width: 768px) {
  .edit-mode-toast { top: 68px; max-width: calc(100vw - 24px); }
  .edit-mode-toast-text { font-size: 13px; }
}

/* Téléphone : le texte se coupait en « Vous modifi… » à côté du bouton, qui suffit à lui seul */
@media (max-width: 480px) {
  .edit-mode-toast--with-submit .edit-mode-toast-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .edit-mode-toast { animation: pz-fade 160ms ease both; }
}