/**
 * L'Aire Bête — Boutiques individuelles (Phase 4 — rewrite v0.10.0)
 *
 * Refonte selon les specs `project_shop_specs.md` :
 *
 *   FAÇADE (côté mall) : 2 vitrines + porte coulissante centrale, gérées
 *   dans mall.css. Les produits exposés dans les vitrines sont visibles
 *   en passant dans l'allée.
 *
 *   INTÉRIEUR (cet overlay) : scène en 1-point perspective avec point de
 *   fuite central. Mur gauche (étagères + grand écran cliquable), mur du
 *   fond (étagères), mur droit avec comptoir vu de côté (tiroir-caisse
 *   animé Stripe), îlot central bas et large navigable, avatar humain
 *   Pixar derrière le comptoir, plantes tropicales aux coins, lianes
 *   pendantes du plafond, 2 lanternes chaleureuses suspendues.
 *
 *   Décor "Rainforest Café × Forum Shops Caesars Palace" : bois naturel,
 *   pierre, végétation. Aucun plastique, aucun néon, aucun métal froid
 *   (l'or des lanternes/poignées est OK, le chrome ne l'est pas).
 *
 *   Le pass final Three.js (mi-juin 2026) reproduira cette scène en 3D
 *   photoréaliste — le DOM 2D ici est le blueprint.
 */

/* === Overlay racine ==================================================== */

