/* =============================================================================
   SOUNDFOLIO — Formulaire de contact
   ========================================================================== */

.contact-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5) 0 var(--sp-6);
}

/* Accroche rédigée dans la page « Contact ». Contrairement à l'introduction
   de playlist, aucun filet ne la sépare du formulaire : l'écart suffit. */
.contact-intro {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.contact-intro > *:last-child { margin-bottom: 0; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Piège à robots : hors écran plutôt que display:none, plus difficile à
   détecter pour un script automatisé. */
.contact-field-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
}
.contact-field label {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .01em;
  text-transform: capitalize;
  color: var(--text-secondary);
}
.contact-field :is(input, textarea) {
  padding: var(--sp-3) var(--sp-4);
  background: var(--bordeaux-light);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 14px;
  resize: vertical;
}
.contact-field :is(input, textarea):focus {
  outline: none;
  border-color: var(--amber);
}
.contact-field ::placeholder {
  color: var(--text-secondary);
  opacity: .6;
}

.contact-form .btn {
  flex: none;
  align-self: flex-end;
}

.contact-feedback {
  margin: 0;
  padding: var(--sp-4);
  background: var(--bordeaux-light);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.6;
  color: var(--cream);
}
.contact-feedback--error { border-left-color: #E85A3C; }

@media (max-width: 600px) {
  .contact-form .btn { align-self: stretch; }
}