/* ==========================================================================
   MSD SARL — Boîte de dialogue « Contacter le concepteur » (signature du pied de page).
   Élément <dialog> natif ; la mise en page est portée par le panneau intérieur.
   ========================================================================== */

html:has(.msd-dc[open]) { overflow: hidden; }

.msd-dc {
  width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; overflow: auto;
  border: 0; border-top: 3px solid var(--msd-muted-gold); border-radius: 2px;
  background: var(--msd-warm-ivory); color: var(--msd-ink-soft);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  font-family: var(--msd-font-sans); font-size: 16px; line-height: 1.55;
}
.msd-dc::backdrop { background: rgba(11, 15, 13, .74); }
.msd-dc *, .msd-dc *::before, .msd-dc *::after { box-sizing: border-box; }

.msd-dc .msd-dc__panel { margin: 0; padding: clamp(24px, 4vw, 40px); }
.msd-dc .msd-dc__title {
  margin: 0; padding: 0;
  font-family: var(--msd-font-serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 36px); line-height: 1.08;
  color: var(--msd-forest-black);
}
.msd-dc .msd-dc__intro { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; }

.msd-dc .msd-dc__field { margin-top: 18px; }
.msd-dc .msd-dc__field label {
  display: block; margin: 0 0 6px;
  font-family: var(--msd-font-mono); font-weight: 500; font-size: 12px; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase;
  color: var(--msd-deep-forest);
}
.msd-dc .msd-dc__optional { letter-spacing: .04em; text-transform: none; color: #6f6b62; }
.msd-dc .msd-dc__field :is(input, textarea) {
  display: block; width: 100%; margin: 0; padding: 11px 14px;
  border: 1px solid #8f8a7d; border-radius: 2px;
  background: #fbfaf6; color: var(--msd-forest-black);
  font: inherit; font-size: 16px; line-height: 1.5;
  transition: border-color .2s;
}
.msd-dc .msd-dc__field input { min-height: 48px; }
.msd-dc .msd-dc__field textarea { min-height: 128px; resize: vertical; }
.msd-dc .msd-dc__field :is(input, textarea):focus { border-color: var(--msd-deep-forest); }
.msd-dc .msd-dc__field :is(input, textarea)[aria-invalid="true"] { border-color: #a23a22; }
.msd-dc .msd-dc__error { margin: 6px 0 0; font-size: 13.5px; line-height: 1.4; color: #a23a22; }

.msd-dc .msd-dc__hint { margin: 18px 0 0; font-size: 13.5px; line-height: 1.5; color: #5d594f; }

.msd-dc .msd-dc__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.msd-dc .msd-dc__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin: 0; padding: 0 24px;
  border: 1.5px solid var(--msd-muted-gold); border-radius: 2px;
  font-family: var(--msd-font-sans); font-weight: 500; font-size: 15px; line-height: 1; white-space: nowrap;
  cursor: pointer; transition: background-color .2s, color .2s;
}
.msd-dc .msd-dc__btn.msd-dc__btn--gold,
.msd-dc .msd-dc__btn.msd-dc__btn--gold:focus { background: var(--msd-muted-gold); color: var(--msd-forest-black); }
.msd-dc .msd-dc__btn.msd-dc__btn--gold:hover { background: #bfa062; border-color: #bfa062; color: var(--msd-forest-black); }
.msd-dc .msd-dc__btn.msd-dc__btn--ghost,
.msd-dc .msd-dc__btn.msd-dc__btn--ghost:focus { background: transparent; border-color: #8f8a7d; color: var(--msd-deep-forest); }
.msd-dc .msd-dc__btn.msd-dc__btn--ghost:hover { background: rgba(22, 53, 42, .08); border-color: var(--msd-deep-forest); color: var(--msd-deep-forest); }

@media (max-width: 520px) {
  .msd-dc .msd-dc__actions { flex-direction: column-reverse; }
  .msd-dc .msd-dc__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .msd-dc .msd-dc__btn, .msd-dc .msd-dc__field :is(input, textarea) { transition: none; }
}