/* ============================================================
   FORMS – css/components/forms.css
   Styles pour le webform de contact
   ============================================================ */

/* ── Wrapper webform ────────────────────────────────────────── */

.webform-submission-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Form items ─────────────────────────────────────────────── */

.webform-submission-form .form-item {
  margin: 0 0 var(--space-2);
}

/* ── Inputs & textarea ──────────────────────────────────────── */

.webform-submission-form .form-text,
.webform-submission-form .form-email,
.webform-submission-form .form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--clr-text-default);
  background: var(--palette-gray-75);
  border: 1px solid transparent;
  border-radius: 0;
  outline: none;
  transition: border-color var(--transition-base), background-color var(--transition-base);
  box-sizing: border-box;
}

.webform-submission-form .form-text::placeholder,
.webform-submission-form .form-email::placeholder,
.webform-submission-form .form-textarea::placeholder {
  color: var(--clr-text-muted);
  font-size: var(--fs-sm);
}

.webform-submission-form .form-text:focus,
.webform-submission-form .form-email:focus,
.webform-submission-form .form-textarea:focus {
  border-color: var(--clr-primary);
  background: var(--palette-white);
  outline: none;
}

/* ── Textarea ───────────────────────────────────────────────── */

.webform-submission-form .form-textarea-wrapper {
  width: 100%;
}

.webform-submission-form .form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* ── Actions / submit ───────────────────────────────────────── */

.webform-submission-form .form-actions {
  margin: var(--space-4) 0 0;
  display: flex;
  justify-content: flex-end;
}

.webform-submission-form .webform-button--submit {
  padding: var(--space-3) var(--space-8);
  background: var(--clr-primary);
  color: var(--palette-white);
  border: none;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-xlbold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.webform-submission-form .webform-button--submit:hover {
  background: var(--palette-blue-600);
}

/* ── Login form ─────────────────────────────────────────────── */

.user-login-form {
  max-width: 400px;
  margin: var(--space-12) auto;
  padding: var(--space-8);
  background: var(--palette-white);
  box-shadow: var(--shadow-md);
}

.user-login-form .form-item {
  margin: 0 0 var(--space-4);
}

.user-login-form label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--clr-text-muted);
  margin-bottom: var(--space-2);
}

.user-login-form .form-text {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--clr-text-default);
  background: var(--palette-gray-75);
  border: 1px solid transparent;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.user-login-form .form-text:focus {
  border-color: var(--clr-primary);
  background: var(--palette-white);
}

.user-login-form .form-actions {
  margin-top: var(--space-6);
}

.user-login-form .form-submit {
  width: 100%;
  padding: var(--space-3) var(--space-8);
  background: var(--clr-primary);
  color: var(--palette-white);
  border: none;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-xlbold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.user-login-form .form-submit:hover {
  background: var(--palette-blue-600);
}