/* =============================================================
   Socle · Dialogue (.sc-dialog)
   Bâti sur l'élément natif <dialog> : ouverture modale, Échap,
   piégeage et retour du focus sont fournis par le navigateur.
   Tailles : --s (26rem), --l (44rem), défaut 34rem.
   Variante : --alert (confirmation destructive, role="alertdialog").
   JS : js/components/dialog.js (initDialogs, openDialog, closeDialog).
   ============================================================= */

.sc-dialog {
  /* Tokens de composant : les variantes ne font que réassigner ceci. */
  --_dialog-width: 34rem;
  --_dialog-header-justify: space-between;
  --_dialog-header-align: flex-start;

  width: min(calc(100vw - var(--padding-2xl) * 2), var(--_dialog-width));
  /* base.css remet toutes les marges à zéro : on rétablit le
     centrage que le navigateur confie à margin: auto. */
  margin: auto;
  padding: 0;
  /* Le filet que portent déjà le toast, le menu et le popover. Dans un
     système qui a remplacé les ombres par des filets, le flottant le
     plus grand ne peut pas être le seul à n'avoir aucune arête : en
     thème sombre, la fenêtre et son voile n'ont pour frontière que
     l'ombre. */
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-overlay);
  background: var(--color-bg-surface);
  color: var(--color-text);
  box-shadow: var(--elevation-overlay);
}

/* Ouvert : colonne en-tête / corps / pied, hauteur bornée pour que
   seul le corps défile. Apparition en fondu et léger zoom. */
.sc-dialog[open] {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--padding-4xl) * 2);
  animation: sc-dialog-in var(--motion-enter);
}

/* Voile derrière la fenêtre. */
.sc-dialog::backdrop {
  background: var(--color-bg-overlay);
  backdrop-filter: var(--overlay-filter);
}

.sc-dialog[open]::backdrop {
  animation: sc-dialog-backdrop-in var(--motion-enter);
}

/* ---- Structure ---- */

.sc-dialog__header {
  flex-shrink: 0;
  display: flex;
  align-items: var(--_dialog-header-align);
  justify-content: var(--_dialog-header-justify);
  gap: var(--gap-m);
  padding: var(--padding-xl);
  padding-block-end: var(--padding-s);
}

.sc-dialog__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

/* La croix de fermeture est un bouton icône fantôme
   (.sc-btn .sc-btn--ghost .sc-btn--icon .sc-btn--s) : ses états
   vivent dans button.css. Cette classe ne règle que son recalage
   optique dans l'angle, en micro-décalages --space-*. */
.sc-dialog__close {
  margin-block-start: calc(var(--space-2) * -1);
  margin-inline-end: calc(var(--space-8) * -1);
}

.sc-dialog__body {
  overflow-y: auto;
  padding-inline: var(--padding-xl);
  color: var(--color-text-secondary);
  font-size: var(--text-body-size);
  line-height: var(--leading-relaxed);
}

/* Respiration entre les blocs du corps. */
.sc-dialog__body > * + * {
  margin-block-start: var(--gap-m);
}

/* Sans pied, le corps reprend à sa charge la marge du bas. */
.sc-dialog__body:last-child {
  padding-block-end: var(--padding-xl);
}

.sc-dialog__footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--gap-s);
  padding: var(--padding-xl);
}

/* ---- Tailles ---- */

.sc-dialog--s {
  --_dialog-width: 26rem;
}

.sc-dialog--l {
  --_dialog-width: 44rem;
}

/* ---- Variante alerte ----
   Prévue pour role="alertdialog" et data-static : pas de croix,
   pas de fermeture au clic sur le fond. L'en-tête aligne une
   pastille d'icône optionnelle avec le titre. */

.sc-dialog--alert {
  --_dialog-width: 26rem;
  --_dialog-header-justify: flex-start;
  --_dialog-header-align: center;
}

.sc-dialog__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-32);
  height: var(--space-32);
  border-radius: var(--radius-pill);
  background: var(--color-danger-subtle);
  color: var(--color-danger-text);
}

/* ---- Animations ---- */

@keyframes sc-dialog-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-8)) scale(96%);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sc-dialog-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- Sous 640px, le dialogue devient une feuille ----
   Même bascule que le tiroir, et pour la même raison : sur un
   téléphone, un panneau centré laisse une bande inutile en haut et en
   bas, et son action principale se retrouve loin du pouce. Il descend
   donc au bas de l'écran, prend toute la largeur et ne garde son rayon
   qu'en haut. Le voile, lui, ne change pas.
   Le seuil est écrit en clair : @media n'accepte pas var(). */

@media (max-width: 640px) {
  .sc-dialog {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    margin-block-start: auto;
    margin-block-end: 0;
    border-start-start-radius: var(--radius-overlay);
    border-start-end-radius: var(--radius-overlay);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    padding-block-end: env(safe-area-inset-bottom);
  }

  .sc-dialog[open] {
    animation-name: sc-sheet-rise;
  }
}

@keyframes sc-sheet-rise {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}