/* Messages d'alerte : lien de la barre du haut, page #/alertes, réglage des e-mails d'alerte (page et Compte) */

/* ---------- barre du haut ---------- */
.topnav a.nav-alertes { white-space: nowrap; }

/* ---------- résumé et légende ---------- */
.al-resume { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.al-puce { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 12px; font-size: .84rem; font-weight: 800; }
.al-puce.al-rouge { background: var(--red-050); color: var(--red-600); }
.al-puce.al-orange { background: var(--amber-050); color: var(--amber-600); }
.al-puce.al-bleu { background: var(--blue-050); color: var(--blue-700); }
.al-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .8rem; color: var(--ink-soft); margin: 0 0 14px; }
.al-leg { display: inline-flex; align-items: center; gap: 6px; }
.al-point { flex: 0 0 auto; display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.al-point.al-rouge { background: var(--red-600); }
.al-point.al-orange { background: var(--amber-600); }
.al-point.al-bleu { background: var(--blue-500); }
.al-attente { margin: 0 0 14px; }

/* ---------- groupes (un par dossier) ---------- */
.al-groupe { border-left: 5px solid var(--blue-400); }
.al-groupe.al-g-rouge { border-left-color: var(--red-600); }
.al-groupe.al-g-orange { border-left-color: var(--amber-600); }
.al-g-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 4px; }
.al-g-nom { min-width: 0; flex: 1 1 220px; }
.al-g-nom h2 { margin-bottom: 2px; overflow-wrap: anywhere; }
.al-g-sous { color: var(--ink-soft); font-size: .84rem; overflow-wrap: anywhere; }
.al-items { list-style: none; margin: 0; padding: 0; }
.al-item { padding: 12px 0; border-top: 1px solid var(--line); }
.al-item:first-child { border-top: 0; }
.al-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.al-titre { font-size: .95rem; overflow-wrap: anywhere; min-width: 0; }
.al-detail { margin: 6px 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); white-space: pre-line; overflow-wrap: anywhere; }
.al-action { margin-top: 8px; }
.al-vide h2 { color: var(--green-600); }
.al-vide .sub { margin-bottom: 0; }

/* ---------- réglage des e-mails d'alerte ---------- */
.al-reglage { max-width: 640px; }
.al-intro { margin-bottom: 14px; }
.al-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: .95rem; position: relative; }
.al-switch input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.al-piste { flex: 0 0 auto; width: 44px; height: 24px; border-radius: 999px; background: #c9d3e1; position: relative; transition: background .15s; }
.al-piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13, 34, 71, .3); transition: transform .15s; }
.al-switch input:checked + .al-piste { background: var(--green-500); }
.al-switch input:checked + .al-piste::after { transform: translateX(20px); }
.al-switch input:focus-visible + .al-piste { box-shadow: 0 0 0 3px rgba(36, 112, 221, .3); }
.al-switch input:disabled + .al-piste { opacity: .6; }
.al-etat { min-height: 1.2em; margin: 8px 0 0; font-size: .85rem; color: var(--ink-soft); }
.al-etat.ok { color: var(--green-600); }
.al-etat.err { color: var(--red-600); }
.al-cond { margin-top: 10px; }
.al-cond .notice-banner { margin-bottom: 0; }
.al-dest { font-size: .86rem; color: var(--ink-soft); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .al-g-tete .btn { padding: 6px 10px; }
}