/* Idfm: 1860x1080px */
%widget {
	aspect-ratio: 16/9;
	--reverse-aspect-ratio: 9/16;
	/* height is set according to the aspect-ratio, don´t touch it */
	width: 100%;

	display: flex;
	flex-direction: column;
}

/* Idfm: 1800x100px (margin: 17px 60px) */
%header {
	width: calc(1800/1920*100%);
	height: calc(100/1080*100%);
	/*Percentage margin are computed relatively to the nearest block container's width, not height */
	/* cf. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom */
	margin: calc(17/1080*var(--reverse-aspect-ratio)*100%) calc(60/1920*100%);

	display: flex;
	align-items: center;

	font-family: IDFVoyageur-bold;
}

.header {
	@extend %header;
}

%title {
	height: 50%;
	width: 70%;

	margin-right: auto;
}

/* Idfm: 1860x892px (margin: 0px 30px) */
%body {
	width: calc(1860/1920*100%);
	height: calc(892/1080*100%);
	margin: 0 calc(30/1920*100%);

	display: flex;
	flex-direction: column;

	background-color: white;

	border-collapse:separate;
	// border:solid var(--idfm-black) 1px;
	border-radius: calc(15/1920*100%);
}


/* Idfm: 1800x54px (margin: 0px 50px) */
%footer {
	width: calc(1820/1920*100%);
	height: calc(54/1080*100%);
	margin: 0 calc(50/1920*100%);

	display: flex;
	align-items: center;
	justify-content: right;
}

.footer {
	@extend %footer;
}

.footer div {
	aspect-ratio: 1;
	height: 50%;

	margin-left: calc(42/1920*100%);
}