/**
 * Modale centrée générique (components/molecules/modal).
 *
 * Basée sur <dialog> natif : le centrage (position fixed + margin auto) et le
 * masquage par défaut (display:none) viennent de l'UA stylesheet — on ne les
 * réinitialise pas ici (contrairement au drawer plein écran de page.css qui,
 * lui, doit occuper tout le viewport).
 */

.pl-modal {
  /* Centrage explicite — le Preflight Tailwind v4 peut écraser margin:auto natif
     du <dialog>. Même pattern que #app-nav-drawer dans page.css, sans inset:0
     complet (la boîte garde sa taille intrinsèque + max-width Tailwind). */
  position: fixed;
  inset: 0;
  margin: auto;
  max-height: calc(100vh - 4rem);
  overflow: hidden;
}

/* Quand la modale est ouverte : colonne flex pour que le header reste fixe
   et que le scroll soit limité au seul slot body (.pl-modal__body). */
.pl-modal[open] {
  display: flex;
  flex-direction: column;
}

/* Backdrop semi-transparent (teinte marque), à la différence du drawer de
   navigation qui masque totalement son ::backdrop (plein écran opaque). */
.pl-modal::backdrop {
  background: rgba(1, 40, 48, 0.64);
}