.contact-ecran {
  padding-top: calc(var(--h-entete) + clamp(1.6rem, 3.6vw, 3.2rem));
  padding-bottom: clamp(3rem, 6vw, 5.2rem);
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(2.2rem, 5vw, 5rem);
  align-items: start;
}

.contact__titre {
  margin: 0 0 .8rem;
  color: var(--violet-sombre);
  font-size: clamp(1.3rem, 1.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.contact__dit { max-width: 46ch; font-size: .95rem; line-height: 1.5; }

.contact__aide { margin-top: .6rem; max-width: 60ch; }

.contact .champ__aide { font-size: .8125rem; line-height: 1.45; }

.message__aide a,
.contact__aide a {
  color: var(--violet-sombre);
  text-decoration: underline;
  text-decoration-color: var(--violet);
  text-underline-offset: .22em;
}


.message { display: grid; gap: .85rem; max-width: 40rem; }

.message__duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .85rem;
}

.contact .champ { gap: .3rem; }

.contact .champ > label { font-size: .9rem; }

.contact .message input:not([type="checkbox"]):not([type="radio"]),
.message select {
  min-height: 44px;
  padding: .5rem .75rem;
  font-size: .94rem;
}

.message textarea { min-height: 7.5rem; padding: .6rem .75rem; font-size: .94rem; resize: vertical; }

.message__aide { margin: -.2rem 0 0; }

.message__envoi { justify-self: start; min-height: 44px; padding: .65rem 1.4rem; font-size: .92rem; }

.message__trou {
  max-width: 64ch;
  margin-top: 1.1rem;
  padding: .45rem .7rem;
  font-size: .8rem;
  line-height: 1.45;
}

@media (max-width: 767px) {
  .message__envoi { width: 100%; }
}


.contact__cote { display: grid; gap: clamp(1rem, 1.8vw, 1.4rem); }

.contact__encart {
  position: relative;
  padding: clamp(1.15rem, 2vw, 1.5rem);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(56, 54, 72, .1);
}

.contact__lettre {
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(163, 113, 106, .2), rgba(163, 113, 106, 0) 70%),
    linear-gradient(rgba(255, 243, 168, .7), rgba(255, 243, 168, .7)),
    var(--blanc);
}

.contact__lieu {
  background:
    radial-gradient(90% 80% at 0% 100%, rgba(186, 255, 228, .55), rgba(186, 255, 228, 0) 70%),
    linear-gradient(rgba(94, 158, 133, .14), rgba(94, 158, 133, .14)),
    var(--blanc);
}

.contact__lettre { container-type: inline-size; }

.contact__lettre .infolettre { margin-top: .8rem; }

.contact__lettre .infolettre input { font-size: .88rem; }

.contact__adresse {
  margin-bottom: .45rem;
  color: var(--violet-sombre);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}


.plan { position: relative; max-width: 26rem; margin: 1rem 0 0; }

.plan__lien {
  display: block;
  border-radius: 10px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.plan__lien img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 580;
  border: 1px solid var(--filet);
  border-radius: 10px;
  background: var(--gris);
}

.plan__lien:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(56, 54, 72, .2); }

.plan__lien:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

.plan figcaption { margin-top: .4rem; font-size: .72rem; color: var(--texte); }

@media (prefers-reduced-motion: reduce) {
  .plan__lien { transition: none; }
  .plan__lien:hover { transform: none; }
}


@media (max-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr); }

  .contact__cote { max-width: 34rem; }
}

@media (max-width: 879px) {
  .contact .message input:not([type="checkbox"]):not([type="radio"]),
  .message select,
  .message textarea,
  .contact__lettre .infolettre input { font-size: 1rem; }

  .plan figcaption { font-size: .78rem; }
}