/* Ostéobio - centre de notifications (cloche + panneau + toasts)
   Remplace le bandeau promo. z-index des toasts et du panneau
   volontairement bien inférieurs à celui du bandeau/popin de
   consentement tarteaucitron (2147483647). */

/* ── Cloche ──────────────────────────────────────────────────── */
.notif-bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--navy, #0A1628);
	background: transparent;
	flex-shrink: 0;
}
.notif-bell:hover { background: var(--teal-soft, #FFF6D8); }
.notif-bell:focus-visible { outline: 2px solid #F5C04C; outline-offset: 2px; }

.notif-bell--mobile { display: none; }
@media (max-width: 960px) {
	.notif-bell--desktop { display: none; }
	.notif-bell--mobile { display: inline-flex; margin-right: 8px; }
}

.notif-bell__badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: #E23D3D;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}
.notif-bell__badge[hidden] { display: none; }

/* ── Panneau ─────────────────────────────────────────────────── */
.notif-panel {
	position: fixed;
	top: 64px;
	right: 16px;
	z-index: 999995;
	width: min(380px, calc(100vw - 32px));
	max-height: min(520px, calc(100vh - 96px));
	overflow-y: auto;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(10, 22, 40, 0.25);
	border-top: 3px solid #F5C04C;
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.notif-panel[hidden] { display: block !important; }
.notif-panel.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.notif-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(10, 22, 40, 0.08);
}
.notif-panel__header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #0A1628;
}
.notif-panel__close {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6B7A90;
}
.notif-panel__close:hover { background: #F4F8F6; color: #0A1628; }

.notif-panel__list {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.notif-panel__empty {
	padding: 24px 16px;
	text-align: center;
	color: #6B7A90;
	font-size: 14px;
}

/* Chaque notification est une carte visuellement distincte, structure
   interne strictement identique quelle que soit la notification (Tache
   F5) : point non lu + titre en tête, description, puis une rangée
   d'actions alignée à l'identique - CTA à gauche, "Marquer comme lu" à
   droite - jamais l'inverse, jamais de position variable. */
.notif-item {
	padding: 14px 16px;
	border-radius: 8px;
	background: #F4F8F6;
	transition: opacity 0.2s ease;
}
.notif-item.is-read { opacity: 0.55; }

.notif-item__head {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 4px;
}
.notif-item__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin-top: 6px;
	border-radius: 50%;
	background: #F5C04C;
}
.notif-item__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: #0A1628;
}
.notif-item__desc {
	margin: 0 0 12px;
	font-size: 13px;
	color: #6B7A90;
	line-height: 1.5;
}
.notif-item__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.notif-item__cta {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 8px;
	background: #F5C04C;
	color: #0A1628;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.notif-item__cta:hover { background: #B5820A; color: #0A1628; }
.notif-item__markread {
	font-size: 12px;
	color: #6B7A90;
	text-decoration: underline;
	background: none;
}
.notif-item__markread:hover { color: #0A1628; }

/* ── Toasts ──────────────────────────────────────────────────── */
.notif-toasts {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999990;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 12px;
	max-height: 50vh;
	overflow: hidden;
	pointer-events: none;
	/* La pile ne doit jamais dépasser la moitié de l'écran (max-height).
	   overflow:hidden (et non "auto") délibérément : avec overflow:auto,
	   le décalage transform temporaire appliqué par le repositionnement
	   FLIP (notifications.js) au moment où un toast est retiré du DOM
	   élargit un instant la zone de débordement scrollable du conteneur
	   (le transform d'un toast repositionné compte dans le calcul du
	   scrollable overflow tant que la transition n'est pas retombée à
	   zéro), ce qui faisait apparaître puis disparaître une scrollbar
	   pendant la succession des toasts. overflow:hidden élimine cette
	   possibilité par construction, quelle que soit la cause exacte du
	   débordement transitoire - jamais de scrollbar, jamais de saut. */
}
@media (max-width: 767px) {
	.notif-toasts {
		left: 16px;
		right: 16px;
		bottom: 16px;
		align-items: stretch;
	}
}

.notif-toast {
	pointer-events: auto;
	width: min(360px, calc(100vw - 32px));
	background: #0A1628;
	color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(10, 22, 40, 0.35);
	padding: 16px 40px 16px 16px;
	position: relative;
	transform: translateY(120%);
	opacity: 0;
	transition: transform 450ms cubic-bezier(0.55, 0, 0.1, 1), opacity 450ms cubic-bezier(0.55, 0, 0.1, 1);
}
.notif-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
}
/* Sortie à la fermeture : fondu + courte translation (~250ms), plus
   rapide que l'entrée - jamais de propriété de layout animée, toujours
   transform/opacity uniquement. */
.notif-toast.is-leaving {
	transition: transform 250ms ease, opacity 250ms ease;
	transform: translateY(-8px);
	opacity: 0;
}
@media (max-width: 767px) {
	.notif-toast { width: 100%; }
}

.notif-toast__title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}
.notif-toast__desc {
	margin: 0 0 12px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.45;
}
.notif-toast__cta {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: 8px;
	background: #F5C04C;
	color: #0A1628;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.notif-toast__cta:hover { background: #B5820A; color: #0A1628; }
.notif-toast__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.08);
}
.notif-toast__close:hover { color: #ffffff; background: rgba(255, 255, 255, 0.18); }

@media (prefers-reduced-motion: reduce) {
	.notif-toast {
		transform: none;
		transition: opacity 450ms ease;
	}
	.notif-toast.is-leaving {
		transform: none;
		transition: opacity 150ms ease;
	}
	.notif-panel {
		transform: none;
		transition: opacity 0.18s ease;
	}
}