/* Archétype « page de formulaire » — signaler, newsletter, newsletter/merci.
   theme.css annonçait ce chantier depuis le 20/08/2026 en commentaire de
   .page-contenu : « Les pages de formulaire (signaler, newsletter) suivent
   un archétype distinct à 34rem [...] il sera extrait lors du passage dédié
   aux formulaires, avec le reste de leurs 141 lignes dupliquées. » C'est ce
   fichier, et ce commentaire a été mis à jour en conséquence.

   Ce qui vit ici : tout ce que les deux formulaires écrivaient DEUX FOIS, à
   l'identique — la boîte, le rythme des champs, l'habillage des contrôles,
   le honeypot, le bouton d'envoi, la ligne de statut.

   Ce qui reste dans le <style> de chaque template : ce qui n'existe que sur
   une seule page (le fieldset « Je signale… » côté signalement, la ligne de
   consentement côté newsletter). Le critère est « écrit deux fois », pas
   « concerne un formulaire » — remonter ici une règle propre à une page
   recréerait, à l'envers, la dette qu'on solde.

   Pourquoi une feuille séparée plutôt qu'un ajout à theme.css : même motif
   que fiche-courte.css et pilier.css, déjà liés conditionnellement par
   fiche.njk. theme.css est chargé par TOUTES les pages, y compris l'accueil
   carte qui n'a aucun formulaire ; ces règles n'y ont rien à faire.

   Extraction à iso-rendu : aucune valeur n'a été redessinée au passage.
   Deux écarts connus avec charte-graphique.md §4 « Formulaires » sont donc
   reconduits tels quels et NON corrigés ici — hauteur de champ sous la
   cible tactile de 48px, et texte d'aide au palier --taille-petite alors
   que la §4 exige au moins --taille-normale. Les traiter dans le même geste
   mélangerait un déplacement vérifiable au pixel et une décision de design ;
   ils restent ouverts, à trancher à l'œil. */

/* Boîte volontairement plus étroite (34rem) que la colonne de lecture de
   .page-contenu (40rem) : un formulaire se remplit en colonne courte, il ne
   se lit pas comme un texte suivi. Écart d'origine, conservé.
   Portée par les trois pages, y compris newsletter/merci qui n'a qu'un
   message de confirmation. */
.boite-formulaire {
  max-width: 34rem;
  margin: var(--espace-xl) auto;
  padding: 0 var(--espace-m);
}

/* Les deux pages qui portent réellement un formulaire ajoutent ceci.
   newsletter/merci ne le prend pas : pas de champ à ne pas coller au bas de
   l'écran, et son h1 ouvre sur un paragraphe comme une page de prose
   ordinaire (il garde donc la marge de .page-prose h1, theme.css). */
.page-formulaire {
  padding-bottom: 3rem;
}

/* Resserré par rapport à .page-prose h1 : ici le titre ouvre sur un chapô
   court puis des champs, pas sur un texte suivi. */
.page-formulaire h1 {
  margin-bottom: var(--espace-s);
}

.page-formulaire .intro {
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-xl);
}

.champ {
  margin-bottom: 1.2rem;
}

.champ label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  font-size: var(--taille-texte);
}

.champ .aide {
  margin: 0.3rem 0 0;
  font-size: var(--taille-petite);
  color: var(--texte-secondaire);
}

.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font: inherit;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-standard);
  padding: 0.6rem 0.7rem;
}

.champ textarea {
  resize: vertical;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 2px solid var(--bleu-azur);
  outline-offset: 1px;
}

/* Honeypot anti-spam : hors écran plutôt qu'en display:none, plus
   difficile à détecter pour un bot (brief-evenements-locaux.md §9). */
.chp-piege {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.bouton-envoyer {
  font: inherit;
  font-weight: 600;
  font-size: var(--taille-texte);
  color: var(--fond);
  background: var(--rouge-orleans);
  border: none;
  border-radius: var(--rayon-pill);
  padding: 0.7rem 1.6rem;
  cursor: pointer;
}

.bouton-envoyer:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Ligne de statut : ciblée par classe et non par id, contrairement au CSS
   d'origine (#signalement-statut / #newsletter-statut). Les deux ids restent
   dans le HTML — signaler.js et newsletter.js les cherchent par
   getElementById — mais ils ne portent plus le style, sinon un troisième
   formulaire un jour rouvrirait exactement la duplication qu'on ferme.
   Le succès est en --bleu-azur et non en vert : le site n'introduit aucune
   couleur hors palette pour un état (adn-site.md §3). */
.statut-formulaire {
  margin-top: var(--espace-m);
  font-weight: 600;
}

.statut-formulaire.succes {
  color: var(--bleu-azur);
}

/* Le texte d'attente est un texte à lire, pas une alerte : graisse normale,
   seule l'adresse et le nom du site ressortent. */
.attente-confirmation {
  font-weight: 400;
}
.attente-confirmation p {
  margin: 0 0 var(--espace-s);
}

.statut-formulaire.erreur {
  color: var(--rouge-orleans);
}