/**
 * Spinner Livre Héros — réutilisable partout.
 *
 * Markup :
 *   <div class="lh-spinner" aria-hidden="true"></div>
 * Alias : .spinner (même rendu)
 *
 * Overlay bloquant :
 *   <div class="lh-overlay" hidden>
 *     <div class="lh-overlay__panel" role="status">
 *       <div class="lh-spinner" aria-hidden="true"></div>
 *       <p class="lh-overlay__text">Message…</p>
 *     </div>
 *   </div>
 */

.lh-spinner,
.spinner {
	width: 56px;
	height: 56px;
	display: grid;
	border: 4.5px solid #0000;
	border-radius: 50%;
	border-color: #cad2c5 #0000;
	animation: lh-spinner-spin 1.4s infinite linear;
	box-sizing: border-box;
}

.lh-spinner::before,
.lh-spinner::after,
.spinner::before,
.spinner::after {
	content: "";
	grid-area: 1 / 1;
	margin: 2.2px;
	border: inherit;
	border-radius: 50%;
	box-sizing: border-box;
}

.lh-spinner::before,
.spinner::before {
	border-color: #52796f #0000;
	animation: inherit;
	animation-duration: 0.7s;
	animation-direction: reverse;
}

.lh-spinner::after,
.spinner::after {
	margin: 8.9px;
}

@keyframes lh-spinner-spin {
	100% {
		transform: rotate(1turn);
	}
}

.lh-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.lh-overlay[hidden] {
	display: none !important;
}

.lh-overlay__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-width: 18rem;
	padding: 1.5rem 1.75rem;
	text-align: center;
	background: var(--wd-main-bgcolor, #fff);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--wd-brd-radius, 0);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.lh-overlay__text {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	color: inherit;
}

body.lh-overlay-open {
	overflow: hidden;
}