/* ============================================================
   PS Pattern — Section 06 Formulaire Contact (Figma 16113:5076)
   Section claire : header centré + grid 2 col (form / carte infos).
   Wrapper Fluent Forms (.ff-*) surchargé via .ps-form-fluentform.
   Tokens : tokens.css.
   ============================================================ */

.ps-form-fluentform {
  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-fluentform__coolshape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1667px;
  max-width: none;
  z-index: 0;
  pointer-events: none;
}
.ps-form-fluentform__coolshape img {
  display: block;
  width: 100%;
  height: auto;
}

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

.ps-form-fluentform__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ps-spacing-16);
  text-align: center;
}

.ps-form-fluentform__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-fluentform__title {
  margin: 0;
  max-width: 800px;
  font-weight: var(--ps-font-weight-light);
  font-size: clamp(2.5rem, 5vw, 72px);
  line-height: 1.12;
  letter-spacing: -0.05em;
  color: var(--ps-color-black);
}

/* Grid 2 col — stretch pour matcher hauteur form / côté droit */
.ps-form-fluentform__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: stretch;
}

.ps-form-fluentform__form-col {
  background-color: var(--ps-color-white);
  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);
  display: flex;
  flex-direction: column;
}
.ps-form-fluentform__form-host {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.ps-form-fluentform__form-host .frm-fluent-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------------------
   Surcharge Fluent Forms — DA PS
   Cibler .ps-form-fluentform .ff-* (préfixe Fluent Forms)
   ---------------------------------------------------------- */

.ps-form-fluentform .ff-el-form-control,
.ps-form-fluentform .frm-fluent-form input[type="text"],
.ps-form-fluentform .frm-fluent-form input[type="email"],
.ps-form-fluentform .frm-fluent-form input[type="tel"],
.ps-form-fluentform .frm-fluent-form input[type="number"],
.ps-form-fluentform .frm-fluent-form textarea,
.ps-form-fluentform .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-fluentform .ff-el-form-control:focus,
.ps-form-fluentform .frm-fluent-form input:focus,
.ps-form-fluentform .frm-fluent-form textarea:focus,
.ps-form-fluentform .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-fluentform .frm-fluent-form textarea {
  min-height: 140px;
  resize: vertical;
}

.ps-form-fluentform .ff-el-input--label label,
.ps-form-fluentform .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-fluentform .ff-el-is-required .ff-el-input--label label::after,
.ps-form-fluentform .frm-fluent-form .ff-el-is-required label::after {
  content: " *";
  color: var(--ps-color-action-primary);
}

/* Espacement standard entre champs (layout 1 colonne, abandon du 2-col après essais FF) */
.ps-form-fluentform .ff-el-group {
  margin-bottom: var(--ps-spacing-25);
}

/* Submit button en bas, plein cadre */
.ps-form-fluentform .ff_submit_btn_wrapper {
  margin-top: var(--ps-spacing-16);
}

/* Masquer le <hr/> auto-injecté par Fluent Forms avant chaque section_break (sinon doublon avec nos traits ::before/::after) */
.ps-form-fluentform .frm-fluent-form hr {
  display: none;
}

/* Section dividers — titre encadré par 2 traits (label "Votre piano", "Vos coordonnées"...) */
.ps-form-fluentform .ff-el-section-break {
  margin: var(--ps-spacing-25) 0 var(--ps-spacing-16);
  padding: 0;
  border: 0;
}
.ps-form-fluentform .frm-fluent-form > .ff-el-section-break:first-of-type {
  margin-top: 0;
}
.ps-form-fluentform .ff-el-section-break h2,
.ps-form-fluentform .ff-el-section-break h3,
.ps-form-fluentform .ff-el-section-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--ps-spacing-16);
  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.62);
}
.ps-form-fluentform .ff-el-section-break h2::before,
.ps-form-fluentform .ff-el-section-break h2::after,
.ps-form-fluentform .ff-el-section-break h3::before,
.ps-form-fluentform .ff-el-section-break h3::after,
.ps-form-fluentform .ff-el-section-title::before,
.ps-form-fluentform .ff-el-section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.14);
}
/* (margin-top de la 1re section déjà géré au-dessus via :not(:first-of-type)) */

