/* contact.css — « Écrire au studio » : le bouton-porte de la veillée et la feuille de contact (<dialog> natif).
   La feuille est une porte : tête en arche, couleurs de la bande de veillée (encre et papier), assises de terre cuite pour séparateurs,
   le soleil comme indicateur d'envoi. Elle se lève comme une porte qui s'ouvre (sans mouvement si le visiteur le demande). */

/* ── Boutons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-block-size: var(--hit);
  padding-block: var(--s-2);
  padding-inline: var(--s-5);
  border: 2px solid transparent;
  border-start-start-radius: 1.5rem;
  border-start-end-radius: 1.5rem;
  border-end-start-radius: 0.25rem;
  border-end-end-radius: 0.25rem;
  background-color: transparent;
  color: inherit;
  font-family: var(--f-label);
  font-size: var(--t-sm);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--d-hover) ease-out, color var(--d-hover) ease-out, border-color var(--d-hover) ease-out;
}

.btn:disabled {
  cursor: progress;
}

/* porte allumée : la bande de veillée (le seul endroit où elle est posée) */
.btn--door,
.btn--sun {
  background-color: var(--c-veillee-door);
  border-color: var(--c-veillee-door);
  color: #1C1E21;
}

.btn--door:hover,
.btn--sun:hover {
  background-color: #EDC283;
  border-color: #EDC283;
}

.btn--quiet {
  border-color: var(--c-veillee-ink-2);
  color: var(--c-veillee-ink);
}

.btn--quiet:hover {
  border-color: var(--c-veillee-door);
  color: var(--c-veillee-door);
}

.btn__door {
  flex: none;
  inline-size: 0.6rem;
  block-size: 1.25rem;
  background-color: #1C1E21;
  border-start-start-radius: var(--r-door);
  border-start-end-radius: var(--r-door);
}

.btn__sun {
  flex: none;
  inline-size: 0.95rem;
  block-size: 0.95rem;
  border-radius: 50%;
  background-color: #1C1E21;
}

/* le soleil monte pendant l'envoi */
.btn[data-state="sending"] .btn__sun {
  animation: soleil-monte 700ms var(--ease-lever) both;
}

@keyframes soleil-monte {
  from {
    translate: 0 0.5rem;
    opacity: 0.2;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

/* ── La veillée : le bouton et la ligne de courriel, discrète ── */
.veillee__action {
  margin-block-start: var(--s-3);
}

.veillee__mail {
  font-family: var(--f-text);
  font-size: var(--t-sm);
  color: var(--c-veillee-ink-2);
  overflow-wrap: anywhere;
}

.veillee__mail a {
  font-weight: var(--w-text-strong);
}

/* ── La feuille ──────────────────────────────────────────── */
html:has(dialog[open]) {
  overflow: hidden;
}

.sheet {
  --c-focus: var(--c-veillee-door);
  --c-link-underline: var(--c-veillee-door);
  inline-size: min(34rem, 100vw - 1.5rem);
  max-inline-size: none;
  max-block-size: none;
  margin: auto;
  padding: 0;
  border: 0;
  overflow: visible;
  background-color: transparent;
  color: var(--c-veillee-ink);
  color-scheme: dark;
}

.sheet::backdrop {
  background-color: rgba(18, 20, 22, 0.78);
}

.sheet ::selection {
  background-color: #5A4A2E;
  color: var(--c-veillee-ink);
}

/* tête en arche : une porte dont la feuille est le vantail */
.sheet__panel {
  position: relative;
  max-block-size: calc(100dvh - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 0 var(--s-6);
  background-color: var(--c-veillee-bg);
  border-start-start-radius: 50% 8rem;
  border-start-end-radius: 50% 8rem;
  border-end-start-radius: 0.5rem;
  border-end-end-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px var(--c-veillee-line);
}

.sheet__head {
  display: grid;
  justify-items: center;
  row-gap: var(--s-2);
  padding-block: var(--s-6) var(--s-5);
  padding-inline: var(--s-6);
  text-align: center;
}

.sheet__sun {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  fill: var(--c-veillee-door);
}

.sheet__title {
  font-family: var(--f-title);
  font-size: var(--t-2xl);
  font-weight: var(--w-display-light);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--c-veillee-ink);
}

.sheet__lede {
  max-inline-size: 34ch;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--c-veillee-ink-2);
  text-wrap: balance;
}

.sheet__phrase {
  display: block;
}

/* assises de terre cuite : séparateurs */
.sheet .m-course {
  block-size: 0.875rem;
  border-block-width: 0.3125rem;
  border-color: var(--c-veillee-course);
}

.sheet > .sheet__panel > .sheet__course {
  margin-inline: var(--s-4);
}

.sheet__form,
.sheet__done {
  display: grid;
  row-gap: var(--s-4);
  padding-block-start: var(--s-5);
  padding-inline: var(--s-6);
}

.sheet__form .sheet__course {
  margin-block: var(--s-2);
  margin-inline: calc(-1 * var(--s-4));
}

.sheet__form[hidden],
.sheet__done[hidden] {
  display: none;
}

.sheet__close {
  position: absolute;
  inset-block-start: 4.5rem;
  inset-inline-end: 2.75rem;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: var(--hit);
  block-size: var(--hit);
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--c-veillee-ink);
  cursor: pointer;
}

