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

/*
PAGE HEAD / Home
Content at left on a dark background.
Images at right on a light background.
This is a carousel. */
.pHHome {--progress:0;background: var(--color-green);position: relative;z-index: 1; }
.pHHome__layout {position: relative;width: 100%;padding-top: var(--topbar-height);height: 100vh;min-height: 52vw;max-height: 80.002vw;display: flex;align-items: center;}
.pHHome__cLeft {flex:1 1 auto;width: 50%;min-height: 50%;display: flex;flex-direction: column;justify-content: space-evenly;}
.pHHome__cLeft::before {position:absolute; z-index:-1; display:block; content:''; top:0; bottom:0; left:calc(-1 * var(--width-std-left)); right: 50%; background-color: var(--color-green-dark); }
.pHHome__cRight {flex:0 0 auto;width: 50%;}
.pHHome__defiler {position: absolute; z-index: 3; right: var(--width-std); bottom: 2.5%; }

.pHHome__title {padding-right: 6%; }
.pHHome__ctn {padding: 12% 6% 0 25%; }
.pHHome__rightCenter {padding: 0 19%;margin-right: calc(-1 * var(--overflow-std-right));}
.pHHome__progressBar {margin-top: 1.5em;}

/* Images */
.pHHome__images {position: relative; }
.pHHome__imageMain { }
.pHHome__imageMain--clipTriangle {clip-path: polygon(50% 0%, 100% 43%, 100% 100%, 0% 100%, 0% 43%);}
.pHHome__imageSub {position: absolute; z-index: 2; }
.pHHome__imageSub--house {left: -16%;width: 23%;top: 52%;}
.pHHome__imageSub--plant {left: 85%;width: 13%;top: -1%;}
.pHHome__imageSub--computer {left: 94%;width: 16%;top: 73%;}
.pHHome__imageSub--houseYellow {left: -15%;width: 25%;top: 66%;}
.pHHome__imageSub--coffee {left: 98%;width: 13%;top: 65%;}

/* Carousel */
.jsCarouselHome { }

	/* On carousel ready = show the section */
	.pHHome__cLeft::before {transform-origin: 50% 0%;transform: scaleY(0);transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); }
	.carouselReady .pHHome__cLeft::before {transform: none; }

	.pHHome__progressBar {opacity: 0;transition: opacity 1s 1s; }
	.carouselReady .pHHome__progressBar {opacity: 1; }

	.pHHome__defiler {opacity: 0;transition: opacity 1s 1.5s; }
	.carouselReady .pHHome__defiler {opacity: 1; }

	/* Before init, on affiche les boites comme elles seront apres le init. */
	.jsCarouselHome.flickity-enabled {display: block; }
	.jsCarouselHome:not(.flickity-enabled) > *:nth-child(1n+2) {display: none;}

	/*
	FADE EFFECT
	Dans ce plugin, cet effet est gerer en CSS, pas en JS. */
	.jsCarouselHome.flickity-enabled .flickity-slider {transform: none !important;}
	.jsCarouselHome.flickity-enabled .pHHome__slide {transform: none !important;}

	/* Set animations transitions */
	.jsCarouselHome .pHHome__slide {transition: opacity 0.5s, visibility 0.5s;}

	/* .is-selected = slide du centre
	.is-previous = slide de gauche
	.is-next = slide de droite */
	.jsCarouselHome .pHHome__slide:not(.is-selected) {opacity: 0;visibility: hidden; pointer-events: none;}

	/* Slides d'images */
	.pHHome__slides { }
	.pHHome__slide { }
	.pHHome__slidesImages {display: grid;}
	.pHHome__slideImages {grid-column: 1 / 2;grid-row: 1 / 2;}
	.pHHome__imageMain {opacity: 0;transition: opacity 1s;}
	.pHHome__imageSub {opacity: 0;transform: translate(0, 2em);transition: opacity 1s, transform 3s; }

	/* Animate */
	.pHHome__slideImages.active .pHHome__imageMain {opacity: 1; }
	.pHHome__slideImages.active .pHHome__imageSub {opacity: 1;transform: none;transition-delay: var(--delay, 0s); }

	/* Height */
	@media (min-width:125rem) {
		.pHHome__layout {min-height: 55em; }
	}

	/* Stacked */
	@media (max-width:62rem) {
		.pHHome {padding-left: 0;padding-right: 0; }
		.pHHome__layout {height: auto;min-height: 0;max-height: none;display: block; }
		.pHHome__cLeft {width: 100%;min-height: 0;padding: 10% var(--width-std-right) 10% var(--width-std-left);display: block;position: relative;}
		.pHHome__cLeft::before {left: 0;right: 0; }
		.pHHome__cRight {width: 100%;padding:10% var(--width-std-right) 10% var(--width-std-left); }
		.pHHome__defiler {display: none; }
		.pHHome__rightCenter {margin-right: 0; }
	}

	/* Spacings */
	@media (max-width:46rem) {
		.pHHome__ctn {padding: 9% 0 0 0;}
		.pHHome__rightCenter {padding: 0 12%; }
		.pHHome__progressBar {margin-left: -2em;margin-right: -2em;}
	}



