/* @override 
	https://dev.levolcan.com/modules/custom/ff_components/components/groupes/timeline/timeline.css?*
	https://c3c.formesfluidesdev.com/profiles/ff_profile/modules/custom/ff_components/components/groupes/timeline/timeline.css?* */

.comp--timeline {
	display: grid;
	grid-template-areas: "g d";
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--gut);
	position: relative;
	margin: 0 !important;
	padding-top: calc(var(--gut)*.5);
	padding-bottom: calc(var(--gut)*.5);
}
.comp--timeline:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 50%;
	bottom: 0;
	border-left: 1px solid var(--noir);
}
.comp--timeline:before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	display: inline-block;
	width: 15px;
	height: 15px;
	transform: translate(-50%,-50%);
	border-radius: 50px;
	background-color: var(--blanc);
	border: 1px solid var(--noir);
}
.comp--timeline .comp--timeline--content {
	height: 100%;
}
.comp--timeline--date {
	justify-self: end;
}
@media print, screen and (min-width: 1024px) {
	.comp--timeline:nth-child(odd) .comp--timeline--date {
		grid-area: d;
		justify-self: start;
	}
	.comp--timeline:nth-child(odd) .comp--timeline--content {
		grid-area: g;
	}
}

@media print, screen and (max-width: 1023px) {
	.comp--timeline {
		grid-template-areas: "g";
		grid-template-columns: 1fr;
		align-items: inherit;
		padding-left: var(--gut);
		gap: calc(var(--gut)*.5);
	}
	.comp--timeline:after,
	.comp--timeline:before {
		left: calc(var(--gut)*0);
	}
	.comp--timeline:before {
		top: calc(var(--gut)*1.3);
	}
}