.legal {
	--bg-legal-opacity: 1;

	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--background-alt);

	&::before {
		content: '';
		left: 0;
		top: 4.5rem;
		background-image: url('/src/images/couple-depart-360.webp');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center top;
		overflow: hidden;
		position: fixed;
		height: 100vw;
		width: 100%;
		z-index: 0;
		opacity: var(--bg-legal-opacity);
		filter: contrast(var(--bg-legal-opacity));
	}

	& section::before {
		content: none;
	}

	& section:first-child {
		height: unset;
	}

	& section:not(:first-child) {
		padding: 0;
		width: 100%;
	}

	& div.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 100vw 0 0 0;
		padding: 2rem 0 0 0;
		z-index: 1;

		& h1 {
			font-size: 36px;
			line-height: 42px;
			margin: 0 20px 24px 20px;
			text-align: center;
			width: unset;
			border-bottom: none;
			padding-bottom: 0;
		}

		& h2 {
			display: inline-block;
			text-decoration: underline;
			text-decoration-color: var(--wyg-blue-alt);
			text-decoration-thickness: 4px;
			text-underline-offset: .3em;
			margin-bottom: 0;
		}

		& div:has(> h2) {
			display: flex;
			flex-direction: row;
			align-items: baseline;
			margin: 2rem 20px;
		}

		& span {
			font: normal normal bold 36px/42px "Playfair Display";
			color: var(--wyg-blue-alt);
			margin-right: 12px;
			display: block;
		}

		& p {
			margin: 0 20px 1rem 20px;
		}

		& :is(dt, li) {
			margin: 1rem 20px;
		}

		& dt {
			font: normal normal bold 20px/30px Playfair Display;
			color: var(--title);
			text-align: left;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&::after {
				content: '';
				display: block;
				transition: .3s ease-out;
				width: 24px;
				min-width: 24px;
				height: 24px;
				margin-left: 1rem;
				background-image: url(/src/images/icons/icon-down-simple-green.svg);
				background-repeat: no-repeat;
				background-position: center;
			}
		}

		& dt:has(+ dd:not(.visible))::after {
			transform: rotate(-90deg);
		}

		& dd {
			padding: 0 56px 1rem 20px;
			border-bottom: solid 2px var(--wyg-blue-alt-05);

			&:not(.visible) {
			    font-size: 0;
			    height: 0px;
			    padding-bottom: 0;
			}
		}

		& ul {
			list-style-type: none;
			padding: 0;
		}
	}

	& .download-link {
		align-self: flex-end;
        margin-inline: 2rem;
        margin-top: -1rem;
        margin-bottom: 1rem;
	}
}

#faq {

	& h1 + p {
		max-width: 640px;
	}

	& section:not(:first-child) {
		margin-bottom: 8px;
	}
}

#cgv {

	& ul {
		list-style-type: disc;
		padding-left: 1rem;
	}

	& address {
		text-align: center;
	}
}

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

	.legal::before {
		background-image: url('/src/images/couple-depart-720.webp');
	}

	.legal div.content:is(h1, p) {
		margin-inline: 2rem;
	}
}

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

	.legal div.content {

		& span {
			font-size: 48px;
			letter-spacing: 0.72px;
		}

		& h2 {
			font-size: 28px;
			line-height: 36px;
			letter-spacing: 0.12px;
		}
	}
}

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

	.legal::before {
		background-image: url('/src/images/couple-depart-1440.webp');
		height: 100dvh;
	}

	.legal div.content {
		margin: calc(100dvh - 10rem) 0 2rem 0;
		width: min(calc(100vw - 4rem), 1024px);
		padding-top: 3rem;

		& div:has(> h2) {
			margin: 24px 2rem;
		}

		& :is(p, dt, li) {
			margin-inline: 2rem;
		}

		& dd {
			padding-inline: 2rem 5rem;
		}
	}
}

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

	.legal div.content {
		margin: calc(100dvh - 10rem) 0 4rem 0;
		width: min(calc(100vw - 8rem), 1024px);
	}

}

@media only screen and (min-width: 720px) and ((min-height: 644px) or (min-width: 1440px)) {

	.legal::before {
		background-image: url('/src/images/couple-depart-2880.webp');
	}
}

@media only screen and (pointer: fine) {
	#faq dt:hover {
		cursor: pointer;
    	text-decoration: underline;
    	text-underline-offset: .2em;
    	text-decoration-thickness: .1em;
    }
}