/* =========================================================================
   Contact — formulaire de contact du site notrepere.net
   ========================================================================= */

.np-main--contact {
  padding-block: var(--space-8) var(--space-9);
}

.np-page--contact .np-page__header {
  max-width: var(--reading-max);
  margin: 0 auto var(--space-7);
  text-align: center;
}

.np-page--contact .np-page__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--np-ink);
  margin: var(--space-2) 0 var(--space-4);
  text-wrap: balance;
}

.np-page--contact .np-page__lede {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--np-ink-soft);
  max-width: 58ch;
  margin: 0 auto;
}

.np-container--narrow {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: var(--space-4);
}

/* ---- Bloc formulaire ---- */
.np-contact {
  background: var(--np-white);
  border: 1px solid var(--np-border);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.06);
}

.np-contact__form {
  display: grid;
  gap: var(--space-5);
}

.np-contact__row {
  display: grid;
  gap: var(--space-2);
}

.np-contact__row label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--np-ink-soft);
}
.np-contact__row label span[aria-hidden="true"] {
  color: var(--np-accent);
  margin-inline-start: 2px;
}

.np-contact__row input[type="text"],
.np-contact__row input[type="email"],
.np-contact__row textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--np-ink);
  background: var(--np-cream);
  border: 1px solid var(--np-border);
  padding: 12px 14px;
  border-radius: 2px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
  min-height: 46px;
}
.np-contact__row textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.55;
}

.np-contact__row input:focus,
.np-contact__row textarea:focus {
  outline: none;
  border-color: var(--np-accent);
  box-shadow: 0 0 0 3px rgba(168, 42, 42, 0.12);
  background: var(--np-white);
}

/* :user-invalid = ne cible que les champs après interaction utilisateur */
.np-contact__row input:user-invalid,
.np-contact__row textarea:user-invalid {
  border-color: rgba(168, 42, 42, 0.55);
}

.np-contact__hint {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--np-ink-soft);
  margin-top: 2px;
}

/* ---- Honeypot (caché visuellement mais pas display:none, pour ne pas éveiller les bots) ---- */
.np-contact__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Actions ---- */
.np-contact__actions {
  margin-top: var(--space-2);
  display: flex;
  justify-content: flex-end;
}
.np-contact__actions .np-btn {
  min-width: 220px;
  justify-content: center;
}

/* ---- Feedback ---- */
.np-contact__feedback {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  border-inline-start: 4px solid transparent;
  background: var(--np-cream-dim);
}
.np-contact__feedback--ok {
  border-color: #2e7d32;
  color: #1b5e20;
  background: #e8f5e9;
}
.np-contact__feedback--error {
  border-color: var(--np-accent);
  color: #7a1f1f;
  background: #fbecec;
}

/* ---- Mentions ---- */
.np-contact__legal {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--np-ink-soft);
  line-height: 1.5;
  margin: var(--space-3) 0 0;
  text-align: center;
}