.lb-shop {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(8px, 1.5vh, 18px);
	padding: clamp(12px, 2vw, 24px);
	overflow: hidden;
	/* Fond extérieur autour de la scène : très sombre pour faire ressortir
	   l'éclairage chaleureux à l'intérieur de la boutique. */
	background:
		radial-gradient(ellipse at 50% 30%, rgba(212, 160, 23, 0.06) 0%, transparent 55%),
		linear-gradient(180deg, #1A1208 0%, #2A1F14 50%, #0F0904 100%);
	transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.lb-shop.is-open    { display: flex; }
.lb-shop.is-entering { animation: lb-shop-zoom-in  700ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.lb-shop.is-leaving  { animation: lb-shop-zoom-out 450ms ease-in forwards; }

@keyframes lb-shop-zoom-in {
	0%   { opacity: 0; transform: scale(0.55); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes lb-shop-zoom-out {
	0%   { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0.85); }
}

/* === Bouton retour (haut-gauche) ====================================== */

.lb-shop-back {
	position: absolute;
	top: clamp(16px, 2.5vw, 24px);
	left: clamp(16px, 2.5vw, 24px);
	z-index: 30;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	background: rgba(250, 247, 242, 0.92);
	color: var(--lb-bois-fonce);
	border: 2px solid var(--lb-bois-fonce);
	border-radius: var(--lb-radius-full);
	font-family: var(--lb-font-corps);
	font-size: clamp(13px, 1.4vw, 15px);
	font-weight: 600;
	letter-spacing: 0.03em;
	cursor: pointer;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
	transition: transform var(--lb-transition-base),
	            box-shadow var(--lb-transition-base),
	            background var(--lb-transition-base);
}

.lb-shop-back-arrow { font-size: 1.2em; line-height: 1; }

.lb-shop-back:hover {
	transform: translateY(-2px);
	background: var(--lb-blanc-casse);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
}
.lb-shop-back:focus-visible {
	outline: 3px solid var(--lb-or-clair);
	outline-offset: 3px;
}

/* === Pancarte bois 4 planches ========================================= */

.lb-shop-sign {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-top: clamp(36px, 5vh, 64px);
	pointer-events: none;
	z-index: 25;
}

.lb-shop-sign-plank {
	background: linear-gradient(180deg, #EFDFC0 0%, #D8C39A 60%, #C9B484 100%);
	color: var(--lb-bois-fonce);
	font-family: var(--lb-font-titre);
	letter-spacing: 0.04em;
	padding: 6px 26px;
	border: 2px solid #8B6F47;
	box-shadow:
		0 3px 6px rgba(0, 0, 0, 0.5),
		inset 0 1px 1px rgba(255, 255, 255, 0.4);
	white-space: nowrap;
	position: relative;
}
.lb-shop-sign-plank::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg,
		transparent 0px,
		transparent 14px,
		rgba(139, 111, 71, 0.10) 14px,
		rgba(139, 111, 71, 0.10) 16px);
	pointer-events: none;
}
.lb-shop-sign-plank--1 { width: clamp(170px, 26vw, 260px); font-size: clamp(13px, 1.3vw, 16px); transform: rotate(-1.6deg); border-radius: 4px 7px 5px 8px; }
.lb-shop-sign-plank--2 { width: clamp(220px, 32vw, 340px); font-size: clamp(22px, 2.6vw, 32px); transform: rotate(0.7deg);  margin-left: -8px; border-radius: 7px 4px 8px 5px; }
.lb-shop-sign-plank--3 { width: clamp(190px, 28vw, 290px); font-size: clamp(14px, 1.5vw, 18px); transform: rotate(-0.5deg); margin-left: 12px; border-radius: 5px 8px 4px 7px; }
.lb-shop-sign-plank--4 { width: clamp(160px, 24vw, 240px); font-size: clamp(11px, 1.2vw, 14px); transform: rotate(1.4deg);  margin-left: -4px; border-radius: 8px 5px 7px 4px; font-family: var(--lb-font-corps); font-weight: 600; }

/* === SCÈNE INTÉRIEURE — 1-point perspective ==========================
 *
 * Toutes les sous-zones sont positionnées en pourcentage à l'intérieur
 * de `.lb-shop-scene`. Point de fuite : (50%, 38%). Le sol s'étend de
 * 100% bas → 38% haut (trapèze convergent), les murs latéraux suivent.
 *
 * z-index local (v1.2.3 — Phase 5.1.3) :
 *   1  : plafond + lianes (loin derrière)
 *   2  : sol
 *   3  : mur du fond + étagères du fond + plante DROITE (poussée
 *        derrière le comptoir pour ne pas masquer caisse/avatar)
 *   4  : murs gauche / droit en perspective (étagères + comptoir)
 *   5  : avatar humain Pixar derrière le comptoir
 *   6  : îlot central + présentoir produits (display-shelves)
 *   7  : lanternes + caisse enregistreuse cliquable (sur le comptoir)
 *   8  : plante GAUCHE (premier plan, taille réduite v1.2.3)
 *   9  : écran sur pied (téléviseur free-standing, devant le feuillage)
 *        + overlay chaleureux (tint général)
 *  10  : badge compteur caisse (.lb-shop-cash-counter)
 */

.lb-shop-scene {
	position: relative;
	width: clamp(320px, 86vw, 1180px);
	height: clamp(380px, 64vh, 640px);
	margin-top: clamp(8px, 1.5vh, 18px);
	background: #1A1208;             /* hors-scène (sera masqué par les couches) */
	border-radius: var(--lb-radius-lg);
	overflow: hidden;
	box-shadow:
		0 16px 40px rgba(0, 0, 0, 0.75),
		inset 0 0 0 4px #1A0F06,
		inset 0 0 0 6px rgba(212, 160, 23, 0.20);
}

/* --- Plafond (haut 0–28% de la scène) ---------------------------------- */
.lb-shop-ceiling {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 28%;
	background:
		linear-gradient(180deg, #1F1408 0%, #3A2510 70%, #4A3221 100%);
	z-index: 1;
}
/* Poutres bois transversales (effet plafond cathédrale Forum Shops) */
.lb-shop-ceiling::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(180deg,
		transparent 0px,
		transparent 14px,
		rgba(0, 0, 0, 0.35) 14px,
		rgba(0, 0, 0, 0.35) 16px);
	pointer-events: none;
}

/* Lianes pendantes du plafond — feuilles vertes en cascade. */
.lb-shop-liana {
	position: absolute;
	top: 0;
	width: 26px;
	height: clamp(80px, 18vh, 160px);
	z-index: 1;
	pointer-events: none;
}
.lb-shop-liana > svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
	animation: lb-shop-liana-sway 6s ease-in-out infinite;
	transform-origin: 50% 0;
}
.lb-shop-liana--1 { left: 10%; }
.lb-shop-liana--2 { left: 38%; height: clamp(60px, 14vh, 120px); }
.lb-shop-liana--2 > svg { animation-delay: -2s; }
.lb-shop-liana--3 { right: 12%; height: clamp(90px, 20vh, 170px); }
.lb-shop-liana--3 > svg { animation-delay: -4s; }

@keyframes lb-shop-liana-sway {
	0%, 100% { transform: rotate(-2deg); }
	50%      { transform: rotate(2deg); }
}

/* --- Sol en perspective (SVG trapèze, point de fuite à 50%, 38%) ------ */
.lb-shop-floor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 62%;       /* 38% haut → 100% bas */
	z-index: 2;
	pointer-events: none;
}

/* --- Mur du fond (rectangle au point de fuite) ------------------------ */
.lb-shop-back-wall {
	position: absolute;
	top: 28%;
	left: 32%;
	width: 36%;
	height: 12%;       /* mur fond entre plafond (28%) et sol-au-VP (40%) */
	background: linear-gradient(180deg, #C9A878 0%, #A07550 100%);
	border: 2px solid #5C3D1E;
	border-bottom: 0;
	z-index: 3;
	box-shadow:
		inset 0 1px 2px rgba(255, 220, 180, 0.20),
		inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}
/* Stries planches sur le mur du fond */
.lb-shop-back-wall::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg,
		transparent 0px,
		transparent 14px,
		rgba(92, 61, 30, 0.30) 14px,
		rgba(92, 61, 30, 0.30) 16px);
	pointer-events: none;
}