/* Radios — type d'instrument */
.ps-form-fluentform .ff-el-form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: var(--ps-spacing-16);
  margin-bottom: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ps-form-fluentform .ff-el-form-check:hover {
  border-color: rgba(0, 0, 0, 0.4);
}
.ps-form-fluentform .ff-el-form-check input[type="radio"],
.ps-form-fluentform .ff-el-form-check input[type="checkbox"] {
  accent-color: var(--ps-color-action-primary);
}

/* Submit button — surcharge en CTA primaire rouge full width */
.ps-form-fluentform .ff-btn-submit,
.ps-form-fluentform .frm-fluent-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-spacing-10);
  width: 100%;
  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-fluentform .ff-btn-submit:hover,
.ps-form-fluentform .frm-fluent-form button[type="submit"]:hover {
  background-color: var(--ps-color-action-primary-hover);
  border-color: var(--ps-color-action-primary-hover);
}

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

/* Success message */
.ps-form-fluentform .ff-message-success,
.ps-form-fluentform .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);
}

/* ----------------------------------------------------------
   Côté droit — Carte infos + map
   ---------------------------------------------------------- */
.ps-form-fluentform__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

/* Carte noire infos */
.ps-contact-card {
  background-color: var(--ps-color-black);
  color: var(--ps-color-white);
  border-radius: 20px;
  padding: var(--ps-spacing-32);
}
.ps-contact-card__title {
  margin: 0 0 var(--ps-spacing-25);
  font-weight: var(--ps-font-weight-light);
  font-size: var(--ps-font-size-28);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ps-contact-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ps-spacing-25);
}
.ps-contact-card__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--ps-spacing-16);
  align-items: start;
}
.ps-contact-card__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--ps-color-white);
  flex-shrink: 0;
}
.ps-contact-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ps-contact-card__label {
  margin: 0;
  font-weight: var(--ps-font-weight-bold);
  font-size: var(--ps-font-size-11);
  letter-spacing: var(--ps-letter-spacing-eyebrow-sm);
  text-transform: uppercase;
  color: var(--ps-color-on-dark-62);
}
.ps-contact-card__value {
  margin: 0;
  font-size: var(--ps-font-size-15);
  line-height: 1.55;
  color: var(--ps-color-white);
}
.ps-contact-card__value strong { font-weight: var(--ps-font-weight-bold); }
.ps-contact-card__value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--ps-color-on-dark-45);
  transition: border-color 0.15s ease;
}
.ps-contact-card__value a:hover { border-color: var(--ps-color-white); }
.ps-contact-card__hint {
  margin: 4px 0 0;
  font-size: var(--ps-font-size-12);
  font-style: italic;
  color: var(--ps-color-on-dark-62);
}

/* Map block — étirée pour équilibrer hauteur form / aside */
.ps-contact-map {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  flex: 1 1 auto;
  min-height: 460px;
  background-color: var(--ps-color-black);
  box-shadow: 0 14px 32px 0 rgba(0, 0, 0, 0.08);
}
.ps-contact-map__iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: 0;
  filter: saturate(0.92);
}
.ps-contact-map__cta {
  position: absolute;
  bottom: var(--ps-spacing-16);
  right: var(--ps-spacing-16);
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* RGPD line */
.ps-form-fluentform__rgpd {
  margin: 0;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  font-size: var(--ps-font-size-12);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.52);
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .ps-form-fluentform__grid {
    grid-template-columns: 1fr;
    gap: var(--ps-spacing-40);
  }
}

@media (max-width: 768px) {
  .ps-form-fluentform {
    padding-block: var(--ps-spacing-64);
  }
  .ps-form-fluentform__form-col {
    padding: var(--ps-spacing-32) var(--ps-spacing-25);
  }
  .ps-contact-card {
    padding: var(--ps-spacing-25);
  }
  .ps-form-fluentform .ff-el-form-check {
    display: flex;
    width: 100%;
  }
}