/* Bouton rond « assistant » — voir inc/bouton-rond.php */
.album-br {
	--br-bleu: #153e75; --br-orange: #f39718; --br-taille: 64px;
	position: fixed; right: 24px; bottom: 24px; z-index: 9990;
	display: flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer;
	font: 800 15px/1 Poppins, sans-serif; -webkit-tap-highlight-color: transparent;
	opacity: 0; transform: translateY(30px) scale(.6); pointer-events: none;
	transition: opacity .35s ease-out, transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.album-br.album-br-visible { opacity: 1; transform: none; pointer-events: auto; }

.album-br-rond {
	position: relative; z-index: 2; flex: none; display: grid; place-items: center;
	width: var(--br-taille); height: var(--br-taille); border-radius: 25px;
	background: var(--br-orange); color: #fff;
	box-shadow: 0 10px 25px -6px rgba(21, 62, 117, .55), inset 0 -3px 0 rgba(0, 0, 0, .12);
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .3s;
}
/* Halo qui « respire » */
.album-br-rond::before {
	content: ""; position: absolute; inset: 0; border-radius: 25px;
	border: 2px solid var(--br-orange); animation: album-br-halo 2.6s ease-out infinite;
}
@keyframes album-br-halo { from { transform: scale(1); opacity: .7; } to { transform: scale(1.35); opacity: 0; } }

/* Pastille « en ligne » */
.album-br-enligne {
	position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%;
	background: #22a855; border: 3px solid #fff;
}
/* Les trois points « en train d'écrire » */
.album-br-points circle { animation: album-br-ecrit 1.4s infinite ease-in-out; }
.album-br-points circle:nth-child(2) { animation-delay: .15s; }
.album-br-points circle:nth-child(3) { animation-delay: .3s; }
@keyframes album-br-ecrit { 0%, 60%, 100% { transform: none; opacity: 1; } 30% { transform: translateY(-2px); opacity: .5; } }

/* Bandeau qui se déroule vers la gauche, depuis derrière le rond */
.album-br-bandeau {
	position: absolute; right: calc(var(--br-taille) / 2); z-index: 1;
	height: 52px; display: flex; align-items: center; overflow: hidden;
	max-width: 0; border-radius: 25px 0 0 25px;
	background: var(--br-bleu); color: #fff; white-space: nowrap;
	box-shadow: 0 10px 25px -8px rgba(21, 62, 117, .6);
	transition: max-width .55s cubic-bezier(.22, 1, .36, 1);
}
.album-br-bandeau span {
	padding: 0 calc(var(--br-taille) / 2 + 14px) 0 22px;
	opacity: 0; transform: translateX(12px); transition: opacity .25s, transform .4s;
}
.album-br:is(:hover, :focus-visible, .album-br-ouvert) .album-br-bandeau { max-width: 360px; }
.album-br:is(:hover, :focus-visible, .album-br-ouvert) .album-br-bandeau span { opacity: 1; transform: none; transition-delay: .15s; }
.album-br:is(:hover, :focus-visible) .album-br-rond { transform: scale(1.06) rotate(-4deg); }
.album-br:is(:hover, :focus-visible) .album-br-rond::before { animation: none; opacity: 0; }
.album-br:focus-visible { outline: none; }
.album-br:focus-visible .album-br-rond { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--br-orange); }

@media (max-width: 767px) {
	.album-br { --br-taille: 56px; right: 16px; bottom: 16px; font-size: 14px; }
	.album-br-bandeau { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
	.album-br, .album-br-bandeau, .album-br-bandeau span, .album-br-rond { transition-duration: .01s; }
	.album-br-rond::before, .album-br-points circle { animation: none; }
}