/* .............................................................................
PAGE HEADERS
............................................................................. */

/*
PAGE HEAD
La section en haut de page de la page de styles. */
.pH {background-color: var(--color-red);text-align: center;background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;position: relative;}
.pH__c {padding: 10.002em 10.002vw;position: relative;z-index: 2;}



/*
PAGE HEAD / Home
Contenu a gauche, carousel d'images a droite. */
.pHHome {--progress:0;position: relative;height: 100vh;min-height: 45em;max-height: 70vw;display: grid;grid-template-columns: auto;grid-template-rows: auto;background-color: var(--color-gray);}
.pHHome::before {position:absolute; z-index:4; display:block; content:''; bottom:0; height: 0.3em; left:0; right:0; background-color: var(--color-red); transform-origin: 0% 50%; transform: scaleX(var(--progress, 0)); }
.pHHome > * {grid-column: 1 / -1;grid-row: 1 / 2;min-height: 0;}
.pHHome__cCtn {position: relative;z-index: 2;align-self: center;margin-left: var(--width-std-left);max-width: 35em;padding: var(--topbar-height) 0 1% 0;}
.pHHome__cNav {position: relative;z-index: 3;align-self: center;justify-self: end;margin-right: 3vw;}
.pHHome__cImages {position: absolute;z-index: 1;top: 0;bottom: 0;right: 0;left: 0;overflow: hidden;}

.pHHome__ctn { }
.pHHome__head { }
.pHHome__cta {margin-top: 3.5em;}
.pHHome__subTitles {display: grid; }
.pHHome__subTitle {grid-column: 1 / 2; grid-row: 1 / 2; opacity: 0; transform: translateY(1em); transition: opacity 0.5s, transform 0.5s;}
.pHHome__images {height: 100%;width: 100%;position: relative;}
.pHHome__image {position: absolute;top: 0;bottom: 0;right: 0;opacity: 0;visibility: hidden;transform-origin: 100% 50%;animation: imageFlashOut 0.8s ease forwards;}
.pHHome__image * {height: 100%;width: auto;min-width: 52vw;object-fit: cover;margin-left: auto;}

	/* 
	ANIMATE APPEAR */
	.js .pHHome.jsAnimateClass .pHHome__head {opacity: 0; transform: translateY(0.5em); transition: opacity 1s, transform 1s; transition-delay: 0s; }
	.js .pHHome.jsAnimateClass.animate .pHHome__head {opacity: 1; transform: none; }

	.js .pHHome.jsAnimateClass .tagline {opacity: 0; transform: translateY(0.5em); transition: opacity 1s, transform 1s; transition-delay: 0.2s; }
	.js .pHHome.jsAnimateClass.animate .tagline {opacity: 1; transform: none; }

	.js .pHHome.jsAnimateClass .pHHome__cta {opacity: 0; transform: translateY(0.5em); transition: opacity 1s, transform 1s; transition-delay: 0.4s; }
	.js .pHHome.jsAnimateClass.animate .pHHome__cta {opacity: 1; transform: none; }

	.js .pHHome.jsAnimateClass .pHHome__cImages {opacity: 0; transition: opacity 1s; transition-delay: 0.8s; }
	.js .pHHome.jsAnimateClass.animate .pHHome__cImages {opacity: 1; }

	.js .pHHome.jsAnimateClass .pHHome__cNav {opacity: 0; transition: opacity 1s; transition-delay: 1.2s; }
	.js .pHHome.jsAnimateClass.animate .pHHome__cNav {opacity: 1; }

/* Carousel hidden, animation d'images gérées à part */
.pHHome__carousel {display: none; }
.pHHome__slide { }

	/* Animate */
	.pHHome__subTitle.active {opacity: 1;transform: none; }
	.pHHome__image.active {transform-origin: 0% 50%; animation: imageFlash 1.2s ease forwards;}

	/* @keyframes imageFlashTEST {
		0% {filter: blur(1em); opacity: 0.2; visibility: visible; }
		20% {filter: blur(0.3em); opacity: 1; }
		60% {filter: blur(1em); opacity: 0; }
		100% {filter: blur(0); opacity: 1; visibility: visible; }
	}

	@keyframes imageFlashTEST {
		0% {opacity: 0; visibility: visible; }
		9% {opacity: 0; }
		10% {opacity: 0.1; }
		19% {opacity: 0; }
		20% {opacity: 0.2; }
		29% {opacity: 0; }
		30% {opacity: 0.3; }
		40% {opacity: 0; }
		100% {opacity: 1; visibility: visible; }
	} */

	@keyframes imageFlash {
		0% {transform: scale(1.3); filter: blur(5rem); opacity: 0; visibility: visible; }
		100% {transform: scale(1); filter: blur(0) ; opacity: 1; visibility: visible; }
	}

	@keyframes imageFlashOut {
		0% {transform: scale(1); filter: blur(0) ; opacity: 1; visibility: visible; }
		100% {transform: scale(1.8); filter: blur(5rem); opacity: 0; visibility: visible; }
	}

	

	/* Content over images */
	@media (max-width:62rem) {
		.pHHome {height: var(--vhDefer, 100vh);min-height: 41em;max-height: 150vw;}
		.pHHome__cCtn {align-self: start; padding-top: calc(var(--topbar-height) + 5%); }
		.pHHome__cta {margin-top: 2.5em; }
		.pHHome__image {top: auto; }
		.pHHome__image * {min-width: 0;width: 75vw;}
	}

	/* Smaller */
	@media (max-width:46rem) {
		.pHHome {min-height: 54em; max-height: 200vw;}
		.pHHome__cta {margin-top: 1.5em; }
	}

	/* X-Small */
	@media (max-width:26rem) {
		.pHHome__image * {min-width: 0;width: 98vw !important;}
		.pHHome {min-height: 56em; max-height: 200vw !important;}
		.pHHome__cta {margin-top: 1.5em; }
	}