/* Contact — déclinaison éditoriale des polaroids de la page Créations. */
.contact-page {
  --contact-card-paper: #fffdf7;
  --contact-card-shadow: #d8d7ce;
}

.contact-page .contact-section {
  padding: clamp(58px, 7vw, 104px) 0 clamp(76px, 9vw, 132px) !important;
}

.contact-page .contact-layout {
  display: grid !important;
  width: min(1320px, calc(100% - 72px)) !important;
  grid-template-columns: minmax(300px, .82fr) minmax(500px, 1.18fr) !important;
  gap: clamp(34px, 4.5vw, 72px) !important;
  align-items: stretch !important;
}

.contact-page :is(.contact-intro, .contact-form) {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: clamp(34px, 4vw, 58px) !important;
  border: clamp(11px, 1.15vw, 17px) solid var(--contact-card-paper) !important;
  border-radius: 0 !important;
  color: #171713 !important;
  outline: 1px solid rgba(36, 32, 25, .08) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel-tint) 92%, white), var(--panel-tint)),
    url("../images/paper-texture-generated.jpg") !important;
  background-blend-mode: multiply !important;
  background-size: auto, 760px auto !important;
  box-shadow:
    15px 15px 0 color-mix(in srgb, var(--panel-accent) 16%, var(--contact-card-shadow)),
    0 28px 72px rgba(3, 12, 8, .22),
    0 2px 0 rgba(255, 255, 255, .92) inset !important;
}

.contact-page :is(.contact-intro, .contact-form)::before {
  content: "" !important;
  position: absolute !important;
  inset: clamp(24px, 2.4vw, 34px) auto clamp(24px, 2.4vw, 34px) 0 !important;
  z-index: 1 !important;
  width: clamp(3px, .35vw, 5px) !important;
  height: auto !important;
  background: var(--panel-accent) !important;
  pointer-events: none !important;
}

.contact-page .contact-intro::after,
.contact-page .contact-form::after {
  content: none !important;
  display: none !important;
}

.contact-page .contact-intro {
  --panel-accent: #314f3d;
  --panel-tint: #cbd2c7;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.contact-page .contact-form {
  --panel-accent: #6f302f;
  --panel-tint: #ddccc6;
}

.contact-page .contact-intro h2 {
  max-width: calc(100% - 48px) !important;
  margin: 0 0 clamp(24px, 2.5vw, 34px) !important;
  color: var(--panel-accent) !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: .96 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

.contact-page .contact-intro h2::after {
  width: 72px !important;
  height: 3px !important;
  margin-top: 16px !important;
  background: var(--panel-accent) !important;
}

.contact-page .contact-mail {
  display: block !important;
  margin: 0 0 28px !important;
  padding: 14px 16px !important;
  border: 1px solid color-mix(in srgb, var(--panel-accent), transparent 64%) !important;
  border-radius: 0 !important;
  color: var(--panel-accent) !important;
  background: color-mix(in srgb, var(--panel-accent) 7%, var(--contact-card-paper)) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1.15vw, 20px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  overflow-wrap: anywhere !important;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease !important;
}

.contact-page .contact-mail:is(:hover, :focus-visible) {
  border-color: var(--panel-accent) !important;
  color: #fffaf0 !important;
  background: var(--panel-accent) !important;
}

.contact-page .contact-intro p,
.contact-page .contact-form label {
  color: #2d2b26 !important;
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.62 !important;
}

.contact-page .contact-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 24px) !important;
  align-content: start !important;
}

.contact-page .contact-form label {
  display: grid !important;
  gap: 9px !important;
  font-weight: 700 !important;
}

.contact-page .contact-form label:nth-of-type(3),
.contact-page .contact-form .button {
  grid-column: 1 / -1 !important;
}

.contact-page .contact-form input,
.contact-page .contact-form textarea {
  width: 100% !important;
  border: 1px solid color-mix(in srgb, var(--panel-accent), transparent 70%) !important;
  border-radius: 0 !important;
  padding: 14px 15px !important;
  color: #171713 !important;
  background: rgba(255, 253, 247, .86) !important;
  box-shadow: none !important;
  font-size: 16px !important;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}

.contact-page .contact-form textarea {
  min-height: 176px !important;
  resize: vertical !important;
}

.contact-page .contact-form :is(input, textarea):focus {
  outline: 0 !important;
  border-color: var(--panel-accent) !important;
  background: #fffdf7 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--panel-accent), transparent 82%) !important;
}

.contact-page .contact-form .button {
  justify-self: start !important;
  min-width: 154px !important;
  padding: 14px 22px !important;
  border: 1px solid var(--panel-accent) !important;
  border-radius: 0 !important;
  color: #fffaf0 !important;
  background: var(--panel-accent) !important;
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--panel-accent), transparent 76%) !important;
  font-family: "Climate Crisis", var(--font-title) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  font-variation-settings: "YEAR" 1988 !important;
  letter-spacing: .06em !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .contact-page .contact-form .button:hover {
    background: #243e30 !important;
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--panel-accent), transparent 78%) !important;
    transform: translate(3px, 3px) !important;
  }
}

@media (max-width: 920px) {
  .contact-page .contact-layout {
    width: min(760px, calc(100% - 40px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 44px !important;
  }

  .contact-page :is(.contact-intro, .contact-form) {
    min-height: 0 !important;
  }
}

@media (max-width: 620px) {
  .contact-page .contact-layout {
    width: calc(100% - 28px) !important;
    gap: 34px !important;
  }

  .contact-page :is(.contact-intro, .contact-form) {
    padding: 28px 22px 30px !important;
    border-width: 10px !important;
    box-shadow:
      8px 8px 0 color-mix(in srgb, var(--panel-accent) 16%, var(--contact-card-shadow)),
      0 20px 46px rgba(3, 12, 8, .18) !important;
  }

  .contact-page .contact-intro h2 {
    font-size: clamp(27px, 8vw, 36px) !important;
  }

  .contact-page .contact-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .contact-page .contact-form label,
  .contact-page .contact-form label:nth-of-type(3),
  .contact-page .contact-form .button {
    grid-column: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-page :is(.contact-mail, .contact-form input, .contact-form textarea, .contact-form .button) {
    transition: none !important;
  }
}