/**
 * Formulaires — remplace le CSS de Forminator.
 */

.formulaire {
  max-width: 46rem;
  margin-block: var(--e-m);
}

.formulaire--compact { max-width: 34rem; }

/*
 * Posé en section, le formulaire prend toute la largeur.
 *
 * Les 46 rem ci-dessus sont une mesure de lecture : elles valent quand
 * un formulaire est glissé dans un texte, et elles valent surtout pour
 * la newsletter, qui s'ouvre dans une fenêtre modale — l'y étirer à la
 * largeur du contenu n'aurait aucun sens. Une section, elle, est un
 * bloc de page : elle occupe sa colonne comme les seize autres.
 *
 * La grille des champs suit d'elle-même : à 1196 px, ses colonnes de
 * 16 rem au minimum rangent les quatre champs courts sur une ligne, et
 * le sujet et le message gardent la pleine largeur.
 */
.formulaire-section .formulaire { max-width: none; }

/*
 * Deux colonnes, et non ce que la place permet.
 *
 * La grille commune range autant de colonnes de 16 rem que la largeur
 * en accepte : sur la colonne de contenu, cela faisait quatre champs
 * courts sur une ligne — nom, prénom, courriel, téléphone — et un
 * formulaire qui se lit comme un tableau. Deux colonnes gardent les
 * paires que l'on remplit ensemble : le nom avec le prénom, le courriel
 * avec le téléphone.
 *
 * Une seule colonne sous 48 rem, comme partout ailleurs : à deux, un
 * champ d'adresse électronique tomberait à 160 px sur un téléphone.
 */
@media (min-width: 48rem) {
  .formulaire-section .formulaire__grille { grid-template-columns: repeat(2, 1fr); }
}

/*
 * Le titre de la section, quand il y en a un. Même écart qu'entre un
 * titre de section et ce qu'il annonce ailleurs dans le thème.
 */
.formulaire-section__titre {
  margin: 0 0 var(--e-s);
  color: var(--couleur-rubrique-texte);
}

.formulaire__grille {
  display: grid;
  gap: var(--e-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.champ--pleine { grid-column: 1 / -1; }

.formulaire__mention,
.formulaire__rgpd {
  color: var(--couleur-texte-doux);
  font-size: var(--t-petit);
}

.formulaire__rgpd { margin-top: var(--e-s); }

/* ---------------------------------------------------------------
 * Champs
 * --------------------------------------------------------------- */

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--e-3xs);
  margin: 0;
}

.champ label,
.champ__groupe legend {
  font-family: var(--police-titre);
  font-size: var(--t-petit);
  font-weight: var(--graisse-medium);
}

.champ__requis { color: var(--couleur-accent-3); }

.champ input,
.champ textarea,
.champ select {
  width: 100%;
  min-height: 2.75rem;          /* cible tactile */
  padding: var(--e-2xs) var(--e-xs);
  border: 1px solid var(--c-gris-40);
  border-radius: var(--rayon-bouton);
  background-color: var(--couleur-fond);
  color: var(--couleur-texte);
}

.champ textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: var(--interligne-corps);
}

/*
 * Bordure à 1px sur un gris moyen plutôt qu'un gris clair : un champ
 * dont on ne distingue pas les limites est un champ qu'on ne remplit pas.
 */
.champ input:hover,
.champ textarea:hover { border-color: var(--couleur-titre); }

.champ__aide {
  color: var(--couleur-texte-doux);
  font-size: var(--t-mini);
}

/* ---------------------------------------------------------------
 * Groupes, radios et cases
 * --------------------------------------------------------------- */

.champ__groupe {
  margin: 0 0 var(--e-s);
  padding: var(--e-xs) var(--e-s);
  border: 1px solid var(--couleur-filet);
  border-radius: var(--rayon-bouton);
}

.champ__radio,
.champ__case {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2xs);
  margin: var(--e-3xs) 0;
}

/* La case et son libellé partagent la même zone cliquable, et la case
   reste assez grande pour être visée au doigt. */
.champ__radio input,
.champ__case input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--couleur-accent-1);
}

.champ__radio label,
.champ__case label {
  font-family: var(--police-texte);
  font-weight: var(--graisse-normale);
  font-size: var(--t-petit);
  line-height: 1.45;
}

/* L'intitulé d'une case : la maquette le pose en gras sur sa propre
   ligne, au-dessus de la phrase d'accord, et non au fil du texte. */
.champ__intitule {
  display: block;
  font-weight: var(--graisse-forte);
}

/* ---------------------------------------------------------------
 * Pot de miel — masqué sans display:none
 * --------------------------------------------------------------- */

/*
 * display:none serait détecté par les robots évolués. On sort le champ
 * du flux visuel en le laissant dans le DOM ; aria-hidden et tabindex,
 * posés dans le balisage, l'excluent du clavier et des lecteurs d'écran.
 */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------
 * Messages de résultat
 * --------------------------------------------------------------- */

.message {
  margin-bottom: var(--e-s);
  padding: var(--e-xs) var(--e-s);
  border-left: 4px solid;
  border-radius: 0 var(--rayon-bouton) var(--rayon-bouton) 0;
  font-size: var(--t-petit);
}

/*
 * La couleur ne porte pas seule l'information : le libellé du message
 * dit déjà s'il s'agit d'un succès ou d'une erreur, et role="alert" le
 * fait annoncer. La couleur ne fait que confirmer.
 */
.message--succes {
  border-color: var(--couleur-accent-2);
  background-color: rgb(0 166 82 / 0.08);
}

.message--erreur {
  border-color: var(--couleur-accent-3);
  background-color: rgb(237 51 79 / 0.08);
}

/* ---------------------------------------------------------------
 * Bouton d'envoi
 * --------------------------------------------------------------- */

/*
 * Le bouton d'envoi porte lui-même son aplat. Depuis que l'apparence des
 * boutons découle de leur pictogramme — « plein » ou « contour » posés
 * par le PHP qui les rend — un « .bouton » sans l'une de ces deux
 * classes n'a plus de fond du tout, et les trois formulaires du site
 * n'en passent aucune. Le dire ici vaut mieux que de l'ajouter dans
 * trois gabarits : un formulaire n'a qu'une apparence de bouton.
 */
.bouton--envoi {
  width: auto;
  min-width: 12rem;
  min-height: 2.75rem;
  margin-top: var(--e-s);
  border: 0;
  background-color: var(--couleur-rubrique);
  color: var(--couleur-sur-rubrique);
  cursor: pointer;
}