/**
 * TMEF Notifications — widget public.
 * Mode sombre calé sur l'identité du site : fond #0f0f0f, cartes #242526, doré.
 */

.tmef-notif-widget {
	--tmef-notif-accent: #c59d26;
	--tmef-notif-radius: 12px;
	--tmef-notif-width: auto;
	--tmef-notif-card: #242526;
	--tmef-notif-bg: #0f0f0f;
	--tmef-notif-text: #f2f2f2;
	--tmef-notif-muted: #a3a3a3;

	box-sizing: border-box;
	max-width: 100%;
	font-family: inherit;
	color: var(--tmef-notif-text);
}

.tmef-notif-widget *,
.tmef-notif-widget *::before,
.tmef-notif-widget *::after {
	box-sizing: border-box;
}

.tmef-notif-align-center { text-align: center; }
.tmef-notif-align-right  { text-align: right; }

.tmef-notif-lead {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--tmef-notif-muted);
}

/* Bouton ------------------------------------------------------------- */

.tmef-notif-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: var(--tmef-notif-width);
	padding: 13px 24px;
	border: 0;
	border-radius: var(--tmef-notif-radius);
	background: var(--tmef-notif-accent);
	color: #0f0f0f;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.tmef-notif-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px -10px var(--tmef-notif-accent);
}

.tmef-notif-btn:focus-visible {
	outline: 2px solid var(--tmef-notif-accent);
	outline-offset: 3px;
}

.tmef-notif-btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.tmef-notif-btn[data-state="on"] {
	background: transparent;
	color: var(--tmef-notif-accent);
	box-shadow: inset 0 0 0 2px var(--tmef-notif-accent);
}

.tmef-notif-btn[data-state="busy"] .tmef-notif-btn-icon {
	animation: tmef-notif-spin 1s linear infinite;
}

.tmef-notif-btn-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.tmef-notif-btn-icon svg {
	grid-area: 1 / 1;
	transition: opacity .2s ease, transform .2s ease;
}

.tmef-notif-ico-on {
	opacity: 0;
	transform: scale(.7);
}

.tmef-notif-btn[data-state="on"] .tmef-notif-ico-bell {
	opacity: 0;
	transform: scale(.7);
}

.tmef-notif-btn[data-state="on"] .tmef-notif-ico-on {
	opacity: 1;
	transform: none;
}

.tmef-notif-ico-check {
	stroke-dasharray: 13;
	stroke-dashoffset: 13;
}

.tmef-notif-btn[data-state="on"] .tmef-notif-ico-check {
	animation: tmef-notif-check .45s ease-out .12s forwards;
}

@keyframes tmef-notif-check {
	to { stroke-dashoffset: 0; }
}

@keyframes tmef-notif-spin {
	to { transform: rotate(360deg); }
}

/* Texte rétractable --------------------------------------------------- */

.tmef-notif-btn-text {
	display: inline-block;
	margin-left: 10px;
	max-width: 22em;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width .32s ease, margin-left .32s ease, opacity .22s ease;
}

/* Une fois activé : le bouton se réduit au pictogramme.
   Il se rouvre au survol, au focus clavier et quand le panneau est ouvert. */

.tmef-notif-widget[data-compact="1"] .tmef-notif-btn[data-state="on"] {
	width: auto;
	padding: 13px;
	border-radius: 999px;
}

.tmef-notif-widget[data-compact="1"] .tmef-notif-btn[data-state="on"] .tmef-notif-btn-text {
	max-width: 0;
	margin-left: 0;
	opacity: 0;
}

.tmef-notif-widget[data-compact="1"] .tmef-notif-btn[data-state="on"]:hover,
.tmef-notif-widget[data-compact="1"] .tmef-notif-btn[data-state="on"]:focus-visible,
.tmef-notif-widget[data-compact="1"] .tmef-notif-btn[data-state="on"][aria-expanded="true"] {
	padding: 13px 24px;
	border-radius: var(--tmef-notif-radius);
}

.tmef-notif-widget[data-compact="1"] .tmef-notif-btn[data-state="on"]:hover .tmef-notif-btn-text,
.tmef-notif-widget[data-compact="1"] .tmef-notif-btn[data-state="on"]:focus-visible .tmef-notif-btn-text,
.tmef-notif-widget[data-compact="1"] .tmef-notif-btn[data-state="on"][aria-expanded="true"] .tmef-notif-btn-text {
	max-width: 22em;
	margin-left: 10px;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tmef-notif-btn,
	.tmef-notif-btn-text,
	.tmef-notif-btn-icon svg,
	.tmef-notif-btn[data-state="busy"] .tmef-notif-btn-icon,
	.tmef-notif-btn[data-state="on"] .tmef-notif-ico-check,
	.tmef-notif-pulse { transition: none; animation: none; }

	.tmef-notif-ico-check { stroke-dashoffset: 0; }
}

/* Message d'état ----------------------------------------------------- */

.tmef-notif-msg {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--tmef-notif-muted);
	min-height: 1px;
}

