/* ====== Section Contact ====== */
: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: transparent !important;
}

.hf-contact-card{
  width:min(1100px,92vw);
  margin-inline:auto;
  background:#f5f5fe;
  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;
}

.hf-contact-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px; 
}

.hf-contact-icon{
  width:40px;
  height:40px;
  background:url('/wp-content/uploads/2025/09/27.png') center/contain no-repeat;
  flex:0 0 40px;
}

.hf-contact-title{
  display:block;
  margin:0;
  font-size:clamp(22px,2.6vw,28px);
  line-height:1.2;
  color:#000;
  font-weight:800;
}

.hf-contact-title::before{ content:none !important; }

/* ---------- Formulaire ---------- */
.hf-contact-form{
  display:grid;
  grid-template-columns:1fr;
  row-gap:0;
  margin-top:44px;
}
.hf-field{ display:grid; gap:6px; margin:0 0 14px 0; }
.hf-field label{
  font-size:13px;
  color:#2a3997 !important;
  font-weight:700;
}

.hf-contact-form input,
.hf-contact-form textarea,
.hf-contact-form select{
  border:1px solid #000 !important;
  background-color:#fff !important;  
  font:inherit;
  padding:.7rem 1rem;
}

.hf-contact-form input,
.hf-contact-form select{ border-radius:999px; height:42px; }
.hf-contact-form textarea{
  border-radius:var(--hf-radius);
  min-height:140px;
  resize:vertical;
}

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

/* ---------- Bouton Envoyer ---------- */
.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;
}
.hf-btn--primary,
.hf-contact-form button[type="submit"].hf-btn.hf-btn--primary{
  background:#234981 !important;
  color:#fff !important;
  padding:8px 18px !important;  
  font-size:14px !important;
  line-height:1.3 !important;
  border-radius:10px !important;
  min-width:130px !important;
  display:inline-flex !important;
  margin:16px auto 0 !important; 
  height:auto !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);
}

/* ---------- Responsive ---------- */
@media (max-width: 992px){
  .hf-contact-grid{ grid-template-columns:1fr; }
  .hf-contact-form{ margin-top:16px; }
}

@media (max-width: 480px){
  .hf-contact-card{
    padding:16px;
    border-radius:22px;
  }
  .hf-contact-title{ font-size:20px; }
}

.hf-contact-form .hf-field:last-of-type{
  margin-bottom:-16px !important; 
}





/* ===== Section 2 – Offres uniques ===== */
:root{
  --s6-bg:#203a72;           
  --s6-card:#ffffff;
  --s6-text:#1f2c59;
  --s6-muted:#6a7491;
  --s6-primary:#234881;
  --s6-primary-contrast:#ffffff;
  --s6-shadow:0 16px 40px rgba(20,35,80,.14);
  --s6-radius:22px;
}

.hf-s6{
  margin:0; padding: clamp(48px,6vw,84px) 0;  
}

.hf-s6 .hf-s6-card{
  width:min(980px,92vw);
  margin-inline:auto;
  background:var(--s6-card);
  color:var(--s6-text);
  border-radius:var(--s6-radius);
  box-shadow:var(--s6-shadow);
  text-align:center;
  padding: clamp(28px,4.5vw,44px) clamp(18px,3vw,28px);
}

.hf-s6 .hf-s6-card{
  width:min(1100px,92vw);  
}

/* icône */
.hf-s6 .hf-s6-ico{
  display:block;
  margin-inline:auto;
  margin-bottom: 12px;
  width:44px; height:44px;
}

/* titres & texte */
.hf-s6 .hf-s6-title{
  font-size: clamp(20px, 2.2vw, 24px);
  line-height:1.25;
  margin: 0 0 24px 0;
  font-weight: 700;
  color: var(--s6-text);
}

.hf-s6 .hf-s6-text{
  margin: 16px auto clamp(20px,3.2vw,28px) auto;
  max-width: 72ch;
  color: var(--s6-text);
  font-weight: 400;
}

/* ===== Boutons (blindés contre le thème) ===== */
:where(body) .hf-s6 .hf-s6-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}

:where(body) .hf-s6 .hf-s6-btn{
  all: unset;                                  
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px; line-height:1; font-weight:700;
  cursor:pointer;
  user-select:none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  border:1.5px solid transparent;
  min-width:160px;
  text-align:center;
}

