/* Couche CSS « core » (voir Theme::buildCoreHeaders) : gagne sur BootstrapVendor, perd contre tout CSS sans couche (Theme.css, pages Produit). */
@layer core {
/* ================================================================================================
	NOTIFY (Core) - mécanique seulement : disposition des deux formes (pilule, carte), pile,
	barre de progression. L'apparence (surface, couleurs d'état) vit dans Skin.css.
================================================================================================ */

.bootstrap-notify-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: .75rem !important;
	z-index: 1090;
}
.bootstrap-notify-stack.end-0 { align-items: flex-end; }
.bootstrap-notify-stack.start-0 { align-items: flex-start; }

.bootstrap-notify {
	position: relative;
	overflow: hidden;
	width: auto;
	max-width: min(24rem, calc(100vw - 1.5rem));
	margin: 0 !important;
}
.bootstrap-notify:not(.show) { display: none; }

/* ---- Pilule : icône + message ---- */
.bootstrap-notify-pill {
	display: flex;
	align-items: center;
	gap: .625rem;
	min-height: 2.5rem;
	padding: .375rem 1rem .375rem .5rem;
	border-radius: 999px;
	cursor: pointer;
}
.bootstrap-notify-pill .bootstrap-notify-message { font-weight: 500; }

/* ---- Carte : icône | titre + fermer / message / actions ---- */
.bootstrap-notify-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: .75rem;
	width: 22rem;
	padding: .875rem .625rem .75rem .875rem;
}
.bootstrap-notify-card .bootstrap-notify-icon { grid-row: span 3; align-self: start; }
.bootstrap-notify-card .bootstrap-notify-title { grid-column: 2; align-self: center; font-weight: 600; }
.bootstrap-notify-card .bootstrap-notify-close { grid-column: 3; grid-row: 1; align-self: start; margin-top: -.125rem; }
.bootstrap-notify-card .bootstrap-notify-message { grid-column: 2 / span 2; padding-right: .375rem; overflow-wrap: anywhere; }
.bootstrap-notify-card .bootstrap-notify-actions {
	grid-column: 2 / span 2;
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .375rem 0 0 -.5rem;
}
.bootstrap-notify-meta { margin-left: auto; padding-right: .375rem; font-size: .6875rem; white-space: nowrap; }
.bootstrap-notify-card.bootstrap-notify-overflow { display: none !important; }

.bootstrap-notify-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	font-size: .9375rem;
}
.bootstrap-notify-pill .bootstrap-notify-icon { width: 1.5rem; height: 1.5rem; font-size: .8125rem; }

.bootstrap-notify-summary {
	pointer-events: auto;   /* .toast-container (Bootstrap) coupe les clics, sauf sur .toast */
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .75rem;
}

/* ---- Barre de progression (autohide seulement) - le JS pilote départ/arrêt/redémarrage ---- */
.bootstrap-notify-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	transform-origin: left;
}
@keyframes bootstrap-notify-shrink {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

/* ---- Confirmation (notify.confirm) : pastille d'icône + titre + texte ---- */
.bootstrap-confirm {
	display: flex;
	gap: 1rem;
	padding: .5rem .25rem .25rem;
}
.bootstrap-confirm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	font-size: 1.125rem;
}
.bootstrap-confirm-title { margin: .375rem 0 .375rem; font-size: 1rem; font-weight: 600; }
.bootstrap-confirm-modal .modal-dialog { max-width: 28rem; }
}