/* =========================================
= SOUS-COMPOSANT — CHAMP DE CONTACT (.nl-contact--field)
= Libellé au-dessus, contrôle en dessous : input texte / e-mail / téléphone,
= ou textarea du message.
= Markup : contact-field.php · enqueue : inc-contact-field.php
=
= Duplication ASSUMÉE depuis la 1.2.330 : ces règles sont la COPIE de celles du
= tunnel de commande (.nl-checkout--field, checkout/checkout-fields/ — et pour
= les contrôles, .checkout-form dans checkout/checkout.css). Les deux
= formulaires doivent se ressembler, mais la page Contact ne charge pas le CSS
= du tunnel : partager la règle imposerait une feuille commune.
= ⚠️ Répercuter ici toute évolution du champ de checkout, et inversement.
=
= Seule différence volontaire : pas de `position: relative` sur l'enveloppe.
= Dans le tunnel, c'est l'ancre du menu d'autocomplétion d'adresse créé par
= checkout-address.js ; il n'y a rien de tel ici.
=
= Les sélecteurs restent préfixés par .nl-contact--form : ils n'habillent que
= les contrôles DE CE formulaire, jamais ceux d'ailleurs sur la page.
=
= Restent dans contact-form.css : la carte, la ligne à deux champs
= (.nl-contact--row, posée par le parent), les notices et le honeypot.
========================================= */
.nl-contact--field {
  display: grid;
  gap: 0.375rem;
}

.nl-contact--field label {
  font-size: var(--text-xs);
  color: var(--primary-60);
}

/* Contrôles : même habillage que .checkout-form (bordure fine, fond
   transparent, rayon de 1px). */
.nl-contact--form input[type="text"],
.nl-contact--form input[type="email"],
.nl-contact--form input[type="tel"],
.nl-contact--form textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 0.0625rem solid var(--primary-40);
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0);
  color: var(--primary);
  font-size: var(--text-sm);
}

.nl-contact--form textarea {
  min-height: 6rem;
  resize: vertical;
}

.nl-contact--form input:focus,
.nl-contact--form textarea:focus {
  outline: none;
  border-color: var(--primary);
}