/* ============================================================
   Move&Shine — Formulaire de contact (WPForms)
   Chargé conditionnellement sur la page /contact/
   Dépend de : colors_and_type.css (tokens CSS)
   ============================================================ */

/* Fond brume dorée discrète — même esprit que /coachs/ et les pages disciplines */
#contact {
  position: relative;
  overflow: hidden;
}

#contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 10% 15%, rgba(201,162,74,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 90% 80%, rgba(201,162,74,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 50% 40%, rgba(201,162,74,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 30% 40% at 80% 10%, rgba(212,175,90,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 15% 85%, rgba(212,175,90,0.18) 0%, transparent 60%);
}

/* Paillettes dorées */
#contact::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at  8% 18%, rgba(232,203,138,0.90) 0px, rgba(232,203,138,0.90) 1.5px, transparent 2.5px),
    radial-gradient(circle at 82% 12%, rgba(212,175,90,0.75)  0px, rgba(212,175,90,0.75)  1px,   transparent 2px),
    radial-gradient(circle at 28% 68%, rgba(201,162,74,0.85)  0px, rgba(201,162,74,0.85)  2px,   transparent 3.5px),
    radial-gradient(circle at 91% 52%, rgba(232,203,138,0.65) 0px, rgba(232,203,138,0.65) 1px,   transparent 2px),
    radial-gradient(circle at 52% 90%, rgba(212,175,90,0.80)  0px, rgba(212,175,90,0.80)  1.5px, transparent 2.5px),
    radial-gradient(circle at 18% 44%, rgba(201,162,74,0.60)  0px, rgba(201,162,74,0.60)  1px,   transparent 1.5px),
    radial-gradient(circle at 65% 30%, rgba(232,203,138,0.70) 0px, rgba(232,203,138,0.70) 1.5px, transparent 2.5px),
    radial-gradient(circle at  5% 72%, rgba(212,175,90,0.55)  0px, rgba(212,175,90,0.55)  1px,   transparent 2px),
    radial-gradient(circle at 75% 88%, rgba(201,162,74,0.75)  0px, rgba(201,162,74,0.75)  2px,   transparent 3px),
    radial-gradient(circle at 42%  6%, rgba(232,203,138,0.80) 0px, rgba(232,203,138,0.80) 1px,   transparent 1.5px);
}

#contact > * {
  position: relative;
  z-index: 1;
}

/* Centrage du formulaire (desktop + mobile) */
.contact-formulaire {
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.contact-formulaire .wpforms-submit-container {
  display: flex !important;
  justify-content: center !important;
}

/* Labels */
.contact-formulaire .wpforms-form .wpforms-field-label,
.contact-formulaire .wpforms-form legend {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--gold-300) !important;
  margin-bottom: 6px !important;
}

.contact-formulaire .wpforms-form .wpforms-field-sublabel {
  font-size: 11px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--mute) !important;
  margin-top: 4px !important;
}

.contact-formulaire .wpforms-form .wpforms-field-name .wpforms-field-sublabel.after {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--gold-300) !important;
  margin-top: 0 !important;
}

/* Le sublabel "after" (Prénom/Nom) est positionné après l'input dans le DOM
   (réglage WPForms "Sublabel Position"). On l'affiche visuellement au-dessus
   sans toucher au DOM, en inversant l'ordre du conteneur flex. */
.contact-formulaire .wpforms-form .wpforms-field-name .wpforms-field-row-block {
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 6px !important;
}

.contact-formulaire .wpforms-form .wpforms-required-label {
  color: var(--gold-500) !important;
}

/* Champs */
.contact-formulaire .wpforms-form input[type="text"],
.contact-formulaire .wpforms-form input[type="email"],
.contact-formulaire .wpforms-form textarea {
  background: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  color: var(--paper) !important;
  padding: var(--sp-3) var(--sp-4) !important;
  font-size: 15px !important;
  font-family: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: unset !important;
  box-shadow: none !important;
  transition: border-color .18s, box-shadow .18s !important;
}

.contact-formulaire .wpforms-form input[type="text"]:focus,
.contact-formulaire .wpforms-form input[type="email"]:focus,
.contact-formulaire .wpforms-form textarea:focus {
  outline: none !important;
  border-color: var(--gold-500) !important;
  box-shadow: 0 0 0 3px rgba(201,162,74,.15) !important;
}

.contact-formulaire .wpforms-form textarea {
  resize: vertical !important;
  min-height: 120px !important;
}

.contact-formulaire .wpforms-form fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.contact-formulaire .wpforms-form .wpforms-field {
  margin-bottom: var(--sp-5) !important;
}

/* Ligne Prénom/Nom — WPForms limite la largeur de ce champ composé par défaut,
   ce qui laissait les deux cases collées à gauche avec du vide à droite. */
.contact-formulaire .wpforms-form .wpforms-field-medium,
.contact-formulaire .wpforms-form .wpforms-field-large,
.contact-formulaire .wpforms-form .wpforms-field-small {
  max-width: 100% !important;
  width: 100% !important;
}

.contact-formulaire .wpforms-form .wpforms-field-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  width: 100% !important;
  gap: var(--sp-4) !important;
  margin: 0 !important;
}

/* WPForms pose un clearfix ::before/::after (content:""; display:table) hérité
   d'un layout par floats. En display:flex, ces pseudo-éléments génèrent chacun
   un item flex invisible et "mangent" un gap de --sp-4 de chaque côté de la
   ligne — d'où les champs qui ne touchaient ni le bord gauche ni le droit. */
.contact-formulaire .wpforms-form .wpforms-field-row::before,
.contact-formulaire .wpforms-form .wpforms-field-row::after {
  content: none !important;
  display: none !important;
}

/* Largeur fixe (calc 50% moins la moitié du gap) plutôt que flex-grow : alignés à
   gauche avec un espacement régulier de --sp-4, sans chercher à toucher le bord
   droit (le calcul flex-grow + gap se comportait de façon incohérente ici). */
.contact-formulaire .wpforms-form .wpforms-field-row-block {
  flex: 0 0 auto !important;
  float: none !important;
  width: calc(50% - var(--sp-4) / 2) !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Bouton */
.contact-soumission {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 40px !important;
  min-height: 52px !important;
  border-radius: var(--r-pill) !important;
  border: 0 !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500)) !important;
  color: var(--ink) !important;
  box-shadow: var(--halo-gold) !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}

.contact-soumission:hover {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600)) !important;
  box-shadow: var(--halo-gold-strong) !important;
}

.contact-soumission:active {
  transform: scale(0.97) !important;
}