/*
 * faq/colonne — l'en-tete colle a gauche, l'accordeon a droite, separe par des
 * filets. L'icone est une croix qui tourne d'un quart a l'ouverture.
 */

.ivy-faq--colonne {
	display: grid;
	grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr );
	align-items: start;
	gap: clamp( 32px, 6vw, 96px );
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding: clamp( 88px, 12vw, 160px ) clamp( 20px, 4vw, 40px );
	color: var( --ivy-ink, rgb( 17 17 17 ) );
}

.ivy-faq--colonne .ivy-faq__side { position: sticky; top: 108px; display: grid; justify-items: start; gap: 20px; }
.ivy-faq--colonne .ivy-faq__header { display: grid; gap: 18px; }

.ivy-faq--colonne .ivy-faq__eyebrow {
	margin: 0;
	color: var( --ivy-eyebrow-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ivy-faq--colonne .ivy-faq__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); }
.ivy-faq--colonne .ivy-faq__text { color: var( --ivy-text-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); }
.ivy-faq--colonne .ivy-faq__text > :first-child { margin-top: 0; }
.ivy-faq--colonne .ivy-faq__text > :last-child { margin-bottom: 0; }

.ivy-faq--colonne .ivy-faq__actions { display: grid; justify-items: start; gap: 20px; }

:where( .ivy-faq--colonne ) .ivy-faq__cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .85em 1.5em;
	border-radius: var( --ivy-radius-action, 0 );
	background: var( --ivy-cta-background-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	color: var( --ivy-cta-color, var( --ivy-surface, rgb( 255 255 255 ) ) );
	font-weight: 600;
	text-decoration: none;
}

:where( .ivy-faq--colonne ) .ivy-faq__cta--secondary {
	color: var( --ivy-cta_secondary-color, var( --ivy-accent, rgb( 17 17 17 ) ) );
	font-weight: 600;
	text-decoration: none;
}

:where( .ivy-faq--colonne ) .ivy-faq__cta--secondary:hover { text-decoration: underline; text-underline-offset: 4px; }

.ivy-faq--colonne .ivy-faq__list { border-top: 1px solid var( --ivy-line, rgb( 205 205 201 ) ); }
.ivy-faq--colonne .ivy-faq__item { border-bottom: 1px solid var( --ivy-line, rgb( 205 205 201 ) ); }

.ivy-faq--colonne .ivy-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 24px 0;
	border: 0;
	background: transparent;
	color: var( --ivy-item_question-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font-family: var( --e-global-typography-primary-font-family, inherit );
	font-size: var( --ivy-font-lead );
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.ivy-faq--colonne .ivy-faq__icon {
	position: relative;
	flex: none;
	width: 36px;
	height: 36px;
	border: 1px solid var( --ivy-line, rgb( 205 205 201 ) );
	border-radius: 50%;
	color: var( --ivy-item_icon-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	transition: transform 300ms cubic-bezier( .22, 1, .36, 1 ), background-color 200ms ease;
}

.ivy-faq--colonne .ivy-faq__icon::before,
.ivy-faq--colonne .ivy-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	background: currentColor;
	transform: translate( -50%, -50% );
}

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

.ivy-faq--colonne .ivy-faq__item.ivy-open .ivy-faq__icon {
	transform: rotate( 45deg );
	background: color-mix( in srgb, var( --ivy-accent, rgb( 17 17 17 ) ) 14%, transparent );
}

.ivy-faq--colonne .ivy-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	color: var( --ivy-item_answer-color, var( --ivy-ink-2, var( --ivy-muted, rgb( 82 82 82 ) ) ) );
	transition: grid-template-rows 360ms cubic-bezier( .22, 1, .36, 1 ), opacity 240ms ease;
}

.ivy-faq--colonne .ivy-faq__answer > div { overflow: hidden; }
.ivy-faq--colonne .ivy-faq__answer p { margin: 0 60px 26px 0; }
.ivy-faq--colonne .ivy-faq__item.ivy-open .ivy-faq__answer { grid-template-rows: 1fr; opacity: 1; }

@media ( max-width: 900px ) {
	.ivy-faq--colonne { grid-template-columns: minmax( 0, 1fr ); }
	.ivy-faq--colonne .ivy-faq__side { position: static; }
	.ivy-faq--colonne .ivy-faq__answer p { margin-right: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.ivy-faq--colonne .ivy-faq__icon,
	.ivy-faq--colonne .ivy-faq__answer { transition: none; }
}