/* Page Contact */
.contact-page{ padding-block: 32px 80px; }
.contact-header h2{ margin:0 0 8px; font-size: clamp(22px,3vw,32px); }
.contact-header .lead{ margin:0 0 18px; opacity:.9; }

/* Grille : 2 colonnes dès 900px */
.contact-grid{
  display:grid; gap: 18px;
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 900px){
  .contact-grid{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
@media (min-width: 900px){
  .contact-form,
  .contact-aside{ align-self: stretch; }
}

/* Formulaire */
.contact-form{
  display:grid; gap: 14px;
  padding: 16px; background: #1f1f1f;
  border:1px solid rgba(242,233,216,.18);
  border-radius: 16px;
}
.field label{ display:block; font-weight:600; margin-bottom:6px; }
.field .req{ color: var(--ink); opacity:.8; }
.contact-form input,
.contact-form textarea{
  width:100%;
  color: var(--ink);
  background:#181818;
  border:1px solid rgba(242,233,216,.22);
  border-radius: 12px;
  padding: 12px 14px;
}
.contact-form textarea{ resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus{
  outline:2px solid var(--ink); outline-offset: 2px;
  border-color: var(--ink);
}

/* Honeypot caché */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Bouton */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn-primary{
  --corner-bg: #1f1f1f;
  --corner-fg: var(--ink);
  --corner-hover: pink;
  --corner-border-width: 0.4rem;
  --corner-corner-size: 2.4rem;
  --corner-padding-y: 1rem;
  --corner-padding-x: 1.8rem;
  --corner-font-size: clamp(1.2rem, 0.9rem + 0.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: .02em;
}

/* Helper */
.helper{ margin: 6px 0 0; opacity:.7; font-size: .95rem; }

/* Aside */
.contact-aside{ display:grid; gap: 14px; align-content: start; }
.map-wrap{
  border:1px solid rgba(242,233,216,.18); border-radius: 16px; overflow: hidden;
  background:#111;
  aspect-ratio: 16 / 12; /* s’adapte ; modifie si besoin */
}
.map-wrap iframe{ width:100%; height:100%; border:0; display:block; }
.infos{ border:1px solid rgba(242,233,216,.18); border-radius: 16px; padding: 12px; background:#1b1b1b; }
.infos h3{ margin:0 0 8px; font-size: 1.1rem; }
.info-list{ margin:0; padding-left: 16px; }
.info-list li{ margin: 4px 0; }
.info-list a{ text-decoration: underline; }