/* ============================================================
   Formulaires de contact et de devis.

   Partagé par la page contact et la page professionnels. Une seule
   grammaire : le libellé dit en toutes lettres si le champ est requis,
   l'erreur s'écrit sous le champ et se résume en tête du formulaire.
   Les couleurs viennent des jetons, sauf le rouge d'erreur, repris de
   la couche de design et posé ici en variable locale.

   Ce qu'on manipule est doux, comme l'outil « Quel modèle pour cette
   mesure ? » : les champs sont des champs arrondis (.field, instrument.css),
   les choix des capsules à case, le résumé et la confirmation des cartes à
   16 px. Le bouton d'envoi reste franc. Ce fichier pose la grammaire du
   formulaire : libellés, aides, erreurs, choix, résumé, envoi.
   ============================================================ */

.sa-form {
  --form-error: #8f1d1d;
  --field-error: var(--form-error);
  --field-border: var(--ink-70);
  display: grid;
  gap: 22px;
  margin: 0;
}

.sa-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
}

.sa-field {
  display: grid;
  gap: 8px;
  align-content: start;
}

.sa-field--half { max-width: calc(50% - 9px); }

.sa-field label,
.sa-choices legend {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
}

.sa-field__req {
  color: var(--ink-70);
  font-weight: 400;
}

.sa-field__hint {
  margin: 0;
  color: var(--ink-70);
  font-size: .9rem;
  line-height: 1.45;
}

.sa-field__error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  color: var(--form-error);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Un repère de forme en plus de la couleur : l'erreur se lit sans voir le rouge. */
.sa-field__error::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1.2em;
  margin-top: .1em;
  background: currentColor;
}

.sa-field__error[hidden],
.sa-form__summary[hidden] { display: none; }

/* ---------- Choix en capsules ----------
   Chaque choix est une capsule à case (.choice, instrument.css) ; ce
   fichier ne pose que le groupe et sa légende. */

.sa-choices {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sa-choices legend { margin-bottom: 10px; padding: 0; }

.sa-choices__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Résumé d'erreurs et confirmation ---------- */

.sa-form__summary {
  padding: 18px 20px;
  border: 2px solid var(--form-error);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
}

.sa-form__summary:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.sa-form__summary p { margin: 0 0 6px; }
.sa-form__summary-title { font-size: 1.05rem; font-weight: 800; color: var(--form-error); }
.sa-form__summary ul { margin: 10px 0 0; padding-left: 20px; }
.sa-form__summary li + li { margin-top: 6px; }

.sa-form__summary a {
  display: inline-block;
  padding-block: 3px;
  color: var(--form-error);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sa-form__status:empty { display: none; }
.sa-form__status:focus { outline: 3px solid var(--focus); outline-offset: 3px; }

.sa-form__success {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.4;
}

/* Coche dessinée dans un cercle d'encre : le succès se lit sans la couleur. */
.sa-form__success::before {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23c7f56d' stroke-width='2'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ---------- Envoi ---------- */

.sa-form__submit {
  justify-self: start;
  gap: 16px;
  margin-top: 4px;
}


.sa-form__privacy {
  margin: -6px 0 0;
  color: var(--ink-70);
  font-size: .88rem;
  line-height: 1.5;
}

.sa-form__privacy a {
  display: inline-block;
  padding-block: 3px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .sa-form__row { grid-template-columns: 1fr; }
  .sa-field--half { max-width: none; }
  .sa-form__submit { justify-self: stretch; }
}