/* DYS.MA - interface v2 : tiroir, dialogue, notification.
   Le dialogue et le tiroir sont des <dialog> natifs ouverts avec showModal() :
   piege de focus, Echap et inertie du fond fournis par le navigateur.
   Sous 768 px le tiroir devient un panneau depuis le bas. */

body.ui-v2 .ui-root dialog.ui-dialog, body.ui-v2 .ui-root dialog.ui-drawer {
  margin: auto; padding: 0; border: 1px solid var(--ds-border-strong); background: var(--ds-surface); color: var(--ds-text);
  box-shadow: var(--ds-sh-3); max-block-size: calc(100dvh - var(--ds-sp-6));
}
body.ui-v2 .ui-root dialog.ui-dialog::backdrop, body.ui-v2 .ui-root dialog.ui-drawer::backdrop { background: var(--ds-scrim); }
body.ui-v2 .ui-root dialog.ui-dialog { inline-size: min(480px, calc(100vw - var(--ds-sp-6))); border-radius: var(--ds-r-lg); }
body.ui-v2 .ui-root dialog.ui-drawer {
  margin: 0 0 0 auto; inline-size: min(440px, 100vw); block-size: 100dvh; max-block-size: 100dvh; border-radius: var(--ds-r-lg) 0 0 var(--ds-r-lg);
  border-block: 0; border-inline-end: 0; overflow: hidden;
}
body.ui-v2 .ui-root .ui-ov-head { display: flex; align-items: flex-start; gap: var(--ds-sp-3); padding: var(--ds-sp-4); border-bottom: 1px solid var(--ds-border); }
body.ui-v2 .ui-root .ui-ov-head h3 { flex: 1 1 auto; }
body.ui-v2 .ui-root .ui-ov-body { padding: var(--ds-sp-4); overflow-y: auto; overscroll-behavior: contain; align-content: start; }
body.ui-v2 .ui-root dialog.ui-drawer > form, body.ui-v2 .ui-root dialog.ui-drawer > .ui-drawer-in { display: flex; flex-direction: column; block-size: 100%; margin: 0; }
body.ui-v2 .ui-root dialog.ui-drawer .ui-ov-body { flex: 1 1 auto; }
body.ui-v2 .ui-root .ui-ov-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-sp-2); padding: var(--ds-sp-3) var(--ds-sp-4); border-top: 1px solid var(--ds-border); background: var(--ds-surface-muted); }

@media (max-width: 767.98px) {
  body.ui-v2 .ui-root dialog.ui-drawer {
    margin: auto 0 0 0; inline-size: 100vw; max-inline-size: 100vw; block-size: auto; max-block-size: 92dvh;
    border-radius: var(--ds-r-lg) var(--ds-r-lg) 0 0; border-inline: 0; border-block-end: 0;
  }
  body.ui-v2 .ui-root dialog.ui-drawer[open] { animation: ui-sheet var(--ds-dur) var(--ds-ease); }
}
@media (min-width: 768px) {
  body.ui-v2 .ui-root dialog.ui-drawer[open] { animation: ui-slide var(--ds-dur) var(--ds-ease); }
}
@keyframes ui-sheet { from { transform: translateY(24px); opacity: 0; } }
@keyframes ui-slide { from { transform: translateX(24px); opacity: 0; } }

/* Notification : region vivante, jamais le seul canal d'une erreur bloquante. */
body.ui-v2 .ui-root .ui-toasts {
  position: fixed; inset-block-end: var(--ds-sp-4); inset-inline: var(--ds-sp-4); z-index: var(--ds-z-dropdown); display: grid; gap: var(--ds-sp-2);
  justify-items: center; pointer-events: none;
}
body.ui-v2 .ui-root .ui-toast {
  display: flex; align-items: center; gap: var(--ds-sp-3); max-inline-size: 520px; padding: var(--ds-sp-3) var(--ds-sp-4);
  border: 1px solid var(--ds-text); border-radius: var(--ds-r-md); background: var(--ds-text); color: var(--ds-text-on-primary);
  box-shadow: var(--ds-sh-2); pointer-events: auto; font-weight: 500;
}
body.ui-v2 .ui-root .ui-toast.is-bad { border-color: var(--ds-danger); background: var(--ds-danger-text); }
body.ui-v2 .ui-root .ui-toast button {
  min-height: var(--ds-ctl-touch); min-inline-size: var(--ds-ctl-touch); margin: 0; padding: 0 var(--ds-sp-2); border: 0; background: transparent;
  color: inherit; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline;
}