.faq.desktop{
	display: none;
}

.faq{
	padding: 30px 0;
}

.faq h2{
	margin-bottom: 23px;
	text-transform: uppercase;
	color: var(--canard);
	font-size: 28px;
	text-align: left;
	line-height: 110.00000000000001%;
}

.faq .single-faq{
	border-bottom: 1px solid var(--perle-mid);
}

.faq .single-faq:first-of-type{
	border-top: 1px solid var(--perle-mid);
}

.faq .single-faq .question{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32px 0;
	cursor: pointer;
}

.faq .single-faq .question h3{
	width: calc(100% - 30px);
	font-family: 'Lora';
	font-weight: 600;
	font-size: 20px;
	line-height: 120%;
	text-align: left;
	color: var(--bleu-hague-mid);
}

.faq .single-faq .question:hover h3,
.faq .single-faq .question.rotate h3{
	color: var(--canard);
}

.faq .single-faq .question .toggle-faq{
	transition: all .5s ease;
}

.faq .single-faq .question .toggle-faq.rotate{
	transform: rotate(90deg);
}

.faq .single-faq p{
	display: none;
	margin-bottom: 18px;
	font-family: 'Lora';
	font-weight: 400;
	font-size: 15px;
	line-height: 180%;
	color: var(--canard-mid);
}

.faq a{
	margin: 64px auto 0 auto;
	display: block;
}

section.faq{
	position: relative;
}

.faq .single-faq .question.rotate {
	padding: 32px 0 15px;
}

@media screen and (min-width: 992px) {

	.faq{
		padding: 100px 0;
	}

	.faq.desktop{
		display: block;
	}

	.faq h2{
		font-size: 30px;
		margin-bottom: 30px;
		font-weight: 400;
	}

	.faq .single-faq .question h3{
		font-size: 20px;
	}

	.faq .single-faq p{
		font-size: 14px;
		margin-bottom: 30px;
	}

	.faq .single-faq .question{
		padding: 30px 0;
	}

	.faq .single-faq .question.rotate{
		padding: 30px 0 20px;
	}
}