.notification-button { position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--color-border); border-radius:50%; color:var(--color-text-light); background:white; cursor:pointer; }
.notification-button:hover { background:var(--color-primary-light); color:var(--color-primary); }
#notificationBadge { position:absolute; right:-5px; top:-5px; min-width:17px; height:17px; padding:0 4px; border:2px solid white; border-radius:12px; background:#b63e50; color:white; font-size:9px; font-weight:650; display:flex; align-items:center; justify-content:center; }
.notification-panel { position:fixed; inset:76px 22px auto auto; margin:0; padding:0; width:min(430px,calc(100vw - 24px)); max-height:calc(100dvh - 100px); border:1px solid var(--color-border); border-radius:14px; box-shadow:var(--shadow-lg); background:#fff; color:var(--color-text); }
.notification-panel[open] { display:flex; flex-direction:column; }
.notification-panel::backdrop { background:#17233b20; }
.notification-panel header { padding:20px; display:flex; justify-content:space-between; align-items:flex-start; gap:15px; border-bottom:1px solid var(--color-border); }
.notification-panel h2 { font-size:18px; margin:0; letter-spacing:-.025em; }
.notification-panel header p { color:var(--color-text-light); font-size:11px; margin:5px 0 0; }
.notification-close { border:0; background:transparent; color:var(--color-text-light); cursor:pointer; padding:3px; }
.notification-tools { display:flex; justify-content:space-between; padding:10px 20px; gap:10px; }
.notification-tools button { border:0; background:transparent; color:var(--color-primary); cursor:pointer; font-size:11px; }
.notification-list { overflow:auto; min-height:100px; flex:1; padding:0 8px; }
.notification-item { display:block; text-decoration:none; color:var(--color-text); padding:13px 14px 13px 25px; position:relative; border-top:1px solid #f0f2f7; border-radius:7px; }
.notification-item:hover { background:#f4f6fc; }
.notification-item.is-unread { background:#f7f9ff; }
.notification-item.is-unread::before { content:''; position:absolute; left:10px; top:20px; width:5px; height:5px; border-radius:50%; background:var(--color-primary); }
.notification-item strong { display:block; font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.notification-item span { display:block; font-size:11px; color:var(--color-primary); margin-top:4px; }
.notification-item time { display:block; font-size:10px; color:var(--color-text-light); margin-top:5px; }
.notification-empty { padding:35px 20px; text-align:center; color:var(--color-text-light); font-size:12px; }
.notification-preferences { padding:16px 20px; border-top:1px solid var(--color-border); overflow:auto; flex-shrink:0; max-height:340px; background:#fafbfe; }
.notification-preferences summary { cursor:pointer; font-size:12px; color:var(--color-primary); font-weight:600; }
.notification-preferences form { padding-top:14px; }
.notification-preferences label { display:flex; gap:9px; align-items:center; font-size:12px; margin-bottom:12px; }
.notification-preferences input { accent-color:var(--color-primary); }
.notification-preferences p { font-size:11px; color:var(--color-text-light); margin:10px 0; }
#notificationPreferenceStatus { display:block; font-size:11px; margin-top:8px; color:var(--color-success); }
#notificationError { padding:12px 20px; color:var(--color-error); font-size:12px; }
.notification-toast { position:fixed; z-index:2200; right:22px; bottom:22px; display:flex; align-items:center; gap:14px; width:min(430px,calc(100vw - 32px)); padding:17px; border:1px solid var(--color-border); border-left:3px solid var(--color-primary); border-radius:10px; background:white; color:var(--color-text); box-shadow:var(--shadow-lg); }
.notification-toast>div { flex:1; min-width:0; }
.notification-toast strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.notification-toast span { display:block; font-size:11px; color:var(--color-text-light); margin-top:4px; }
.notification-toast button { border:0; background:none; color:var(--color-primary); cursor:pointer; font-size:12px; }
@media(max-width:767px) { .notification-panel { inset:68px 12px auto; max-height:calc(100dvh - 90px); }.notification-toast { bottom:88px; right:16px; }.notification-preferences { max-height:270px; } }
@media(max-width:767px) {
 .notification-panel { inset:8px 8px auto; width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
 .notification-panel header { padding:16px; flex-shrink:0; }
 .notification-close { min-width:40px; min-height:40px; display:flex; align-items:center; justify-content:center; }
 .notification-tools { padding:4px 16px; flex-shrink:0; }.notification-tools button { min-height:44px; font-size:12px; }
 .notification-item strong { font-size:13px; }.notification-item span { font-size:12px; }.notification-item time { font-size:11px; }
 .notification-preferences { padding:12px 16px; max-height:min(360px,50dvh); }
 .notification-preferences summary { min-height:32px; padding:5px 0; font-size:13px; }
 .notification-preferences label { min-height:32px; align-items:flex-start; font-size:13px; }.notification-preferences input { margin-top:3px; flex-shrink:0; }
 .notification-preferences button { min-height:44px; }
}
@media(max-height:600px) { .notification-panel { top:8px; max-height:calc(100dvh - 16px); overflow-y:auto; }.notification-panel header { padding:10px 16px; }.notification-list { min-height:80px; }.notification-preferences { flex-shrink:1; max-height:45dvh; } }

/* Centre de notifications : lecture rapide, état non lu et actions discrètes. */
.notification-panel { box-sizing:border-box; max-width:calc(100vw - 16px); width:min(460px,calc(100vw - 24px)); border-color:#e1e6ef; border-radius:20px; box-shadow:0 24px 80px #17233b26,0 4px 14px #17233b0d; }
.notification-panel::backdrop { background:#17233b30; backdrop-filter:blur(2px); }
.notification-panel header { align-items:center; padding:22px; border-bottom:0; gap:12px; }
.notification-panel header > div { flex:1; min-width:0; }
.notification-header-icon { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:14px; background:#edf1fc; color:#5b6ea9; }
.notification-panel h2 { font-size:20px; font-weight:650; }
.notification-panel header p { font-size:12px; color:#6e7c91; }
.notification-close { display:grid; place-items:center; min-width:32px; min-height:32px; border-radius:9px; }
.notification-close:hover { background:#f0f3f9; }
.notification-filters { display:flex; gap:5px; margin:0 22px 14px; padding:4px; background:#f1f3f8; border-radius:10px; }
.notification-filters button { flex:1; display:flex; justify-content:center; align-items:center; gap:7px; min-height:34px; border:0; border-radius:7px; color:#67758c; background:transparent; font-size:12px; font-weight:600; cursor:pointer; }
.notification-filters button[aria-pressed="true"] { background:#fff; color:#334b83; box-shadow:0 1px 4px #20304a13; }
#notificationUnreadCount { padding:2px 5px; background:#e7ecf8; border-radius:5px; font-size:10px; color:#52689e; }
.notification-tools { padding:0 22px 12px; border-bottom:1px solid #edf0f5; }
.notification-tools button { display:inline-flex; align-items:center; gap:6px; color:#627392; padding:4px 0; min-height:28px; }
.notification-tools button:hover { color:#314f94; }
.notification-panel button:disabled { opacity:.45; cursor:default; }
.notification-list { padding:8px; scrollbar-width:thin; scrollbar-color:#d9dfeb transparent; }
.notification-item { display:flex; align-items:flex-start; gap:12px; padding:15px 14px; border:0; border-radius:11px; margin-bottom:4px; }
.notification-item.is-unread { background:#f1f5ff; }
.notification-item.is-unread::before { display:none; }
.notification-item:hover { background:#eaf0fc; }
.notification-item .notification-kind-icon { display:grid; place-items:center; width:35px; height:35px; flex-shrink:0; margin:0; border:1px solid #e2e8f4; background:#fff; color:#7585a6; border-radius:11px; }
.notification-item.is-unread .notification-kind-icon { color:#546eb0; }
.notification-copy { min-width:0; flex:1; }
.notification-item .notification-kind { margin:0 0 5px; font-size:10px; font-weight:500; color:#6f7c92; line-height:1.4; }
.notification-item strong { font-size:13px; line-height:1.45; color:#263653; }
.notification-item time { display:flex; align-items:center; gap:5px; margin-top:8px; font-size:10px; color:#7c889c; }
.notification-item time svg { width:12px; height:12px; }
.notification-item .notification-unread-dot { display:block; width:6px; height:6px; background:#7187c7; border-radius:50%; flex-shrink:0; margin-top:6px; }
.notification-empty { padding:40px 22px; line-height:1.6; }
.notification-empty > svg { display:block; width:36px; height:36px; margin:0 auto 15px; color:#94a3bf; }
.notification-empty strong { display:block; font-size:14px; color:#33435e; }
.notification-empty p { margin:8px 0 0; font-size:12px; color:#7b879c; }
.notification-preferences { background:#fafbfe; padding:16px 22px; }
.notification-preferences summary { display:flex; align-items:center; gap:8px; color:#66758e; list-style:none; font-size:11px; }
.notification-preferences summary::-webkit-details-marker { display:none; }
.notification-preferences summary svg:last-child { margin-left:auto; transition:transform .15s ease; }
.notification-preferences[open] summary svg:last-child { transform:rotate(90deg); }
.notification-preferences label { padding:8px 0; margin:0; border-bottom:1px solid #edf0f5; line-height:1.5; }
.notification-preferences input { width:16px; height:16px; flex-shrink:0; }
.notification-preferences p { line-height:1.6; }
#notificationError { background:#fff3f1; border:1px solid #f4ded9; color:#a05046; padding:12px; border-radius:9px; margin:0 16px 10px; }
.notification-toast { border:1px solid #dfe6f2; border-radius:16px; padding:16px; box-shadow:0 12px 40px #20304a20; gap:12px; }
.notification-toast .notification-toast-icon { display:grid; place-items:center; flex-shrink:0; width:39px; height:39px; background:#edf1fc; color:#6176ad; border-radius:12px; margin:0; }
.notification-toast .notification-toast-eyebrow { font-size:9px; color:#7c8aa4; margin:0 0 4px; }
.notification-toast button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:32px; }
.notification-toast #notificationToastClose { color:#8c99af; padding:4px; }
.notification-panel :is(button,summary,a,input):focus-visible,.notification-toast button:focus-visible { outline:3px solid #8b9edf; outline-offset:2px; }
.notification-panel[open] { animation:notification-appear .18s ease-out; }
@keyframes notification-appear { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media(max-width:767px) {
 .notification-panel { inset:auto 8px 8px; width:calc(100vw - 16px); max-height:calc(100dvh - 24px); border-radius:20px; }
 .notification-panel header { padding:18px; }
 .notification-filters { margin:0 18px 12px; }
 .notification-filters button { min-height:40px; }
 .notification-tools { padding:0 18px 10px; }
 .notification-tools button { min-height:40px; }
 .notification-preferences summary { min-height:36px; }
 .notification-toast { flex-wrap:wrap; gap:8px; }
 .notification-toast>div { flex-basis:calc(100% - 60px); }
 .notification-toast #notificationToastOpen { margin-left:47px; }
 .notification-toast #notificationToastClose { margin-left:auto; }
}
@media(prefers-reduced-motion:reduce) {
 .notification-panel[open] { animation:none; }
 .notification-preferences summary svg:last-child { transition:none; }
}

/* Deux vues stables : activité et préférences. */
.notification-panel { width:min(520px,calc(100vw - 24px)); height:min(720px,calc(100dvh - 100px)); }
.notification-panel [hidden] { display:none !important; }
.notification-panel header { flex-shrink:0; }
.notification-tabs { display:flex; padding:0 22px; gap:24px; border-bottom:1px solid var(--color-border); flex-shrink:0; }
.notification-tabs button { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 2px; border:0; border-bottom:2px solid transparent; background:none; font:inherit; font-size:13px; color:var(--color-text-light); cursor:pointer; }
.notification-tabs button[aria-pressed="true"] { color:var(--color-primary); border-bottom-color:var(--color-primary); font-weight:600; }
#notificationActivity { display:flex; flex-direction:column; min-height:0; flex:1; }
.notification-filters { margin:16px 22px 10px; }
.notification-list { min-height:0; }
.notification-item { align-items:center; gap:6px; padding:4px 8px 4px 4px; }
.notification-item-link { display:flex; align-items:flex-start; gap:12px; min-width:0; flex:1; padding:12px 8px; color:inherit; text-decoration:none; border-radius:8px; }
.notification-item-actions { display:flex; flex-direction:column; gap:4px; }
.notification-item-actions button { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:8px; background:transparent; color:#627392; cursor:pointer; }
.notification-item-actions button:hover { background:white; color:var(--color-primary); }
.notification-item-actions button[data-action="dismiss"]:hover { color:var(--color-error); }
.notification-preferences { min-height:0; flex:1; flex-shrink:1; max-height:none; overflow:auto; padding:22px; background:white; }
.notification-preferences form { padding:0; }
.notification-preferences h3 { font-size:14px; margin:0 0 6px; color:var(--color-text); }
.notification-preferences .notification-section-intro { margin:0 0 14px; font-size:12px; }
.notification-preferences fieldset { border:0; padding:0; margin:0; min-width:0; }
.notification-preferences legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.notification-preferences label { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; cursor:pointer; }
.notification-preferences label span { min-width:0; }
.notification-preferences label strong { display:block; font-size:13px; font-weight:600; }
.notification-preferences label small { display:block; font-size:12px; color:var(--color-text-light); margin-top:4px; }
.notification-preferences input[role="switch"] { appearance:none; width:36px; height:22px; margin:0; border:1px solid #97a3b6; border-radius:20px; background:#c4cbd6; position:relative; cursor:pointer; }
.notification-preferences input[role="switch"]::before { content:''; display:block; width:16px; height:16px; border-radius:50%; background:white; position:absolute; top:2px; left:2px; }
.notification-preferences input[role="switch"]:checked { background:var(--color-primary); border-color:var(--color-primary); }
.notification-preferences input[role="switch"]:checked::before { left:16px; }
.notification-preferences input:disabled { opacity:.45; cursor:wait; }
.notification-preference-save { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding-top:16px; }
#notificationPreferenceStatus { margin:0; color:var(--color-text-light); font-size:12px; }
.notification-sound-settings { border-top:1px solid var(--color-border); margin-top:24px; padding-top:22px; }
.notification-sound-settings label { border:0; }
.notification-settings-note { padding-top:14px; border-top:1px solid var(--color-border); }
.notification-feedback { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; padding:12px 22px; border-top:1px solid var(--color-border); background:#f1f5ff; font-size:12px; }
.notification-feedback button { border:0; background:none; color:var(--color-primary); cursor:pointer; min-height:36px; font-weight:600; }
@media(max-width:767px) {
 .notification-panel { width:calc(100vw - 16px); height:min(760px,calc(100dvh - 24px)); }
 .notification-tabs { padding:0 18px; }
 .notification-preferences { padding:20px 18px; max-height:none; }
 .notification-item-actions button { width:40px; height:40px; }
}
@media(max-height:600px) { .notification-panel { height:calc(100dvh - 16px); }.notification-preferences { max-height:none; } }