/*
PAGE HEAD / Page
Content at left on a dark background.
Image at right. */
.pHPage {--progress:0;background: var(--color-green);position: relative;z-index: 1; }
.pHPage::before {position:absolute; z-index:-1; display:block; content:''; top:0; bottom:0; left:0; right: 0; background-color: var(--color-green-dark); }
.pHPage__layout {position: relative;width: 100%;padding-top: var(--topbar-height);height: 100vh;min-height: 52vw;max-height: 80.002vw;display: flex;align-items: center;}
.pHPage__cLeft {flex:1 1 auto;width: 50%;min-height: 50%;display: flex;flex-direction: column;justify-content: space-evenly;}
.pHPage__cRight {flex:0 0 auto;width: 50%;}
.pHPage__defiler {position: absolute; z-index: 3; right: var(--width-std); bottom: 2.5%; }

	/* 
	ALT:
	Contenu aligné a gauche avec le titre. */
	.pHPage--ctnLeft { }
	.pHPage--ctnLeft .pHPage__ctn {padding-left: 0; }
	.pHPage--ctnLeft .pHPage__ctn p:not([class]) {max-width: 25em;}

	/* 
	ALT:
	Le contenu détermine la hauteur. */
	.pHPage--ctnHeight { }
	.pHPage--ctnHeight .pHPage__layout {height: auto;min-height: 0;max-height: none; }
	.pHPage--ctnHeight .pHPage__cLeft {padding-top: 10%;padding-bottom: 10%; }

.pHPage__title {padding-right: 6%; }
.pHPage__ctn {padding: 12% 6% 0 50%; }
.pHPage__ctas {display: flex; flex-wrap: wrap; gap: 0.75em; }
.pHPage__rightCenter {padding: 0 14%;margin-right: calc(-1 * var(--overflow-std-right));}

/* Images */
.pHPage__images {position: relative; }
.pHPage__imageMain { }
.pHPage__imageMain--clipTriangle {clip-path: polygon(50% 0%, 100% 43%, 100% 100%, 0% 100%, 0% 43%);}
.pHPage__imageSub {position: absolute; z-index: 2; }

	/* Small images positions */
	.pHPage__imageSub--houseTop {left: -10%;width: 37%;top: 22%;}
	.pHPage__imageSub--houseMiddle {left: -10%;width: 37%;top: 33%;}
	.pHPage__imageSub--houseBottom {left: -10%;width: 37%;top: 52%;}

	/* 
	ANIMATE APPEAR */
	.js .pHPage.jsAnimateClass::before {transform-origin: 50% 0%;transform: scaleY(0);transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); }
	.js .pHPage.jsAnimateClass.animate::before {transform: none; }

	.js .pHPage.jsAnimateClass .pHPage__title {opacity: 0;transition: opacity 1s 0.5s;}
	.js .pHPage.jsAnimateClass.animate .pHPage__title {opacity: 1;}

	.js .pHPage.jsAnimateClass .pHPage__ctn {opacity: 0;transition: opacity 1s 0.65s;}
	.js .pHPage.jsAnimateClass.animate .pHPage__ctn {opacity: 1;}

	.js .pHPage.jsAnimateClass .pHPage__imageMain {opacity: 0;transition: opacity 1s 1s;}
	.js .pHPage.jsAnimateClass.animate .pHPage__imageMain {opacity: 1;}

	.js .pHPage.jsAnimateClass .pHPage__imageSub {opacity: 0;transform: translate(0, 2em);transition: opacity 1s, transform 3s;transition-delay: 1s; }
	.js .pHPage.jsAnimateClass.animate .pHPage__imageSub {opacity: 1;transform: none; }

	.js .pHPage.jsAnimateClass .pHPage__defiler {opacity: 0;transition: opacity 1s 1.5s;}
	.js .pHPage.jsAnimateClass.animate .pHPage__defiler {opacity: 1;}

	/* Height */
	@media (min-width:125rem) {
		.pHPage__layout {min-height: 55em; }
	}

	/* Stacked */
	@media (max-width:62rem) {
		.pHPage {padding-left: 0;padding-right: 0; }
		.pHPage__layout {height: auto;min-height: 0;max-height: none;display: block; }
		.pHPage__cLeft {width: 100%;min-height: 0;padding: 10% var(--width-std-right) 10% var(--width-std-left);display: block;position: relative;}
		.pHPage__cRight {width: 100%;padding: 0 var(--width-std-right) 10% var(--width-std-left);}
		.pHPage__defiler {display: none; }
		.pHPage__rightCenter {margin-right: 0; }
	}

	/* Spacings */
	@media (max-width:46rem) {
		.pHPage__ctn {padding: 9% 0 0 0;}
		.pHPage__rightCenter {padding: 0 12%; }
	}