/* ==========================================================
   VEOLIA — REUSABLE DRUPAL WEBFORM
   Single-page responsive form
   ========================================================== */

form.webform-submission-form {
  --veolia-red: #e30613;
  --veolia-red-dark: #b8000b;
  --veolia-text: #292929;
  --veolia-muted: #575757;
  --veolia-border: #858585;
  --veolia-field: #f7f7f7;
  --veolia-focus: #0072ce;

  box-sizing: border-box !important;
  width: calc(100% - 32px) !important;
  max-width: 960px !important;
  margin: 32px auto !important;
  padding: 34px 36px !important;

  border: 0 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 12px 42px rgb(0 0 0 / 7%) !important;

  color: var(--veolia-text) !important;
  font-family: "Noto Sans", Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.5;
}

form.webform-submission-form *,
form.webform-submission-form *::before,
form.webform-submission-form *::after {
  box-sizing: border-box;
}

/* ==========================================================
   1. SINGLE-PAGE LAYOUT
   ========================================================== */

form.webform-submission-form .webform-progress {
  display: none !important;
}

form.webform-submission-form .form-item {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
}

form.webform-submission-form .form-wrapper {
  min-width: 0;
}

form.webform-submission-form fieldset {
  min-width: 0;
}

form.webform-submission-form .fieldset-wrapper {
  min-width: 0;
}

/* Do not override Drupal #states display/visibility. */

form.webform-submission-form [hidden] {
  display: none !important;
}

/* ==========================================================
   2. LABELS
   ========================================================== */

form.webform-submission-form
label:not(.option) {
  display: block;
  margin: 0 0 8px !important;

  color: var(--veolia-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
}

form.webform-submission-form
.form-required {
  background: none !important;
}

form.webform-submission-form
.form-required::before {
  content: none !important;
}

form.webform-submission-form
.form-required::after {
  content: " *" !important;
  display: inline !important;
  position: static !important;

  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  background: none !important;
  color: var(--veolia-red-dark) !important;
}

/* ==========================================================
   3. CLIENT TYPE — RADIO CARDS
   ========================================================== */

form.webform-submission-form
.form-radios:has(input[name="je_suis"]) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-count: auto !important;
  gap: 12px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

form.webform-submission-form
.form-radios:has(input[name="je_suis"])
:is(.js-form-type-radio, .form-type-radio) {
  display: flex !important;
  position: relative !important;

  align-items: center !important;
  flex-direction: row !important;
  gap: 12px !important;

  min-width: 0 !important;
  min-height: 60px !important;

  margin: 0 !important;
  padding: 12px 16px !important;

  border: 1px solid var(--veolia-border) !important;
  border-radius: 8px !important;
  background: #fff !important;

  cursor: pointer !important;
  break-inside: avoid !important;
}

form.webform-submission-form
.form-radios:has(input[name="je_suis"])
:is(.js-form-type-radio, .form-type-radio):has(input:checked) {
  border-color: var(--veolia-red) !important;
  background: #fff5f5 !important;
  box-shadow: inset 0 0 0 1px var(--veolia-red) !important;
}

form.webform-submission-form
.form-radios:has(input[name="je_suis"])
:is(.js-form-type-radio, .form-type-radio):focus-within {
  outline: 3px solid var(--veolia-focus) !important;
  outline-offset: 2px !important;
}

/* Restore native clickable radio inputs. */

form.webform-submission-form
input[name="je_suis"] {
  appearance: auto !important;
  -webkit-appearance: radio !important;

  display: block !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;

  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 1 !important;
  clip: auto !important;
  clip-path: none !important;

  accent-color: var(--veolia-red) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

form.webform-submission-form
input[name="je_suis"]::before,
form.webform-submission-form
input[name="je_suis"]::after {
  content: none !important;
}

form.webform-submission-form
.form-radios:has(input[name="je_suis"])
.ui-front {
  flex: 0 0 20px !important;
  width: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

form.webform-submission-form
.form-radios:has(input[name="je_suis"])
label.option {
  display: block !important;
  position: static !important;

  flex: 1 1 auto !important;
  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--veolia-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;

  cursor: pointer !important;
}

form.webform-submission-form
.form-radios:has(input[name="je_suis"])
label.option::before,
form.webform-submission-form
.form-radios:has(input[name="je_suis"])
label.option::after {
  content: none !important;
}

/* ==========================================================
   4. INDIVIDUAL INFORMATION MESSAGE
   ========================================================== */

form.webform-submission-form
#edit-message-particulier {
  margin: 18px 0 24px !important;
  padding: 18px 20px !important;

  border: 0 !important;
  border-left: 4px solid var(--veolia-red) !important;
  border-radius: 6px !important;

  background: #f7f7f7 !important;
  color: var(--veolia-text) !important;

  font-size: 14px !important;
  line-height: 1.6 !important;
}

form.webform-submission-form
#edit-message-particulier p {
  margin: 0 !important;
}

/* ==========================================================
   5. PROFESSIONAL INFORMATION SECTION
   ========================================================== */

form.webform-submission-form
#edit-informations-professionnelles {
  width: 100%;
  margin: 24px 0 0;
  padding: 0;
}

