/* ==========================================================================
   Accordéon (accordion.js) : FAQ de la page Contact, offres d'emploi de Rejoignez-nous.
   Filets gris entre les éléments, flèche qui pivote, panneau qui s'ouvre en fondu.
   ========================================================================== */

.accordion {
	border-top: 1px solid #d5dad5;
}

.accordion__item {
	border-bottom: 1px solid #d5dad5;
}

.accordion__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 26px 0;
	border: 0;
	background: transparent;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.accordion__question {
	color: var(--c-ink);
	font-family: var(--f-title);
	font-weight: 500;
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.3;
	text-transform: uppercase;
}

.accordion__chevron {
	display: inline-block;
	flex-shrink: 0;
	color: var(--c-muted);
	font-size: 20px;
	transition: transform .3s ease-in-out;
}

.accordion__item.is-open .accordion__chevron {
	transform: rotate(180deg);
}

.accordion__panel {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .35s ease-in-out, opacity .3s ease-in-out;
}

.accordion__item.is-open .accordion__panel {
	opacity: 1;
}

.accordion__answer p {
	margin: 0;
	padding: 0 40px 26px 0;
	color: var(--c-muted);
	font-family: var(--f-text);
	font-size: 16.5px;
	line-height: 1.75;
}

.accordion__answer p + p {
	margin-top: -12px;
}