.modal-page {
  min-height: 100vh;
  padding: var(--space-page-desktop);
}

.modal-page__hint {
  max-width: 480px;
  color: var(--color-text-secondary);
}

.ds-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);   /* au-dessus du contenu de page (sinon les dots z-index:1 transpercent) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-page-desktop);
  background: var(--modal-backdrop);
}

/* État fermé : le backdrop porte l'attribut [hidden]. */
.ds-modal-backdrop[hidden] {
  display: none;
}

.ds-modal {
  width: 100%;
  max-width: var(--modal-max-width);
  /* Flex column : header + footer FIXES, seul le corps scrolle si le contenu déborde.
     max-height borne le modal au viewport (modal long → ne remplit jamais toute la page). */
  max-height: var(--modal-max-height);
  display: flex;
  flex-direction: column;
  gap: var(--modal-header-gap);
  padding: var(--modal-padding-block) var(--modal-padding-inline);
  background: var(--modal-background);
  border: var(--modal-border);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
}

.ds-modal__header {
  flex-shrink: 0;   /* header fixe (ne scrolle pas) */
  display: grid;
  gap: var(--space-label-gap);   /* titre → sous-titre : même règle titre↔paragraphe que partout (pas 4px collés) */
  padding-bottom: var(--modal-header-gap);
  border-bottom: var(--border-subtle);
}

.ds-modal__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.ds-modal__subtitle {
  color: var(--color-text-secondary);
}

.ds-modal__close {
  /* En flux dans le header-row → alignée verticalement au titre (align-items:center).
     Tirée vers le coin par une marge négative = inset < padding de contenu, sans casser
     l'alignement vertical (le piège de l'absolute qui la remontait au-dessus du titre). */
  margin-right: calc(-1 * (var(--modal-padding-inline) - var(--modal-close-inset)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--motion-transition-default);
}

.ds-modal__close-icon {
  width: 50%;
  height: 50%;
}

.ds-modal__close-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke-width);
  stroke-linecap: round;
}

.ds-modal__close:hover {
  color: var(--color-text-primary);
}

.ds-modal__close:focus-visible {
  outline: none;
  border: var(--input-border-focus);
}

.ds-modal__body {
  display: grid;
  gap: var(--space-element-gap);
  min-height: 0;        /* autorise le corps à rétrécir dans le flex column */
  overflow-y: auto;     /* corps scrolle si le contenu déborde (ex. calendrier inline ouvert) */
}

.ds-modal__footer {
  flex-shrink: 0;   /* footer fixe (actions toujours visibles) */
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
}

/* Sections de corps (titre + description + action) : rythme GROUPÉ — gap:0 + marges
   par relation, jamais uniforme. Scopé aux modals qui adoptent .ds-modal__section
   (confirm.html / modal.html gardent leur corps simple). */
.ds-modal__body:has(.ds-modal__section) {
  gap: var(--space-24);   /* section → section : > les gaps internes (grouping) */
}

.ds-modal__section {
  display: grid;
  gap: 0;
}

/* Séparation entre 2 sections = filet + air (même langage que le filet du header).
   Le vide seul (24) ne coupait pas assez → les 2 sections se fondaient. */
.ds-modal__section + .ds-modal__section {
  padding-top: var(--space-24);
  border-top: var(--border-subtle);
}

.ds-modal__section > * {
  margin: 0;
}

.ds-modal__section-title {
  letter-spacing: var(--letter-spacing-label);   /* eyebrow tracké, comme tous les micro-labels */
  color: var(--color-text-primary);   /* titre = ancre (blanc) ; le corps reste secondary → contraste par couleur, pas juste uppercase */
}

.ds-modal__section-desc {
  margin-top: var(--space-label-gap);   /* titre → paragraphe : une unité de sens */
}

.ds-modal__section-action {
  margin-top: var(--space-element-gap);   /* paragraphe → action */
}

/* Un bouton d'action de section hug son contenu (pas pleine largeur). Un champ
   (ex : file-field, width:100%) garde sa largeur pour afficher le nom de fichier. */
.ds-modal__section .ds-button.ds-modal__section-action {
  justify-self: start;
}

.ds-modal__section-msg {
  margin-top: var(--space-8);   /* action → message de retour */
}


@media (max-width: 640px) {
  .modal-page,
  .ds-modal-backdrop {
    padding: var(--space-page-mobile);
  }
}