/* Étagères du mur du fond — petits boutons emoji disposés sur 2 rangs. */
.lb-shop-back-shelves {
	position: absolute;
	top: 30%;
	left: 33%;
	width: 34%;
	height: 8%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 2px;
	pointer-events: auto;
}
.lb-shop-back-shelf-row {
	flex: 1;
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 4px;
	background: linear-gradient(180deg, #B89370 0%, #8B6F47 100%);
	border-bottom: 2px solid #5C3D1E;
	border-radius: 1px;
	padding: 0 4px;
}
.lb-shop-back-shelf-row .lb-shop-product {
	font-size: clamp(8px, 0.9vw, 13px);
	padding: 1px 3px;
}

/* --- Mur gauche en perspective ---------------------------------------- *
 *
 * Trapèze : bord gauche (0%, 28%) → bord gauche (0%, 100%) → bord droit
 * (32%, 40%) → bord droit (32%, 28%). Implémenté en clip-path.
 */
.lb-shop-left-wall {
	position: absolute;
	top: 28%;
	left: 0;
	width: 32%;
	height: 72%;
	background:
		linear-gradient(90deg, #6B4828 0%, #A07550 70%, #C9A878 100%);
	clip-path: polygon(0% 0%, 100% 43%, 100% 100%, 0% 100%);
	z-index: 4;
}
/* Stries verticales sur le mur gauche */
.lb-shop-left-wall::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg,
		transparent 0px,
		transparent 18px,
		rgba(92, 61, 30, 0.25) 18px,
		rgba(92, 61, 30, 0.25) 20px);
	pointer-events: none;
}

/* Étagères du mur gauche — 3 niveaux qui rétrécissent vers le fond.
   Posées par dessus le mur gauche en clip-path. */
