/* Paramètres > Données : assistant « Supprimer des données » en trois étapes.
   Uniquement des variables (var(--…)) : aucune couleur, taille, rayon ni ombre en dur. */
.dn-carte { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) 0; }
.dn-assistant { --dn-large: 46rem; --dn-champ: 20rem; --dn-chasse: .1em; display: flex; flex-direction: column; gap: var(--s-4); max-width: var(--dn-large); }

.dn-etapes { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); flex-wrap: wrap; counter-reset: dn; }
.dn-etapes li { counter-increment: dn; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--muted); background: transparent; }
.dn-etapes li::before { content: counter(dn); font-family: var(--font-mono); }
.dn-etapes li.actif { color: var(--fg); border-color: var(--danger); background: var(--surface2); }
.dn-etapes li.fait { color: var(--fg); background: var(--surface2); }

.dn-liste { display: flex; flex-direction: column; gap: var(--s-2); }
.dn-ligne { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer; }
.dn-ligne:has(input:checked) { border-color: var(--danger); background: var(--surface2); }
.dn-ligne.impose { cursor: default; }
.dn-ligne.vide { opacity: .6; cursor: default; }
/* le champ générique donne marges internes et largeur aux cases : on retire ces marges */
:root:root .dn-ligne input[type="checkbox"] { flex: none; padding: 0; margin: var(--s-1) 0 0; border-radius: var(--r-sm); }
:root:root .dn-ligne input[type="checkbox"]::after { width: var(--s-2); height: var(--s-1); }
.dn-corps { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.dn-nom { font-weight: 600; color: var(--fg); }
.dn-nb { color: var(--muted); overflow-wrap: anywhere; }
.dn-par { color: var(--danger); }

.dn-recap { display: flex; flex-direction: column; gap: var(--s-4); }
.dn-bloc { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: var(--s-3) var(--s-4); }
.dn-bloc.efface { border-color: var(--danger); }
.dn-titre { margin: 0 0 var(--s-2); font-family: var(--font-display); color: var(--fg); }
.dn-bloc.efface .dn-titre { color: var(--danger); }
.dn-recap-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.dn-recap-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }

.dn-conf { display: flex; flex-direction: column; gap: var(--s-4); }
.dn-champ { display: flex; flex-direction: column; gap: var(--s-1); }
.dn-champ input { font-family: var(--font-mono); letter-spacing: var(--dn-chasse); max-width: var(--dn-champ); }
.dn-erreur { color: var(--danger); padding: var(--s-2) var(--s-3); border: 1px solid var(--danger); border-radius: var(--r-md); }
.dn-erreur[hidden] { display: none; }

.dn-fin { display: flex; flex-direction: column; gap: var(--s-3); }
.dn-sauvegarde { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface2); }
.dn-sauvegarde code { font-family: var(--font-mono); color: var(--fg); overflow-wrap: anywhere; user-select: all; }

.dn-pied { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
.dn-pied .btn[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 640px) {
  .dn-pied { justify-content: stretch; }
  .dn-pied .btn { flex: 1 1 auto; }
  .dn-etapes li { padding: var(--s-1) var(--s-2); }
}