/* ═══ NOTIFICATIONS (Socle Phase 4) — la cloche + le panneau (mockup V3) ═══ */
/* Socle Phase 5 : « Mon tableau de bord » — la pilule d'en-tête, la même pour
   tous (c'est le CONTENU de la page qui dépend du rôle). C'est ELLE qui pousse
   le groupe [tableau · cloche · heure] à droite (margin-left:auto) — la cloche
   se colle simplement derrière. */
#tb-header-btn {
  display: flex; align-items: center; gap: 8px; flex: none;
  margin-left: auto; margin-right: 12px;
  border: 1px solid var(--border, rgba(200, 220, 200, 0.6)); background: var(--card, #fff);
  border-radius: 100px; padding: 4px 14px 4px 4px;
  font-size: 12.5px; font-weight: 600; color: var(--text2); cursor: pointer;
}
#tb-header-btn:hover { border-color: rgba(47, 191, 122, 0.3); color: var(--green-dark); }
#tb-hb-av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  /* Vert Artois (charte) — le vert bouteille n'est pas le code (Maxime 10h23) */
  background: var(--green); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

#soma-cloche {
  position: relative; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--border, rgba(200, 220, 200, 0.6)); background: var(--card, #fff);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--text2); cursor: pointer; margin-right: 12px;
}
#soma-cloche:hover { border-color: rgba(47, 191, 122, 0.3); color: var(--green-dark); }
#soma-cloche-n {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
  border-radius: 100px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  display: none; align-items: center; justify-content: center; padding: 0 4px;
  border: 2px solid var(--card, #fff);
}
#soma-notifs {
  position: fixed; top: 52px; right: 16px; width: 400px; z-index: 4000; display: none;
  background: var(--card, #fff); border: 1px solid var(--border, rgba(200, 220, 200, 0.6));
  border-radius: 22px; box-shadow: 0 12px 32px rgba(13, 27, 15, 0.14); overflow: hidden;
}
#soma-notifs.on { display: block; }
#soma-notifs .sn-h { display: flex; align-items: center; gap: 9px; padding: 13px 16px 10px; border-bottom: 1px solid var(--border, rgba(200, 220, 200, 0.6)); }
#soma-notifs .sn-h b { font-size: 14px; font-weight: 700; color: var(--text); }
#soma-notifs .sn-sp { flex: 1; }
#soma-notifs .sn-lu { border: 0; background: none; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--green-dark); cursor: pointer; }
#soma-notifs .sn-i { display: flex; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--border, rgba(200, 220, 200, 0.6)); cursor: pointer; }
#soma-notifs .sn-i:hover { background: var(--bg); }
#soma-notifs .sn-i.un { background: rgba(26, 79, 184, 0.05); }
#soma-notifs .sn-ic { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; }
#soma-notifs .sn-ic.a { background: rgba(26, 79, 184, 0.08); color: var(--soma-navy, #1a4fb8); }
#soma-notifs .sn-ic.m { background: rgba(47, 191, 122, 0.1); color: var(--green-dark); }
#soma-notifs .sn-ic.w { background: rgba(201, 120, 0, 0.1); color: var(--yellow); }
#soma-notifs .sn-x .t { font-size: 12.5px; line-height: 1.45; color: var(--text2); }
#soma-notifs .sn-x .t b { font-weight: 700; color: var(--text); }
#soma-notifs .sn-x .d { font-size: 10.5px; color: var(--muted); margin-top: 2px; font-family: 'Lora', Georgia, serif; font-style: italic; }
#soma-notifs .sn-vide { padding: 22px 18px; font-size: 12.5px; color: var(--muted); text-align: center; }
#soma-notifs .sn-f {
  padding: 10px 15px; border-top: 1px solid var(--border, rgba(200, 220, 200, 0.6)); background: var(--bg);
  font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 11px; color: var(--muted);
}

/* Alignement (retour Maxime 18h27) : la cloche se COLLE au bloc date/heure à
   droite — deux margin-left:auto se partageaient l'espace, la cloche flottait
   au milieu. L'auto vit sur la cloche ; la date suit à 16px. */
#app-header #app-datetime { margin-left: 16px; }