/* ============================================================
   BALIMANA — cf7.css
   Habillage de la sortie Contact Form 7 sur le design system.
   Chargé uniquement si CF7 est actif (voir inc/enqueue-scripts.php).
   Cible à la fois les champs avec class:input (recommandé dans la
   définition du formulaire) et les champs CF7 bruts (repli).
   ============================================================ */

.wpcf7 .wpcf7-form-control-wrap{display:block}

/* Champs bruts -> look DS */
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form input[type=url],
.wpcf7-form input[type=number],
.wpcf7-form textarea,
.wpcf7-form select{
  font-family:var(--font-sans);font-size:var(--text-base);color:var(--text);
  background:var(--white);border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:11px 13px;width:100%;
  transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base);
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus{outline:none;border-color:var(--cyan-500);box-shadow:var(--ring)}
.wpcf7-form textarea{resize:vertical;min-height:96px}

/* CF7 <select> : le raccourci `background:var(--white)` ci-dessus a réinitialisé
   la flèche (background-repeat/position par défaut → répétée, calée en haut à
   gauche). On repose donc une flèche NON répétée, calée à droite, avec la place
   nécessaire — sans quoi le chevron se répète en mosaïque sur tout le champ.
   La variante sombre (cta-band) ne fait que changer la COULEUR de la flèche
   (via .cta-form .select dans site.css) et hérite d'ici son calage. */
.wpcf7-form select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2329235c' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;
}

/* Cibles tactiles — MOTIF UNIQUE DU THÈME : plancher posé en base mobile,
   neutralisé au palier 900 px, où le pointeur est précis et où le rendu doit
   rester identique au pixel près.
   Les champs CF7 mesurent 41 px (11 px de remplissage + 1,5 px de bordure +
   la ligne de texte) et le bouton 42 px. Le manque est comblé par un PLANCHER
   DE HAUTEUR, jamais par la taille du texte : --text-base et --text-sm restent
   ceux de l'échelle typographique. Ces trois cibles sont présentes sur les sept
   gabarits (le formulaire du cta-band) : elles pesaient à elles seules sur la
   quasi-totalité des contrôles de cibles tactiles du harnais. */
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form input[type=url],
.wpcf7-form input[type=number],
.wpcf7-form select,
.wpcf7-form input[type=submit],
.wpcf7-form button[type=submit]{min-height:44px}
@media(min-width:900px){
  .wpcf7-form input[type=text],
  .wpcf7-form input[type=email],
  .wpcf7-form input[type=tel],
  .wpcf7-form input[type=url],
  .wpcf7-form input[type=number],
  .wpcf7-form select,
  .wpcf7-form input[type=submit],
  .wpcf7-form button[type=submit]{min-height:0}
}

.wpcf7-form label{font-size:var(--text-sm);font-weight:600;color:var(--text-strong);display:block}

/* Bouton -> .btn DS */
.wpcf7-form input[type=submit],
.wpcf7-form button[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:var(--text-sm);
  cursor:pointer;padding:13px 22px;border-radius:var(--radius-xs);
  background:var(--orange);color:#fff;border:1.5px solid transparent;
  transition:background var(--dur-base) var(--ease-out),transform var(--dur-fast),box-shadow var(--dur-base);
}
.wpcf7-form input[type=submit]:hover,
.wpcf7-form button[type=submit]:hover{background:var(--orange-600);transform:translateY(-1px);box-shadow:var(--shadow-sm)}

/* Messages de validation / réponse */
.wpcf7 .wpcf7-not-valid-tip{color:var(--danger);font-size:var(--text-xs);margin-top:5px}
.wpcf7-form .wpcf7-not-valid{border-color:var(--danger) !important}
.wpcf7 form .wpcf7-response-output{
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:12px 16px;font-size:var(--text-sm);margin:var(--space-4) 0 0;
}
.wpcf7 form.sent .wpcf7-response-output{border-color:#bfe3cd;background:#e8f5ee;color:var(--success)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:#f3c6c0;background:#fdecea;color:var(--danger)}
.wpcf7-spinner{margin:0 0 0 10px}

/* Variante sombre (cta-band).
   La classe .cta-form est portée par le <form> lui-même — CF7 la reçoit via
   html_class (voir balimana_contact_form()). Les sélecteurs ne peuvent donc pas
   être descendants de .cta-form. Ce bloc reste en fin de fichier : à spécificité
   égale avec les règles génériques .wpcf7-form ci-dessus, c'est l'ordre de la
   cascade qui tranche. */
.cta-form input[type=text],
.cta-form input[type=email],
.cta-form input[type=tel],
.cta-form input[type=url],
.cta-form input[type=number],
.cta-form textarea,
.cta-form select{
  background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;
}
.cta-form label,
.cta-form .field-label{color:#e7e6f2}
.cta-form input::placeholder,
.cta-form textarea::placeholder{color:#8f8cc4}
.cta-form select option{background:var(--navy-800);color:#fff}
.cta-form input:focus,
.cta-form textarea:focus,
.cta-form select:focus{border-color:var(--cyan-400)}