/* ============================================================
   PS Pattern — Form Pro Escape (Figma 16113:3373)
   Section claire : header centré + 3 pills infos + wrapper FF
   full-width (PAS de aside ni map, contrairement à ps-form-fluentform).
   Surcharge Fluent Forms réutilise les règles de ps-form-fluentform.css
   via .ps-form-fluentform-base (classe parente partagée) — voir le HTML.
   Tokens : tokens.css.
   ============================================================ */

.ps-form-pro {
  position: relative;
  background-color: var(--ps-color-white);
  color: var(--ps-color-black);
  padding-block: var(--ps-spacing-120);
  padding-inline: clamp(2rem, 3.6vw, 5rem);
  overflow-x: clip;
  overflow-y: visible;
}

.ps-form-pro__coolshape {
  position: absolute;
  top: 60px;
  right: 0;
  width: 990px;
  max-width: 67%;
  z-index: 0;
  pointer-events: none;
}
.ps-form-pro__coolshape svg,
.ps-form-pro__coolshape img { display: block; width: 100%; height: auto; opacity: 0.12; }

.ps-form-pro__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ps-spacing-40);
}

.ps-form-pro__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ps-spacing-16);
  text-align: left;
}
.ps-form-pro__eyebrow {
  margin: 0;
  font-weight: var(--ps-font-weight-bold);
  font-size: var(--ps-font-size-14);
  letter-spacing: var(--ps-letter-spacing-eyebrow);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.62);
}
.ps-form-pro__title {
  margin: 0;
  max-width: 960px;
  font-weight: var(--ps-font-weight-light);
  font-size: clamp(2.25rem, 4.5vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--ps-color-black);
}

/* 3 pills infos pratiques (réponse 24h / ligne / email) */
.ps-form-pro__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps-spacing-25);
  justify-content: flex-start;
}
.ps-form-pro__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ps-spacing-10);
  font-size: var(--ps-font-size-15);
  color: rgba(0, 0, 0, 0.78);
}
.ps-form-pro__pill svg {
  color: var(--ps-color-action-primary);
  flex-shrink: 0;
}
.ps-form-pro__pill a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.24);
  transition: border-color 0.15s ease;
}
.ps-form-pro__pill a:hover { border-color: var(--ps-color-black); }

/* Wrapper carte du formulaire — fond gris opaque, masque le coolshape derrière */
.ps-form-pro__form-card {
  position: relative;
  z-index: 2;
  background-color: #f6f6f6;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: var(--ps-spacing-40);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.ps-form-pro__rgpd {
  margin: 0;
  text-align: left;
  font-size: var(--ps-font-size-12);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.52);
}

/* ----------------------------------------------------------
   Surcharge Fluent Forms — DA PS (cible .ps-form-pro)
   Mêmes règles que ps-form-fluentform.css mais cibler le wrapper PRO.
   ---------------------------------------------------------- */

.ps-form-pro .ff-el-form-control,
.ps-form-pro .frm-fluent-form input[type="text"],
.ps-form-pro .frm-fluent-form input[type="email"],
.ps-form-pro .frm-fluent-form input[type="tel"],
.ps-form-pro .frm-fluent-form input[type="number"],
.ps-form-pro .frm-fluent-form input[type="url"],
.ps-form-pro .frm-fluent-form input[type="date"],
.ps-form-pro .frm-fluent-form textarea,
.ps-form-pro .frm-fluent-form select {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--ps-font-family-brand);
  font-size: var(--ps-font-size-15);
  line-height: 1.4;
  color: var(--ps-color-black);
  background-color: var(--ps-color-white);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ps-form-pro .ff-el-form-control:focus,
.ps-form-pro .frm-fluent-form input:focus,
.ps-form-pro .frm-fluent-form textarea:focus,
.ps-form-pro .frm-fluent-form select:focus {
  outline: none;
  border-color: var(--ps-color-action-primary);
  box-shadow: 0 0 0 3px rgba(255, 3, 8, 0.12);
}

.ps-form-pro .frm-fluent-form textarea { min-height: 140px; resize: vertical; }

.ps-form-pro .ff-el-input--label label,
.ps-form-pro .frm-fluent-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: var(--ps-font-weight-bold);
  font-size: var(--ps-font-size-12);
  letter-spacing: var(--ps-letter-spacing-eyebrow-sm);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.72);
}