.lb-shop-left-shelves {
	position: absolute;
	top: 32%;
	left: 0;
	width: 28%;
	height: 36%;
	z-index: 4;
	clip-path: polygon(0% 0%, 100% 35%, 100% 65%, 0% 100%);
	background: transparent;
	pointer-events: none;  /* les produits cliquables ont pointer-events: auto */
}
.lb-shop-left-shelf {
	position: absolute;
	left: 6%;
	background: linear-gradient(180deg, #B89370 0%, #6B4828 100%);
	border-bottom: 3px solid #5C3D1E;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 6px;
	pointer-events: auto;
}
/* 3 étagères qui rétrécissent en perspective */
.lb-shop-left-shelf--1 { top: 4%;  width: 84%; height: 12%; }
.lb-shop-left-shelf--2 { top: 32%; width: 68%; height: 11%; }
.lb-shop-left-shelf--3 { top: 60%; width: 52%; height: 10%; }
.lb-shop-left-shelf .lb-shop-product { font-size: clamp(9px, 1vw, 14px); padding: 1px 4px; }

/* Grand écran POSÉ sur un pied (base + colonne) à l'intérieur de la
   boutique, contre le mur gauche. v0.10.1 : retiré le `skewY` qui le
   faisait paraître "flottant à l'extérieur" — l'écran est maintenant
   un téléviseur sur stand, plein cadre, devant le mur. La base + la
   colonne sont les classes `.lb-shop-screen-base` et `.lb-shop-screen-pole`
   ci-dessous. */
.lb-shop-screen {
	position: absolute;
	bottom: 43%;
	left: 6%;
	width: 20%;
	height: 14%;
	/* v1.2.3 — Phase 5.1.3 : z-index 5 → 9 pour passer DEVANT le feuillage
	   (lianes z:1, plantes z:8). L'écran est élément informationnel
	   important (vidéo du commerçant) — il doit toujours être visible. */
	z-index: 9;
	background: linear-gradient(180deg, #0A1428 0%, #1A2855 50%, #0A1428 100%);
	border: 4px solid #5C3D1E;
	border-radius: 4px;
	cursor: pointer;
	overflow: hidden;
	box-shadow:
		inset 0 0 12px rgba(255, 245, 220, 0.10),
		0 4px 8px rgba(0, 0, 0, 0.5);
	transition: box-shadow var(--lb-transition-base);
}
.lb-shop-screen:hover {
	box-shadow:
		inset 0 0 18px rgba(255, 245, 220, 0.20),
		0 6px 14px rgba(212, 160, 23, 0.40);
}
.lb-shop-screen:focus-visible {
	outline: 3px solid var(--lb-or);
	outline-offset: 3px;
}

/* Contenu de l'écran : vignette + texte placeholder Maxime */
.lb-shop-screen-content {
	position: absolute;
	inset: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	color: #FFE5A0;
	font-family: var(--lb-font-corps);
	font-size: clamp(7px, 0.8vw, 11px);
	font-weight: 600;
	text-align: center;
	pointer-events: none;
}
.lb-shop-screen-icon { font-size: clamp(14px, 1.6vw, 22px); }

/* Pied du téléviseur — colonne bois + base trapézoïdale, donne au
   téléviseur l'allure d'un stand free-standing posé sur le sol de
   la boutique (et plus une plaque accrochée au mur). */
.lb-shop-screen-pole {
	position: absolute;
	bottom: 19%;
	left: 15%;
	width: 2%;
	height: 24%;
	z-index: 9;                       /* aligné sur .lb-shop-screen v1.2.3 */
	background: linear-gradient(180deg, #8B6F47 0%, #5C3D1E 100%);
	border-left: 1px solid #3A2510;
	border-right: 1px solid #3A2510;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

.lb-shop-screen-base {
	position: absolute;
	bottom: 14%;
	left: 9%;
	width: 14%;
	height: 5%;
	z-index: 9;                       /* aligné sur .lb-shop-screen v1.2.3 */
	background: linear-gradient(180deg, #A07550 0%, #5C3D1E 100%);
	border: 2px solid #3A2510;
	border-radius: 4px 4px 2px 2px;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

/* Lueur scintillante de l'écran (CRT-like, lente) */
.lb-shop-screen::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(255, 245, 220, 0.10) 50%,
		transparent 100%);
	animation: lb-shop-screen-flicker 4s ease-in-out infinite;
	pointer-events: none;
}
@keyframes lb-shop-screen-flicker {
	0%, 100% { opacity: 0.4; }
	50%      { opacity: 0.85; }
}

/* --- Mur droit en perspective ---------------------------------------- *
 * Symétrique du mur gauche. Le COMPTOIR vu de côté est posé dessus.
 */
.lb-shop-right-wall {
	position: absolute;
	top: 28%;
	right: 0;
	width: 32%;
	height: 72%;
	background:
		linear-gradient(270deg, #6B4828 0%, #A07550 70%, #C9A878 100%);
	clip-path: polygon(0% 43%, 100% 0%, 100% 100%, 0% 100%);
	z-index: 4;
}
.lb-shop-right-wall::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg,
		transparent 0px,
		transparent 18px,
		rgba(92, 61, 30, 0.25) 18px,
		rgba(92, 61, 30, 0.25) 20px);
	pointer-events: none;
}

/* Comptoir vu de côté : trapèze qui suit la perspective du mur droit. */
.lb-shop-counter {
	position: absolute;
	top: 60%;
	right: 0;
	width: 32%;
	height: 22%;
	z-index: 5;
	clip-path: polygon(0% 50%, 100% 8%, 100% 100%, 0% 100%);
	background: linear-gradient(180deg, #B07A50 0%, #6B4828 100%);
	border-top: 3px solid #5C3D1E;
}
/* Stries verticales bois sur le devant du comptoir */
.lb-shop-counter::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg,
		transparent 0px,
		transparent 22px,
		rgba(92, 61, 30, 0.40) 22px,
		rgba(92, 61, 30, 0.40) 24px);
	pointer-events: none;
}

/* Plateau du comptoir : bandeau plus clair sur le dessus */
.lb-shop-counter-top {
	position: absolute;
	top: 64%;
	right: 0;
	width: 32%;
	height: 4%;
	z-index: 6;
	clip-path: polygon(0% 50%, 100% 0%, 100% 100%, 0% 100%);
	background: linear-gradient(180deg, #D4B080 0%, #A07550 100%);
	pointer-events: none;
}

/* Tiroir-caisse POSÉ sur le plateau du comptoir (et pas à côté). Le
   `skewY(-5deg)` aligne la caisse avec le slant du plateau qui descend
   vers le fond — sans ce skew, la caisse "flottait" à gauche du
   comptoir et "s'enfonçait" à droite. transform-origin bottom-right
   pour que le coin droit (proche caméra) reste posé sur le plateau. */
.lb-shop-cash-register {
	position: absolute;
	top: 58%;
	right: 11%;
	width: 11%;
	height: 7%;
	z-index: 7;
	transform: skewY(-5deg);
	transform-origin: 100% 100%;
	background: linear-gradient(180deg, #4A2E14 0%, #2A1808 100%);
	border: 2px solid #1A0F06;
	border-radius: 3px;
	box-shadow:
		inset 0 1px 1px rgba(255, 220, 180, 0.18),
		0 2px 4px rgba(0, 0, 0, 0.5);
}
/* Tiroir : par défaut fermé, glisse vers la gauche au moment de l'achat */
.lb-shop-cash-drawer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(180deg, #6B4828 0%, #3A2510 100%);
	border-top: 2px solid #1A0F06;
	border-radius: 0 0 1px 1px;
	transition: transform 600ms cubic-bezier(0.3, 0, 0.2, 1);
}
/* Petit poignée au centre du tiroir */
.lb-shop-cash-drawer::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30%;
	height: 25%;
	background: linear-gradient(180deg, var(--lb-or-clair) 0%, var(--lb-or-fonce) 100%);
	border-radius: 1px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
/* État "achat" : le tiroir ressort vers le bas + cling visuel sur la caisse */
.lb-shop.is-purchasing .lb-shop-cash-drawer {
	transform: translateY(60%);
}
.lb-shop.is-purchasing .lb-shop-cash-register {
	animation: lb-shop-cash-cling 600ms ease-out;
}
@keyframes lb-shop-cash-cling {
	0%   { box-shadow: inset 0 1px 1px rgba(255, 220, 180, 0.18), 0 2px 4px rgba(0, 0, 0, 0.5); }
	30%  { box-shadow: inset 0 1px 1px rgba(255, 220, 180, 0.18), 0 0 14px var(--lb-or), 0 2px 4px rgba(0, 0, 0, 0.5); }
	100% { box-shadow: inset 0 1px 1px rgba(255, 220, 180, 0.18), 0 2px 4px rgba(0, 0, 0, 0.5); }
}

/* Avatar humain Pixar derrière le comptoir. Taille remontée v0.10.1
   pour qu'on voie au moins la moitié du corps (épaules + torse + tête)
   au-dessus du plateau du comptoir. z-index 4 (au niveau des murs)
   pour que le comptoir z:5 dessine PAR-DESSUS le bas du corps : seul
   le haut du tablier + le visage sont visibles — c'est l'effet
   recherché (le marchand sert le visiteur derrière le comptoir). */
.lb-shop-merchant {
	position: absolute;
	bottom: 28%;
	right: 6%;
	width: clamp(120px, 16vw, 200px);
	z-index: 4;
	pointer-events: none;
	animation: lb-shop-merchant-bob 5s ease-in-out infinite;
}
.lb-shop-merchant > svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}
@keyframes lb-shop-merchant-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}

/* --- Îlot central : bas et large, navigable ------------------------- *
 *
 * Posé devant le mur du fond. Bas → on voit les étagères du fond
 * par-dessus. Large → produits dessus + tablettes latérales visibles.
 */
.lb-shop-island {
	position: absolute;
	bottom: 12%;
	left: 32%;
	width: 36%;
	height: 18%;
	z-index: 6;
	background: linear-gradient(180deg, #C9A878 0%, #8B6F47 100%);
	border: 2px solid #5C3D1E;
	border-radius: 6px 6px 4px 4px;
	box-shadow:
		inset 0 1px 1px rgba(255, 220, 180, 0.20),
		0 6px 12px rgba(0, 0, 0, 0.45);
}
/* Stries bois sur les flancs */
.lb-shop-island::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg,
		transparent 0px,
		transparent 18px,
		rgba(92, 61, 30, 0.35) 18px,
		rgba(92, 61, 30, 0.35) 20px);
	pointer-events: none;
	border-radius: inherit;
}

/* Dessus de l'îlot : bandeau plat avec produits */
.lb-shop-island-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 28%;
	background: linear-gradient(180deg, #D4B080 0%, #A07550 100%);
	border-bottom: 2px solid #5C3D1E;
	border-radius: 6px 6px 0 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 4px;
	padding: 0 8%;
	z-index: 7;
}
.lb-shop-island-top .lb-shop-product { font-size: clamp(11px, 1.3vw, 18px); padding: 2px 5px; }

/* Tablettes latérales (flancs visibles) — produits sur le bord avant */
.lb-shop-island-side {
	position: absolute;
	bottom: 8%;
	left: 0;
	right: 0;
	height: 36%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 4px;
	padding: 0 4%;
	z-index: 7;
}
.lb-shop-island-side .lb-shop-product { font-size: clamp(10px, 1.2vw, 16px); padding: 2px 4px; }

/* --- Lanternes suspendues -------------------------------------------- */
.lb-shop-lantern {
	position: absolute;
	top: 0;
	width: clamp(20px, 3vw, 40px);
	z-index: 7;
	pointer-events: none;
	animation: lb-shop-lantern-sway 4s ease-in-out infinite;
	transform-origin: 50% 0;
}
.lb-shop-lantern > svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 0 12px rgba(255, 200, 100, 0.55));
}
.lb-shop-lantern--1 { left: 25%; }
.lb-shop-lantern--2 { right: 25%; animation-delay: -2s; }

