/**
 * L'Aire Bête — Lulu, mascotte d'accueil
 *
 * Avatar (placeholder cercle ou image lulu.png) + bulle de bienvenue
 * avec 2 CTA. Position fixed centre-bas (Phase 3.5 : Lulu hôte centrale
 * du mall intérieur), masquée tant que la classe `.is-visible` n'est pas
 * posée par lulu.js.
 */

.lb-lulu {
	position: fixed;
	bottom: 24px;
	/* Centre-bas : avec le layout `row-reverse`, l'avatar (1er dans le DOM)
	   se positionne au bord droit de la flex-unit. On ancre ce bord à
	   viewport-center + 100px (demi-largeur d'avatar 200px) pour que le
	   centre de l'avatar tombe pile au centre horizontal du viewport. La
	   bulle et le badge apparaissent à sa gauche, inchangés. */
	right: 50%;
	margin-right: -100px;
	z-index: 100;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
	gap: var(--lb-space-md);
	opacity: 0;
	transform: translateY(100%);
	pointer-events: none;
	transition:
		opacity 800ms cubic-bezier(0.34, 1.4, 0.64, 1),
		transform 800ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.lb-lulu.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Esquive du footer : Lulu fade out quand le footer entre en vue */
.lb-lulu.is-near-footer {
	opacity: 0;
	pointer-events: none;
	transform: translateY(40px);
}

/* === Avatar (placeholder ou image future) ============================= */

.lb-lulu-avatar {
	width: 200px;
	height: 200px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Placeholder visuel (cercle gradient + loupe) — actif uniquement
   quand lulu.png n'est pas présente. Avec l'image, Lulu apparaît
   libre sans cadre, sur le fond beige du site. */
.lb-lulu-avatar:not(.has-image) {
	border-radius: 50%;
	background: linear-gradient(135deg,
		var(--lb-sarcelle) 0%,
		var(--lb-or) 100%);
	box-shadow: var(--lb-shadow-lg);
	overflow: hidden;
}

/* Flottement vertical — actif uniquement quand Lulu est visible (CPU) */
.lb-lulu.is-visible .lb-lulu-avatar {
	animation: lb-lulu-float 3s ease-in-out infinite;
}

@keyframes lb-lulu-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

.lb-lulu-avatar-emoji {
	font-size: 6rem;
	line-height: 1;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Blink occasionnel — opacité qui clignote brièvement */
.lb-lulu.is-visible .lb-lulu-avatar-emoji {
	animation: lb-lulu-blink 7s ease-in-out infinite;
}

@keyframes lb-lulu-blink {
	0%, 92%, 100% { opacity: 1; }
	94%, 96%      { opacity: 0.4; }
}

.lb-lulu-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Flip horizontal : Lulu est en bas à droite et regarde vers le centre
	   (vers la bulle / le visiteur) au lieu de fixer le bord droit. Le
	   transform reste posé ici sans conflit — l'animation `lb-lulu-float`
	   tourne sur le parent .lb-lulu-avatar, pas sur l'image. */
	transform: scaleX(-1);
	/* drop-shadow épouse la silhouette PNG de Lulu (ne fait pas un carré) */
	filter: drop-shadow(0 4px 12px rgba(26, 122, 110, 0.25));
}

/* === Bulle de bienvenue =============================================== */

.lb-lulu-bubble {
	position: relative;
	margin-bottom: 80px; /* la bulle plane au-dessus du milieu de Lulu */
	padding: var(--lb-space-lg);
	/* Largeur cap : 360px max, mais réduit sur écrans intermédiaires pour
	   ne pas déborder à gauche (avatar centré horizontalement, la bulle
	   s'étend vers la gauche depuis l'avatar). 50vw - 132 = espace dispo
	   à gauche de l'avatar (viewport_center - avatar_left - margin - gap). */
	max-width: min(360px, calc(50vw - 132px));
	background: var(--lb-blanc-casse);
	border: 2px solid var(--lb-sarcelle);
	border-radius: var(--lb-radius-xl);
	box-shadow: var(--lb-shadow-md);
}

/* Triangle sur le bord droit de la bulle, pointant vers Lulu (à droite).
   Carré 18×18 pivoté 45° avec bordures top+right colorées : la pointe
   visible se trouve au coin "3 heures" du losange. */
.lb-lulu-bubble::after {
	content: '';
	position: absolute;
	right: -11px;
	bottom: 28px;
	width: 18px;
	height: 18px;
	background: var(--lb-blanc-casse);
	border-top: 2px solid var(--lb-sarcelle);
	border-right: 2px solid var(--lb-sarcelle);
	transform: rotate(45deg);
}

.lb-lulu-bubble-text {
	margin: 0 0 var(--lb-space-md);
	font-family: var(--lb-font-corps);
	font-size: var(--lb-text-base);
	color: var(--lb-noir);
	line-height: 1.5;
}

.lb-lulu-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--lb-space-sm);
}

.lb-lulu-btn {
	padding: var(--lb-space-sm) var(--lb-space-md);
	border: none;
	border-radius: var(--lb-radius-lg);
	font-family: var(--lb-font-corps);
	font-size: var(--lb-text-base);
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		filter 0.2s ease;
}

.lb-lulu-btn--primary {
	background: var(--lb-sarcelle);
	color: var(--lb-blanc-casse);
}

