/* ====== Section 4 – Contact / Questions packs ====== */
:root{
  --hf-primary:#203a72;
  --hf-accent:#6ea0ff;
  --hf-deep:#1f2c59;
  --hf-muted:#6a7491;
  --hf-border:#e6e9f4;
  --hf-radius:18px;
  --hf-card-shadow:0 10px 24px rgba(20,35,80,.06);
}

.hf-contact{
  padding: clamp(40px,6vw,80px) 0;
  background:#f7f8ff;
}

.hf-contact-card{
  width:min(1100px,92vw);
  margin-inline:auto;
  background:#fff;
  border-radius:26px;
  box-shadow:var(--hf-card-shadow);
  padding:clamp(18px,3vw,28px);
}

.hf-contact-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(20px,4vw,48px);
  align-items:start;
}

/* ---------- Titres & textes ---------- */
.hf-contact-title{
  font-size:clamp(18px,1.8vw,22px);
  line-height:1.2;
  color:#000;
  margin:6px 0 10px;
  font-weight:700;
}
.hf-contact-lead,
.hf-contact-text{
  color:#000;
  font-weight:400;
  font-size:15px;
  line-height:1.5;
  margin:0 0 12px;
}

/* ---------- Boutons (unifiés) ---------- */
.hf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .05s ease, box-shadow .2s ease, background-color .2s ease;
  cursor:pointer;
}

/* Offres d’emplois + Envoyer : mêmes styles */
.hf-btn--primary,
.hf-contact-form button[type="submit"].hf-btn.hf-btn--primary{
  background:#234981 !important;   /* nouvelle couleur */
  color:#fff !important;
  padding:8px 18px !important;     /* plus d’espace haut/bas */
  font-size:14px !important;
  font-weight:700 !important;
  text-transform:none !important;
  line-height:1.3 !important;
  border-radius:8px !important;
  min-width:130px !important;
}
.hf-btn--primary:hover,
.hf-contact-form button[type="submit"].hf-btn.hf-btn--primary:hover{
  box-shadow:0 6px 18px rgba(35,73,129,.25);
  transform:translateY(-1px);
}

/* ---------- Formulaire ---------- */
.hf-contact-form{
  display:grid;
  grid-template-columns:1fr;
  row-gap:0;                   /* on gère via marges */
  margin-top:50px;
}
.hf-field{ display:grid; gap:6px; margin:0 0 14px 0; }
.hf-field label{
  font-size:13px;
  color:var(--hf-primary);
  font-weight:500;
}

/* Champs : bordures noires uniformes */
.hf-contact-form input,
.hf-contact-form textarea{
  border:1px solid #000 !important;
  background:#fff !important;
}
.hf-contact-form input{ border-radius:999px; }
.hf-contact-form textarea{
  border-radius:var(--hf-radius);
  resize:vertical;
  min-height:140px;
}

/* Focus */
.hf-contact-form input:focus,
.hf-contact-form textarea:focus{
  border-color:#000;
  box-shadow:0 0 0 3px rgba(0,0,0,.08);
}

/* Colonne gauche : largeur */
.hf-contact-left{ max-width:460px; }

/* Espace texte → bouton Offres */
.hf-contact-left .hf-contact-text{ margin-bottom:32px; }

/* Espace Message → bouton Envoyer */
.hf-contact-form .hf-field:last-of-type{ margin-bottom:6px !important; }

/* Bouton Envoyer aligné */
.hf-contact-form button[type="submit"]{
  justify-self:center;
  width:auto !important;
  height:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px){
  .hf-contact-grid{ grid-template-columns:1fr; }
  .hf-contact-left{ order:1; }
  .hf-contact-form{ order:2; }
}
@media (max-width: 480px){
  .hf-contact-card{
    padding:16px;
    border-radius:22px;
  }
  .hf-contact-title{ font-size:20px; }
}