.wp-block-formasuisse-contact-form .contact-form {
  box-sizing: border-box;
  background: var(--color-paper, #ffffff);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--color-rule, #d8dde3);
}

.wp-block-formasuisse-contact-form .form-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-light, #1c3b69);
  margin-bottom: 8px;
}

.wp-block-formasuisse-contact-form .contact-form h2 {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  margin: 0 0 12px;
}

.wp-block-formasuisse-contact-form .form-intro {
  font-size: 0.95rem;
  color: var(--color-text-sub);
  margin-bottom: 28px;
  line-height: 1.55;
}

.wp-block-formasuisse-contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}

.wp-block-formasuisse-contact-form .form-row.single {
  grid-template-columns: 1fr;
}

.wp-block-formasuisse-contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wp-block-formasuisse-contact-form .field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}

.wp-block-formasuisse-contact-form .field label .req,
.wp-block-formasuisse-contact-form .consent label .req {
  color: var(--color-cta);
  margin-left: 2px;
}

.wp-block-formasuisse-contact-form .field label .opt {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.78rem;
  margin-left: 4px;
}

.wp-block-formasuisse-contact-form .field input,
.wp-block-formasuisse-contact-form .field select,
.wp-block-formasuisse-contact-form .field textarea,
.wp-block-formasuisse-contact-form .field .fs-ph-edit {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--color-rule, #d8dde3);
  color: var(--color-text);
  transition:
    border-color 150ms ease-out,
    box-shadow 150ms ease-out;
}

/* Editor-only: inline-editable placeholder box. Styled like the input above but
   with muted text, so it reads as the placeholder while staying editable. The
   .fs-ph-edit class is never emitted by render.php (front end uses real inputs). */
.wp-block-formasuisse-contact-form .field .fs-ph-edit {
  color: var(--color-text-muted);
  min-height: 44px;
  cursor: text;
}
.wp-block-formasuisse-contact-form .field .fs-ph-edit.fs-ph-edit--area {
  min-height: 120px;
}

.wp-block-formasuisse-contact-form .field input:focus,
.wp-block-formasuisse-contact-form .field select:focus,
.wp-block-formasuisse-contact-form .field textarea:focus {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(6, 35, 67, 0.1);
}

.wp-block-formasuisse-contact-form .field textarea {
  resize: vertical;
  min-height: 120px;
}

.wp-block-formasuisse-contact-form .field input.mandatory-empty,
.wp-block-formasuisse-contact-form .field textarea.mandatory-empty {
  border-color: var(--color-cta);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.08);
}

/* ph-label inputs (Prénom / Nom / Entreprise) carry the field name as a
   placeholder so it can act as the label on mobile (see the 560px query). On
   desktop the visible <label> already names the field, so hide the duplicate
   placeholder text there. Fields with genuinely useful hint placeholders
   (e-mail example, phone example, message) are NOT ph-label, so their hints
   stay visible on desktop. */
.wp-block-formasuisse-contact-form .field input.ph-label::placeholder {
  color: transparent;
}

/* Segmented control (Mme / M) */
.wp-block-formasuisse-contact-form .seg {
  display: inline-flex;
  border: 1px solid var(--color-rule, #d8dde3);
  background: #fff;
}

.wp-block-formasuisse-contact-form .seg input {
  position: absolute;
  width: auto; /* undo .field input width:100% — these are visually hidden and would otherwise stretch to the viewport, causing horizontal overflow */
  opacity: 0;
  pointer-events: none;
}

.wp-block-formasuisse-contact-form .seg label {
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  border-right: 1px solid var(--color-rule, #d8dde3);
}

.wp-block-formasuisse-contact-form .seg label:last-of-type {
  border-right: 0;
}

.wp-block-formasuisse-contact-form .seg input:checked + label {
  background: var(--color-primary);
  color: #fff;
}

.wp-block-formasuisse-contact-form .consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--color-text-sub);
  margin-top: 14px;
}

.wp-block-formasuisse-contact-form .consent input {
  margin-top: 3px;
  accent-color: var(--color-primary);
}

.wp-block-formasuisse-contact-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-rule-soft, #ebeef1);
}

.wp-block-formasuisse-contact-form .form-actions .helper {
  font-size: 0.85rem;
  color: var(--color-text-sub);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wp-block-formasuisse-contact-form .form-actions .helper svg {
  color: var(--color-success);
}

.wp-block-formasuisse-contact-form .recaptcha-terms {
  margin-top: 16px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* Button base (satellite system) */
.wp-block-formasuisse-contact-form .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font: 600 0.95rem/1 var(--font-body);
  border-radius: var(--radius-sm, 3px);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  /* keep the label on one line + don't let the flex row squeeze the button */
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background 150ms ease-out,
    color 150ms ease-out;
}

.wp-block-formasuisse-contact-form .btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.wp-block-formasuisse-contact-form .btn-primary:hover {
  background: var(--color-primary-light, #1c3b69);
  color: #fff;
}

/* Submission feedback (toggled by the global contact_form_submit handler) */
.wp-block-formasuisse-contact-form .form-feedback {
  margin-top: 18px;
  padding: 16px 18px;
  font-size: 0.92rem;
  border-left: 3px solid;
}

.wp-block-formasuisse-contact-form .form-feedback[hidden] {
  display: none;
}

.wp-block-formasuisse-contact-form .form-feedback--ok {
  background: rgba(0, 100, 0, 0.06);
  border-left-color: var(--color-success);
  color: var(--color-text);
}

.wp-block-formasuisse-contact-form .form-feedback--err {
  background: rgba(255, 0, 0, 0.05);
  border-left-color: var(--color-cta);
  color: var(--color-text);
}

@media (max-width: 560px) {
  .wp-block-formasuisse-contact-form .form-row {
    grid-template-columns: 1fr;
  }

  /* Compact mobile form: placeholders act as labels (like the legacy contact
     form). Hide each field's visible label but keep it in the DOM (visually
     hidden) so screen readers still announce the field. Includes the Civilité
     field — its radiogroup carries aria-label="Civilité", and the Mme/M segment
     labels (inside .seg, not direct children) stay visible. */
  .wp-block-formasuisse-contact-form .field > label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .wp-block-formasuisse-contact-form .field {
    gap: 0;
  }
  /* Reveal the ph-label placeholders that are transparent on desktop. */
  .wp-block-formasuisse-contact-form .field input.ph-label::placeholder {
    color: var(--color-text-muted);
  }
}

/* --- Fixes: phone height, consent checkbox, button sizing --- */

/* Phone field (intl-tel-input): the JS wraps the input in .iti and sets an
   inline left padding for the flag; force matching top/bottom padding so the
   field height equals the other inputs (44px). */
.wp-block-formasuisse-contact-form .iti {
  display: block;
  width: 100%;
}
.wp-block-formasuisse-contact-form .field input[type="tel"] {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

/* Consent: keep the checkbox a fixed 18px box flush-left of its (wrapping)
   label, instead of stretching as a flex item. */
.wp-block-formasuisse-contact-form .consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* error state when the (mandatory) consent box is left unchecked */
.wp-block-formasuisse-contact-form .consent.mandatory-empty {
  color: var(--color-cta);
}
.wp-block-formasuisse-contact-form .consent.mandatory-empty input {
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
}