.lb-lulu-btn--secondary {
	background: var(--lb-or);
	color: var(--lb-noir);
}

.lb-lulu-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--lb-shadow-md);
	filter: brightness(1.05);
}

.lb-lulu-btn:focus-visible {
	outline: 3px solid var(--lb-or-clair);
	outline-offset: 2px;
}

/* === Responsive — mobile ============================================== */

@media (max-width: 768px) {
	.lb-lulu {
		bottom: 16px;
		/* Mobile : avatar 120px → demi-largeur 60px pour centrer. */
		right: 50%;
		margin-right: -60px;
		/* Bascule en column-reverse : la bulle passe AU-DESSUS de l'avatar
		   (DOM ordre [avatar, bubble, badge] → visuel haut-bas
		   [badge, bubble, avatar]). Sur écran étroit, mettre la bulle à
		   côté de l'avatar centré ne laisse pas assez de place. */
		flex-direction: column-reverse;
		align-items: center;
		gap: var(--lb-space-sm);
	}

	.lb-lulu-avatar {
		width: 120px;
		height: 120px;
	}

	.lb-lulu-avatar-emoji {
		font-size: 3.5rem;
	}

	.lb-lulu-bubble {
		/* En column-reverse, l'écart entre la bulle et l'avatar est géré
		   par `gap` ; on annule la grande margin-bottom du desktop. */
		margin-bottom: 0;
		padding: var(--lb-space-md);
		max-width: calc(100vw - 32px);
		/* La queue est désormais en bas (pointant vers l'avatar dessous) :
		   l'origine de l'animation pop suit. */
		transform-origin: bottom center;
	}

	/* Queue de la bulle : passe du bord droit (desktop, pointant vers
	   l'avatar à droite) au bord bas (mobile, pointant vers l'avatar
	   en-dessous). Carré 18×18 pivoté 135°, bordures right+bottom. */
	.lb-lulu-bubble::after {
		top: auto;
		right: 50%;
		bottom: -11px;
		transform: translateX(50%) rotate(135deg);
		border-top: none;
		border-right: 2px solid var(--lb-sarcelle);
		border-bottom: 2px solid var(--lb-sarcelle);
	}

	.lb-lulu-bubble-text {
		font-size: var(--lb-text-sm);
		margin-bottom: var(--lb-space-sm);
	}

	.lb-lulu-btn {
		font-size: var(--lb-text-sm);
		padding: var(--lb-space-xs) var(--lb-space-sm);
	}
}

/* === Bulle : ouverture / fermeture ====================================
 * État par défaut = fermé (display: none). Au premier visit, lulu.js
 * pose `.is-bubble-open` puis la retire après 5s. Pendant la fermeture,
 * `.is-closing` joue l'animation collapse avant le retrait final. */

.lb-lulu-bubble {
	display: none;
	transform-origin: bottom right;
}

.lb-lulu.is-bubble-open .lb-lulu-bubble {
	display: block;
	animation: lb-bubble-pop 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.lb-lulu.is-bubble-open.is-closing .lb-lulu-bubble {
	animation: lb-bubble-collapse 0.35s ease-in forwards;
}

@keyframes lb-bubble-pop {
	from { opacity: 0; transform: scale(0.85) translateY(10px); }
	to   { opacity: 1; transform: scale(1)    translateY(0); }
}

@keyframes lb-bubble-collapse {
	from { opacity: 1; transform: scale(1)    translateY(0); }
	to   { opacity: 0; transform: scale(0.85) translateY(10px); }
}

/* === Badge "Discuter avec Lulu" =======================================
 * Petite pastille sarcelle qui occupe la place de la bulle quand celle-ci
 * est fermée. Sert de point de réouverture. */

.lb-lulu-badge {
	display: block;
	margin-bottom: 80px; /* aligne le badge sur la zone haute de Lulu */
	padding: var(--lb-space-sm) var(--lb-space-md);
	background: var(--lb-sarcelle);
	color: var(--lb-blanc-casse);
	border: none;
	border-radius: var(--lb-radius-full);
	font-family: var(--lb-font-corps);
	font-size: var(--lb-text-sm);
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--lb-shadow-md);
	white-space: nowrap;
	animation: lb-bubble-pop 0.3s ease-out;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.lb-lulu-badge:hover {
	transform: translateY(-2px);
	box-shadow: var(--lb-shadow-lg);
	filter: brightness(1.05);
}

.lb-lulu-badge:focus-visible {
	outline: 3px solid var(--lb-or-clair);
	outline-offset: 2px;
}

.lb-lulu.is-bubble-open .lb-lulu-badge {
	display: none;
}

/* Avatar : pointer pour signaler qu'il est cliquable */
.lb-lulu-avatar {
	cursor: pointer;
}

/* Mobile : badge plus compact ; en column-reverse il est au-dessus de
   l'avatar via `gap`, donc on annule la margin-bottom du desktop. */
@media (max-width: 768px) {
	.lb-lulu-badge {
		margin-bottom: 0;
		font-size: var(--lb-text-xs);
		padding: var(--lb-space-xs) var(--lb-space-sm);
	}
}

/* === Reduced motion =================================================== */

@media (prefers-reduced-motion: reduce) {
	.lb-lulu.is-visible .lb-lulu-avatar,
	.lb-lulu.is-visible .lb-lulu-avatar-emoji {
		animation: none;
	}
}