/* ═══════════════════════════════════════════════════════════════════════
   NOSOMI — « .email-notice » : l'email part, pensez aux indésirables.

   Composant partagé par les DEUX parcours qui déclenchent un email
   transactionnel vers le prospect :
     • Diagnostic → website/diagnostic.html   (étape 3 + écran de confirmation)
     • Pilotage   → website/assets/lead-modal.js (formulaire + confirmation)
   Une seule source de vérité : même forme, même terminologie, même niveau
   de visibilité des deux côtés. Chargé après le <style> inline de la page
   (et injecté par lead-modal.js pour les pages qui portent la modale).

   Deux intensités, une seule forme :
     .email-notice           AVANT envoi — secondaire, juste au-dessus du CTA
     .email-notice.is-lead   APRÈS envoi — titre + corps, l'information la
                             plus lisible de l'écran de confirmation

   Traitement : encart cyan à très faible alpha + trait fin de 1px — le motif
   déjà porté par .etab-selected (diagnostic) et .testimonial-pull (pilotage).
   Volontairement PAS le vocabulaire d'alerte (rouge/ambre, liseré latéral
   épais de .error-banner) : ce n'est pas une erreur, c'est une consigne de
   lecture. Le cyan reste du signal — il porte ici une action à faire.

   Sélecteurs en deux classes (`.email-notice .email-notice-*`) : les pages
   hôtes stylent `p`, `.success-card p` et `p.lead`, qui l'emporteraient
   autrement sur une classe simple selon l'ordre de chargement.
   ═══════════════════════════════════════════════════════════════════════ */
.email-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  background: rgba(69, 198, 230, .06);
  border: 1px solid rgba(69, 198, 230, .28);
  border-radius: var(--r, 6px);
  text-align: left;
}

/* Enveloppe — convention d'icônes du cockpit (Lucide-style : viewBox 24,
   fill none, stroke currentColor 1.6, extrémités rondes). `margin-top` aligne
   l'axe optique de l'icône sur la première ligne de texte. */
.email-notice .email-notice-ico {
  flex: 0 0 auto;
  color: var(--cyan, #45c6e6);
  margin-top: 1px;
}

.email-notice .email-notice-txt {
  margin: 0;
  max-width: none;
  font-size: var(--fs-sm, 13px);
  line-height: 1.55;
  color: rgba(232, 232, 244, .78);
}
.email-notice .email-notice-txt strong {
  color: var(--txt, #e8e8f4);
  font-weight: 600;
}

/* ── Après envoi ─────────────────────────────────────────────────────────
   Même encart, une intensité au-dessus : un titre en casse phrase (et non en
   micro-libellé capitales, réservé à la chrome) puis le corps en 14px. */
.email-notice.is-lead { padding: 16px 18px; gap: 13px; }
.email-notice.is-lead .email-notice-ico { margin-top: 3px; }
.email-notice.is-lead .email-notice-txt { font-size: var(--fs-body, 14px); }
.email-notice .email-notice-title {
  margin: 0 0 4px;
  max-width: none;
  font-family: inherit;
  font-size: var(--fs-md, 15px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--txt, #e8e8f4);
}

/* Mobile : on resserre le cadre sans jamais descendre la taille du texte —
   c'est l'information que le prospect doit lire, pas une mention légale. */
@media (max-width: 600px) {
  .email-notice { padding: 12px 13px; gap: 10px; }
  .email-notice.is-lead { padding: 14px 15px; gap: 11px; }
}