/* ============================================================================
   alerte-tirage — la page d'arrivée des liens de l'e-mail d'alerte (activation,
   désinscription). 12/10/2026, refonte de la prise en main : le résultat en
   carte d'état, une icône dessinée (plus d'émoji), deux suites possibles.
   ============================================================================ */
.at-section { padding-top: var(--sp-7); }
.at-carte { max-width: 560px; margin: 0 auto; padding: var(--sp-6) var(--sp-5); text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.at-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  margin-bottom: var(--sp-4); border-radius: 50%; background: var(--bg); color: var(--muted); }
.at-ico:empty { display: none; }
.at-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.at-carte[data-etat="ok"] { border-color: color-mix(in srgb, var(--teal) 34%, transparent); }
.at-carte[data-etat="ok"] .at-ico { background: var(--teal-light); color: var(--teal-ink); }
.at-carte[data-etat="souci"] { border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.at-carte[data-etat="souci"] .at-ico { background: var(--amber-light); color: var(--amber-ink); }
.at-texte { max-width: 46ch; margin: 0 auto; font-size: var(--fs-md); line-height: 1.7; color: var(--ink); text-wrap: pretty; }
.at-texte strong { display: block; margin-bottom: var(--sp-2); font-family: 'Sora', sans-serif; font-size: var(--fs-lg);
  color: var(--navy-dark); text-wrap: balance; }
/* Les adresses du message (e-mail de contact) sont des liens de texte : soulignés (règle du 10/09).
   13/10/2026 (passe finale) : règle remontée ici depuis desinscription.html, qui la portait seule. */
.at-texte a { color: var(--red-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.at-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin: var(--sp-5) 0 0; }
@media (max-width: 480px) {
  .at-carte { padding: var(--sp-5) var(--sp-4); }
  .at-actions { flex-direction: column; }
  .at-actions .btn { width: 100%; }
}