/* =====================================================================
   Opera Populi : alertes, bannière, badges, étiquettes
   ===================================================================== */

/* ---------- Alertes, bannière, étiquettes ---------- */
.alert {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .8rem 1rem; border-radius: var(--r-md);
  background: var(--tone-bg); color: var(--tone-fg);
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  font-size: var(--fs-sm); line-height: 1.5;
}
.alert .icon { margin-top: .12rem; }
.alert strong { font-weight: var(--fw-bold); }
.alert.is-shaking { animation: shake .4s var(--ease-out); }
@keyframes shake { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
[tabindex="-1"]:focus { outline: none; }

.banner {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5); padding: 1rem 1.15rem;
  border-radius: var(--r-lg); background: var(--tone-bg); color: var(--tone-fg);
  border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent);
}
.banner__icon {
  display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-sm); background: var(--surface); color: var(--tone-fg);
  box-shadow: inset 0 0 0 1.5px var(--tone); rotate: -5deg;
}
.banner__text { flex: 1 1 18rem; display: grid; gap: .2rem; font-size: var(--fs-sm); }
.banner__title { font-family: var(--font-body); font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: 0; }
.banner__feedback { font-weight: var(--fw-semibold); overflow-wrap: anywhere; } /* adresse longue (renvoi) : jamais hors de la bannière */
.banner__feedback:empty { display: none; }
/* Retour avec ton (renvoi de l'email : succès, erreur) : pastille à ses propres couleurs (contraste sur la bannière) */
.banner__feedback[data-tone] { justify-self: start; align-self: flex-start; padding: .35rem .65rem; border-radius: var(--r-xs); background: var(--tone-bg); color: var(--tone-fg); }
.banner__feedback .icon { display: inline-block; width: 1.1em; height: 1.1em; margin-right: .35em; vertical-align: -.18em; }
.banner__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-self: center; }
/* Email à vérifier (#verify-banner) : bannière appuyée, en tête de la vue membre */
.banner--verify { border-width: 2px; border-color: var(--tone); box-shadow: var(--shadow-md); }
.banner--verify .banner__title { font-size: var(--fs-lg); }
.banner--verify .banner__text { font-size: var(--fs-md); }
.banner--verify #verify-email { overflow-wrap: anywhere; }

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 1.65rem; padding: .15rem .6rem .15rem .45rem;
  border-radius: var(--r-xs); border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  background: var(--tone-bg); color: var(--tone-fg);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap;
}
.badge .icon { width: 1rem; height: 1rem; }
.tag {
  display: inline-block; padding: .12rem .45rem; border-radius: var(--r-xs);
  background: var(--tone-bg); color: var(--tone-fg);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase;
}
.type-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .5rem; border-radius: var(--r-xs); border: 1px solid var(--line-strong);
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap;
}
.type-chip .icon { width: .95rem; height: .95rem; }
.type-chip--sm { padding: .05rem .4rem; font-size: var(--fs-2xs); }
.count-pill {
  display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem;
  margin-left: .3rem; padding-inline: .5rem; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--text);
  font: var(--fw-bold) var(--fs-sm) / 1 var(--font-body); letter-spacing: 0; vertical-align: .35em;
}