.tmef-notif-msg.is-ok    { color: var(--tmef-notif-accent); }
.tmef-notif-msg.is-error { color: #ff6b6b; }
.tmef-notif-msg.is-warn  { color: #e0a93b; }

/* Préférences -------------------------------------------------------- */

.tmef-notif-prefs {
	margin-top: 16px;
	padding: 16px 18px;
	border-radius: var(--tmef-notif-radius);
	background: var(--tmef-notif-card);
	text-align: left;
}

.tmef-notif-prefs-title {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--tmef-notif-accent);
}

.tmef-notif-topic {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-size: 15px;
	cursor: pointer;
}

.tmef-notif-topic input {
	width: 18px;
	height: 18px;
	accent-color: var(--tmef-notif-accent);
	margin: 0;
	flex: 0 0 auto;
}

.tmef-notif-prefs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.tmef-notif-prefs-actions button {
	padding: 9px 16px;
	border: 0;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.tmef-notif-save {
	background: var(--tmef-notif-accent);
	color: #0f0f0f;
}

.tmef-notif-off {
	background: transparent;
	color: var(--tmef-notif-muted);
	box-shadow: inset 0 0 0 1px #3a3b3c;
}

.tmef-notif-off:hover { color: #ff6b6b; }

/* Appel d'attention automatique -------------------------------------- */

.tmef-notif-pulse .tmef-notif-btn {
	animation: tmef-notif-pulse 1.6s ease-out 3;
}

@keyframes tmef-notif-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tmef-notif-accent) 55%, transparent); }
	100% { box-shadow: 0 0 0 18px transparent; }
}

/* Avertissement réservé aux administrateurs -------------------------- */

.tmef-notif-warning {
	padding: 10px 14px;
	border-left: 3px solid #e0a93b;
	background: rgba(224, 169, 59, .12);
	font-size: 14px;
}

/* Mobile -------------------------------------------------------------- */

@media (max-width: 480px) {
	.tmef-notif-btn { width: 100%; }
	.tmef-notif-widget[data-compact="1"] .tmef-notif-btn[data-state="on"] { width: auto; }
	.tmef-notif-prefs-actions button { flex: 1 1 auto; }
}

/* Ouverture du panneau ------------------------------------------------ */

.tmef-notif-prefs:not([hidden]) {
	animation: tmef-notif-fade .22s ease-out;
}

@keyframes tmef-notif-fade {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tmef-notif-prefs:not([hidden]) { animation: none; }
}

/* ---------------------------------------------------------------------
 * Version modale
 * ------------------------------------------------------------------ */

.tmef-notif-locked {
	overflow: hidden;
}

.tmef-notif-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: inherit;
	--tmef-notif-accent: #c59d26;
	--tmef-notif-card: #242526;
	--tmef-notif-text: #f2f2f2;
	--tmef-notif-muted: #a3a3a3;
	--tmef-notif-radius: 16px;
}

.tmef-notif-modal[hidden] { display: none; }

.tmef-notif-modal *,
.tmef-notif-modal *::before,
.tmef-notif-modal *::after { box-sizing: border-box; }

.tmef-notif-modal-veil {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .72);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .22s ease;
}

.tmef-notif-modal.is-open .tmef-notif-modal-veil { opacity: 1; }

.tmef-notif-modal-panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 22px 24px 24px;
	border-radius: 18px;
	background: var(--tmef-notif-card);
	color: var(--tmef-notif-text);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
	opacity: 0;
	transform: translateY(14px) scale(.97);
	transition: opacity .22s ease, transform .26s cubic-bezier(.2, .8, .3, 1);
}

.tmef-notif-modal.is-open .tmef-notif-modal-panel {
	opacity: 1;
	transform: none;
}

.tmef-notif-modal-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}

.tmef-notif-modal-title {
	margin: 0;
	flex: 1 1 auto;
	font-size: 18px;
	font-weight: 700;
	color: var(--tmef-notif-text);
}

.tmef-notif-modal-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: var(--tmef-notif-muted);
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.tmef-notif-modal-close:hover {
	background: rgba(255, 255, 255, .12);
	color: var(--tmef-notif-text);
}

.tmef-notif-modal-close:focus-visible {
	outline: 2px solid var(--tmef-notif-accent);
	outline-offset: 2px;
}

.tmef-notif-modal-lead {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tmef-notif-muted);
}

/* Dans la modale, le panneau perd sa carte : il est deja dans une carte. */

.tmef-notif-modal .tmef-notif-prefs {
	margin-top: 0;
	padding: 0;
	background: none;
	animation: none;
}

.tmef-notif-modal .tmef-notif-topic {
	padding: 12px 14px;
	margin-bottom: 8px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .04);
	transition: background .16s ease;
}

.tmef-notif-modal .tmef-notif-topic:hover { background: rgba(255, 255, 255, .08); }

.tmef-notif-modal .tmef-notif-prefs-actions { margin-top: 18px; }
.tmef-notif-modal .tmef-notif-save { flex: 1 1 auto; padding: 12px 18px; }
.tmef-notif-modal .tmef-notif-off { padding: 12px 18px; }

.tmef-notif-msg-modal {
	margin: 12px 0 0;
	text-align: center;
}

/* Sur mobile, la modale devient une feuille qui monte du bas. */

@media (max-width: 560px) {
	.tmef-notif-modal {
		align-items: flex-end;
		padding: 0;
	}

	.tmef-notif-modal-panel {
		max-width: none;
		max-height: 88vh;
		padding-bottom: calc(24px + env(safe-area-inset-bottom));
		border-radius: 20px 20px 0 0;
		transform: translateY(100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tmef-notif-modal-veil,
	.tmef-notif-modal-panel { transition: none; }
	.tmef-notif-modal-panel { transform: none; }
}