/* Hot Milk Magazine : lettre d'information (formulaire, bandeau après confirmation).
   Jetons du thème (--hm-*) avec repli sur les valeurs de la charte. */
.hmm-invisible { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; }

.hmm-newsletter { margin: 0; max-width: 560px; }
.hmm-newsletter__texte { margin: 0 0 12px; font-weight: 600; }
.hmm-newsletter__ligne { display: flex; flex-wrap: wrap; gap: 10px; }
.hmm-newsletter__ligne input[type="email"] { flex: 1 1 220px; min-width: 0; }
.hmm-newsletter__ligne .hmm-btn { flex: none; }
.hmm-newsletter__note { margin: 10px 0 0; font-size: 14px; color: var(--hm-secondaire, #56626f); }
.hmm-newsletter__msg { margin: 8px 0 0; font-size: 15px; min-height: 1.4em; }
.hmm-newsletter__msg:empty { display: none; }
.hmm-newsletter__msg.is-ok { color: var(--hm-lagune, #1d6b67); font-weight: 700; }
.hmm-newsletter__msg.is-error { color: var(--hm-framboise, #b4404d); font-weight: 700; }
.hmm-newsletter--faite { padding: 14px 18px; border-radius: var(--hm-r-sm, 10px); background: var(--hm-lagune-brume, #edf5f4); }

/* Dans le pied de page sombre du thème */
.hm-pied .hmm-newsletter { max-width: none; }
.hm-pied .hmm-newsletter__texte { color: #fff; }
.hm-pied .hmm-newsletter__note { color: var(--hm-clair, #c9d5de); }
.hm-pied .hmm-newsletter__ligne input[type="email"] { border-color: transparent; }
.hm-pied .hmm-newsletter__msg.is-ok { color: #9fe0da; }
.hm-pied .hmm-newsletter__msg.is-error { color: #f5a3ac; }
.hm-pied .hmm-newsletter--faite { background: rgba(255, 255, 255, 0.08); }
.hm-pied .hmm-newsletter--faite .hmm-newsletter__msg { color: #fff; }

/* Bandeau après un clic dans le courriel (confirmation, désinscription) */
.hmm-newsletter__bandeau { padding: 12px 20px; text-align: center; font-weight: 700; background: var(--hm-lagune, #1d6b67); color: #fff; }
.hmm-newsletter__bandeau.is-erreur { background: var(--hm-framboise, #b4404d); }

/* « Je suis : Parent / Professionnel·le de santé » (facultatif, 12/10/2026).
   Revue UX du 15/10/2026 : deux tuiles égales sous une étiquette, au lieu de deux petites pilules
   collées au « Je suis » ; pastille radio dessinée, cible de 46 px, focus clavier visible. */
.hmm-newsletter__public { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.hmm-newsletter__public legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-secondaire, #56626f); }
.hmm-newsletter__public label { flex: 1 1 150px; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--hm-filet-fort, rgba(22, 32, 43, .18)); border-radius: 12px; background: rgba(255, 255, 255, .75); font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--hm-texte, #16202b); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.hmm-newsletter__public label:hover { border-color: var(--hm-accent, #c4253a); }
.hmm-newsletter__public label:has(input:checked) { border-color: var(--hm-accent, #c4253a); background: var(--hm-lagune-brume, #fcf0f1); color: var(--hm-accent-fonce, #9e1c2e); box-shadow: 0 6px 16px -10px rgba(158, 28, 46, .55); }
.hmm-newsletter__public label:has(input:focus-visible) { outline: 3px solid var(--hm-accent, #c4253a); outline-offset: 2px; }
.hmm-newsletter__public input { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 2px solid currentColor; border-radius: 50%; background: #fff; opacity: .55; cursor: pointer; }
.hmm-newsletter__public input:checked { opacity: 1; border-color: var(--hm-accent, #c4253a); box-shadow: inset 0 0 0 3px #fff; background: var(--hm-accent, #c4253a); }
.hmm-newsletter__public input:focus-visible { outline: none; }
.hm-pied .hmm-newsletter__public legend { color: var(--hm-clair, #c9d5de); }
.hm-pied .hmm-newsletter__public label { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); }
.hm-pied .hmm-newsletter__public label:has(input:checked) { color: #fff; background: rgba(255, 255, 255, .14); border-color: #fff; box-shadow: none; }
.hm-pied .hmm-newsletter__public input { background: transparent; }
.hm-pied .hmm-newsletter__public input:checked { border-color: #fff; background: #fff; box-shadow: inset 0 0 0 3px var(--hm-brume-fonce, #22364a); }