/* Styles du bloc d'inscription à la newsletter et de ses pages de retour.
   Séparés de blog.css : le formulaire est aussi servi sur la page d'accueil,
   qui n'a pas à charger le CSS des articles. */

/* ── Newsletter ──────────────────────────────────────────────────────────── */

.nl-band { background: var(--forest); color: var(--white); border-radius: var(--radius-lg); padding: 42px 38px; }
.nl-band h2 { font-family: var(--serif); font-size: clamp(24px, 3vw, 33px); margin: 0 0 10px; color: var(--white); }
.nl-band p { color: rgba(255, 255, 255, .78); margin: 0 0 22px; max-width: 560px; font-size: 16px; }
.nl-form { display: flex; gap: 12px; flex-wrap: wrap; max-width: 560px; }
.nl-form input[type="email"] {
  flex: 1; min-width: 240px; padding: 14px 16px; font: inherit; font-size: 15px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px;
  background: rgba(255, 255, 255, .08); color: var(--white);
}
.nl-form input[type="email"]::placeholder { color: rgba(255, 255, 255, .5); }
.nl-form input[type="email"]:focus { outline: 2px solid var(--harvest); outline-offset: 1px; }
.nl-note { font-size: 13.5px; color: rgba(255, 255, 255, .6); margin: 14px 0 0; }
.nl-status { margin: 16px 0 0; font-size: 15px; font-weight: 600; }
.nl-status.ok { color: var(--leaf-light); }
.nl-status.err { color: #ffb4a2; }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Page de retour (confirmation / désinscription) ──────────────────────── */

.nl-result { min-height: 72vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px 20px 60px; }
.nl-result .inner { max-width: 540px; }
.nl-result .ic { font-size: 46px; display: block; margin-bottom: 14px; }
.nl-result h1 { font-family: var(--serif); font-size: clamp(27px, 4vw, 40px); color: var(--forest); margin: 0 0 14px; }
.nl-result p { color: var(--ink-soft); font-size: 17px; line-height: 1.65; margin: 0 0 26px; }

@media (max-width: 640px) {
  .nl-band { padding: 32px 22px; }
}