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

/*
PAGE HEAD / Page
La section en haut de page de la grande majorite des pages du site. */
.pHPage {--side-width:var(--width-wide); position: relative; width: 100%;min-height: 32em; display: flex; }
.pHPage__in {flex: 1 1 auto;width: 100%;position: relative;display: flex;flex-direction: column;}
.pHPage__in > * {flex:1 1 auto; }

	/* 
	ALT :
	Taller. */
	.pHPage--taller {height: calc(100vh - var(--topbar-height)); max-height: 60vw; }

	/* 
	ALT :
	Overflow le prochain block. */
	.pHPage--overflow {--spacing-bottom: 5em; margin-bottom: calc(-1 * var(--spacing-bottom));}
	.pHPage--overflow .pHPage__in {margin-bottom: var(--spacing-bottom);}

	/* 
	ALT :
	Home. */
	.pHPage--home { }
	.pHPage--home .pHPage__sideBox {margin-bottom: var(--spacing-bottom);}

	/* Mobile */
	@media (max-width:62rem) {
		.pHPage {--side-width: 100%; min-height: 50vw; display: flex; flex-direction: column; }
		.pHPage--taller {height: auto; min-height: calc(var(--vhDefer, 100vh) - var(--topbar-height)); max-height: none; }
		.pHPage--overflow {--spacing-bottom: 0px; }

		.pHPage--home {--spacing-bottom: 18vw;min-height: var(--vhDefer, 100vh);margin-bottom: 0;}
		.pHPage--home::before {position:absolute; z-index:-2; display:block; content:''; top:0; bottom:0; left:0; right:0; background-color: var(--color-blue-light);}
		.pHPage--home .pHPage__in {margin-bottom: 0; }
		.pHPage--home .pHPage__bg {margin-bottom: var(--spacing-bottom); }
		.pHPage--home .pHPage__sideBox {margin-bottom: 0;}
	}

	/* More overlapping */
	@media (max-width:46rem) {
		.pHPage--home {--spacing-bottom: 35vw; }
	}


/* .............................................................................
CONTENT
Title of the page or more complex content.
Center vertical alignment. */
.pHPage__cCtn {display: flex; align-items: center; }
.pHPage__ctn {padding: 3em 0;}

	




/* Article : page de details d'un blog post. */
.iPHArticle {padding: 3em 0; display: flex; }
.iPHArticle__cCtn > * {flex:1 1 auto; }
.iPHArticle__cDate {flex:0 0 auto;margin-right: 3em; }
.iPHArticle__cCtn { }
.iPHArticle__ctn { }

	/* Date over content */
	@media (max-width:62rem) {
		.iPHArticle {display: block;padding: 2em 0;}
		.iPHArticle__cDate {margin: 0 0 3em 0;padding: 0;}
	}



/* .............................................................................
SIDE BOX
Box at right in the home page. */
.pHPage__sideBox {position: absolute;z-index: 7;right: 0;bottom: 0;overflow: hidden;}
.iPHBox {position: relative; min-width: 20em; max-width: 29em;}
.iPHBox::before {position:absolute; z-index:-1; display:block; content:''; top:0; bottom:0; left:0; right:0; background-color: var(--color-blue);}


.iPHBox_White::before {background-color: white !important;}


.iPHBox__in { }
.iPHBox__ctn {padding:10%;}

/* Redefinir certains styles du head. */
.iPHBox .iHead + * {margin-top: 1.5em;}

	/* Box floating under the image */
	@media (max-width:62rem) {
		.pHPage__sideBox {order: 2;position: static;margin-left: calc(2.4em + var(--width-std-left));}
		.iPHBox {margin-left: auto;}
		.iPHBox::after {position:relative; z-index:0; display:block; content:''; height: 100%; }
	}

	/* Box under */
	@media (max-width:47rem) {
		.iPHBox {margin-left: auto;min-width: auto;max-width: 100%;width: 100%;}
	}


/* .............................................................................
SCROLL INCENTIVE
At left of some pages. */
.pHPage__scroll {order:-1;flex: 0 0 auto;width: var(--side-width);position: relative;z-index: 6;border-right: 1px solid var(--color-white);display: flex;align-items: center;justify-content: center;padding-bottom: var(--spacing-bottom);}
.pHPage__scroll .btn {writing-mode: vertical-rl; }
.pHPage__scroll .btn--simple > .btn__label + .btn__icon {margin-left: 0; margin-top: 0.3em; }
.pHPage__scroll a span { font-size: 1.2em; }
	/* Mobile */
	@media (max-width:62rem) {
		.pHPage__scroll {font-size: 1em;order: 1;justify-content: flex-start;padding-left: var(--width-std-left);padding-right: var(--width-std-right);border: none;margin-bottom: 1em;padding-bottom: 0;}
		.pHPage__scroll .btn {writing-mode: horizontal-tb; }
		.pHPage__scroll .btn--simple > .btn__label + .btn__icon {order: -1;margin: 0 0.1em 0 -0.3em;}
	}


/* .............................................................................
BG
Full width / height. */
.pHPage__bg {position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;background: var(--color-blue);}
.pHPage__bg * {width: 100%; height: 100%; object-fit: cover; }



/* .............................................................................
ANIMATE
Animation of the page head for each page. */
@media (min-width:62.01rem) {
	.js .jsAnimateClass .pHPage__bg > * {opacity: 0; }
	.js .jsAnimateClass.animate .pHPage__bg > * {opacity: 1; transition: opacity 1s; transition-delay: 0s; }

	.js .jsAnimateClass .pHPage__ctn > * {opacity:0; transform: translateY(1rem); }
	.js .jsAnimateClass.animate .pHPage__ctn > * {opacity:1; transform: none; transition: opacity 1s, transform 1s; transition-delay: 0.3s; }

	.js .jsAnimateClass .iPHArticle__cDate {opacity:0; transform: translateY(1rem); }
	.js .jsAnimateClass.animate .iPHArticle__cDate {opacity:1; transform: none; transition: opacity 1s, transform 1s; transition-delay: 0.3s; }

	.js .jsAnimateClass .iPHArticle__cCtn > * {opacity:0; transform: translateY(1rem); }
	.js .jsAnimateClass.animate .iPHArticle__cCtn > * {opacity:1; transform: none; transition: opacity 1s, transform 1s; transition-delay: 0.45s; }

	.js .jsAnimateClass .pHPage__scroll > * {opacity:0; }
	.js .jsAnimateClass.animate .pHPage__scroll > * {opacity:1; transition: opacity 1s; transition-delay: 0.6s; }

	.js .jsAnimateClass .pHPage__sideBox > * {transform: translateX(101%); }
	.js .jsAnimateClass.animate .pHPage__sideBox > * {transform: none; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.6s; }
}