@keyframes lb-shop-lantern-sway {
	0%, 100% { transform: rotate(-1.5deg); }
	50%      { transform: rotate(1.5deg); }
}

/* --- Plantes tropicales aux coins du premier plan -------------------- *
 *
 * v1.2.3 — Phase 5.1.3 : tailles réduites (« fenêtres » feuillues qui
 * cachaient les produits sur les étagères) + plante DROITE poussée hors
 * du chemin du comptoir et reculée derrière la perspective (z:3) pour
 * laisser la caisse, l'avatar et le comptoir 100% visibles.
 *
 * La plante GAUCHE reste z:8 mais en taille réduite — elle ne croise pas
 * d'élément critique (l'écran sur pied passera au-dessus, z:9 ci-dessous).
 */
.lb-shop-plant {
	position: absolute;
	bottom: 0;
	width: clamp(56px, 9vw, 110px);   /* réduit de 80–180 → 56–110 */
	pointer-events: none;
}
.lb-shop-plant > svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.lb-shop-plant--front-left  {
	left: 0;
	z-index: 8;                       /* premier plan, OK côté gauche */
}

.lb-shop-plant--front-right {
	/* v1.2.4 — Phase 5.1.4 : restaurée à right:0 pour symétrie visuelle
	   avec la plante gauche, mais z-index:3 maintenu (derrière comptoir
	   z:5 + caisse z:7 + avatar z:4). On voit le feuillage qui dépasse
	   au-dessus/derrière le comptoir, sans masquer caisse ni avatar. */
	right: 0;
	z-index: 3;
	transform: scaleX(-1);
}

