/* Brouillon retrouvé au rechargement (DA terracotta) : bandeau sombre en haut au centre */
.draft-restore-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 1002;
  max-width: calc(100vw - 140px);
  transform: translateX(-50%);
  animation: draft-in 280ms var(--pz-ease) both;
}
@keyframes draft-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.draft-restore-content {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 6px 6px 18px;
  background: var(--pz-ink);
  color: var(--pz-bg);
  border-radius: 999px;
  box-shadow: var(--pz-shadow-lg);
}

.draft-restore-text { display: grid; gap: 1px; font: 500 14px/1.3 var(--pz-sans); }
.draft-restore-time { font: 400 12px var(--pz-sans); color: rgba(251, 250, 247, .65); }

.draft-restore-actions { display: flex; gap: 4px; flex: none; }
.draft-restore-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: 500 13.5px var(--pz-sans);
  transition: background-color 160ms ease, transform 140ms var(--pz-ease);
}
.draft-restore-btn:active { transform: scale(.97); }
.draft-restore-btn--restore { background: var(--pz-a100); color: var(--pz-a800); }
.draft-restore-btn--discard { background: transparent; color: rgba(251, 250, 247, .8); }
@media (hover: hover) and (pointer: fine) {
  .draft-restore-btn--restore:hover { background: var(--pz-a200); }
  .draft-restore-btn--discard:hover { background: rgba(251, 250, 247, .1); color: var(--pz-bg); }
}

@media (max-width: 768px) {
  .draft-restore-banner { top: 68px; max-width: calc(100vw - 24px); width: calc(100vw - 24px); }
  .draft-restore-content { border-radius: 20px; flex-wrap: wrap; padding: 12px 12px 10px 16px; }
}