/* ==========================================================================
   HUNGRY JAZZ — PAGE CONTACT
   --------------------------------------------------------------------------
   LE FORMULAIRE EST LE SEUL COMPOSANT VRAIMENT NEUF DU SITE. Aucune maquette
   n'en proposait un : il a fallu le dessiner. Il n'emploie donc QUE des jetons
   existants — pas une couleur, pas une police, pas un rayon qui ne soient déjà
   dans `tokens.css`.

   Le parti est celui du reste : arêtes franches, filets, rien d'arrondi, rien
   d'ombré. Un champ est une ligne soulignée, pas une boîte grise ; c'est la
   même langue que le planning et les tarifs.

   POURQUOI LE CHAMP EST SOULIGNÉ ET NON ENCADRÉ
   Une boîte grise à coins ronds est le réflexe des formulaires de gestion, et
   le brief §3.5 l'écarte explicitement. Le filet sous le champ suffit à dire
   « on écrit ici », et il s'épaissit au focus : l'état actif se voit sans
   ajouter de forme.
   ========================================================================== */

.contact {
  display: grid;
  gap: var(--sp-l);
}

@media (min-width: 64em) {
  .contact {
    /* Le formulaire prend la plus grande part : c'est l'action principale.
       Les autres moyens l'accompagnent, ils ne la concurrencent pas. */
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--sp-xl);
    align-items: start;
  }
}

/* ==========================================================================
   LES CHAMPS
   ========================================================================== */
.form { max-width: 46rem; }

.field {
  display: grid;
  gap: var(--sp-3xs);
  margin-bottom: var(--sp-m);
}

.field__label {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.field__requis { color: var(--c-afro); }

.field__saisie {
  width: 100%;
  padding: var(--sp-2xs) 0;
  background: transparent;
  border: 0;
  border-bottom: var(--bd-rule) solid var(--c-ink);
  font-size: var(--fs-body);
  /* 16 px au minimum : en dessous, Safari sur iPhone zoome tout seul à la
     mise au point et déforme la page. */
  min-height: var(--tap-min);
}

.field__saisie:focus-visible {
  outline: none;
  border-bottom-width: 4px;
  border-bottom-color: var(--c-solo-jazz);
}

textarea.field__saisie {
  border: var(--bd-rule) solid var(--c-ink);
  padding: var(--sp-2xs);
  resize: vertical;
}
textarea.field__saisie:focus-visible {
  outline: 3px solid var(--c-solo-jazz);
  outline-offset: 2px;
  border-bottom-width: var(--bd-rule);
  border-color: var(--c-ink);
}

/* ---- Erreur -------------------------------------------------------------
   JAMAIS LA COULEUR SEULE (brief §25) : le filet change ET un texte apparaît
   sous le champ. Une personne qui ne distingue pas le rouge lit le message. */
.field--erreur .field__saisie { border-bottom-color: var(--c-afro); }
.field--erreur textarea.field__saisie { border-color: var(--c-afro); }

.field__erreur {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  color: var(--c-afro);
}

/* ---- Case à cocher ------------------------------------------------------ */
.field--case {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2xs);
}
/* 24 px, pas moins : c'est le seuil de la règle 2.5.8 du WCAG 2.2 pour un
   pointeur sur le web. L'étiquette est cliquable et forme déjà une cible bien
   plus grande, mais la case elle-même doit tenir seule. */
.field--case input {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-top: .05em;
  accent-color: var(--c-ink);
}
.field--case label {
  font-size: var(--fs-body);
  line-height: 1.5;
}
.field--case .field__erreur { grid-column: 1 / -1; }

.form__mention {
  font-size: var(--fs-label);
  color: var(--c-on-paper-muted);
  max-width: 54ch;
  margin-bottom: var(--sp-m);
}

.form__actions { margin-top: var(--sp-m); }

/* ---- Le champ leurre ----------------------------------------------------
   Hors de l'écran plutôt que `display: none` : certains robots ignorent ce
   qui est masqué, et le remplissent quand même. */
.form__leurre {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   RÉSUMÉ DES ERREURS ET CONFIRMATION
   ========================================================================== */
.form-erreurs {
  border: var(--bd-rule) solid var(--c-afro);
  padding: var(--sp-s);
  margin-bottom: var(--sp-l);
}
.form-erreurs:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 2px; }

.form-erreurs__titre {
  font-family: var(--f-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-2xs);
}
.form-erreurs ul { margin: 0; padding-left: 1.1em; }
.form-erreurs li + li { margin-top: var(--sp-3xs); }
.form-erreurs a { text-decoration: underline; text-underline-offset: .25em; }

.form-succes {
  border-left: 6px solid var(--c-solo-jazz);
  padding: var(--sp-s) var(--sp-m);
  margin-bottom: var(--sp-l);
}
.form-succes__titre {
  font-family: var(--f-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3xs);
}

/* ==========================================================================
   LES AUTRES MOYENS DE JOINDRE
   ========================================================================== */
.contact__autres {
  border-top: var(--bd-rule) solid var(--c-ink);
  padding-top: var(--sp-s);
}

.contact__autres-titre {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--sp-s);
}

.contact__liste { list-style: none; margin: 0; padding: 0; }
.contact__liste li + li {
  margin-top: var(--sp-s);
  padding-top: var(--sp-s);
  border-top: var(--bd-hair) solid var(--c-rule-soft);
}

.contact__label { font-weight: var(--fw-bold); }

.contact__note {
  display: block;
  margin-top: var(--sp-3xs);
  font-size: var(--fs-label);
  color: var(--c-on-paper-muted);
}