/* --- Overlay éclairage chaleureux ------------------------------------ *
 * Tint général qui simule la lumière dorée des lanternes filtrée par le
 * feuillage. Posé en dernier pour teinter toute la scène.
 */
.lb-shop-warmth {
	position: absolute;
	inset: 0;
	z-index: 9;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 25% 35%, rgba(255, 200, 100, 0.12) 0%, transparent 45%),
		radial-gradient(ellipse at 75% 35%, rgba(255, 200, 100, 0.12) 0%, transparent 45%),
		radial-gradient(ellipse at 50% 80%, rgba(255, 180, 80, 0.10) 0%, transparent 60%);
	mix-blend-mode: screen;
}

/* === Produits cliquables (commun à toutes les zones) ================== */
.lb-shop-product {
	background: rgba(255, 250, 235, 0.85);
	border: 1.5px solid #8B6F47;
	border-radius: 4px;
	line-height: 1;
	cursor: pointer;
	transition: transform var(--lb-transition-base),
	            box-shadow var(--lb-transition-base),
	            background var(--lb-transition-base);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	pointer-events: auto;
}
.lb-shop-product:hover {
	transform: translateY(-3px) scale(1.10);
	background: var(--lb-blanc-casse);
	box-shadow: 0 5px 10px rgba(212, 160, 23, 0.5);
	z-index: 10;
}
.lb-shop-product:focus-visible {
	outline: 2px solid var(--lb-or);
	outline-offset: 2px;
}

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