/* une croix tracée en deux barres, comme les assises */
.sheet__close span {
  position: relative;
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.sheet__close span::before,
.sheet__close span::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(50% - 1px);
  block-size: 2px;
  background-color: currentColor;
  rotate: 45deg;
}

.sheet__close span::after {
  rotate: -45deg;
}

.sheet__close:hover {
  color: var(--c-veillee-door);
}

/* ── Champs ── */
.field-row {
  display: grid;
  row-gap: var(--s-1);
}

.field-row label {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-veillee-ink-2);
}

.field-row input,
.field-row select,
.field-row textarea {
  inline-size: 100%;
  min-block-size: var(--hit);
  padding-block: var(--s-2);
  padding-inline: var(--s-3);
  border: 1.5px solid var(--c-veillee-ink-2);
  border-radius: 0.25rem;
  background-color: #25282C;
  color: var(--c-veillee-ink);
  font-family: var(--f-text);
  font-size: max(1rem, var(--t-base));
  line-height: 1.4;
}

.field-row textarea {
  resize: vertical;
  min-block-size: 8rem;
}

.field-row input:hover,
.field-row select:hover,
.field-row textarea:hover {
  border-color: var(--c-veillee-door);
}

.field-row [aria-invalid="true"] {
  border-color: #F2A98C;
}

.field-row__err,
.sheet__fail {
  padding-inline-start: var(--s-3);
  border-inline-start: 3px solid #F2A98C;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: #F2A98C;
}

.field-row__err[hidden] {
  display: none;
}

/* pot de miel : hors écran, hors tabulation, jamais lu */
.hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.sheet__actions {
  display: flex;
  justify-content: flex-start;
}

.sheet__note {
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-veillee-ink-2);
}

/* ── Réussite : le soleil se lève ── */
.sheet__done {
  justify-items: center;
  padding-block-end: var(--s-3);
  text-align: center;
}

.sheet__done-title {
  font-family: var(--f-title);
  font-size: var(--t-xl);
  font-weight: var(--w-display);
  line-height: 1.25;
  color: var(--c-veillee-ink);
}

.sheet__done-title::before {
  content: "";
  display: block;
  inline-size: 2.5rem;
  aspect-ratio: 1;
  margin-inline: auto;
  margin-block-end: var(--s-3);
  border-radius: 50%;
  background-color: var(--c-veillee-door);
}

.sheet__done-title:focus-visible {
  outline-offset: var(--s-2);
}

.sheet__done-text {
  max-inline-size: 34ch;
  color: var(--c-veillee-ink-2);
}

.sheet__done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}

.sheet__done.is-sent .sheet__done-text,
.sheet__done.is-sent .sheet__done-actions {
  display: none;
}

/* ── Ouverture : la feuille se lève comme une porte qui s'ouvre ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes feuille-monte {
    from {
      opacity: 0;
      translate: 0 3rem;
      scale: 0.97;
    }

    to {
      opacity: 1;
      translate: 0 0;
      scale: 1;
    }
  }

  @keyframes fond-monte {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes soleil-leve {
    from {
      translate: 0 1.25rem;
      opacity: 0;
    }

    to {
      translate: 0 0;
      opacity: 1;
    }
  }

  .sheet[open] .sheet__panel {
    animation: feuille-monte 520ms var(--ease-ouverture) both;
  }

  .sheet[open]::backdrop {
    animation: fond-monte 320ms var(--ease-veille) both;
  }

  .sheet[open] .sheet__sun {
    animation: soleil-leve 700ms var(--ease-lever) 180ms both;
  }

  .sheet__done:not([hidden]) .sheet__done-title::before {
    animation: soleil-leve 800ms var(--ease-lever) both;
  }
}