/* Boîtes de dialogue (static/js/dialogs.js) : confirmer, saisir un texte, informer.

   Même langage que les écrans récents : une surface plate d'un ton plus clair que le fond, aucune bordure au
   repos, aucune ombre sauf la boîte qui flotte. L'action principale est en inversion (fond ivoire, texte marine,
   classe .btn-stop) ; l'autre bouton est un ton plus clair que la boîte. En « danger », c'est Annuler qui porte
   l'inversion et reçoit le focus ; le rouge ne colore que le libellé du bouton de confirmation.
   Les survols et appuis des boutons viennent de buttons.css.

   Tablette et ordinateur : boîte centrée. Téléphone (≤ 560 px) : feuille collée au bas de l'écran, boutons empilés,
   le bouton qui protège (ou la confirmation) en haut. Sous 860 px, tout ce qui se touche fait 44 px. */

.dlg-back {
  --dlg-bg: #16214A;
  --dlg-well: rgba(246,242,234,.06);
  --dlg-soft: rgba(246,242,234,.09);
  --dlg-soft-hover: rgba(246,242,234,.16);
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px;
  background: rgba(8,12,28,.72); overscroll-behavior: contain; touch-action: none;
  animation: dlgFade .16s ease;
}
/* Seul la racine est bloquée : bloquer aussi le corps le coupe à la hauteur de l'écran et fait perdre la position de défilement. */
html.dlg-lock { overflow: hidden; }

.dlg { width: 100%; max-width: 440px; max-height: min(88vh, 720px); max-height: min(88dvh, 720px); display: flex; flex-direction: column;
  background: var(--dlg-bg); color: var(--ivory); outline: none; box-shadow: 0 24px 64px rgba(4,8,22,.55);
  animation: dlgRise .22s cubic-bezier(.22,.8,.3,1); }
.dlg[data-kind="text"] { max-width: 500px; }

.dlg-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 4px;
  overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }
.dlg-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; color: var(--ivory); overflow-wrap: anywhere; }
.dlg-msg { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--sand); white-space: pre-line; overflow-wrap: anywhere; }
.dlg-details { flex: none; max-height: 30vh; max-height: 30dvh; overflow: auto; padding: 12px 14px; background: var(--dlg-well); overflow-wrap: anywhere; }
.dlg-details p { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--ivory); }
.dlg-details p + p { margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--sand); }

/* Champ de saisie : même habillage que la recherche de l'écran Applications. */
.dlg-field { display: flex; flex-direction: column; gap: 6px; }
.dlg-label { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ivory); }
.dlg-input { display: block; width: 100%; margin: 0; padding: 11px 12px; background: rgba(246,242,234,.06); border: 1px solid transparent;
  color: var(--ivory); font: inherit; font-size: 15px; line-height: 1.5; outline: none; color-scheme: dark;
  transition: background .15s ease, border-color .15s ease; }
textarea.dlg-input { min-height: 104px; resize: vertical; }
.dlg-input::placeholder { color: var(--mute); opacity: 1; }
.dlg-input:hover { background: rgba(246,242,234,.08); }
.dlg-input:focus { background: rgba(246,242,234,.08); border-color: var(--turq); }
.dlg-input[aria-invalid="true"] { border-color: var(--danger); }

/* Sous le champ : l'aide et l'erreur occupent la même place, la boîte ne bouge pas quand l'erreur apparaît. */
.dlg-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; min-height: 18px; font-size: 12.5px; line-height: 18px; }
.dlg-hint, .dlg-err { grid-area: 1 / 1; margin: 0; overflow-wrap: anywhere; }
.dlg-hint { color: var(--mute); }
.dlg-err { color: var(--danger); font-weight: 600; }
.dlg.has-error .dlg-hint { visibility: hidden; }
.dlg-count { grid-area: 1 / 2; align-self: start; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dlg-hint:empty + .dlg-err:empty { display: none; }

.dlg-actions { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 20px 26px 24px; }
.dlg-actions .btn { min-height: 40px; padding: 0 20px; }
.btn.dlg-soft { background: var(--dlg-soft); color: var(--ivory); }
.btn.dlg-soft:hover:not(:disabled) { background: var(--dlg-soft-hover); }
.btn.dlg-danger { color: var(--danger); }
.dlg-back .btn-stop:hover:not(:disabled) { background: #FFFFFF; opacity: 1; }
.dlg-back .btn:focus-visible { outline-color: var(--turq); }
.dlg-back .btn-stop:focus-visible { outline-color: var(--ivory); }
.dlg-actions .btn .ico { margin-right: -2px; }

.dlg-back.is-closing { pointer-events: none; animation: dlgOut .14s ease forwards; }
.dlg-back.is-closing .dlg { animation: none; }

@keyframes dlgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlgOut { to { opacity: 0; } }
@keyframes dlgRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dlgSheet { from { transform: translateY(100%); } to { transform: none; } }

@media (max-width: 860px) {
  .dlg-actions .btn { min-height: 44px; }
  .dlg-input { font-size: 16px; }   /* sous 16 px, Safari zoome sur le champ touché */
}

/* Téléphone : feuille pleine largeur au bas de l'écran. */
@media (max-width: 560px) {
  .dlg-back { padding: 0; place-items: end stretch; }
  .dlg, .dlg[data-kind="text"] { max-width: none; max-height: 92vh; max-height: 92dvh; animation: dlgSheet .26s cubic-bezier(.22,.8,.3,1); }
  .dlg-body { gap: 10px; padding: 22px 16px 4px; }
  .dlg-title { font-size: 22px; }
  /* Les boutons restent visibles en bas de la feuille ; le texte défile au-dessus d'eux. */
  .dlg-actions { flex-direction: column-reverse; gap: 8px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .dlg-actions .btn { width: 100%; }
  /* En « danger », le bouton qui protège passe en haut : c'est lui qu'on atteint en premier. */
  .dlg-back[data-tone="danger"] .dlg-actions { flex-direction: column; }
  textarea.dlg-input { min-height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .dlg-back, .dlg, .dlg-back.is-closing { animation: none !important; }
  .dlg-input { transition: none; }
}