/**
 * Contact Form 7 – styles alignés sur les classes form du thème
 *
 * Bonnes pratiques (contactform7.com/styling-contact-form/) :
 * - Tout est scopé sous .wpcf7 pour ne pas impacter les autres formulaires.
 * - Les champs utilisent les variables CSS du thème (main.css).
 * - Pas de modification des feuilles du plugin (écrasées aux mises à jour).
 *
 * Classes CF7 utilisées :
 * - .wpcf7 : conteneur du formulaire
 * - .wpcf7-form-control-wrap : wrapper de chaque champ (span)
 * - .wpcf7-form-control : input, textarea, select
 * - .wpcf7-form-control.wpcf7-quiz : champ Quiz (anti-spam / petit Captcha)
 * - .wpcf7-not-valid-tip : message de validation sous le champ
 * - .wpcf7-response-output : message global (envoi réussi / erreur)
 * - form.init | .sent | .failed | .invalid | .spam | .unaccepted : états du formulaire
 *
 * @package Toolbox
 * @version 1.0.0
 */

/* ==========================================================================
   Conteneur et groupes de champs (équivalent .form-group)
   ========================================================================== */

.wpcf7 {
  font-family: var(--font-body);
  color: var(--text-primary);
}

/* Chaque champ est dans un span.wpcf7-form-control-wrap : on le traite comme un bloc pour le flux */
.wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: var(--spacing-md);
  position: relative;
}

/* ==========================================================================
   Champs (alignés sur .form-field input / .form-control)
   ========================================================================== */

.wpcf7 .wpcf7-form-control.wpcf7-text,
.wpcf7 .wpcf7-form-control.wpcf7-email,
.wpcf7 .wpcf7-form-control.wpcf7-url,
.wpcf7 .wpcf7-form-control.wpcf7-tel,
.wpcf7 .wpcf7-form-control.wpcf7-number,
.wpcf7 .wpcf7-form-control.wpcf7-date,
.wpcf7 .wpcf7-form-control.wpcf7-quiz,
.wpcf7 .wpcf7-form-control.wpcf7-textarea,
.wpcf7 .wpcf7-form-control.wpcf7-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  box-sizing: border-box;
}

.wpcf7 .wpcf7-form-control.wpcf7-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Focus (cohérent avec .form-field et #loginform) */
.wpcf7 .wpcf7-form-control.wpcf7-text:focus,
.wpcf7 .wpcf7-form-control.wpcf7-email:focus,
.wpcf7 .wpcf7-form-control.wpcf7-url:focus,
.wpcf7 .wpcf7-form-control.wpcf7-tel:focus,
.wpcf7 .wpcf7-form-control.wpcf7-number:focus,
.wpcf7 .wpcf7-form-control.wpcf7-date:focus,
.wpcf7 .wpcf7-form-control.wpcf7-quiz:focus,
.wpcf7 .wpcf7-form-control.wpcf7-textarea:focus,
.wpcf7 .wpcf7-form-control.wpcf7-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Placeholders */
.wpcf7 .wpcf7-form-control::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

/* Champs en erreur de validation (bordure rouge) */
.wpcf7 .wpcf7-form-control-wrap.wpcf7-not-valid .wpcf7-form-control {
  border-color: var(--error-color);
}

.wpcf7 .wpcf7-form-control-wrap.wpcf7-not-valid .wpcf7-form-control:focus {
  border-color: var(--error-color);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   Message de validation sous le champ (.wpcf7-not-valid-tip)
   ========================================================================== */

.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--error-color);
  font-weight: normal;
}

/* ==========================================================================
   Message de réponse global (.wpcf7-response-output)
   ========================================================================== */

.wpcf7 form .wpcf7-response-output {
  margin: var(--spacing-lg) 0 var(--spacing-md);
  padding: var(--spacing-md);
  border: 2px solid var(--primary-color);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
}

.wpcf7 form.init .wpcf7-response-output {
  display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--success-color);
  color: var(--text-primary);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: var(--error-color);
  color: var(--error-color);
}

.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--warning-color);
  color: var(--warning-color);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: var(--accent-color);
  color: var(--text-primary);
}

/* ==========================================================================
   Bouton Envoyer (aligné sur .btn)
   ========================================================================== */

.wpcf7 .wpcf7-submit {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: none;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  background: var(--primary-color);
  color: var(--text-inverse);
  transition: background var(--transition-normal);
}

.wpcf7 .wpcf7-submit:hover {
  background: var(--primary-light);
}

.wpcf7 .wpcf7-submit:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* ==========================================================================
   Quiz (petit Captcha anti-spam – question + champ réponse)
   ========================================================================== */

/* Champ réponse du quiz : même style que les champs texte */
.wpcf7 .wpcf7-form-control.wpcf7-quiz {
  max-width: 100%;
  min-width: 0;
}

/* Optionnel : question du quiz sur la même ligne ou au-dessus (texte généré par CF7) */
.wpcf7 .wpcf7-form-control-wrap:has(.wpcf7-quiz) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.wpcf7 .wpcf7-form-control-wrap:has(.wpcf7-quiz) .wpcf7-quiz {
  flex: 1 1 auto;
  min-width: 120px;
}

/* Si la question est dans un label ou en texte avant l'input, on garde un bon espacement */
.wpcf7 .wpcf7-form-control-wrap:has(.wpcf7-quiz) label,
.wpcf7 .wpcf7-form-control-wrap:has(.wpcf7-quiz) .wpcf7-quiz + .wpcf7-not-valid-tip {
  flex: 0 0 100%;
}

.wpcf7 .wpcf7-form-control-wrap:has(.wpcf7-quiz) .wpcf7-not-valid-tip {
  margin-top: 0;
}

/* ==========================================================================
   Checkboxes / Radio (optionnel, si utilisés dans le formulaire)
   ========================================================================== */

.wpcf7 .wpcf7-form-control.wpcf7-checkbox,
.wpcf7 .wpcf7-form-control.wpcf7-radio {
  width: auto;
  margin-right: var(--spacing-xs);
}

.wpcf7 .wpcf7-list-item {
  margin-bottom: var(--spacing-xs);
}

/* ==========================================================================
   Thème sombre (si [data-theme="dark"] est utilisé sur le site)
   ========================================================================== */

[data-theme="dark"] .wpcf7 .wpcf7-form-control.wpcf7-text,
[data-theme="dark"] .wpcf7 .wpcf7-form-control.wpcf7-email,
[data-theme="dark"] .wpcf7 .wpcf7-form-control.wpcf7-url,
[data-theme="dark"] .wpcf7 .wpcf7-form-control.wpcf7-tel,
[data-theme="dark"] .wpcf7 .wpcf7-form-control.wpcf7-number,
[data-theme="dark"] .wpcf7 .wpcf7-form-control.wpcf7-date,
[data-theme="dark"] .wpcf7 .wpcf7-form-control.wpcf7-quiz,
[data-theme="dark"] .wpcf7 .wpcf7-form-control.wpcf7-textarea,
[data-theme="dark"] .wpcf7 .wpcf7-form-control.wpcf7-select {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .wpcf7 .wpcf7-form-control::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}