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

/*
PAGE HEAD / Styles
La section en haut de page de la page de styles. */
.pHStyles {text-align: center; }
.pHStyles__c { }



/*
PAGE HEAD / Home
Titre à gauche et bouton, et image à droite.
Hauteur définie par le contenu, dans ce cas-ci la grosse image de droite. */
.phHome {position: relative;z-index: 2;padding: var(--topbar-height) 0 0 var(--width-std-left);margin-bottom: calc(-0.75 * var(--base-spacing));}
.phHome__layout {display: flex;align-items: center;}
.phHome__cCtn {flex: 0 0 auto;z-index: 3;margin-right: -17%;padding-bottom: 11%;}
.phHome__cMedia {flex: 1 1 auto;width: 100%;z-index: 2;position: relative;}

.phHome__header { }
.phHome__btn {margin-top: 2.5em;}
.phHome__mark {position: absolute;z-index: 2;width: 37%;bottom: -10%;right: 74%;}
.phHome__image { }

/* Animation line styles (Labranche pattern) */
.animLine {display: block; overflow: hidden; }
.animLine__in {display: block; }

	/* 
	ANIMATE
	Image clip
	Mark clip
	Show title one line at a time
	Button appears */
	.phHome.jsAnimateClass .phHome__image {clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease-cubic); transition-delay: 0s; }
	.phHome.jsAnimateClass.animate .phHome__image {clip-path: inset(0 0 0 0); }

	.phHome.jsAnimateClass .phHome__mark {clip-path: inset(100% 100% 0 0); transition: clip-path 1s var(--ease-cubic); transition-delay: 0.15s; }
	.phHome.jsAnimateClass.animate .phHome__mark {clip-path: inset(0 0 0 0); }

	.phHome.jsAnimateClass .phHome__header .animLine__in {transform: translateY(100%); transition: transform 1s var(--ease-cubic); transition-delay: calc(0.3s + var(--delay, 0s)); }
	.phHome.jsAnimateClass.animate .phHome__header .animLine__in {transform: none; }

	.phHome.jsAnimateClass .phHome__btn {opacity: 0; transition: opacity 1s var(--ease-cubic); transition-delay: 0.9s; }
	.phHome.jsAnimateClass.animate .phHome__btn {opacity: 1; }

	/* Stacked */
	@media (max-width:62rem) {
		.phHome {padding: calc(1.4 * var(--topbar-height)) var(--width-std-right) 0 var(--width-std-left);margin-bottom: 0;}
		.phHome__layout {flex-direction: column;align-items: stretch;}
		.phHome__cCtn {width: 100%;flex: 1 1 auto;margin-right: 0;padding-bottom: 0;}
		.phHome__cMedia {width: auto;margin: -4% calc(-1 * var(--width-std-right)) 0 calc(-1 * var(--width-std-left));}
		.phHome__mark { width: 50%; bottom: -13%; left: -15%; right: auto; }
	}

	/* Sizes et positions */
	@media (max-width:46rem) {
		.phHome__cMedia {margin-top: -6%;}
		.phHome__btn {margin-top: 1.5em; }
		.phHome__mark {width: 60%;bottom: 13%;left: -23%;}
	}