/* ==========================================================================
   Habillage du formulaire WPForms aux codes graphiques d'Iroko Innov
   Reprend la présentation des champs de la maquette : libellé en capitales,
   champ souligné d'un seul filet, bouton arrondi terracotta.
   ========================================================================== */

.wpforms-container.wpforms-container-full {
  /* WPForms pilote ses champs par ces variables : on les règle une fois
     plutôt que de surcharger chaque règle du plugin. */
  --wpforms-field-border-radius: 0;
  --wpforms-field-background-color: transparent;
  --wpforms-field-border-color: var(--line);
  --wpforms-field-text-color: var(--text);
  --wpforms-label-color: var(--text-muted);
  --wpforms-label-sublabel-color: var(--text-muted);
  --wpforms-label-error-color: #b3261e;
  --wpforms-button-border-radius: 100px;
  --wpforms-button-background-color: var(--terra);
  --wpforms-button-text-color: #fff;
  --wpforms-field-size-font-size: 1rem;
  --wpforms-field-size-input-height: 55px;   /* hauteur des champs */
  --wpforms-field-size-padding-h: 0px;       /* alignés à gauche, sans cadre */

  margin: 0;
  max-width: none;
  font-family: var(--font-sans);
}

.wpforms-container .wpforms-field-container {
  display: grid;
  gap: 1.5rem;
}

.wpforms-container .wpforms-field {
  padding: 0;
  display: grid;
  gap: .5rem;
}

/* Libellés */
.wpforms-container .wpforms-field-label {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.wpforms-container .wpforms-required-label {
  color: var(--terra);
  font-weight: 600;
}

.wpforms-container .wpforms-field-sublabel {
  font-size: .75rem;
  color: var(--text-muted);
}

/* Champs : un seul filet sous le texte, comme dans la maquette */
div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="url"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
  width: 100%;
  max-width: none;
  /* Astra applique « padding: 12px 16px » aux champs ; la maquette les veut
     alignés sur le libellé. */
  padding-inline: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .35s ease;
}

div.wpforms-container-full .wpforms-form textarea,
div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium {
  height: 150px;
  padding-block: 1rem;
  resize: vertical;
}

div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
  outline: none;
  border-bottom-color: var(--terra);
  box-shadow: none;
  background: transparent;
}

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
  color: rgba(94, 110, 100, .55);
}

/* Liste déroulante : flèche dessinée, sans cadre natif */
div.wpforms-container-full .wpforms-form select {
  appearance: none;
  -webkit-appearance: none;
  /* WPForms impose ce retrait depuis un bloc @media : seule exception où
     l'on force la déclaration, pour aligner la liste sur les autres champs. */
  padding-left: 0 !important;
  padding-right: 1.75rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) calc(50% + 2px), calc(100% - 7px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Bouton d'envoi : reprise du composant .btn */
.wpforms-container .wpforms-submit-container {
  padding-top: .75rem;
}

.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.05rem 1.9rem;
  background: var(--terra);
  color: #fff;
  border: 1px solid var(--terra);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .4s var(--ease), border-color .4s ease, transform .4s var(--ease);
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* Messages d'erreur */
.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error {
  display: block;
  margin-top: .35rem;
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #b3261e;
}

.wpforms-container input.wpforms-error,
.wpforms-container select.wpforms-error,
.wpforms-container textarea.wpforms-error {
  border-bottom-color: #b3261e;
}

/* Confirmation après envoi */
.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full {
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: rgba(46, 158, 85, .1);
  border: 1px solid rgba(46, 158, 85, .35);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-small);
}

.wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }

/* Piège à robots classique de WPForms : jamais visible.
   Le leurre du dispositif anti-spam récent est masqué par le script du
   plugin lui-même ; on ne le cible pas ici, son identifiant varie. */
.wpforms-container .wpforms-field-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