@media (max-width: 768px) {
	.lb-shop { padding: 12px; gap: 10px; }
	.lb-shop-scene { width: 96vw; height: 60vh; }
	.lb-shop-back { font-size: 12px; padding: 6px 12px; }
	.lb-shop-sign { margin-top: clamp(48px, 7vh, 72px); }
	/* Sur mobile, on simplifie : moins de lianes, lanternes plus petites,
	   plantes plus discrètes pour ne pas étouffer la scène. */
	.lb-shop-liana--2 { display: none; }
	.lb-shop-plant { width: clamp(60px, 18vw, 110px); }
	.lb-shop-screen { width: 26%; }
}

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

@media (prefers-reduced-motion: reduce) {
	.lb-shop { transition: opacity 150ms ease-out; }
	.lb-shop.is-entering, .lb-shop.is-leaving {
		animation: none; opacity: 1; transform: none;
	}
	.lb-shop-liana > svg,
	.lb-shop-lantern,
	.lb-shop-merchant,
	.lb-shop-screen::after {
		animation: none !important;
	}
	.lb-shop-cash-drawer { transition: none; }
}

/* ====================================================================
 * OVERLAYS « À LOUER » et « EN CONSTRUCTION » (Phase 5.1)
 * ====================================================================
 *
 * Pour les boutiques avec state='available' ou 'under_construction',
 * inc/shop-overlay.php rend un overlay minimal (juste un message
 * centré + bouton retour) au lieu de la scène intérieure complète.
 * Mêmes animations zoom-in / zoom-out que `.lb-shop` standard.
 */

.lb-shop--available .lb-shop-state-message,
.lb-shop--under_construction .lb-shop-state-message {
	position: relative;
	max-width: clamp(280px, 70vw, 540px);
	margin: auto;
	padding: clamp(24px, 4vw, 48px);
	background: linear-gradient(180deg, #FAF7F2 0%, #EFDFC0 100%);
	border: 4px solid var(--lb-bois-fonce);
	border-radius: var(--lb-radius-lg);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
	text-align: center;
	font-family: var(--lb-font-corps);
	color: var(--lb-bois-fonce);
}

.lb-shop-state-icon {
	font-size: clamp(56px, 9vw, 96px);
	line-height: 1;
	margin-bottom: 12px;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

.lb-shop-state-title {
	margin: 0 0 12px;
	font-family: var(--lb-font-titre);
	font-size: clamp(22px, 3vw, 32px);
	color: var(--lb-bois-fonce);
}

.lb-shop-state-desc {
	margin: 0;
	font-size: clamp(14px, 1.5vw, 17px);
	line-height: 1.5;
}
.lb-shop-state-desc strong {
	color: var(--lb-sarcelle);
}

/* Léger frémissement de la pancarte « EN CONSTRUCTION » pour suggérer
   le chantier — version sobre Phase 5.1 (les animations boucane + outils
   + travailleur viendront dans une itération suivante). */
.lb-shop--under_construction .lb-shop-state-icon {
	animation: lb-shop-construction-shake 4s ease-in-out infinite;
}
@keyframes lb-shop-construction-shake {
	0%, 100% { transform: rotate(-3deg); }
	50%      { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
	.lb-shop--under_construction .lb-shop-state-icon {
		animation: none;
	}
}