/*
 * ParentRoute
 * FAQ Section
 *
 * Tous les styles sont limités à .pr-faq.
 * Aucun impact sur les autres sections.
 */

/* =========================================================
   Section
   ========================================================= */

.pr-faq {
	--pr-accent: #6f8979;
	--pr-faq-background: 255 255 255;
	--pr-faq-foreground: 24 31 27;

	position: relative;
	padding-top: 96px;
	padding-bottom: 96px;
	overflow: clip;
	background:
		rgb(
			var(
				--color-background,
				var(--pr-faq-background)
			)
		);
	color:
		rgb(
			var(
				--color-foreground,
				var(--pr-faq-foreground)
			)
		);
}

.pr-faq,
.pr-faq * {
	box-sizing: border-box;
}

/* =========================================================
   FAQ inner container
   ========================================================= */

.pr-faq > .pr-section__inner {
	position: relative;
	z-index: 2;
	width:
		min(
			calc(100% - 40px),
			var(--page-width, 1400px)
		);
	margin-inline: auto;
}

/* =========================================================
   FAQ header
   ========================================================= */

.pr-faq .pr-section__header {
	max-width: 800px;
}

.pr-faq .pr-section__header--center {
	margin-inline: auto;
	text-align: center;
}

/* =========================================================
   FAQ eyebrow
   ========================================================= */

.pr-faq .pr-section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	color: var(--pr-accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pr-faq
	.pr-section__header--center
	.pr-section__eyebrow {
	justify-content: center;
}

.pr-faq .pr-section__eyebrow::before {
	flex: 0 0 auto;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	content: "";
}

/* =========================================================
   FAQ main heading
   ========================================================= */

.pr-faq h2.pr-section__heading {
	margin: 0;
	color: inherit;
	font-family:
		var(--font-heading-family, inherit);
	font-size:
		clamp(36px, 4.5vw, 64px);
	font-weight:
		var(--font-heading-weight, 600);
	line-height: 1.03;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

/* =========================================================
   FAQ introductory text
   ========================================================= */

.pr-faq .pr-section__text {
	margin-top: 18px;
	color: inherit;
	font-size:
		clamp(16px, 1.35vw, 18px);
	line-height: 1.7;
	opacity: 0.72;
}

.pr-faq .pr-section__text p {
	margin: 0;
	color: inherit;
}

/* =========================================================
   FAQ list
   ========================================================= */

.pr-faq__list {
	max-width: 900px;
	margin: 44px auto 0;
	border-top:
		1px solid
		color-mix(
			in srgb,
			currentColor 13%,
			transparent
		);
}

/* =========================================================
   FAQ item
   ========================================================= */

.pr-faq__item {
	border-bottom:
		1px solid
		color-mix(
			in srgb,
			currentColor 13%,
			transparent
		);
}

/* =========================================================
   Question
   ========================================================= */

.pr-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 25px 2px;
	color: inherit;
	cursor: pointer;
	list-style: none;
	font-family:
		var(--font-heading-family, inherit);
	font-size:
		clamp(18px, 1.7vw, 22px);
	font-weight: 650;
	line-height: 1.3;
}

.pr-faq summary::-webkit-details-marker {
	display: none;
}

/* =========================================================
   Plus icon
   ========================================================= */

.pr-faq__plus {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.pr-faq__plus::before,
.pr-faq__plus::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 1.5px;
	background: currentColor;
	content: "";
	transform:
		translate(-50%, -50%);
	transition:
		transform 180ms ease;
}

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

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

/* =========================================================
   Answer
   ========================================================= */

.pr-faq__answer {
	max-width: 780px;
	padding:
		0
		42px
		25px
		2px;
	color: inherit;
	font-size: 15px;
	line-height: 1.72;
	opacity: 0.7;
}

.pr-faq__answer p {
	margin-top: 0;
}

.pr-faq__answer p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   Focus
   ========================================================= */

.pr-faq summary:focus-visible {
	outline:
		2px solid
		var(--pr-accent);
	outline-offset: 4px;
}

/* =========================================================
   Reveal animation, FAQ only
   ========================================================= */

.pr-faq .pr-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 650ms ease,
		transform 650ms
		cubic-bezier(
			0.22,
			0.61,
			0.36,
			1
		);
}

.pr-faq .pr-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* =========================================================
   Mobile
   ========================================================= */

@media screen and (max-width: 749px) {
	.pr-faq {
		padding-top: 96px;
		padding-bottom: 96px;
	}

	.pr-faq > .pr-section__inner {
		width:
			min(
				calc(100% - 32px),
				1400px
			);
	}

	.pr-faq h2.pr-section__heading {
		font-size:
			clamp(34px, 10vw, 48px);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.pr-faq .pr-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.pr-faq__plus::before,
	.pr-faq__plus::after {
		transition: none;
	}
}