/* Fiches contact noires, typographie et champs blancs. */
body.contact-page :is(.contact-intro, .contact-form) {
  --contact-ink: #ffffff;
  --contact-card-edge: #111111;
  --contact-yellow: #ffffff;
  color: #ffffff !important;
  background: #111111 !important;
  border-color: #111111 !important;
}

body.contact-page .contact-intro p,
body.contact-page .contact-form label,
body.contact-page .contact-intro h2,
body.contact-page .contact-mail {
  color: #ffffff !important;
}

body.contact-page .contact-mail {
  border-bottom-color: rgba(255, 255, 255, .4) !important;
}

body.contact-page .contact-mail:is(:hover, :focus-visible) {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 5px;
}

body.contact-page .contact-form :is(input, textarea) {
  color: #ffffff !important;
  caret-color: #ffffff;
  background: #1c1c1c !important;
  border-color: rgba(255, 255, 255, .4) !important;
  color-scheme: dark;
}

body.contact-page .contact-form :is(input, textarea):focus {
  background: #222222 !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18) !important;
}

body.contact-page .contact-form .button {
  color: #ffffff !important;
  background: #111111 !important;
  border-color: #ffffff !important;
  box-shadow: 5px 5px 0 rgba(255, 255, 255, .24) !important;
}

body.contact-page .contact-form .button:is(:hover, :focus-visible) {
  color: #ffffff !important;
  background: #333333 !important;
  box-shadow: 3px 3px 0 rgba(255, 255, 255, .24) !important;
}

body.contact-page :is(.contact-mail, .contact-form .button):focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 5px;
}