/* Cloche des notifications des forums connectés, en-tête du site (axe BN6). Couleurs en variables, thème clair compris. */
.fx-notif {
	--fx-bg: #061325;
	--fx-card-unread: rgba(56, 152, 236, .1);
	--fx-line: rgba(147, 169, 194, .18);
	--fx-text: #e8f0f8;
	--fx-muted: #93a9c2;
	--fx-brand: #1d74c4;
	--fx-brand-soft: rgba(56, 152, 236, .16);
	--fx-unread: #f0a43a;
	position: relative;
	color: inherit;
}

html[data-theme=light] .fx-notif {
	--fx-bg: #ffffff;
	--fx-card-unread: #eaf3fc;
	--fx-line: #d5e0ea;
	--fx-text: #12263b;
	--fx-muted: #4f6780;
	--fx-brand: #1565a8;
	--fx-brand-soft: #e3effa;
	--fx-unread: #b5650d;
}

.fx-notif > summary { list-style: none; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; color: inherit; }
.fx-notif > summary::-webkit-details-marker { display: none; }
.fx-notif > summary:hover { background: var(--fx-brand-soft); }
.fx-badge { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--fx-unread); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.fx-notif-panel { position: absolute; right: 0; top: 52px; z-index: 60; width: min(380px, calc(100vw - 32px)); border: 1px solid var(--fx-line); border-radius: 14px; background: var(--fx-bg); color: var(--fx-text); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); text-transform: none; font-size: 14px; font-weight: 400; letter-spacing: 0; overflow: hidden; }
.fx-notif-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; }
.fx-notif-top strong { font-size: 15px; }
.fx-notif-top button { padding: 0; border: 0; background: none; color: var(--fx-muted); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fx-notif-list { list-style: none; margin: 0; padding: 0 6px; max-height: 320px; overflow-y: auto; }
.fx-notif-list a { display: flex; gap: 10px; padding: 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.fx-notif-list a:hover { background: var(--fx-brand-soft); }
.fx-notif-list .is-unread { background: var(--fx-card-unread); }
.fx-notif-list a > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.fx-notif-list span span { display: block; color: var(--fx-muted); font-size: 12px; margin-top: 2px; }
.fx-notif-empty { padding: 10px 10px 14px; color: var(--fx-muted); }
.fx-notif-ic { width: 32px; height: 32px; flex: none; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: 13px; background: #1d74c4; }
.fx-notif-mention { background: #8a4fd1; }
.fx-notif-pm { background: #2b7a5f; }
.fx-notif-reaction { background: #c23c6b; }
.fx-notif-quote { background: #5b6fb0; }
.fx-notif-approved { background: #2f8f57; }
.fx-notif-other, .fx-notif-topic { background: #5d7088; }
.fx-notif-push { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 12px 16px 14px; border-top: 1px solid var(--fx-line); }
.fx-notif-push p { margin: 0; color: var(--fx-muted); font-size: 13px; line-height: 1.45; }
.fx-notif-push button { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--fx-brand); border-radius: 10px; background: var(--fx-brand); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.fx-notif-push button[aria-pressed="true"] { background: transparent; color: var(--fx-text); border-color: var(--fx-line); }
.fx-notif-all { display: block; padding: 10px 16px; border-top: 1px solid var(--fx-line); color: inherit; font-weight: 600; text-align: center; text-decoration: none; }
.fx-notif-all:hover { background: var(--fx-brand-soft); }
@media (max-width: 1023px) {
	.fx-notif { position: static; }
	.fx-notif-panel { left: 16px; right: 16px; top: 68px; width: auto; }
}