/* ==========================================================================
   Bloc enf/faq
   ========================================================================== */

.enf-faq__list {
	max-width: 52rem;
}

.enf-faq__item {
	border-bottom: 1px solid var(--enf-line);
}

.enf-faq__item:first-child {
	border-top: 1px solid var(--enf-line);
}

.enf-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--enf-space-4);
	min-height: 44px;
	padding: var(--enf-space-5) 0;
	color: var(--enf-ink);
	cursor: pointer;
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-h4);
	font-weight: var(--enf-fw-semibold);
	line-height: var(--enf-lh-heading);
	list-style: none;
}

/* Le chevron par défaut de Safari et Chrome est remplacé par le nôtre. */
.enf-faq__question::-webkit-details-marker {
	display: none;
}

.enf-faq__question:hover {
	color: var(--enf-orange);
}

.enf-faq__question:focus-visible {
	outline: var(--enf-focus);
	outline-offset: var(--enf-focus-offset);
}

/* Croix qui pivote en « − » à l'ouverture. Dessinée en CSS, donc nette
   à toutes les tailles et colorée par currentColor. */
.enf-faq__marker {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}

.enf-faq__marker::before,
.enf-faq__marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	border-radius: 1px;
	background-color: currentColor;
	transform: translate(-50%, -50%);
	transition: transform var(--enf-transition), opacity var(--enf-transition);
}

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

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

.enf-faq__answer {
	padding-bottom: var(--enf-space-5);
	color: var(--enf-body);
}

.enf-faq__answer > *:first-child {
	margin-top: 0;
}

/* Sur fond sombre. */
.enf-section--dark .enf-faq__item,
.enf-section--dark .enf-faq__item:first-child {
	border-color: var(--enf-hairline-on-dark-strong);
}

.enf-section--dark .enf-faq__question {
	color: var(--enf-on-dark);
}

.enf-section--dark .enf-faq__answer {
	color: var(--enf-on-dark-muted);
}

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