/* ═══════════════════════════════════════════════════════════════════════════
   NECObot — fenêtre de confirmation du site (site/public/modale.css)
   Demande de l'administrateur du 05/10/2026 : « un popup du site lui-même en noir et blanc propre » à la place des
   fenêtres du navigateur (composant : js/modale.js). Chargé par index.html et par guide-moderateur.html, après
   /theme/components.css, dont la fenêtre .modal (fond, bordure, ombre, ::backdrop, animation d'ouverture) sert de base.
   · Noir et blanc seulement : aucune couleur d'état, pas même pour une action destructrice (liseré du haut, marque
     « ! » et bouton plein dans la couleur du texte ; le libellé du bouton dit l'action : « Supprimer »…).
   · Jetons de tokens.css (thèmes clair et sombre), aucune couleur écrite en dur ni :root local (tests/test-front.js).
   · 360 px de large sans défilement horizontal : textes coupés au besoin, boutons qui passent à la ligne.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page derrière la fenêtre : défilement bloqué. La barre de défilement qui disparaît est compensée
   (--modale-gouttiere, largeur posée par js/modale.js) : la page ne saute pas de côté. */
html.modale-ouverte,
html.modale-ouverte body {
  overflow: hidden;
}
html.modale-ouverte body {
  padding-right: var(--modale-gouttiere, 0px);
}

/* Fenêtre : un peu plus étroite que .modal, contour plus net */
.modale {
  width: min(30rem, calc(100vw - 2 * var(--space-4)));
  border-color: var(--color-border-strong);
}
/* Action destructrice : liseré du haut dans la couleur du texte (la marque reste en noir et blanc) */
.modale-danger {
  border-top: 3px solid var(--color-text);
}

.modale .modal-header {
  justify-content: flex-start;
  gap: var(--space-3);
}
.modale .modal-title {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* « ! » d'une action destructrice, cerclé comme l'icône des encadrés */
.modale-marque {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid currentColor;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.modale-message {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text);
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}
.modale-message + .modale-champ {
  margin-top: var(--space-4);
}
/* Saisie refusée : en noir et blanc aussi (la marque la met en rouge), signalée par « ✕ » et le texte ; le « ✕ » n'est
   pas lu par les lecteurs d'écran (texte de remplacement vide) */
.modale .field-error {
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.modale .field-error:not(:empty)::before {
  content: "✕" / "";
  flex: none;
}
.modale .input[aria-invalid="true"],
.modale .input[aria-invalid="true"]:focus {
  border-color: var(--color-text);
  outline-color: var(--color-text);
}

.modale .modal-footer .btn {
  min-width: 6.5rem;
}

/* Téléphone : marges réduites, boutons étirés sur leur ligne (« Annuler » puis l'action, dans l'ordre du clavier),
   libellé long sur deux lignes plutôt qu'un débordement */
@media (max-width: 30rem) {
  .modale .modal-header,
  .modale .modal-body,
  .modale .modal-footer {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }
  .modale .modal-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }
}