/* nl-bandeau.css : bandeau d'inscription newsletter mutualisé (socle M2).
   Design validé le 25/08/2026 (maquettes par marque). Une base commune,
   les couleurs par variante m-nl--zbs / m-nl--lbp / m-nl--afl, valeurs
   verbatim de front_theme_WP/config/domains.php (color / color_light /
   text_on_color de chaque marque).
   PIÈGE : le honeypot .m-nl__hp est caché en style INLINE dans le gabarit,
   ne pas compter sur ce fichier (cache CSS périmé = honeypot visible, vécu). */

.m-nl { border-radius: 8px; padding: 12px 16px; margin: 14px 0;
        display: flex; align-items: center; justify-content: space-between;
        gap: 14px; flex-wrap: wrap;
        background: var(--m-nl-fond); border: 1px solid var(--m-nl-bordure); }
.m-nl__txt p { margin: 0; font-size: 0.95rem; color: var(--m-nl-texte); }
.m-nl__txt p strong { text-transform: uppercase; font-size: 0.78rem;
                      letter-spacing: 0.06em; margin-right: 6px;
                      color: var(--m-nl-kicker); }
.m-nl__txt small { display: block; margin-top: 2px; font-size: 0.8rem; color: #8a8a8a; }
.m-nl__form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
/* PIÈGE : sans cette règle, le display:flex ci-dessus écrase l'attribut hidden
   posé par nl-bandeau.js au succès et le formulaire resterait affiché. */
.m-nl__form[hidden] { display: none; }
.m-nl__input { padding: 9px 12px; font-size: 0.92rem; font-family: inherit;
               border: 2px solid #ddd; border-radius: 8px; outline: none;
               width: 230px; transition: border-color 0.2s; background: #fff; }
.m-nl__input:focus { border-color: var(--m-nl-kicker); }
.m-nl__bouton { padding: 9px 16px; font-size: 0.92rem; font-weight: 600;
                font-family: inherit; border: none; border-radius: 8px;
                cursor: pointer; white-space: nowrap; transition: opacity 0.2s;
                background: var(--m-nl-btn-fond); color: var(--m-nl-btn-texte); }
.m-nl__bouton:hover { opacity: 0.9; }
.m-nl__bouton:disabled { opacity: 0.6; cursor: default; }
.m-nl__msg { margin: 0; font-size: 0.95rem; }
.m-nl__msg--ok { color: #085229; }
.m-nl__msg--ko { color: #a33; flex-basis: 100%; }
.m-nl__hp { position: absolute; left: -9999px; }
@media (max-width: 700px) {
  .m-nl { display: block; }
  .m-nl__form { margin-top: 10px; }
  .m-nl__input, .m-nl__bouton { width: 100%; }
  .m-nl__msg { margin-top: 8px; display: block; }
}

/* ── Variantes de marque (valeurs domains.php) ── */
.m-nl--zbs { --m-nl-fond: #FDF5FA; --m-nl-bordure: #E4BBD6; --m-nl-kicker: #0D0D0D;
             --m-nl-texte: #0D0D0D; --m-nl-btn-fond: #0D0D0D; --m-nl-btn-texte: #fff; }
.m-nl--lbp { --m-nl-fond: #F5F7F2; --m-nl-bordure: #dfe5da; --m-nl-kicker: #2D3B2D;
             --m-nl-texte: #1f2b1f; --m-nl-btn-fond: #2D3B2D; --m-nl-btn-texte: #F5F7F2; }
.m-nl--afl { --m-nl-fond: #FFF5F5; --m-nl-bordure: #FFE5E5; --m-nl-kicker: #E04045;
             --m-nl-texte: #1a1a1a; --m-nl-btn-fond: #FF5A5F; --m-nl-btn-texte: #fff; }