/* =====================================================================
   BOOKING — centre de notifications (cloche topbar + panneau)
   ===================================================================== */

.bk-notif { position: relative; margin-right: 6px; }

.bk-notif-cloche { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; background: none; border-radius: 10px; color: #6b7280; cursor: pointer; transition: background .12s, color .12s; }
.bk-notif-cloche:hover { background: #f1f2f4; color: #14161a; }
.bk-notif-cloche svg { width: 20px; height: 20px; }

.bk-notif-badge { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; background: #e5484d; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; border-radius: 9px; box-shadow: 0 0 0 2px #fff; }

.bk-notif-panel { position: absolute; top: 46px; right: 0; width: 360px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid #eceef1; border-radius: 16px; box-shadow: 0 12px 40px rgba(16,24,40,.18); z-index: 5000; overflow: hidden; }

.bk-notif-tete { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f1f2f4; }
.bk-notif-titre { font-size: 14px; font-weight: 700; color: #14161a; }
.bk-notif-alllu { border: 0; background: none; color: #2563eb; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.bk-notif-alllu:hover { text-decoration: underline; }

.bk-notif-liste { max-height: 420px; overflow-y: auto; }
.bk-notif-vide { text-align: center; color: #9aa1ac; font-size: 13px; padding: 32px 16px; margin: 0; }

.bk-notif-item { display: flex; align-items: flex-start; gap: 11px; padding: 12px 16px; border-bottom: 1px solid #f6f7f8; cursor: pointer; transition: background .12s; }
.bk-notif-item:hover { background: #f7f8fa; }
.bk-notif-item:last-child { border-bottom: 0; }
.bk-notif-nl { background: #eff4ff; }
.bk-notif-nl:hover { background: #e4edff; }

.bk-notif-ico { flex-shrink: 0; font-size: 18px; line-height: 1.3; }
.bk-notif-corps { flex: 1; min-width: 0; }
.bk-notif-t { margin: 0; font-size: 13px; font-weight: 600; color: #14161a; }
.bk-notif-m { margin: 2px 0 0; font-size: 12px; color: #5b6472; line-height: 1.45; }
.bk-notif-d { margin: 4px 0 0; font-size: 11px; color: #9aa1ac; }

.bk-notif-check { flex-shrink: 0; width: 24px; height: 24px; border: 1px solid #e0e2e7; background: #fff; border-radius: 6px; color: #9aa1ac; font-size: 12px; cursor: pointer; line-height: 1; transition: all .12s; }
.bk-notif-check:hover { border-color: #34d399; color: #067647; }

@media (max-width: 640px) {
	.bk-notif { position: static; }
	.bk-notif-panel { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; max-width: none; }
}