/* ==========================================================================
   FORMS - inputs, checkboxes, fieldsets, Drupal buttons, Webform.
   The contact form (webform) is rendered in a `webform` Paragraph.
   ========================================================================== */
.form-control, .form-select, input[type='text'], input[type='email'], input[type='tel'],
input[type='url'], input[type='number'], input[type='password'], input[type='search'],
textarea, select {
  background-color: var(--epsa-navy);
  color: var(--epsa-ink);
  border: 1px solid var(--epsa-line);
  border-radius: var(--epsa-radius);
  padding: var(--space-4) var(--space-4);
  font-size: var(--font-size-base);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  background-color: var(--epsa-navy);
  color: var(--epsa-ink);
  border-color: var(--epsa-gold);
  box-shadow: 0 0 0 0.15rem rgba(225, 177, 41, 0.25);
  outline: none;
}
::placeholder { color: var(--epsa-muted); opacity: 1; }
textarea { resize: vertical; min-height: 9rem; }
input[type='file'] { color: var(--epsa-text); padding: var(--space-2) var(--space-3); }
input[type='file']::file-selector-button {
  margin-right: var(--space-4); padding: var(--space-2) var(--space-4); border: 1px solid var(--epsa-gold);
  border-radius: var(--epsa-radius); background: transparent; color: var(--epsa-gold); font-weight: 600; cursor: pointer;
}

label, .form-item__label, .form-label { font-weight: 600; font-size: var(--font-size-m); color: var(--epsa-ink); }
.form-required::after, .js-form-required::after { content: ' *'; color: var(--epsa-gold); background: none; }
.description, .form-text, .webform-element-description { color: var(--epsa-muted); font-size: var(--font-size-sm); }
.form-item, .js-form-item { margin-bottom: var(--space-5); }

/* Checkboxes / radios */
.form-check-input { background-color: var(--epsa-navy); border-color: rgba(251, 250, 248, 0.4); }
.form-check-input:checked { background-color: var(--epsa-gold); border-color: var(--epsa-gold); }
.form-check-input:focus { border-color: var(--epsa-gold); box-shadow: 0 0 0 0.15rem rgba(225, 177, 41, 0.25); }
.form-check-label { font-weight: 400; color: var(--epsa-text); }

/* Fieldsets (webform "Quel shift préparez-vous ?") */
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-6); min-width: 0; }
fieldset > legend, .fieldset-legend, legend { float: none; width: auto; margin-bottom: var(--space-3); font-size: var(--font-size-base); font-weight: 600; color: var(--epsa-ink); }
fieldset .form-checkboxes, fieldset .form-radios, fieldset .webform-options-display-two-columns,
fieldset .fieldset-wrapper > .form-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-2) var(--space-5);
}

/* Drupal / Webform buttons -> gold */
.form-submit, .webform-button--submit, input[type='submit'], button[type='submit'].button {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--epsa-gold);
  border-radius: var(--epsa-radius);
  background: var(--epsa-gold);
  color: var(--epsa-navy);
  font-size: var(--font-size-m);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.form-submit:hover, .webform-button--submit:hover { background: var(--epsa-ink); border-color: var(--epsa-ink); color: var(--epsa-navy); }
.form-actions { margin-top: var(--space-6); }

/* Webform: two-column grid of the text inputs. */
.webform-submission-form { max-width: 62rem; }
.webform-submission-form .webform-flexbox { gap: var(--space-4) var(--space-5); }
.webform-submission-form .js-webform-type-textfield,
.webform-submission-form .js-webform-type-email,
.webform-submission-form .js-webform-type-tel { margin-bottom: var(--space-4); }

/* Validation + messages */
.is-invalid, .error, .form-item--error input, .form-item--error textarea { border-color: #e5604d; }
.form-item--error-message, .invalid-feedback { color: #f08a7a; font-size: var(--font-size-sm); }
.alert { border-radius: var(--epsa-radius); border: 1px solid var(--epsa-line); background: var(--epsa-navy-light); color: var(--epsa-ink); }
.alert-success, .webform-confirmation { border-color: var(--epsa-gold); }