/* Page Newsletter (template-newsletter.php) : en-tête comme Artists / Stories & Explore,
   formulaire aux styles de la page Contact (templates-acf.css), cadre identique. */

.aec-newsletter__intro { margin-top: 40px; margin-bottom: 40px; padding: 0 16px; box-sizing: border-box; }

.aec-newsletter { width: 100%; padding: 0 24px 100px; box-sizing: border-box; }
.aec-newsletter__card { max-width: 640px; margin: 0 auto; border: 0.5px solid #020202; padding: 30px 20px 20px; box-sizing: border-box; }

.aec-newsletter .aec-form__group--consent { flex-wrap: wrap; align-items: flex-start; column-gap: 12px; margin-top: 6px; }
.aec-newsletter__checkbox { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #8B0000; cursor: pointer; }
.aec-newsletter__consent { flex: 1 1 0; min-width: 0; font-family: "Roboto Mono", Inter, sans-serif; font-size: 12px; line-height: 1.5; letter-spacing: .02em; color: #3A3A3A; cursor: pointer; }
.aec-newsletter__consent a { color: #8B0000; }
.aec-newsletter .aec-form__group--consent .aec-form__field-error { flex-basis: 100%; margin-left: 30px; }
.aec-newsletter .aec-form__group--consent.aec-form__group--error .aec-newsletter__checkbox { outline: 1px solid #d9534f; outline-offset: 2px; }

/* Message sur plusieurs lignes : l'interligne de 2 px du formulaire Contact les ferait se chevaucher. */
.aec-newsletter .aec-form__message { line-height: 1.5; padding: 10px 14px; margin-top: 18px; }
.aec-newsletter .aec-form__message--error { padding-left: 0; padding-right: 0; }
/* Région d'état toujours présente (role=status) : sans texte, elle ne prend aucune place. */
.aec-newsletter .aec-form__message:empty { padding: 0; margin: 0; }

/* Texte des erreurs : #B02A25, contraste de 5,8:1 sur le fond #F2F1EF (le #d9534f de Contact
   n'atteint que 3,5:1). Bordure et contour gardent #d9534f (3:1 suffit). Page Newsletter
   seulement : le formulaire Contact reste tel quel. */
.aec-newsletter .aec-form__field-error, .aec-newsletter .aec-form__message--error { color: #B02A25; }

/* Page ouverte par un lien de désinscription : texte, puis bouton. */
.aec-newsletter__lead { margin: 0 0 24px; font-family: "Roboto Mono", Inter, sans-serif; font-size: 12px; line-height: 1.5; letter-spacing: .02em; color: #3A3A3A; text-align: center; }

@media (max-width: 767px) {
  .aec-newsletter { padding: 0 20px 60px; }
  .aec-newsletter__intro { margin-top: 24px; }
  .aec-newsletter__card { padding: 24px 0 10px; }
  .aec-newsletter .aec-form-widget { padding: 0 20px 20px; }
}