/* =====================================================================
   PAGE CONTACT
   ===================================================================== */

/* Honeypot anti-spam : invisible pour l'humain, présent pour les bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Hero contact (panneau navy + photo) ---------- */
.contact-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.contact-hero__panel {
  background: var(--color-navy);
  color: #fff;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}
.contact-hero__panel h1 { font-size: var(--fs-h1); line-height: 1.05; margin: 0.25rem 0 0.75rem; }
.contact-hero__panel h1 span { color: var(--color-yellow); }
.contact-hero__panel > p { color: var(--color-muted-light); max-width: 42ch; margin-bottom: 1.5rem; }
.contact-hero__photo { position: relative; min-height: 320px; }
.contact-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Le form-card se pose sur le panneau navy */
.contact-hero .form-card { color: var(--color-text); }
.contact-hero .form-card h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }

/* ---------- Cartes « comment s'engager » ---------- */
.engage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.engage-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.engage-card__media { position: relative; aspect-ratio: 4 / 3; }
.engage-card__media img { width: 100%; height: 100%; object-fit: cover; }
.engage-card__icon {
  position: absolute;
  left: 1rem; bottom: -1.25rem;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-orange);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.engage-card__body { padding: 1.75rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.engage-card__body h3 { font-size: var(--fs-small); text-transform: uppercase; }
.engage-card__body p { font-size: var(--fs-small); color: var(--color-muted); flex: 1; }
.engage-card__body .btn { margin-top: 0.5rem; }

/* ---------- FAQ + WhatsApp ---------- */
.faq-block { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
.whatsapp-card {
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}
.whatsapp-card h2 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.whatsapp-card h2 span { color: var(--color-yellow); }
.whatsapp-card p { color: var(--color-muted-light); font-size: var(--fs-small); }
.whatsapp-card__qr { width: 150px; height: 150px; margin: 1.25rem auto; object-fit: contain; background: #fff; border-radius: var(--radius-sm); padding: 6px; }
.whatsapp-card .btn { width: 100%; margin-bottom: 0.75rem; }

/* ---------- CTA final ---------- */
.contact-final { color: #fff; }
.contact-final__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
.contact-final__copy { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.contact-final__copy h2 { font-size: var(--fs-h1); line-height: 1.05; }
.contact-final__copy h2 span { color: var(--color-yellow); }
.contact-final__media { min-height: 300px; position: relative; }
.contact-final__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .engage-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-block { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .contact-hero { grid-template-columns: 1fr; }
  .contact-hero__photo { min-height: 240px; order: -1; }
  .contact-final__grid { grid-template-columns: 1fr; }
  .contact-final__media { min-height: 220px; }
}
@media (max-width: 560px) {
  .engage-grid { grid-template-columns: 1fr; }
}