:where(body) .hf-s6 .hf-s6-btn:focus-visible{
  outline: 3px solid rgba(35,72,129,.35);
  outline-offset: 2px;
}

/* primaire */
:where(body) .hf-s6 .hf-s6-btn--primary{
  background: var(--s6-primary);
  color: var(--s6-primary-contrast);
  box-shadow: 0 6px 16px rgba(35,72,129,.25);
}
:where(body) .hf-s6 .hf-s6-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(35,72,129,.32);
}

/* ghost */
:where(body) .hf-s6 .hf-s6-btn--ghost{
  background: #fff;
  color: var(--s6-text);
  border-color: #000;
}
:where(body) .hf-s6 .hf-s6-btn--ghost:hover{
  border-color: #000;
  color: #000;
  transform: translateY(-1px);
}

/* accessibilité */
.hf-s6 .sr-only{
  position:absolute!important; width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===== Tablet 769–1024px ===== */
@media (min-width:769px) and (max-width:1024px){
  .hf-s6{ padding:36px 0; }

  .hf-s6 .hf-s6-card{
    width:min(1100px,92vw);
    padding:24px 18px;
    border-radius:18px;
  }

  .hf-s6 .hf-s6-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    padding:0 8px;
  }
  .hf-s6 .hf-s6-btn{
    flex:0 0 200px;
    min-width:0;
    max-width:220px;
    padding:10px 16px;
    font-size:14px;
    line-height:1.1;
  }
}

/* ===== Mobile ≤768px ===== */
@media (max-width:768px){
  .hf-s6{ padding:34px 0; }

  .hf-s6 .hf-s6-card{
    width:min(560px,92vw);
    padding:22px 14px;
    border-radius:18px;
  }

  .hf-s6 .hf-s6-title{ margin-bottom:14px; }
  .hf-s6 .hf-s6-text{
    font-size:clamp(14px,4vw,16px);
    margin:16px auto 20px;
    hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto;
  }

  .hf-s6 .hf-s6-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  .hf-s6 .hf-s6-btn{
    width:90%;
    max-width:260px;
    min-width:0;
    padding:10px 14px;
    font-size:14px;
    line-height:1.1;
  }
}

/* ===== Très petits écrans ≤360px ===== */
@media (max-width:360px){
  .hf-s6 .hf-s6-card{ padding:18px 12px; }
  .hf-s6 .hf-s6-btn{ width:100%; max-width:240px; padding:9px 12px; font-size:13.5px; }
}


/* ===== Section combinée : fond noir + espacement entre blocs ===== */
.hf-combined{
  padding: clamp(40px,6vw,80px) 0;
  background: transparent;
  display:flex;
  flex-direction:column;
  gap: clamp(24px,4vw,36px);       
}

.hf-combined .hf-s6{ padding:0; }

@media (min-width: 0){
  .hf-combined .hf-s6 .hf-s6-card{ width:min(1100px,92vw); }
}

/* Sur mobile, l’écart peut être un peu moindre si tu veux */
@media (max-width:768px){
  .hf-combined{ gap: clamp(18px,5vw,24px); }
}

@media (max-width: 768px){
  .hf-contact .hf-contact-title{
    font-size: clamp(18px, 4.6vw, 20px) !important;
    line-height: 1.25;
  }

  .hf-contact-form{ margin-top: 12px !important; }
  .hf-contact-card{ padding: 16px 14px !important; }
}



/* ===== Section Support ===== */
.hf-support{
  padding: clamp(40px, 6vw, 80px) 0 20px;
  background: transparent; 
  text-align: center;
}

.hf-support-wrap{
  width: min(1100px, 92vw);
  margin-inline: auto;
}

.hf-support-title{
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  margin: 0;
}

@media (max-width: 768px){
  .hf-support .hf-support-title{
    font-size: clamp(20px, 5vw, 26px) !important;
    line-height: 1.3;
  }
}

@media (min-width: 993px){
  .hf-contact-form{
    margin-top: 80px; 
  }
}



/* === Fix <select> (même rendu que les inputs) === */
.hf-contact-form select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-color:#fff !important;
  border:1px solid #000 !important;
  border-radius:999px !important;

  /* padding: place pour le texte + la flèche à droite */
  padding: 10px 44px 10px 16px !important;

  /* hauteur confortable + anti-zoom iOS */
  min-height: 42px !important;
  font-size: 16px !important;
  line-height: 1.3 !important;

  color:#122 !important;
  box-shadow:none !important;
  outline:0 !important;

  /* flèche SVG intégrée */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23234881' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

