/* ==========================================================================
   DIVI 5 FORMULAIRES
   Source : divi5-toolkit (cjsimon2/Divi5-ToolKit)
   Adapté pour : Terre et Saveurs

   Paste into: Divi > Theme Options > Custom CSS
   Modules : Contact Form, Email Optin, Login, Signup, CF7 Styler (5.3+)
   Note : DIVI 5.3 (avril 2026) ajoute l'édition pseudo-classes :checked/:focus
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens formulaires
   -------------------------------------------------------------------------- */
:root {
  --form-border: #d1d5db;
  --form-border-focus: #2ea3f2;
  --form-border-error: #ef4444;
  --form-border-success: #10b981;
  --form-bg: #ffffff;
  --form-bg-disabled: #f3f4f6;
  --form-text: #111827;
  --form-text-placeholder: #9ca3af;
  --form-text-label: #374151;
  --form-radius: 6px;
  --form-padding-y: 0.625rem;
  --form-padding-x: 0.875rem;
  --form-touch-min: 44px;  /* WCAG 2.5.8 */
}

/* --------------------------------------------------------------------------
   Champs texte, textarea, select
   -------------------------------------------------------------------------- */
.et_pb_contact_field input[type="text"],
.et_pb_contact_field input[type="email"],
.et_pb_contact_field input[type="tel"],
.et_pb_contact_field input[type="url"],
.et_pb_contact_field input[type="number"],
.et_pb_contact_field input[type="password"],
.et_pb_contact_field textarea,
.et_pb_contact_field select,
.et_pb_newsletter_field input,
.et_pb_login_form input {
  width: 100% !important;
  min-height: var(--form-touch-min);
  padding: var(--form-padding-y) var(--form-padding-x) !important;
  background: var(--form-bg) !important;
  border: 1px solid var(--form-border) !important;
  border-radius: var(--form-radius) !important;
  color: var(--form-text) !important;
  font-size: 1rem !important;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Focus (WCAG 2.4.7) */
.et_pb_contact_field input:focus,
.et_pb_contact_field textarea:focus,
.et_pb_contact_field select:focus,
.et_pb_newsletter_field input:focus,
.et_pb_login_form input:focus {
  outline: none !important;
  border-color: var(--form-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(46, 163, 242, 0.2) !important;
}

/* Active */
.et_pb_contact_field input:active,
.et_pb_contact_field textarea:active,
.et_pb_newsletter_field input:active {
  border-color: var(--form-border-focus) !important;
}

/* Placeholder */
.et_pb_contact_field ::placeholder,
.et_pb_newsletter_field ::placeholder {
  color: var(--form-text-placeholder);
  opacity: 1;
}

/* Labels */
.et_pb_contact_field .et_pb_contact_field_options_title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--form-text-label);
  margin-bottom: 0.375rem;
}

.et_pb_contact_field.required .et_pb_contact_field_options_title::after {
  content: ' *';
  color: var(--form-border-error);
}

/* --------------------------------------------------------------------------
   Cases à cocher (checkbox)
   -------------------------------------------------------------------------- */
.et_pb_contact_field_checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--form-touch-min);
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: calc(1.25rem + 0.5rem);
}

.et_pb_contact_field_checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  cursor: pointer;
}

.et_pb_contact_field_checkbox label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  background: var(--form-bg);
  border: 2px solid var(--form-border);
  border-radius: 4px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.et_pb_contact_field_checkbox input:checked + label::before {
  background: var(--form-border-focus);
  border-color: var(--form-border-focus);
}

.et_pb_contact_field_checkbox input:checked + label::after {
  content: '';
  position: absolute;
  left: 0.375rem;
  top: 50%;
  width: 0.4rem;
  height: 0.7rem;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: translateY(-65%) rotate(45deg);
}

.et_pb_contact_field_checkbox input:focus + label::before {
  box-shadow: 0 0 0 3px rgba(46, 163, 242, 0.3);
}

/* --------------------------------------------------------------------------
   Boutons radio
   -------------------------------------------------------------------------- */
.et_pb_contact_field_radio label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--form-touch-min);
  cursor: pointer;
  position: relative;
  padding-left: calc(1.25rem + 0.5rem);
}

.et_pb_contact_field_radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.et_pb_contact_field_radio label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  background: var(--form-bg);
  border: 2px solid var(--form-border);
  border-radius: 50%;
  transition: border-color 0.15s ease;
}

.et_pb_contact_field_radio input:checked + label::before {
  border-color: var(--form-border-focus);
}

.et_pb_contact_field_radio input:checked + label::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--form-border-focus);
}

.et_pb_contact_field_radio input:focus + label::before {
  box-shadow: 0 0 0 3px rgba(46, 163, 242, 0.3);
}

/* --------------------------------------------------------------------------
   États d'erreur
   -------------------------------------------------------------------------- */
.et_pb_contact_field.et_contact_error input,
.et_pb_contact_field.et_contact_error textarea,
.et_pb_contact_field.et_contact_error select {
  border-color: var(--form-border-error) !important;
  background: rgba(239, 68, 68, 0.04) !important;
}

/* --------------------------------------------------------------------------
   Bouton de soumission
   -------------------------------------------------------------------------- */
body .et_pb_contact_form_container .et_pb_button,
body .et_pb_newsletter_form .et_pb_button {
  min-height: var(--form-touch-min);
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  border-radius: var(--form-radius) !important;
}

/* --------------------------------------------------------------------------
   Newsletter inline (email + bouton sur une ligne)
   -------------------------------------------------------------------------- */
.et_pb_newsletter.newsletter-inline .et_pb_newsletter_fields {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.et_pb_newsletter.newsletter-inline .et_pb_newsletter_field {
  flex: 1 1 240px;
}

.et_pb_newsletter.newsletter-inline .et_pb_newsletter_button_wrap {
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .et_pb_newsletter.newsletter-inline .et_pb_newsletter_button_wrap {
    flex: 1 1 100%;
  }
  .et_pb_newsletter.newsletter-inline .et_pb_button {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .et_pb_contact_field input,
  .et_pb_contact_field textarea,
  .et_pb_contact_field select,
  .et_pb_contact_field_checkbox label::before,
  .et_pb_contact_field_radio label::before {
    transition: none !important;
  }
}