/* ==========================================================
   6. TWO-COLUMN FIELD LAYOUT
   ========================================================== */

form.webform-submission-form
.webform-flexbox {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;

  gap: 20px !important;
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

form.webform-submission-form
.webform-flexbox > .webform-flex {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

form.webform-submission-form
.webform-flex--container {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

form.webform-submission-form
.webform-flexbox .form-item {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* ==========================================================
   7. INPUTS
   ========================================================== */

form.webform-submission-form
input:is(
  [type="text"],
  [type="email"],
  [type="tel"],
  [type="number"]
),
form.webform-submission-form
textarea.form-textarea,
form.webform-submission-form
select:not(.select2-hidden-accessible) {
  display: block;
  width: 100% !important;
  max-width: 100% !important;

  min-height: 50px !important;
  margin: 0 !important;
  padding: 12px 14px !important;

  border: 1px solid var(--veolia-border) !important;
  border-radius: 6px !important;

  background-color: var(--veolia-field) !important;
  color: var(--veolia-text) !important;

  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;

  text-transform: none !important;
  box-shadow: none !important;
}

form.webform-submission-form
textarea.form-textarea {
  height: auto !important;
  min-height: 100px !important;
  resize: vertical !important;
}

form.webform-submission-form
input::placeholder,
form.webform-submission-form
textarea::placeholder {
  color: #686868 !important;
  opacity: 1 !important;
}

/* ==========================================================
   8. NATIVE DROPDOWNS — ONE ARROW ONLY
   ========================================================== */

form.webform-submission-form
select:not(.select2-hidden-accessible) {
  appearance: none !important;
  -webkit-appearance: none !important;

  padding-right: 44px !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23292929' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-position: right 14px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;

  cursor: pointer !important;
}

/* ==========================================================
   9. JQUERY UI / SELECT2 DROPDOWNS
   ========================================================== */

form.webform-submission-form
.ui-selectmenu-button,
form.webform-submission-form
.select2-selection--single {
  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;

  margin: 0 !important;
  padding: 12px 42px 12px 14px !important;

  border: 1px solid var(--veolia-border) !important;
  border-radius: 6px !important;

  background-color: var(--veolia-field) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23292929' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-position: right 14px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;

  color: var(--veolia-text) !important;
  font-family: inherit !important;
  font-size: 16px !important;

  box-shadow: none !important;
  cursor: pointer !important;
}

form.webform-submission-form
.ui-selectmenu-button .ui-selectmenu-text,
form.webform-submission-form
.select2-selection__rendered {
  display: block !important;

  flex: 1 1 auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--veolia-text) !important;
  font-size: 16px !important;
  line-height: 24px !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Hide additional arrows from the theme. */

form.webform-submission-form
.ui-selectmenu-icon,
form.webform-submission-form
.ui-selectmenu-button > .ui-icon,
form.webform-submission-form
.select2-selection__arrow {
  display: none !important;
}

form.webform-submission-form
.ui-selectmenu-button::before,
form.webform-submission-form
.ui-selectmenu-button::after,
form.webform-submission-form
.select2-selection--single::before,
form.webform-submission-form
.select2-selection--single::after {
  content: none !important;
}

/* Dropdown menus outside the form. */

.veolia-dropdown-panel,
.veolia-dropdown-list {
  color: #292929;
  font-family: "Noto Sans", Arial, sans-serif !important;
  font-size: 16px !important;
}

.veolia-dropdown-panel.select2-dropdown {
  border: 1px solid #858585 !important;
  border-radius: 6px !important;
  background: #fff !important;
}

.veolia-dropdown-panel .ui-menu,
.veolia-dropdown-panel .select2-results__options,
.veolia-dropdown-list {
  max-height: 280px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  margin: 0 !important;
  padding: 6px !important;

  border-radius: 6px !important;
  background: #fff !important;
  list-style: none !important;
}

.veolia-dropdown-panel .ui-menu-item-wrapper,
.veolia-dropdown-list .ui-menu-item-wrapper,
.veolia-dropdown-panel .select2-results__option,
.veolia-dropdown-list .select2-results__option {
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 4px !important;

  background: #fff !important;
  color: #292929 !important;
  font-size: 15px !important;

  cursor: pointer !important;
}

.veolia-dropdown-panel .ui-state-active,
.veolia-dropdown-list .ui-state-active,
.veolia-dropdown-panel .select2-results__option--highlighted,
.veolia-dropdown-list .select2-results__option--highlighted {
  background: #fff0f1 !important;
  color: #b8000b !important;
}

/* ==========================================================
   10. CHECKBOXES — CONSENT
   ========================================================== */

form.webform-submission-form
.js-form-type-checkbox {
  display: flex !important;
  position: relative !important;

  align-items: flex-start !important;
  gap: 12px !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 0 18px !important;
  padding: 0 !important;
}

form.webform-submission-form
.js-form-type-checkbox > .ui-front {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

form.webform-submission-form
input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;

  display: inline-block !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;

  flex: 0 0 20px !important;

  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;

  margin: 2px 0 0 !important;
  padding: 0 !important;

  opacity: 1 !important;
  clip: auto !important;
  clip-path: none !important;

  accent-color: var(--veolia-red) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

form.webform-submission-form
.js-form-type-checkbox label.option {
  display: block !important;
  position: static !important;

  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--veolia-text) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;

  white-space: normal !important;
  overflow-wrap: break-word !important;

  cursor: pointer !important;
}

/* Remove theme-generated decorative checkboxes. */

form.webform-submission-form
.js-form-type-checkbox .checkbox-mark,
form.webform-submission-form
.js-form-type-checkbox label.option::before,
form.webform-submission-form
.js-form-type-checkbox label.option::after {
  display: none !important;
  content: none !important;
}

/* ==========================================================
   11. RECAPTCHA
   ========================================================== */

form.webform-submission-form
.g-recaptcha {
  max-width: 100%;
  margin: 20px 0 !important;
}

form.webform-submission-form
.g-recaptcha > div {
  max-width: 100%;
}

/* ==========================================================
   12. BUTTONS
   ========================================================== */

form.webform-submission-form
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap: 18px !important;
  margin: 24px 0 0 !important;
  padding: 22px 0 0 !important;

  border: 0 !important;
  background: transparent !important;
}

form.webform-submission-form
.webform-submit-wrapper {
  display: inline-flex;
  flex: 0 0 auto;

  width: auto;
  max-width: 100%;

  margin: 0 0 0 auto !important;
  padding: 0 !important;
}

form.webform-submission-form
.form-actions .webform-button--submit,
form.webform-submission-form
.form-actions [data-drupal-selector="edit-actions-submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 180px !important;
  max-width: 100% !important;
  min-height: 50px !important;

  margin: 0 !important;
  padding: 12px 28px !important;

  border: 1px solid var(--veolia-red) !important;
  border-radius: 999px !important;

  background: var(--veolia-red) !important;
  color: #fff !important;

  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 22px !important;

  text-align: center !important;
  text-transform: uppercase !important;

  box-shadow: 0 5px 14px rgb(227 6 19 / 12%) !important;
  cursor: pointer !important;
}

form.webform-submission-form
.form-actions .webform-button--submit:hover,
form.webform-submission-form
.form-actions [data-drupal-selector="edit-actions-submit"]:hover {
  background: var(--veolia-red-dark) !important;
  border-color: var(--veolia-red-dark) !important;
}

form.webform-submission-form
.form-actions .webform-button--submit:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Critical: allow JS to hide submission controls. */

form.webform-submission-form
.webform-submit-wrapper[hidden],
form.webform-submission-form
.webform-button--submit[hidden],
form.webform-submission-form
[data-drupal-selector="edit-actions-submit"][hidden],
form.webform-submission-form
.veolia-hide-submit {
  display: none !important;
}

/* Hide by default before JS initializes.
   Only on forms using je_suis. */

form.webform-submission-form:has(input[name="je_suis"])
.form-actions
:is(.webform-button--submit, [data-drupal-selector="edit-actions-submit"]) {
  display: none !important;
}

form.webform-submission-form.veolia-is-professional
.form-actions
:is(.webform-button--submit, [data-drupal-selector="edit-actions-submit"]):not([hidden]) {
  display: inline-flex !important;
}

/* ==========================================================
   13. FOCUS, ERRORS, ACCESSIBILITY
   ========================================================== */

form.webform-submission-form
:is(input, select, textarea, button, a):focus-visible,
form.webform-submission-form
.ui-selectmenu-button:focus-visible,
form.webform-submission-form
.select2-selection:focus-visible {
  outline: 3px solid var(--veolia-focus) !important;
  outline-offset: 3px !important;
}

form.webform-submission-form
:is(input, select, textarea).error,
form.webform-submission-form
[aria-invalid="true"] {
  border-color: var(--veolia-red-dark) !important;
}

form.webform-submission-form
.form-item--error-message {
  margin-top: 6px;
  color: #a3000d !important;
  font-size: 14px !important;
}

form.webform-submission-form
:is(.description, .webform-element-description, .form-item__description) {
  color: var(--veolia-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

form.webform-submission-form
.veolia-live-status {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: -1px !important;
  padding: 0 !important;

  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================
   14. RESPONSIVE — MOBILE AND TABLET
   ========================================================== */

@media (max-width: 700px) {
  form.webform-submission-form {
    width: calc(100% - 20px) !important;
    margin: 20px auto !important;
    padding: 24px 16px !important;
    border-radius: 12px !important;
  }

  form.webform-submission-form
  .webform-flexbox {
    flex-direction: column !important;
    gap: 0 !important;
  }

  form.webform-submission-form
  .webform-flexbox > .webform-flex {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  form.webform-submission-form
  .webform-submit-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
  }

  form.webform-submission-form
  .form-actions .webform-button--submit,
  form.webform-submission-form
  .form-actions [data-drupal-selector="edit-actions-submit"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 420px) {
  form.webform-submission-form
  .form-radios:has(input[name="je_suis"]) {
    grid-template-columns: 1fr !important;
  }

  form.webform-submission-form
  .form-radios:has(input[name="je_suis"])
  :is(.js-form-type-radio, .form-type-radio) {
    min-height: 54px !important;
  }
}

@media (forced-colors: active) {
  form.webform-submission-form
  .form-actions .webform-button--submit {
    border-color: ButtonText !important;
  }
}

/* ==========================================
   VEOLIA — RADIO BUTTONS FIX
   ========================================== */

/* Two-column layout */
form.webform-submission-form
.webform-options-display-two-columns:has(input[name="je_suis"]),
form.webform-submission-form
.form-radios:has(input[name="je_suis"]) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  column-count: auto !important;
}

/* Radio selection cards */
form.webform-submission-form
.js-form-type-radio:has(input[name="je_suis"]),
form.webform-submission-form
.form-type-radio:has(input[name="je_suis"]) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;

  position: relative !important;
  width: 100% !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 16px !important;

  border: 1px solid #858585 !important;
  border-radius: 8px !important;
  background: #fff !important;
  cursor: pointer !important;
  break-inside: avoid !important;
}

/* Selected card */
form.webform-submission-form
.js-form-type-radio:has(input[name="je_suis"]:checked),
form.webform-submission-form
.form-type-radio:has(input[name="je_suis"]:checked) {
  border-color: #e30613 !important;
  background: #fff5f5 !important;
  box-shadow: inset 0 0 0 1px #e30613 !important;
}

/* Put the radio BEFORE its label */
form.webform-submission-form
.js-form-type-radio:has(input[name="je_suis"]) > .ui-front,
form.webform-submission-form
.form-type-radio:has(input[name="je_suis"]) > .ui-front {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  order: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

form.webform-submission-form
input[name="je_suis"] {
  appearance: auto !important;
  -webkit-appearance: radio !important;
  display: inline-block !important;
  position: static !important;
  transform: none !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  opacity: 1 !important;
  accent-color: #e30613 !important;
  cursor: pointer !important;
}

/* Labels stay next to the radio */
form.webform-submission-form
.js-form-type-radio:has(input[name="je_suis"]) label.option,
form.webform-submission-form
.form-type-radio:has(input[name="je_suis"]) label.option {
  display: block !important;
  position: static !important;
  order: 1 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #292929 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

form.webform-submission-form
.js-form-type-radio:has(input[name="je_suis"]) label.option::before,
form.webform-submission-form
.js-form-type-radio:has(input[name="je_suis"]) label.option::after {
  content: none !important;
}

/* ==========================================
   VEOLIA — BUTTON DESIGN
   ========================================== */

form.webform-submission-form
.form-actions
:is(
  .webform-button--next,
  .webform-button--submit,
  [data-drupal-selector="edit-actions-next"],
  [data-drupal-selector="edit-actions-submit"]
) {
  border: 1px solid #e30613 !important;
  border-radius: 999px !important;
  background: #e30613 !important;
  color: #fff !important;

  min-width: 180px !important;
  min-height: 50px !important;
  padding: 12px 28px !important;

  font-family: "Noto Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

form.webform-submission-form
.form-actions
:is(.webform-button--next, .webform-button--submit):hover {
  background: #b8000b !important;
  border-color: #b8000b !important;
}

@media (max-width: 420px) {
  form.webform-submission-form
  .webform-options-display-two-columns:has(input[name="je_suis"]),
  form.webform-submission-form
  .form-radios:has(input[name="je_suis"]) {
    grid-template-columns: 1fr !important;
  }
}