/*
  Studio 36 — Modales & panneaux lateraux (design.md §5.8, §4.5 niveau 3).
  Seul composant autorise a utiliser une ombre portee marquee (element
  flottant au-dessus du contenu). Ouverture/fermeture, focus trap et
  confirmation de fermeture geres par modal.js.
*/

.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--overlay-scrim-strong);
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}

/*
  display: flex uniquement quand l'attribut [hidden] est retire (modal.js le
  retire avant de basculer data-open, pour permettre la transition d'entree).
  Sans ce :not([hidden]), `display: flex` en base l'emporterait sur la regle
  UA [hidden] { display: none } (meme specificite, feuille auteur apres feuille
  UA) : le scrim resterait pose en plein ecran, invisible mais interceptant
  tous les clics de la page, meme "ferme".
*/
.modal-scrim:not([hidden]) {
  display: flex;
}

.modal-scrim[data-open="true"] {
  opacity: 1;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--space-8));
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3-shadow);
  padding: var(--space-7);
  transform: scale(0.96);
  opacity: 0;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}

.modal-scrim[data-open="true"] .modal {
  transform: scale(1);
  opacity: 1;
}

.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.modal__title {
  padding-right: var(--space-8);
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

@media (max-width: 480px) {
  .modal__actions {
    flex-direction: column-reverse;
  }

  .modal__actions .btn {
    width: 100%;
  }
}

/* ---------- Mobile : plein ecran / bottom-sheet (design.md §5.8) ---------- */

@media (max-width: 767px) {
  .modal-scrim {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-width: none;
    width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }

  .modal-scrim[data-open="true"] .modal {
    transform: translateY(0);
  }

  .modal--fullscreen {
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-scrim,
  .modal {
    transition: opacity 80ms linear;
    transform: none;
  }
}