/**
 * L'Aire Bête — Centre commercial (page d'accueil)
 *
 * Layout, ciel animé, et palettes horaires.
 */

/* === Layout principal === */
.lb-mall {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
}

/* === Ciel animé === */
.lb-sky {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40vh;
	z-index: 0;
	background: linear-gradient(180deg, var(--lb-sarcelle-clair) 0%, var(--lb-blanc-casse) 100%);
	transition: background 2s ease;
}

/* Overlay d'étoiles : visible la nuit et en soirée tardive */
.lb-sky::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1.2px 1.2px at 15% 25%, rgba(255, 255, 255, 0.9), transparent 60%),
		radial-gradient(1.5px 1.5px at 60% 18%, rgba(255, 255, 255, 0.85), transparent 60%),
		radial-gradient(1px 1px at 82% 38%, rgba(255, 255, 255, 0.9), transparent 60%),
		radial-gradient(1.5px 1.5px at 35% 55%, rgba(255, 255, 255, 0.8), transparent 60%),
		radial-gradient(1px 1px at 70% 65%, rgba(255, 255, 255, 0.85), transparent 60%),
		radial-gradient(1.2px 1.2px at 22% 78%, rgba(255, 255, 255, 0.85), transparent 60%),
		radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.8), transparent 60%);
	opacity: 0;
	transition: opacity 2s ease;
}

.lb-sky.sky-night::before,
.lb-sky.sky-evening::before {
	opacity: 1;
}

