/* =============================================================================================
   08 Contact, pied de page. À gauche l'idée et les actions (WhatsApp, email), à droite le
   formulaire de contact ; l'un sous l'autre sous 992 px.
   Comportement : js/appel.js (choix de l'objet, envoi à contact.php) et js/contact-direct.js
   (boutons « Écrire sur WhatsApp » et « Écrire par email »).
   ============================================================================================= */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center; /* l'idée face au milieu du formulaire, sans vide sous les boutons */
  gap: var(--space-head) var(--split-gap);
}
/* La règle « .sec-head + * » ne s'applique pas : l'écart vient de la grille. */
.contact .contact__card { margin-top: 0; }
@container page (max-width: 991px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Boutons sur aplat sombre : même remplissage au survol que .btn-fill et .btn-outline ----
   Le contour clair (« Écrire par email ») se remplit de crème, texte bordeaux. */
.btn-fill--light { background: var(--on); color: var(--dark); }
.btn-fill--light .btn-fill__fill { background: var(--dark); }
.btn-fill--light.is-filled,
.btn-fill--light:hover { color: var(--hldi); }

.btn-outline--light { border-color: var(--on); color: var(--on); }
.btn-outline--light::before { background: var(--on); }
.btn-outline--light:hover,
.btn-outline--light:focus-visible { color: var(--dark); }

/* ---- Carte du formulaire ---- */
.contact__card {
  gap: var(--space-5);
  border-color: transparent;
  border-radius: var(--radius-card-lg);
  scroll-margin-top: 24px; /* en plus des 77 px de scroll-padding (base.css) : le titre respire sous la barre */
}
.contact__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
}

.contact__form { display: grid; gap: var(--space-4); }
.contact__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-4);
}
.contact__field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.contact__field label { font-size: var(--fs-small); font-weight: 700; line-height: 1.4; }
.contact__optional { font-weight: 400; color: var(--muted); }

/* Bord à 3:1 au moins sur le papier (contour d'un champ, WCAG 1.4.11). */
.contact__input {
  width: 100%;
  height: var(--btn-h);
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--line2) 75%, var(--muted));
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-body);
  transition: border-color 150ms, background-color 150ms;
}
.contact__input::placeholder { color: var(--muted); opacity: 1; }
.contact__input:hover { border-color: var(--ink); }
.contact__input:focus { border-color: var(--ink); background: var(--paper); }
.contact__input[aria-invalid="true"] { border-color: var(--err); }
.contact__textarea {
  height: auto;
  min-height: 132px;
  padding: 14px 20px;
  border-radius: var(--radius-card);
  line-height: 1.5;
  resize: vertical;
}
.contact__error { font-size: var(--fs-small); line-height: 1.4; color: var(--err); }
.contact__error:empty { display: none; }

.contact__send {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.contact__submit { border: 0; cursor: pointer; }
/* Envoi en cours : le bouton reste focalisable (aria-disabled), mais ne réagit plus. */
.contact__submit[aria-disabled="true"] { cursor: progress; opacity: .72; transform: none; }
.contact__submit[aria-disabled="true"]::before { transform: translateX(-101%); }
/* Champ annexe : hors de l'écran, hors du parcours clavier et des lecteurs d'écran. */
.contact__extra { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Sur le papier, le contour de focus repasse en bordeaux (le rose clair des boutons s'y perd). */
.contact__card .btn-fill:focus { outline-color: var(--acc); }
.contact__note {
  margin: 0;
  flex: 1 1 200px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--muted);
}
/* Lien en ligne : zone cliquable portée à 44 px de haut sans changer l'interligne. */
.contact__note-link,
.contact__status a {
  padding: 12px 0;
  margin: -12px 0;
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.contact__note-link:hover,
.contact__status a:hover { color: var(--acc); }
.contact__status {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: 16px;
  background: var(--sunk);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.45;
}
.contact__status:empty { display: none; }
/* Repli par la messagerie du visiteur (js/appel.js, seulement avec une adresse publique) : bouton
   « Envoyer avec ma messagerie », prérempli, sur sa propre ligne sous l'explication. */
.contact__status .contact__mailto {
  display: flex;
  width: fit-content;
  align-items: center;
  min-height: 44px;
  margin: var(--space-3) 0;
  padding: 0 20px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 250ms, color 250ms;
}
.contact__status .contact__mailto:hover { background: var(--ink); color: var(--bg); }
.contact__status.is-ok { background: var(--hl); color: var(--ink); }
.contact__status.is-err { color: var(--err); }

.contact__card-title:focus { outline: none; }
.contact__card-title:focus-visible { outline: 3px solid var(--acc); outline-offset: 4px; border-radius: 4px; }

/* ---- Pied de page (css/sections.css) : ajustements ---- */
.footer__tagline { text-wrap: balance; }
.footer .footer__cta { height: var(--btn-h); }
.footer__col { gap: 0; }
.footer__link { min-height: 44px; }
.footer__link:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .contact__input,
  .contact__status .contact__mailto { transition: none; }
}

/* Actions de l'en-tête : « Écrire sur WhatsApp » et « Écrire par email », visibles avec un numéro
   ou une adresse (js/contact-direct.js retire hidden). « Remplir le formulaire » ne sert que sans
   eux, sous 768 px : au-delà, le formulaire est à côté ou juste dessous. Sans aucun bouton
   visible, la rangée disparaît, sans laisser d'écart. */
.contact__actions:has(.btn-whatsapp:not([hidden]), .btn-email:not([hidden])) .contact__jump { display: none; }
@container page (min-width: 768px) {
  .contact__jump { display: none; }
  .contact__actions:not(:has(.btn-whatsapp:not([hidden]), .btn-email:not([hidden]))) { display: none; }
}