/* =========================================================================
   Formulaire de contact : ce que /js/demandes.js ajoute au formulaire repris
   du site en ligne.

   Cette feuille ne redefinit rien de style.css. Le formulaire garde sa grille
   de trois colonnes, ses libelles masques et ses placeholders : on n'habille
   ici que les elements nouveaux (liste de motifs, controle antispam, champ
   piege, zone de reponse).

   Elle est chargee sur toutes les pages, mais tout y est prefixe par la
   classe du formulaire ou par les classes ajoutees en JavaScript : sans le
   script, aucune de ces regles ne s'applique.

   Aucune couleur en dur : les variables viennent de style.css, sinon le theme
   sombre se casse.
   ========================================================================= */

/* ------------------------------------------------------------ Champ piege */
/* Premiere regle du fichier, volontairement : c'est celle dont l'absence
   couterait le plus cher. Le script pose deja ces proprietes en ligne, elles
   sont repetees ici pour que le champ reste hors de vue meme si un navigateur
   ignorait le style en ligne. Ni display:none ni visibility:hidden : certains
   robots savent les detecter et evitent alors le piege. */
.contact-form-piege {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------- Liste de motifs */
/* La fleche native d'un <select> ne se dessine pas de la meme facon d'un
   navigateur a l'autre, et ne suit pas la couleur du texte. On la remplace par
   un chevron trace en fond, comme le reste du site. */
.page-contenu form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--texte-doux) 50%),
    linear-gradient(135deg, var(--texte-doux) 50%, transparent 50%);
  background-position: calc(100% - 1.35rem) 55%, calc(100% - 1rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Tant que le motif n'est pas choisi, la premiere option tient lieu de
   placeholder : elle doit se lire comme un placeholder, pas comme une valeur. */
.page-contenu form select:invalid {
  color: var(--texte-leger);
}

/* ------------------------------------------------------ Controle antispam */

.input-antispam {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* La question ("Combien font 7 + 5 ?") est fabriquee par le serveur a chaque
   affichage. Elle est visible, contrairement aux autres libelles du
   formulaire : sans elle, le champ de reponse n'aurait aucun sens. */
.antispam-question {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
}

.page-contenu form .input-antispam input {
  max-width: 12rem;
}

/* ------------------------------------------------------- Zone de reponse */
/* Elle occupe toute la largeur de la grille et se place juste avant le bouton
   d'envoi : c'est la que le regard revient apres avoir clique. */
.formulaire-retour {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--bordure);
  background: var(--fond-alt);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--texte);
}

.formulaire-retour[hidden] {
  display: none;
}

.formulaire-retour-attente {
  border-left-color: var(--texte-leger);
  color: var(--texte-doux);
}

.formulaire-retour-succes {
  border-left-color: #2E7D52;
  background: color-mix(in srgb, #2E7D52 8%, var(--fond-alt));
}

.formulaire-retour-erreur {
  border-left-color: var(--magenta);
  background: color-mix(in srgb, var(--magenta) 8%, var(--fond-alt));
}

/* color-mix n'est pas connu de tous les navigateurs : sans lui, le fond reste
   celui de --fond-alt et seul le filet colore distingue les tons. C'est un
   repli acceptable, le sens ne repose pas sur la couleur seule (le texte dit
   ce qui s'est passe). */

/* ------------------------------------------------------ Bouton d'envoi */
/* Pendant l'envoi, le bouton est desactive : il doit le montrer, sinon un
   visiteur impatient clique trois fois et croit que rien ne part. */
.page-contenu form input[type="submit"]:disabled {
  cursor: progress;
  opacity: 0.6;
}

.page-contenu form input[type="submit"]:disabled:hover {
  background: #F5F5F5;
  color: var(--texte-doux);
  border-color: #EEEEEE;
}

/* --------------------------------------------------------------- Mobile */

@media (max-width: 560px) {
  .page-contenu form .input-antispam input {
    max-width: none;
  }
}