/* Focus cohérent */
.hf-contact-form select:focus{
  border-color:#000 !important;
  box-shadow:0 0 0 3px rgba(0,0,0,.08) !important;
}

/* Placeholder (option disabled vide) en gris tant que non choisi */
.hf-contact-form select:invalid{
  color:#8a8fa6 !important;
}

/* Quand une vraie option est sélectionnée, repasse en couleur normale */
.hf-contact-form select option{ color:#122; }

/* iOS Safari: évite le coin tronqué / soulignements */
.hf-contact-form select::-ms-expand{ display:none; } /* IE/Edge legacy */


/* === FORCER les champs requis (visuel + focus) === */
#hfContactForm [required]{
  box-shadow:none !important;
}
#hfContactForm [required]:invalid{
  border-color:#d32f2f !important;
}
#hfContactForm [required]:focus{
  box-shadow:0 0 0 3px rgba(35,73,129,.12) !important;
}

/* Asterisque rouge ajouté par JS (voir plus bas) */
#hfContactForm .hf-req{
  color:#d32f2f;
  font-weight:700;
  margin-left:4px;
}

/* === SELECT : apparence identique aux inputs + flèche custom === */
:where(body) .hf-contact .hf-contact-form select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;

  background-color:#fff !important;
  /* flèche SVG */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23234881' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:18px 18px !important;

  padding-right:44px !important;      /* place pour la flèche */
  border-radius:999px !important;
  min-height:42px !important;
  font-size:16px !important;
  line-height:1.3 !important;
  color:#122 !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Focus homogène */
:where(body) .hf-contact .hf-contact-form select:focus{
  border-color:#000 !important;
  box-shadow:0 0 0 3px rgba(0,0,0,.08) !important;
}

/* Placeholder (option disabled) en gris tant que non choisi */
:where(body) .hf-contact .hf-contact-form select:invalid{
  color:#8a8fa6 !important;
}

/* Valeurs réelles en couleur normale */
:where(body) .hf-contact .hf-contact-form select option{
  color:#122;
}

/* Désactiver la flèche legacy IE/Edge */
.hf-contact-form select::-ms-expand{ display:none; }


/* === Étoile rouge pour les champs obligatoires === */
.hf-contact-form label .hf-req{
  color:#d32f2f;
  margin-left:4px;
  font-weight:700;
  font-size:14px;
}


/* === Bordures noires constantes === */
#hfContactForm input,
#hfContactForm textarea,
#hfContactForm select {
  border: 1.8px solid #000 !important;
  background-color: #fff !important;
  color: #000 !important;
  font-family: inherit;
  font-size: 15px;
}

/* Focus : halo léger noir */
#hfContactForm input:focus,
#hfContactForm textarea:focus,
#hfContactForm select:focus {
  border-color: #000 !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important;
  outline: none !important;
}

/* === Étoile rouge pour les champs obligatoires === */
#hfContactForm label .hf-req {
  color: #d32f2f;
  margin-left: 4px;
  font-weight: 700;
  font-size: 14px;
}


/* === Bordures noires uniformes pour tous les champs === */
#hfContactForm input,
#hfContactForm textarea,
#hfContactForm select {
  border: 1.8px solid #000 !important;
  background-color: #fff !important;
  color: #000 !important;
  font-family: inherit;
  font-size: 15px !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Focus : halo discret noir */
#hfContactForm input:focus,
#hfContactForm textarea:focus,
#hfContactForm select:focus {
  border-color: #000 !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important;
  outline: none !important;
}

/* === Étoiles "required" en bleu profond HF === */
#hfContactForm label .hf-req {
  color: #2a3997 !important;
  margin-left: 4px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}

/* === Corriger les <select> pour garder la flèche SVG visible === */
#hfContactForm select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  background-color: #fff !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23234881' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;

  padding-right: 44px !important;
  border-radius: 999px !important;
  min-height: 42px !important;
  line-height: 1.3 !important;
}

/* iOS / Edge corrections */
#hfContactForm select::-ms-expand { display: none; }


/* 3) Empêcher le retour au rouge (invalid / Bootstrap) */
#hfContactForm [required]:invalid,
#hfContactForm .is-invalid,
#hfContactForm .was-validated .form-control:invalid,
#hfContactForm .was-validated .form-select:invalid {
  border-color: #000 !important;
  box-shadow: none !important;
}