/* Halloween : la citrouille posée sur une planche, et la bulle qui répond. */

.ori-hw-hote {
	position: relative;
}

.ori-hw-citrouille {
	position: absolute;
	z-index: 5;
	width: 58px;
	height: 58px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0;
	transform: scale(0.4) rotate(-12deg);
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	filter: drop-shadow(0 0 10px rgba(255, 138, 31, 0.75)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
	-webkit-tap-highlight-color: transparent;
}
.ori-hw-citrouille svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ori-hw-citrouille.est-vue {
	opacity: 1;
	transform: none;
	animation: ori-hw-balance 2.6s ease-in-out 0.5s infinite;
}
.ori-hw-citrouille:focus-visible {
	outline: 2px solid #ffb347;
	outline-offset: 4px;
	border-radius: 50%;
}
.ori-hw-citrouille.est-ramassee {
	animation: ori-hw-envol 0.6s ease-out forwards;
}
@keyframes ori-hw-balance {
	0%, 100% { transform: rotate(0); }
	25%      { transform: rotate(-8deg) translateY(-2px); }
	75%      { transform: rotate(8deg) translateY(-2px); }
}
@keyframes ori-hw-envol {
	0%   { opacity: 1; transform: scale(1); }
	40%  { opacity: 1; transform: scale(1.35); }
	100% { opacity: 0; transform: scale(0.6) translateY(-40px); }
}

.ori-hw-bulle {
	position: fixed;
	left: 50%;
	/* au-dessus de la barre Précédent / Suivant du lecteur */
	bottom: calc(74px + env(safe-area-inset-bottom, 0px));
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: max-content;
	max-width: min(92vw, 420px);
	padding: 12px 16px;
	border: 1px solid rgba(255, 138, 31, 0.45);
	border-radius: 12px;
	background: #1c130d;
	color: #f6e7d8;
	font-size: 14px;
	line-height: 1.45;
	box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.8);
	opacity: 0;
	transform: translate(-50%, 16px);
	transition: opacity 0.25s ease, transform 0.3s ease;
	pointer-events: none;
}
.ori-hw-bulle.est-vue {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}
.ori-hw-bulle b { color: #ffb347; }
.ori-hw-bulle span { color: #cdb8a6; font-size: 13px; }
.ori-hw-bulle em { font-style: normal; font-weight: 700; color: #ffd27a; }
.ori-hw-bulle a {
	align-self: flex-start;
	margin-top: 4px;
	padding: 6px 12px;
	border-radius: 8px;
	background: #e8650f;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.ori-hw-citrouille,
	.ori-hw-citrouille.est-vue,
	.ori-hw-citrouille.est-ramassee,
	.ori-hw-bulle {
		animation: none;
		transition: none;
	}
}