.ps-form-pro .ff-el-is-required .ff-el-input--label label::after,
.ps-form-pro .frm-fluent-form .ff-el-is-required label::after {
  content: " *";
  color: var(--ps-color-action-primary);
}

.ps-form-pro .ff-el-group { margin-bottom: var(--ps-spacing-25); }

/* Masquer <hr/> auto-injecté par Fluent Forms avant chaque section_break */
.ps-form-pro .frm-fluent-form hr { display: none; }

/* Section dividers — pastille numérotée + titre large + trait sous */
.ps-form-pro .frm-fluent-form { counter-reset: ps-form-section; }
.ps-form-pro .ff-el-section-break {
  counter-increment: ps-form-section;
  margin: var(--ps-spacing-40) 0 var(--ps-spacing-25);
  padding: 0 0 var(--ps-spacing-16);
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.ps-form-pro .frm-fluent-form > .ff-el-section-break:first-of-type { margin-top: 0; }
.ps-form-pro .ff-el-section-break h2,
.ps-form-pro .ff-el-section-break h3,
.ps-form-pro .ff-el-section-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--ps-spacing-16);
  font-family: var(--ps-font-family-brand);
  font-weight: var(--ps-font-weight-bold);
  font-size: clamp(1.1rem, 1.6vw, 20px);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ps-color-black);
}
.ps-form-pro .ff-el-section-break h2::before,
.ps-form-pro .ff-el-section-break h3::before,
.ps-form-pro .ff-el-section-title::before {
  content: counter(ps-form-section, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-color: var(--ps-color-action-primary);
  color: var(--ps-color-action-primary-fg);
  border-radius: 999px;
  font-family: var(--ps-font-family-brand);
  font-weight: var(--ps-font-weight-bold);
  font-size: 12px;
  letter-spacing: 0;
}

/* Submit button align right, sm-fit (vs full-width Contact) */
.ps-form-pro .ff-btn-submit,
.ps-form-pro .frm-fluent-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-spacing-10);
  padding: var(--ps-spacing-19) var(--ps-spacing-33);
  font-family: var(--ps-font-family-brand);
  font-weight: var(--ps-font-weight-medium);
  font-size: var(--ps-font-size-16);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  background-color: var(--ps-color-action-primary);
  border: 1px solid var(--ps-color-action-primary);
  border-radius: var(--ps-radius-button-pill);
  color: var(--ps-color-action-primary-fg);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ps-form-pro .ff-btn-submit:hover,
.ps-form-pro .frm-fluent-form button[type="submit"]:hover {
  background-color: var(--ps-color-action-primary-hover);
  border-color: var(--ps-color-action-primary-hover);
}
.ps-form-pro .ff_submit_btn_wrapper { text-align: right; margin-top: var(--ps-spacing-16); }

.ps-form-pro .error,
.ps-form-pro .ff-el-is-error .ff-el-form-control { border-color: var(--ps-color-action-primary); }
.ps-form-pro .error_msg,
.ps-form-pro .text-danger {
  margin-top: 6px;
  font-size: var(--ps-font-size-12);
  color: var(--ps-color-action-primary);
}

.ps-form-pro .ff-message-success,
.ps-form-pro .ff_message_success {
  padding: var(--ps-spacing-25);
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  font-size: var(--ps-font-size-16);
  color: var(--ps-color-black);
}

@media (max-width: 768px) {
  .ps-form-pro { padding-block: var(--ps-spacing-64); }
  .ps-form-pro__form-card { padding: var(--ps-spacing-32) var(--ps-spacing-25); }
  .ps-form-pro__pills { gap: var(--ps-spacing-16); }
}

/* ----------------------------------------------------------
   Modifier --centered : header / pills / rgpd centrés
   Utilisé sur Location & Vente (Figma 16113:2006).
   Transport reste left-aligned (S7).
   ---------------------------------------------------------- */
.ps-form-pro--centered .ps-form-pro__header {
  align-items: center;
  text-align: center;
}
.ps-form-pro--centered .ps-form-pro__title {
  margin-inline: auto;
}
.ps-form-pro--centered .ps-form-pro__pills {
  justify-content: center;
}
.ps-form-pro--centered .ps-form-pro__rgpd {
  text-align: center;
}