/* ============================================================
   Ostéobio - Charte graphique des formulaires CF7 sur les LP
   Chargé conditionnellement (gabarit LP nouvelle génération +
   les 2 anciennes LP) - jamais sur le reste du site.
   ============================================================ */

/* ── Nouvelle génération (24 LP /lp/{cible}/{tunnel}/) ──────────
   .lp-cf7-fields est un conteneur ajouté directement dans le
   contenu des 24 formulaires CF7 (englobe tous les champs) : sert
   de portée pour ce bloc sans dépendre des réglages additionnels
   CF7 ni du markup de la page qui embarque le formulaire. Labels
   imbriqués dans <label> (association native, pas de souci d'id
   dupliqué si un formulaire est rendu deux fois sur une page).
   .lp-cf7-row pour la ligne Prénom/Nom, .lp-cf7-field pour les
   autres champs, .lp-cf7-consent pour le bloc RGPD. ─────────────── */

.lp-cf7-fields { display: grid; gap: 14px; }
.lp-cf7-fields p { margin: 0; }

.lp-cf7-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .lp-cf7-row { grid-template-columns: 1fr; }
}

.lp-cf7-field,
.lp-cf7-row > span,
.lp-cf7-fields label {
  display: block;
}

.lp-cf7-fields label {
  font-family: "Space Mono", monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: rgba(10,22,40,.6);
  margin-bottom: 6px;
}

.lp-cf7-fields input[type="text"],
.lp-cf7-fields input[type="email"],
.lp-cf7-fields input[type="tel"],
.lp-cf7-fields select,
.lp-cf7-fields textarea {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(10,22,40,.12);
  border-radius: 10px;
  background: #fff;
  color: #0A1628;
  font-family: "Instrument Sans", sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color .15s, outline-color .15s;
}
@media (max-width: 720px) {
  .lp-cf7-fields input[type="text"],
  .lp-cf7-fields input[type="email"],
  .lp-cf7-fields input[type="tel"],
  .lp-cf7-fields select,
  .lp-cf7-fields textarea {
    font-size: 16px; /* évite le zoom automatique iOS */
  }
}
.lp-cf7-fields textarea { resize: vertical; min-height: 90px; }

.lp-cf7-fields input:focus,
.lp-cf7-fields select:focus,
.lp-cf7-fields textarea:focus {
  outline: 3px solid rgba(10,22,40,.25);
  border-color: #0A1628;
}

/* CF7 rend déjà [acceptance] sous la forme
   span.wpcf7-form-control-wrap > span.wpcf7-acceptance > span.wpcf7-list-item
   > label > (input + span.wpcf7-list-item-label) : on cible directement ce
   <label> natif pour l'alignement case/texte, pas besoin de flex sur le
   conteneur .lp-cf7-consent lui-même. */
.lp-cf7-fields .wpcf7-acceptance,
.lp-cf7-fields .wpcf7-list-item {
  font-size: 12.5px;
  color: rgba(10,22,40,.55);
  line-height: 1.5;
}
.lp-cf7-fields .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.lp-cf7-fields .wpcf7-acceptance a { text-decoration: underline; color: inherit; }
.lp-cf7-fields input[type="checkbox"] {
  accent-color: #0A1628;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.lp-cf7-fields .wpcf7-form-control-wrap { display: block; }

/* ── Bouton d'envoi : commun nouvelle + ancienne génération ─────
   Ciblage via les classes natives CF7 (wpcf7-submit) pour couvrir
   aussi les 2 anciennes LP sans dépendre de leur structure interne. */
.wpcf7-form input[type="submit"].wpcf7-submit {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 16px;
  background: #FFD140;
  color: #0A1628;
  padding: 15px 26px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(255,209,64,.35);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.wpcf7-form input[type="submit"].wpcf7-submit:hover {
  transform: translateY(-2px);
}
.wpcf7-form input[type="submit"].wpcf7-submit:focus-visible {
  outline: 3px solid #0A1628;
  outline-offset: 3px;
}
.wpcf7-form input[type="submit"].wpcf7-submit:disabled,
.wpcf7-form.lp-is-sending input[type="submit"].wpcf7-submit {
  opacity: .6;
  cursor: default;
  transform: none;
}
.wpcf7-form .wpcf7-spinner {
  margin-left: 10px;
  vertical-align: middle;
}

/* ── Erreurs de validation (classes natives CF7) ────────────────
   S'applique partout où un formulaire CF7 de LP est rendu. */
.wpcf7-form .wpcf7-not-valid {
  border-color: #C0392B !important;
}
.wpcf7-form .wpcf7-not-valid-tip {
  font-size: 12.5px;
  color: #C0392B;
  margin-top: 4px;
  display: block;
}

/* ── Message de réponse CF7 ──────────────────────────────────────
   Uniquement des propriétés cosmétiques (pas de "display") : sur
   les 2 anciennes LP, lp.css masque déjà .wpcf7-mail-sent-ok car
   la confirmation y passe par une popin JS (lp.js) - ce comportement
   existant n'est pas modifié ici. Sur les nouvelles LP (aucune
   popin), le message reste visible et prend ce style.
   !important sur les couleurs : le CSS natif de Contact Form 7
   (styles.css, chargé par wp_head() donc après ce fichier) définit
   ses propres ".wpcf7 form.spam .wpcf7-response-output { border-color }"
   etc. avec une spécificité légèrement supérieure (présence du
   sélecteur d'élément "form") - sans !important nos couleurs de
   marque seraient silencieusement écrasées par les couleurs par
   défaut du plugin sur ce sous-élément précis. */
.wpcf7-form .wpcf7-response-output {
  padding: 14px !important;
  margin: 14px 0 0 !important;
  border-radius: 10px;
  border: none !important;
  font-size: 14px;
  line-height: 1.5;
}
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
  background: #F4F8F6 !important;
  border-left: 4px solid #FFD140 !important;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7-form .wpcf7-response-output.wpcf7-spam-blocked,
.wpcf7-form .wpcf7-response-output.wpcf7-acceptance-missing {
  background: #FBEEEC !important;
  border-left: 4px solid #C0392B !important;
}