/**
 * Base commune à toutes les sections Flexible des fiches Project.
 * Point d'entrée chargé en dépendance par chaque style de section.
 */

:root {
	--color-navy:       #0A1628;
	--color-blue:       #0066FF;
	--color-blue-hover: #0052CC;
	--color-white:      #FFFFFF;
	--transition-base:  200ms ease;

	/* Fond décoratif project (cf. .flexible-landing__bkg dans landing-flexible) */
	--flexible-project-bkg-top:        calc(780px + 15cm - 10cm + 5cm - 5cm + 3cm);
	--flexible-project-bkg-left:       calc(280px - 1cm - 15cm + 5cm);
	--flexible-project-bkg-fade-start: 55%;
	--flexible-project-bkg-fade-end:   70%;
}

.flexible-project {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: clip;
}

.flexible-project [class$="__inner"] {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/*
 * Fond décoratif global de la fiche project (même principe que la landing flexible).
 * Positionné derrière les sections claires ; les sections à fond opaque (hero,
 * chiffres clés…) le masquent naturellement au-dessus.
 */
.flexible-project__bkg {
	position: absolute;
	left: var(--flexible-project-bkg-left);
	top: var(--flexible-project-bkg-top);
	width: 2067px;
	height: 1913px;
	opacity: 0.2;
	pointer-events: none;
	z-index: -1;
	-webkit-mask-image: linear-gradient(
		to bottom right,
		black       var(--flexible-project-bkg-fade-start),
		transparent var(--flexible-project-bkg-fade-end)
	);
	mask-image: linear-gradient(
		to bottom right,
		black       var(--flexible-project-bkg-fade-start),
		transparent var(--flexible-project-bkg-fade-end)
	);
}

@media (max-width: 768px) {
	.flexible-project__bkg {
		display: none;
	}
}