/* === Palettes horaires === */
.lb-sky.sky-night {
	background: linear-gradient(180deg, #0A1535 0%, #1A2855 60%, #2C3E6B 100%);
}

.lb-sky.sky-dawn {
	background: linear-gradient(180deg, #F5B3C9 0%, #FFD9A8 50%, #C4D8E8 100%);
}

.lb-sky.sky-morning {
	background: linear-gradient(180deg, #87CEEB 0%, #B8DFF0 50%, #FAF7F2 100%);
}

.lb-sky.sky-noon {
	background: linear-gradient(180deg, #4A9FD6 0%, #7BB8E0 50%, #B8DFF0 100%);
}

.lb-sky.sky-afternoon {
	background: linear-gradient(180deg, #6BA7C9 0%, #F5C896 60%, #FFD9A8 100%);
}

.lb-sky.sky-dusk {
	background: linear-gradient(180deg, #6B4A8A 0%, #C95F7A 50%, #E8A565 100%);
}

.lb-sky.sky-evening {
	background: linear-gradient(180deg, #1A2855 0%, #3D2C5A 50%, #5E3D6B 100%);
}

/* === Container principal ============================================== */

/* Pas de padding : la scène intérieure (perspective 1st-person, v0.8.0)
   a besoin d'occuper tout le viewport. Les overlays (extérieur, portes)
   sont en `position: fixed` et ne sont pas affectés. */
.lb-mall-container {
	position: relative;
	z-index: 1;
}

/* === Plan intérieur (Phase 3.5 rewrite v0.8.0) — vue PERSPECTIVE ====== *
 *
 * Vue 1st-person : visiteur debout dans le corridor, regarde vers le
 * fond. Sol en perspective (SVG trapèze convergeant vers point de fuite),
 * 4 boutiques par mur (taille décroissante avec la profondeur d1..d4),
 * kiosques au centre, annuaire au mur de fond. Inspiration Forum Shops
 * Caesars Palace : atrium ouvert sur le ciel, façades en façade. */

.lb-mall-interior {
	position: relative;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	/* Top 35 % transparent : laisse passer #lb-sky (sibling de
	   .lb-mall-container) que sky-engine.js anime selon l'heure du visiteur.
	   Transition douce sur l'horizon (35-50 %), puis sol brun en bas. */
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 35%,
		#DDD2BC 42%,
		#B89E78 60%,
		#8B6F47 100%);
}

/* Sol en perspective — SVG en bas du viewport, prend la moitié inférieure. */
.lb-mall-floor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 70vh;
	z-index: 2;
	pointer-events: none;
}

/* Murs latéraux : dégradés diagonaux qui suggèrent la lumière qui glisse
   vers le fond du corridor. Purement décoratifs (aria-hidden, sans clic). */
.lb-mall-wall {
	position: absolute;
	bottom: 0;
	width: 50%;
	height: 100vh;
	z-index: 1;
	pointer-events: none;
}

.lb-mall-wall--left {
	left: 0;
	background: linear-gradient(135deg,
		rgba(184, 158, 120, 0.35) 0%,
		rgba(232, 223, 208, 0.05) 40%,
		transparent 60%);
}

.lb-mall-wall--right {
	right: 0;
	background: linear-gradient(225deg,
		rgba(184, 158, 120, 0.35) 0%,
		rgba(232, 223, 208, 0.05) 40%,
		transparent 60%);
}

/* === Annuaire au point de fuite (mur de fond du corridor) ============= */

/* Grand panneau bois clair en avant-plan, centré verticalement entre
   le bas du ciel (#lb-sky height 40vh) et le haut de Lulu (avatar
   200px + bottom 24px = 224px depuis le bas du viewport). Le centre
   vertical se calcule comme la moyenne des deux extrémités :
     ((40vh) + (100vh - 224px)) / 2 = 70vh - 112px
   `translate(-50%, -50%)` recentre le panneau autour de ce point. */
.lb-mall-directory {
	position: absolute;
	top: calc(70vh - 112px);
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(380px, 50%, 600px);
	padding: var(--lb-space-lg) var(--lb-space-md);
	background: linear-gradient(135deg,
		rgba(250, 247, 242, 0.96) 0%,
		rgba(232, 223, 208, 0.96) 100%);
	border: 4px solid var(--lb-bois-fonce);
	border-radius: var(--lb-radius-lg);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);
	z-index: 4;
}

.lb-mall-directory-title {
	margin: 0 0 var(--lb-space-md);
	font-family: var(--lb-font-titre);
	font-size: var(--lb-text-xl);
	text-align: center;
	color: var(--lb-bois-fonce);
	line-height: 1;
}

.lb-mall-directory-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--lb-space-sm);
}

.lb-mall-directory-cat {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--lb-space-sm);
	padding: var(--lb-space-sm) var(--lb-space-md);
	background: var(--lb-blanc-casse);
	border: 2px solid var(--lb-bois-fonce);
	border-radius: var(--lb-radius-md);
	font-family: var(--lb-font-corps);
	font-size: var(--lb-text-base);
	font-weight: 600;
	color: var(--lb-noir);
	cursor: pointer;
	text-align: left;
	line-height: 1.2;
	transition:
		background var(--lb-transition-fast),
		transform var(--lb-transition-fast);
}

.lb-mall-directory-cat:hover {
	background: var(--lb-beige);
	transform: translateX(2px);
}

.lb-mall-directory-cat:focus-visible {
	outline: 3px solid var(--lb-sarcelle);
	outline-offset: 2px;
}

.lb-mall-directory-cat-icon {
	font-size: 1.4rem;
	line-height: 1;
	flex-shrink: 0;
}

.lb-mall-directory-cat-label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* === Boutiques sur les murs latéraux ================================== *
 *
 * Chaque boutique = un bouton en `position: absolute` avec sa façade.
 * 4 profondeurs d1..d4 : d1 = la plus proche du visiteur (grande), d4 =
 * au fond (petite). Variantes `--left` ou `--right` ancrent à gauche/droite.
 * L'opacité et la taille décroissent avec la profondeur (perspective
 * atmosphérique + perspective géométrique). */

.lb-mall-shop {
	position: absolute;
	background: linear-gradient(180deg, #D9C7A7 0%, #B89E78 100%);
	border: 2px solid var(--lb-bois-fonce);
	border-radius: var(--lb-radius-sm);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	padding: 0;
	overflow: hidden;
	z-index: 5;
	transition: transform var(--lb-transition-base);
	display: grid;
	grid-template-rows: auto 1fr;  /* enseigne en haut + façade qui remplit */
}

.lb-mall-shop:hover {
	/* v1.49.4 — Pattern unifié : luminosité dorée seule */
	filter: drop-shadow(0 8px 24px rgba(255, 215, 100, 0.65));
	z-index: 6;
}

.lb-mall-shop:hover .lb-mall-shop-door--left  { transform: translateX(-15%); }
.lb-mall-shop:hover .lb-mall-shop-door--right { transform: translateX(15%);  }

.lb-mall-shop:focus-visible {
	outline: 3px solid var(--lb-sarcelle);
	outline-offset: 2px;
}

/* Enseigne du dessus : nom de la boutique. */
.lb-mall-shop-sign {
	display: block;
	background: var(--lb-bois-fonce);
	color: var(--lb-blanc-casse);
	font-family: var(--lb-font-titre);
	text-align: center;
	padding: 4px 6px;
	font-size: clamp(9px, 1.1vw, 14px);
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom: 1px solid var(--lb-noir);
}

/* Façade : grid 3 colonnes (vitrine gauche | porte | vitrine droite). */
.lb-mall-shop-facade {
	display: grid;
	grid-template-columns: 1fr 0.7fr 1fr;
	gap: 2px;
	padding: 2px;
	background: #5C3D1E;
}

/* Vitrines vitrées : fond bleu pâle (verre), produits visibles dispersés. */
.lb-mall-shop-vitrine {
	background:
		linear-gradient(135deg,
			rgba(199, 230, 235, 0.45) 0%,
			rgba(176, 215, 222, 0.55) 50%,
			rgba(255, 255, 255, 0.30) 100%);
	border: 1px solid #1A0F06;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 2px;
	padding: 2px;
	overflow: hidden;
	position: relative;
}
/* Reflet diagonal sur la vitre */
.lb-mall-shop-vitrine::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 30%;
	width: 18%;
	background: linear-gradient(118deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
	pointer-events: none;
	transform: skewX(-18deg);
}

.lb-mall-shop-vitrine-product {
	font-size: clamp(8px, 1vw, 16px);
	line-height: 1;
	pointer-events: none;        /* clic = bouton parent */
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* Portes coulissantes au centre — 2 vantaux qui s'écartent légèrement au hover. */
.lb-mall-shop-doors {
	display: flex;
	overflow: hidden;
	background: #1A0F06;
	border: 1px solid #1A0F06;
	position: relative;
}
.lb-mall-shop-door {
	flex: 1 1 50%;
	background:
		linear-gradient(135deg,
			rgba(255, 255, 255, 0.30) 0%,
			rgba(184, 223, 240, 0.25) 30%,
			rgba(255, 255, 255, 0.18) 70%,
			rgba(255, 255, 255, 0.40) 100%);
	border: 1px solid var(--lb-or);
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lb-mall-shop-door--left  { border-right-width: 0.5px; }
.lb-mall-shop-door--right { border-left-width:  0.5px; }

/* Petites poignées or sur le bord intérieur des vantaux (visibles à d1/d2) */
.lb-mall-shop-door::after {
	content: '';
	position: absolute;
	top: 35%;
	width: 1.5px;
	height: 30%;
	background: var(--lb-or);
	border-radius: var(--lb-radius-full);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}
.lb-mall-shop-door--left::after  { right: 8%; }
.lb-mall-shop-door--right::after { left:  8%; }

/* Profondeurs lointaines (d3 / d4) — produits trop petits pour être lisibles,
   on les cache pour ne garder que la silhouette générale (vitrines + porte). */
.lb-mall-shop--d3 .lb-mall-shop-vitrine-product,
.lb-mall-shop--d4 .lb-mall-shop-vitrine-product,
.lb-mall-shop--d3 .lb-mall-shop-door::after,
.lb-mall-shop--d4 .lb-mall-shop-door::after {
	display: none;
}

/* Profondeurs — taille et position décroissantes. Le calcul approxime
   une projection 1-point perspective avec point de fuite à 50 %, 42 %. */
.lb-mall-shop--left.lb-mall-shop--d1  { bottom: 8%;  left: 0;     width: 22%; height: 35%; }
.lb-mall-shop--left.lb-mall-shop--d2  { bottom: 33%; left: 13%;   width: 16%; height: 22%; opacity: 0.92; }
.lb-mall-shop--left.lb-mall-shop--d3  { bottom: 47%; left: 23%;   width: 11%; height: 14%; opacity: 0.85; }
.lb-mall-shop--left.lb-mall-shop--d4  { bottom: 56%; left: 31%;   width: 7%;  height: 9%;  opacity: 0.78; }
.lb-mall-shop--left.lb-mall-shop--d5  { bottom: 62%; left: 36%;   width: 5%;  height: 6%;  opacity: 0.70; }

.lb-mall-shop--right.lb-mall-shop--d1 { bottom: 8%;  right: 0;    width: 22%; height: 35%; }
.lb-mall-shop--right.lb-mall-shop--d2 { bottom: 33%; right: 13%;  width: 16%; height: 22%; opacity: 0.92; }
.lb-mall-shop--right.lb-mall-shop--d3 { bottom: 47%; right: 23%;  width: 11%; height: 14%; opacity: 0.85; }
.lb-mall-shop--right.lb-mall-shop--d4 { bottom: 56%; right: 31%;  width: 7%;  height: 9%;  opacity: 0.78; }
.lb-mall-shop--right.lb-mall-shop--d5 { bottom: 62%; right: 36%;  width: 5%;  height: 6%;  opacity: 0.70; }

/* === Kiosques charrettes au centre du corridor ======================= */

.lb-mall-kiosk {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(232, 223, 208, 0.9);
	border: 2px dashed var(--lb-bois-fonce);
	border-radius: var(--lb-radius-sm);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	z-index: 4;
	padding: var(--lb-space-xs) var(--lb-space-sm);
	font-family: var(--lb-font-corps);
	font-size: clamp(9px, 1vw, 12px);
	color: var(--lb-bois-fonce);
	font-style: italic;
	text-align: center;
	transition: transform var(--lb-transition-base);
}

.lb-mall-kiosk:hover {
	transform: translateX(-50%) translateY(-2px);
}

.lb-mall-kiosk:focus-visible {
	outline: 2px solid var(--lb-sarcelle);
	outline-offset: 2px;
}

/* Kiosque proche (au premier plan, plus grand) */
.lb-mall-kiosk--1 {
	bottom: 16%;
	width: 14%;
	min-width: 90px;
	padding: var(--lb-space-sm) var(--lb-space-md);
}

/* Kiosque plus loin (vers le point de fuite, plus petit) */
.lb-mall-kiosk--2 {
	bottom: 38%;
	width: 9%;
	min-width: 60px;
	opacity: 0.85;
	font-size: 10px;
}

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

@media (max-width: 768px) {
	/* Annuaire mobile : centré entre le ciel et Lulu (avatar 120px +
	   bottom 16px = 136px). `((40vh) + (100vh - 136px)) / 2 = 70vh - 68px`. */
	.lb-mall-directory {
		top: calc(70vh - 68px);
		width: clamp(280px, 88%, 440px);
		padding: var(--lb-space-md) var(--lb-space-sm);
	}

	.lb-mall-directory-title {
		font-size: var(--lb-text-base);
		margin-bottom: var(--lb-space-sm);
	}

	.lb-mall-directory-cat {
		font-size: var(--lb-text-sm);
		padding: var(--lb-space-xs) var(--lb-space-sm);
		gap: var(--lb-space-xs);
	}

	.lb-mall-directory-cat-icon {
		font-size: 1.1rem;
	}

	/* Boutiques élargies sur mobile (compense la largeur viewport plus petite). */
	.lb-mall-shop--left.lb-mall-shop--d1  { width: 28%; height: 32%; }
	.lb-mall-shop--left.lb-mall-shop--d2  { width: 20%; height: 22%; left: 14%; }
	.lb-mall-shop--left.lb-mall-shop--d3  { width: 14%; height: 14%; left: 22%; }
	.lb-mall-shop--left.lb-mall-shop--d4  { width: 9%;  height: 9%;  left: 28%; }

	.lb-mall-shop--right.lb-mall-shop--d1 { width: 28%; height: 32%; }
	.lb-mall-shop--right.lb-mall-shop--d2 { width: 20%; height: 22%; right: 14%; }
	.lb-mall-shop--right.lb-mall-shop--d3 { width: 14%; height: 14%; right: 22%; }
	.lb-mall-shop--right.lb-mall-shop--d4 { width: 9%;  height: 9%;  right: 28%; }

	.lb-mall-shop-sign {
		font-size: clamp(8px, 1.6vw, 12px);
	}

	.lb-mall-kiosk--1 {
		bottom: 12%;
		width: 22%;
	}

	.lb-mall-kiosk--2 {
		bottom: 36%;
		width: 14%;
	}
}

/* === ÉTATS DES BOUTIQUES (Phase 5.1) ====================================
 *
 * `data-shop-state` est posé par le helper `$lb_render_mall_shop` dans
 * front-page.php selon le champ ACF `lb_shop_state`. 3 valeurs possibles :
 *   - "open"               (par défaut) : façade complète vitrines+porte
 *   - "available"          : pancarte « À LOUER » au-dessus de portes ternes
 *   - "under_construction" : panneau chantier (statique pour Phase 5.1 ;
 *                            animations boucane/outils/travailleur ajoutées
 *                            une itération suivante)
 *
 * Les vitrines `--empty` n'affichent ni produits ni reflet — juste verre
 * gris pâle pour signaler que la boutique n'est pas encore ouverte. */

/* --- Vitrines vides --- */
.lb-mall-shop-vitrine--empty {
	background:
		linear-gradient(135deg,
			rgba(199, 215, 220, 0.30) 0%,
			rgba(176, 195, 200, 0.40) 50%,
			rgba(220, 230, 232, 0.20) 100%);
}
.lb-mall-shop-vitrine--empty::after {
	display: none;        /* pas de reflet sur vitrine vide */
}

/* État « À LOUER » : portes ternes + pancarte bois pâle au centre */
.lb-mall-shop[data-shop-state="available"] {
	cursor: pointer;       /* on peut cliquer pour voir l'overlay « contactez-nous » */
	opacity: 0.92;
}
.lb-mall-shop[data-shop-state="available"] .lb-mall-shop-doors {
	background: #5C3D1E;
	opacity: 0.7;
}
.lb-mall-shop[data-shop-state="available"] .lb-mall-shop-door {
	background: linear-gradient(135deg, #D9C7A7 0%, #B89E78 100%);
	border-color: #5C3D1E;
}

.lb-mall-shop-rent-sign {
	position: absolute;
	left: 50%;
	top: 55%;
	transform: translate(-50%, -50%) rotate(-3deg);
	padding: 4px 14px;
	background: linear-gradient(180deg, #EFDFC0 0%, #C9B484 100%);
	color: #5C3D1E;
	font-family: var(--lb-font-titre);
	font-size: clamp(8px, 1.1vw, 14px);
	font-weight: 700;
	letter-spacing: 0.08em;
	border: 2px solid #8B6F47;
	border-radius: 4px 6px 5px 7px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	white-space: nowrap;
	z-index: 3;
	pointer-events: none;
}
/* Pancarte plus petite à profondeur > d2 (illisible sinon) */
.lb-mall-shop--d3 .lb-mall-shop-rent-sign,
.lb-mall-shop--d4 .lb-mall-shop-rent-sign {
	padding: 2px 6px;
	font-size: clamp(6px, 0.7vw, 10px);
}

/* État « EN CONSTRUCTION » : panneau jaune+noir devant la porte */
.lb-mall-shop[data-shop-state="under_construction"] {
	cursor: pointer;
}
.lb-mall-shop[data-shop-state="under_construction"] .lb-mall-shop-doors {
	background: #4A3221;
	opacity: 0.8;
}

.lb-mall-shop-construction-sign {
	position: absolute;
	left: 50%;
	top: 60%;
	transform: translate(-50%, -50%) rotate(2deg);
	padding: 3px 10px;
	background: repeating-linear-gradient(
		135deg,
		#FFC107 0px, #FFC107 8px,
		#1A1A1A 8px, #1A1A1A 16px
	);
	border: 2px solid #1A1A1A;
	border-radius: 2px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 4px;
	pointer-events: none;
}
.lb-mall-shop-construction-icon {
	font-size: clamp(10px, 1.2vw, 14px);
	line-height: 1;
}
.lb-mall-shop-construction-label {
	background: #FFC107;
	color: #1A1A1A;
	padding: 1px 4px;
	font-family: var(--lb-font-corps);
	font-size: clamp(6px, 0.7vw, 9px);
	font-weight: 700;
	letter-spacing: 0.05em;
	border-radius: 1px;
	white-space: nowrap;
}
/* Profondeurs d3/d4 : juste l'icône, pas le label */
.lb-mall-shop--d3 .lb-mall-shop-construction-label,
.lb-mall-shop--d4 .lb-mall-shop-construction-label {
	display: none;
}