.lf-faq {
	display: grid;
	gap: 0.75rem;
}

.lf-faq__item {
	background: var(--lf-white);
	border: 1px solid var(--lf-border);
	border-radius: var(--lf-radius-sm);
	transition: border-color 200ms var(--lf-motion-ease, ease), box-shadow 200ms var(--lf-motion-ease, ease);
}

.lf-faq__item:hover {
	border-color: rgba(var(--lf-orange-rgb), 0.4);
}

.lf-faq__item[open] {
	border-color: var(--lf-orange);
	box-shadow: 0 8px 24px rgba(var(--lf-orange-rgb), 0.1);
}

.lf-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	cursor: pointer;
	font-weight: 600;
	padding: 1.05rem 1.25rem;
	list-style: none;
}

.lf-faq__question::-webkit-details-marker {
	display: none;
}

.lf-faq__question:focus-visible {
	outline: 2px solid var(--lf-orange);
	outline-offset: -2px;
	border-radius: var(--lf-radius-sm);
}

/* Chevron dessiné en CSS : il pivote au lieu de sauter de + à − */
.lf-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: rgba(var(--lf-orange-rgb), 0.1);
	transition: background 250ms var(--lf-motion-ease, ease), transform 350ms var(--lf-motion-ease, ease);
}

.lf-faq__icon::before,
.lf-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.7rem;
	height: 2px;
	border-radius: 2px;
	background: var(--lf-orange);
	transform: translate(-50%, -50%);
	transition: transform 350ms var(--lf-motion-ease, ease), opacity 250ms ease;
}

.lf-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.lf-faq__item[open] .lf-faq__icon {
	background: var(--lf-orange);
	transform: rotate(180deg);
}

.lf-faq__item[open] .lf-faq__icon::before,
.lf-faq__item[open] .lf-faq__icon::after {
	background: var(--lf-white);
}

.lf-faq__item[open] .lf-faq__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

.lf-faq__panel {
	overflow: hidden;
}

.lf-faq__answer {
	margin: 0;
	padding: 0 1.25rem 1.25rem;
	color: var(--lf-muted);
	line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
	.lf-faq__icon,
	.lf-faq__icon::before,
	.lf-faq__icon::after {
		transition: none;
	}
}