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

/*
PAGE HEAD / Home
Contenu a gauche, BG et image parallax a droite. */
.pHHome {position: relative;min-height: 100vh;height: auto;margin-top: -1px;background-color: var(--color-black);padding-top: var(--topbar-height);display: grid;grid-template-columns: auto 1fr;grid-template-rows: 1fr 1fr;}
.pHHome + * {margin-top: -1px;}
.pHHome__cHead {grid-column: 1 / 2;grid-row: 1 / 2;max-width: 35em;align-self: end;position: relative;z-index: 2;margin: 1em 0 1em var(--width-std-left);}
.pHHome__cImg {grid-column: 2 / 3;grid-row: 1 / 3; position: relative;z-index: 1; }
.pHHome__cCtn {grid-column: 1 / 2;grid-row: 2 / 3;max-width: 25em;align-self: center;position: relative;z-index: 2;margin: 2em 0 1em var(--width-std-left);}
.pHHome__cCTA {grid-column: 1 / 2;grid-row: 2 / 3;align-self: start;max-width: 40em;position: relative;z-index: 2;margin: 2em var(--width-std-right) 2em var(--width-std-left);}
.pHHome__cBG {position: absolute;z-index: 0;top: 0;bottom: -1px;left: 0;right: 0;}
.pHHome__cOffres {position: absolute;z-index: 8;left: 0;right: 0;top: 0;bottom: 0;pointer-events: none;overflow: hidden;}

.pHHome__cta {margin-top: 3em; }
.pHHome__ctas {display: flex;flex-wrap: wrap;gap: 1.5em;}

.pHHome__bg,
.pHHome__bg * {width: 100%;height: 100%; object-fit: cover;object-position: bottom center;}

/* Pour utiliser juste une image (au lieu d'un montage parallax) */
.pHHome__img {position: absolute;top: 8%;bottom: 0;left: 0;right: 15%;}
.pHHome__img * {width: 100%;height: 100%;object-fit: contain;}

/* Montage parallax */
.pHPIQ {position: absolute;top: 8%;bottom: 0;left: 0;right: 15%;display: grid;grid-template-columns: 100%;grid-template-rows: 100%;}
.pHPIQ > * {grid-column: 1 / -1;grid-row: 1 / -1;}
.pHPIQ__over {z-index: 2; }
.pHPIQ__between {z-index: 1; }
.pHPIQ__under {z-index: 0; }
.pHPIQ > * * {width: 100%;height: 100%;object-fit: contain;}

/*
Animate */
.js .pHHome.jsAnimateAfterLoad .pHHome__cBG {opacity: 0; transition: opacity 2s; transition-delay: 0s; }
.js .pHHome.jsAnimateAfterLoad.animate .pHHome__cBG {opacity: 1; }

.js .pHHome.jsAnimateAfterLoad .pHHome__cImg {opacity: 0; transition: opacity 2s; transition-delay: 0.5s; }
.js .pHHome.jsAnimateAfterLoad.animate .pHHome__cImg {opacity: 1; }

.js .pHHome.jsAnimateAfterLoad .pHPIQ__between > * {transform: translateY(5%); transition: opacity 2s, transform 5s ease-out; transition-delay: 0.5s; }
.js .pHHome.jsAnimateAfterLoad.animate .pHPIQ__between > * {transform: none; }

.js .pHHome.jsAnimateAfterLoad .pHHome__cHead {opacity: 0; transition: opacity 2s; transition-delay: 1s; }
.js .pHHome.jsAnimateAfterLoad.animate .pHHome__cHead {opacity: 1; }

.js .pHHome.jsAnimateAfterLoad .pHHome__cCtn {opacity: 0; transition: opacity 2s; transition-delay: 1.25s; }
.js .pHHome.jsAnimateAfterLoad.animate .pHHome__cCtn {opacity: 1; }

.js .pHHome.jsAnimateAfterLoad .pHHome__cCTA {opacity: 0; transition: opacity 2s; transition-delay: 1.25s; }
.js .pHHome.jsAnimateAfterLoad.animate .pHHome__cCTA {opacity: 1; }

.js .pHHome.jsAnimateAfterLoad .pHHome__cOffres {opacity: 0; transition: opacity 1s; transition-delay: 2s; }
.js .pHHome.jsAnimateAfterLoad.animate .pHHome__cOffres {opacity: 1; }

	/* Stacked */
	@media (max-width:62rem) {
		.pHHome {min-height: calc(var(--vhDefer, 100vh));display: block;}
		.pHHome__cHead {margin: 7% var(--width-std-right) 0 var(--width-std-left);width: 72%;}
		.pHHome__cCtn {margin: 0;padding: 1% var(--width-std-right) 1.5em var(--width-std-left); }
		.pHHome__cCTA {margin-top: 0;margin-bottom: 0; padding-top: 1.5em;padding-bottom: 2em; }
		.pHHome__cOffres {display: none; }

		.pHHome__cta {margin-top: 1.5em; }

		.pHHome__bg,
		.pHHome__bg * {object-position: top center;object-fit: contain; }

		.pHHome__img {position: static;margin-left: auto;margin-right: auto;width: 68%;max-width: 25em;margin-top: -5%;}
		
		.pHPIQ {position: static;margin-left: auto;margin-right: auto;width: 68%;max-width: 25em;margin-top: -5%;}
	}

	/* Spacing */
	@media (max-width:46rem) {
		.pHHome__ctas {gap: 0.5em;justify-content: center;}
	}



/*
PAGE HEAD / Page
Contenu a gauche, BG en arriere. */
.pHPage {position: relative;min-height: calc(50vh + 20rem);height: auto;margin-top: -1px;background-color: var(--color-black);padding-top: calc(var(--topbar-height) - var(--topbar-height-scrolled));border-top: var(--topbar-height-scrolled) solid var(--color-black);display: grid;align-items: center;}
.pHPage + * {margin-top: -1px;}
.pHPage__cCtn {width: 100%;max-width: 50em;position: relative;z-index: 2;margin: 2em 0 2em var(--width-std-left);}
.pHPage__cBG {position: absolute;z-index: 0;top: 0;bottom: -1px;left: 0;right: 0;}
.pHPage__cOffres {position: absolute;z-index: 8;left: 0;right: 0;top: 0;bottom: 0;pointer-events: none;overflow: hidden;}

.pHPage__bg,
.pHPage__bg * {width: 100%;height: 100%;object-fit: cover;}

/*
Animate */
.js .pHPage.jsAnimateAfterLoad .pHPage__cBG {opacity: 0; transition: opacity 2s; transition-delay: 0s; }
.js .pHPage.jsAnimateAfterLoad.animate .pHPage__cBG {opacity: 1; }

.js .pHPage.jsAnimateAfterLoad .pHPage__cCtn {opacity: 0; transform: translateY(1em); transition: opacity 1s, transform 1s; transition-delay: 0.5s; }
.js .pHPage.jsAnimateAfterLoad.animate .pHPage__cCtn {opacity: 1; transform: none; }

.js .pHPage.jsAnimateAfterLoad .pHPage__cOffres {opacity: 0; transition: opacity 1s; transition-delay: 1s; }
.js .pHPage.jsAnimateAfterLoad.animate .pHPage__cOffres {opacity: 1; }

	/* Stacked */
	@media (max-width:62rem) {
		.pHPage {min-height: 0;height: auto;}
		.pHPage__cCtn {margin: 0;padding: var(--base-spacing-top) var(--width-std-left) var(--base-spacing-bottom) var(--width-std-right);max-width: 100%;overflow: hidden;}
		.pHPage__cOffres {display: none; }
	}