/* ==========================================================================
   forms.css — formulaire de contact (lot 11).
   RÈGLE : uniquement les variables sémantiques. L'état d'erreur ne repose
   JAMAIS sur la seule couleur : texte explicite + icône « ⚠ » + bordure
   renforcée + barre latérale. Contraste texte AAA, contrôles ≥ 3:1.
   ========================================================================== */

/* --- Disposition : formulaire + colonne latérale ------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 820px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-6); }
}

.page-hero--tight { padding-bottom: var(--space-7); }
/* Titre de la page Contact : colonne unique → largeur plus généreuse et
   interligne resserré (évite un titre sur 3 lignes très espacées). */
.page-hero--tight .stack { gap: var(--space-3); }
.page-hero--tight .page-hero__title { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.625rem); max-width: 30ch; line-height: 1.12; margin-block: 0; }
/* Mention de statut : nettement détachée du paragraphe et du bas du bandeau. */
.page-hero--tight .hero__note { margin-top: var(--space-4); line-height: var(--lh-body); }

/* --- Formulaire ---------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 40rem;
}
.form__title { font-size: var(--fs-h3); font-weight: 700; }
.form__req-note { font-size: var(--fs-small); color: var(--muted); margin-top: calc(0px - var(--space-3)); }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-weight: 600; font-size: var(--fs-body); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.field__req {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}
.field__hint { font-size: var(--fs-small); color: var(--muted); }

/* --- Contrôles ----------------------------------------------------------- */
.input {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  background: var(--surface);
  color: var(--text);
  border: var(--bw-strong) solid var(--border-strong); /* ≥ 3:1 vs surface */
  border-radius: var(--radius);
  line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder { color: var(--faint); }
.input:hover { border-color: var(--primary); }
.input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--primary);
}
.textarea { resize: vertical; min-height: 8.5rem; }

/* --- Compteur de caractères --------------------------------------------- */
.field__count {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  color: var(--faint);
}
.field__count--near { color: var(--text); font-weight: 600; }

/* --- Champ en erreur : forme + icône + texte (jamais la couleur seule) --- */
.field--invalid .input {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--text);        /* texte en AAA — le rouge reste un renfort */
  font-size: var(--fs-small);
}
.field__error-icon { color: var(--danger); flex: 0 0 auto; font-weight: 700; }

/* --- Champ leurre (honeypot) : retiré du flux et de l'affichage ---------- */
.form-honeypot {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* --- Bouton d'envoi verrouillé (anti double-envoi) ----------------------- */
.btn[data-submit][aria-disabled="true"] { opacity: 0.7; }

/* --- Récapitulatif d'erreurs (en tête de formulaire) --------------------- */
.form-alert {
  border: var(--bw-strong) solid var(--danger);
  border-left-width: 4px;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-alert:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-alert__title { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--fs-body); }
.form-alert__icon { color: var(--danger); font-weight: 700; }
.form-alert__lead { color: var(--muted); font-size: var(--fs-small); }
.form-alert__list { display: flex; flex-direction: column; gap: var(--space-1); padding-left: var(--space-5); list-style: disc; }
.form-alert__list a { font-weight: 600; }

/* --- Confirmation d'envoi ------------------------------------------------ */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--bw-strong) solid var(--primary);
  border-left-width: 4px;
  background: var(--accent);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.form-status:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-status__icon {
  flex: 0 0 auto;
  width: 1.75rem; height: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--primary); color: var(--on-primary);
  font-weight: 700;
}
.form-status__title { font-weight: 700; font-size: var(--fs-body); }
.form-status__text { color: var(--muted); font-size: var(--fs-small); margin-top: var(--space-1); }

/* --- Colonne latérale ---------------------------------------------------- */
.contact-aside {
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.contact-aside__title { font-size: var(--fs-h3); font-weight: 700; }
.contact-aside__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.contact-aside__list .btn { width: 100%; }
.contact-aside__note { font-size: var(--fs-small); color: var(--muted); }

/* --- Mention RGPD (utilisation des données) ------------------------------ */
.form__privacy {
  font-size: var(--fs-small);
  color: var(--muted);
  border-left: 3px solid var(--border-strong);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  max-width: 42rem;
}
.form__privacy-link { font-weight: 600; }