/* ============================================
   LNSP — Habillage Contact Form 7
   Reprend la charte du thème (navy / green / gold)
   pour les éléments générés par CF7 qui n'ont pas
   d'équivalent dans le design HTML d'origine :
   messages de validation et de réponse.
   ============================================ */

/* Message de validation sous un champ invalide */
.wpcf7-not-valid-tip {
  display: block;
  color: #c0392b;
  font-size: 0.8rem;
  margin-top: 4px;
}

.wpcf7-form-control.wpcf7-not-valid {
  border-color: #c0392b !important;
}

/* Message global de réponse (succès / erreur), masqué par défaut puis
   révélé en JS au moment de l'envoi (cf. inc/cf7.php) */
.wpcf7-response-output {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  display: none;
}

.wpcf7-mail-sent-ok {
  display: block;
  background: rgba(46, 125, 50, 0.08);
  border: 1px solid var(--green);
  color: var(--green);
}

.wpcf7-mail-sent-ng,
.wpcf7-validation-errors,
.wpcf7-spam-blocked {
  display: block;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid #c0392b;
  color: #c0392b;
}

.lnsp-cf7-success {
  animation: lnspFadeOutResponse 0.5s ease 7.5s forwards;
}

@keyframes lnspFadeOutResponse {
  to {
    opacity: 0;
  }
}

/* Spinner natif CF7 pendant l'envoi : recolore selon la charte */
.wpcf7-spinner {
  background-color: var(--green) !important;
}

/* Newsletter : le champ CF7 doit garder l'apparence du input-group existant */
.newsletter-form .wpcf7-form-control-wrap {
  flex: 1;
}

.newsletter-form form.wpcf7-form {
  width: 100%;
}

.newsletter-form .wpcf7-response-output {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

/* ============================================
   Icône avion sur les boutons d'envoi CF7
   CF7 génère un <input type="submit"> qui ne peut pas contenir de
   balise <i> (les inputs n'ont pas de contenu HTML). On insère donc
   l'icône Font Awesome via ::before, en conservant exactement le
   texte du bouton (value de l'input) à côté.
   ============================================ */
.contact-form-wrap .btn-submit,
.newsletter-form .btn-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.contact-form-wrap .btn-submit::before,
.newsletter-form .btn-sub::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.95em;
  line-height: 1;
}

/* Pendant l'envoi, CF7 désactive le bouton — on garde le même style
   plutôt que l'apparence grisée par défaut du navigateur */
.contact-form-wrap .btn-submit:disabled,
.newsletter-form .btn-sub:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}