/* ==========================================================================
   Lockace — Encart « Mes données locales » (politique de confidentialité)
   Feuille propre à une page, chargée uniquement par /politique-confidentialite/
   (même principe que quiz.css).
   ========================================================================== */

.local-data {
  margin-block: var(--space-6);
  padding: clamp(var(--space-5), 4vw, var(--space-6));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.local-data h2 {
  margin-top: 0;
}

/* Résumé du contenu stocké
   -------------------------------------------------------------------------- */
.local-data-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.local-data-summary p {
  margin: 0;
}

/* Actions
   -------------------------------------------------------------------------- */
.local-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Confirmation d'effacement : encadré rouge, apparaît à la place du bouton.
   Le libellé porte le poids de l'avertissement, la couleur ne fait que le
   renforcer (l'information ne doit jamais tenir à la seule couleur). */
.local-data-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
}

.local-data-confirm p {
  flex: 1 1 18rem;
  margin: 0;
  font-size: var(--text-sm);
}

/* Bouton d'action destructrice : contour rouge, plein rouge au survol. */
.btn-danger {
  background: transparent;
  border-color: var(--color-error);
  color: var(--color-error);
}

.btn-danger:hover,
.btn-danger:focus-visible {
  background: var(--color-error);
  color: var(--color-primary-contrast);
}

/* Message d'état (`aria-live`)
   -------------------------------------------------------------------------- */
.local-data-status {
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.local-data-status[data-tone="success"] {
  color: var(--color-success);
}

@media (prefers-reduced-motion: no-preference) {
  .local-data-status {
    animation: local-data-fade var(--transition-fast);
  }
}

@keyframes local-data-fade {
  from {
    opacity: 0;
  }
}