/*
 * Page Contact — coordonnées et formulaire.
 *
 * Deux colonnes : à gauche par où l'on joint la maison, à droite ce qu'on lui
 * écrit. La colonne du formulaire est la plus large — c'est elle qu'on vient
 * remplir.
 *
 * Le bandeau de titre est celui du thème, dans la feuille de socle.
 */

.ml-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(34px,4.6vw,56px);align-items:start}
/* Deux intitulés de colonne, pas deux titres de page : le clamp les tient
   sous le corps d'un h2 de section. */
.ml-contact h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:16px}
.ml-contact__infos ul{list-style:none;margin:0 0 20px;padding:0;line-height:2}
.ml-contact__note{color:var(--texte-doux);font-size:15px;line-height:1.6}

/* ---------- le formulaire ---------- *
 * Mêmes champs que le tunnel de commande : même corps, même rembourrage, et
 * pas d'arrondi — rien n'est arrondi sur ce site, ni les boutons, ni le champ
 * de recherche de l'en-tête. Trois pixels de rayon suffisaient à faire un
 * formulaire d'ailleurs. */
.ml-field{display:flex;flex-direction:column;gap:7px;margin:0 0 20px}
/* Jumelle de la règle de compte.css : les deux se lisent ensemble. */
.ml-field label{font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--texte)}
.ml-field input,.ml-field textarea{
  font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--texte);
  background:var(--blanc);border:1px solid var(--filet);border-radius:0;
  padding:13px 15px;width:100%;-webkit-appearance:none
}
/* La mise au point clavier est celle de tout le site — l'encre, pas le doré :
   sur un champ blanc bordé de beige, le doré ne franchit pas le seuil de 3:1
   qu'un indicateur de focus doit tenir. */
.ml-field input:focus,.ml-field textarea:focus{
  outline:2px solid var(--focus);outline-offset:1px;border-color:var(--texte-titre)}
.ml-field--submit{margin-top:4px}
/* Leurre anti-robots : hors écran plutôt que display:none, que certains détectent. */
.ml-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- messages ---------- *
 * Les teintes viennent des rôles de la palette : une couleur écrite en dur
 * ici finit par diverger de celle qui dit la même chose ailleurs. */
.ml-alert{border-left:3px solid;padding:13px 17px;margin:0 0 22px;font-size:16px;line-height:1.55}
.ml-alert p{margin:0 0 4px}
.ml-alert p:last-child{margin:0}
.ml-alert--ok{border-color:var(--succes-texte);background:var(--succes-fond);color:var(--succes-texte)}
.ml-alert--ko{border-color:var(--alerte);background:var(--alerte-fond);color:var(--alerte-texte)}

.ml-contact__rgpd{font-size:14px;color:var(--texte-doux);line-height:1.6;margin-top:16px}

@media (max-width:820px){
  .ml-contact{grid-template-columns:1fr;gap:36px}
}