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

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



/*
PAGE HEAD FULL HEIGHT
100% hauteur du viewport, avec hauteur minimale et maximale.
Si le contenu est plus grand que la hauteur du viewport, il s'adapte.
L'image de background doit être en position:absolute pour que ça fonctionne. */
.pHPage {min-height: clamp(30em, calc(100vh - var(--topbar-height)), 70vw);position: relative;padding: calc(var(--topbar-notice-height) + 1.5 * var(--width-std)) var(--width-std) 0 var(--width-std);display: grid;grid-template-columns: 1fr auto;grid-template-rows: 1fr auto 1fr;gap: var(--width-std) calc(2 * var(--width-std));align-items: end;}
.pHPage::before {position:absolute; z-index:-2; display:block; content:''; inset:0; background:var(--color-gray);}
.pHPage__cTitle {grid-column: 1 / 3; grid-row: 1 / 2; align-self: center; }
.pHPage__cPlay {grid-column: 1 / 3;grid-row: 2 / 3;z-index: 2;justify-self: center;align-self: center;}
.pHPage__cDown {grid-column: 2 / 3; grid-row: 3 / 4; z-index: 1; margin-bottom: calc(0.5 * var(--width-std)); text-align: right; }
.pHPage__cLead {grid-column: 1 / 2; grid-row: 3 / 4; }
.pHPage__cBG {position: absolute; z-index: -1; inset: 0; overflow: hidden; }

.pHPage__title {width: min(60em, 100%);}
.pHPage__title--smContainer {width: min(45em, 100%); }
.pHPage__cta {margin-top: 2em;}
.pHPage__lead {position: relative; padding: 0.2em 0 0.7em 1.8em;min-height: 3em;width: min(100%, 40em);}
.pHPage__lead::before {position:absolute; z-index:0; display:block; content:''; top: 0; bottom: 0; left: 0; width: 0.7em; background:var(--color-orange); }
.pHPage__lead p {font-size: 0.85em;font-weight: 400;line-height: 1.2;text-transform: uppercase; }
.pHPage__media {position: relative;width: 100%;height: 100%;height: 110%;top: -5%;}
.pHPage__singleImage {position: relative; isolation: isolate; height: 100%; width: 100%; }
.pHPage__singleImage::before {position:absolute;z-index:1;display:block;content:'';inset:0;opacity: 0.5;background: var(--color-black);mix-blend-mode: multiply;pointer-events:none;}
.pHPage__singleImage * {height: 100%; width: 100%; object-fit: cover; }

	/* 
	ANIMATE */
	/* Fadein the background image (or video) */
	.pHPage.jsAnimateClass .pHPage__singleImage {opacity: 0; filter: blur(0.5em); transform: scale(1.05); transition: opacity 2s, filter 2s, transform 2s; transition-delay: 0s; }
	.pHPage.jsAnimateClass.animate .pHPage__singleImage {opacity: 1; filter: none; transform: none; }

	/* Title fade in */
	.pHPage.jsAnimateClass .pHPage__title {opacity: 0; transition: opacity 1s; transition-delay: 0.5s; }
	.pHPage.jsAnimateClass.animate .pHPage__title {opacity: 1; }

	/* Lead text reveal left line + fade in text */
	.pHPage.jsAnimateClass .pHPage__lead::before {transform: scaleY(0); transform-origin: bottom center; transition: transform 1s var(--ease-cubic); transition-delay: 0.5s; }
	.pHPage.jsAnimateClass.animate .pHPage__lead::before {transform: none; }
	.pHPage.jsAnimateClass .pHPage__lead p {opacity: 0; transition: opacity 1s; transition-delay: 0.8s; }
	.pHPage.jsAnimateClass.animate .pHPage__lead p {opacity: 1; }

	/* Btn face in */
	.pHPage.jsAnimateClass .pHPage__cDown {opacity: 0; transition: opacity 1s; transition-delay: 0.8s; }
	.pHPage.jsAnimateClass.animate .pHPage__cDown {opacity: 1; }

	/* Play face in */
	.pHPage.jsAnimateClass .pHPage__cPlay {opacity: 0; transition: opacity 1s; transition-delay: 0.8s; }
	.pHPage.jsAnimateClass.animate .pHPage__cPlay {opacity: 1; }

	/* Min height pour avoir pleine hauteur du iPad au minimum */
	@media (max-width:62rem) {
		.pHPage {min-height: min(150vw, calc(100svh - var(--topbar-height))); grid-template-rows: 1fr auto 0.5fr; padding-top: calc(var(--topbar-notice-height) + 2 * var(--width-std)); }
	}

	/* Stacked et spacings */
	@media (max-width:46rem) {
		.pHPage {grid-template-columns: 1fr;grid-template-rows: 1fr auto auto;gap:calc(0.5 * var(--base-spacing));}
		.pHPage > * {grid-column: 1 / -1; grid-row: auto; }
		.pHPage__cDown {margin-bottom: 0; }
		.pHPage__cBG {grid-column: auto; }
		.pHPage__cta {margin-top: 1.5em;}

		.pHPage:has(.pHPage__cPlay) {grid-template-rows: 1fr 1fr auto auto;}
	}



/*
PAGE HEAD SIMPLE
Juste un titre et un petit texte en dessous. C'est tout. */
.pHSimple.bMain {display: flex; flex-direction: column; gap: 1.5em; padding-top: calc(var(--topbar-notice-height) + 1.5 * var(--width-std)); padding-bottom: calc(0.25 * var(--base-spacing-bottom)); }
.pHSimple__cTitle { }
.pHSimple__cLead { }

.pHSimple__title { }
.pHSimple__lead {position: relative; padding-left: 1.8em;min-height: 3em;width: 100%; }
.pHSimple__lead::before {position:absolute; z-index:0; display:block; content:''; top: 0; bottom: 0; left: 0; width: 0.7em; background:var(--color-orange); }
.pHSimple__lead > p {text-wrap: balance; }

	/* Spacing */
	@media (max-width:62rem) {
		.pHSimple.bMain {padding-top: calc(var(--topbar-notice-height) + 2 * var(--width-std)); }
	}

	/* 
	ANIMATE
	Lead text reveal left line + fade in text */
	.pHSimple.jsAnimateClass .pHSimple__lead::before {transform: scaleY(0); transform-origin: bottom center; will-change: transform; transition: transform 1s var(--ease-cubic); transition-delay: 0s; }
	.pHSimple.jsAnimateClass.animate .pHSimple__lead::before {transform: none; }
	.pHSimple.jsAnimateClass .pHSimple__lead p {opacity: 0; transition: opacity 1s; transition-delay: 0.1s; }
	.pHSimple.jsAnimateClass.animate .pHSimple__lead p {opacity: 1; }



/*
PAGE HEAD CONTACT
Le début est très semblable à la page head simple, mais ensuite on affiche 
les coordonnées, le tout sur background foncé. */
.pHContact.bMain.bMain--dark {display: flex; flex-direction: column; gap: 1.5em; padding-top: calc(var(--topbar-notice-height) + 1.5 * var(--width-std)); }
.pHContact__cTitle { }
.pHContact__cLead { }
.pHContact__cInfos {margin-top: 3em; }

.pHContact__title { }
.pHContact__lead {position: relative; padding-left: 1.8em;min-height: 3em;width: 100%; }
.pHContact__lead::before {position:absolute; z-index:0; display:block; content:''; top: 0; bottom: 0; left: 0; width: 0.7em; background:var(--color-orange); }
.pHContact__lead > p {text-wrap: balance; }
.pHContact__infos {display: flex; gap: 4em 4%; width: min(100%, 120em); }
.pHContact__item {flex:1 1 auto; width: 25%; }
.pHContact__label {margin-bottom: 1em; }
.pHContact__map { }
.pHContact__phones {font-size: 1.2em; font-weight: 700; }
.pHContact__email {font-size: 0.85em;font-weight: 700; }
.pHContact__family { }

.pHContact__item--office { }
.pHContact__item--infos { }
.pHContact__item--family {width: 20em; align-self: center; }
.pHContact__item--logo {width: 18em; align-self: center; }

	/* 
	ANIMATE
	Lead text reveal left line + fade in text
	Show each 4 box under one at a time */
	.pHContact.jsAnimateClass .pHContact__lead::before {transform: scaleY(0); transform-origin: bottom center; will-change: transform; transition: transform 1s var(--ease-cubic); transition-delay: 0s; }
	.pHContact.jsAnimateClass.animate .pHContact__lead::before {transform: none; }
	.pHContact.jsAnimateClass .pHContact__lead p {opacity: 0; transition: opacity 1s; transition-delay: 0.1s; }
	.pHContact.jsAnimateClass.animate .pHContact__lead p {opacity: 1; }

	.pHContact.jsAnimateClass .pHContact__item {opacity: 0; will-change: transform; transition: opacity 1s; }
	.pHContact.jsAnimateClass.animate .pHContact__item {opacity: 1; }
	.pHContact.jsAnimateClass .pHContact__item--office {transition-delay: 0.2s; }
	.pHContact.jsAnimateClass .pHContact__item--infos {transition-delay: 0.3s; }
	.pHContact.jsAnimateClass .pHContact__item--family {transition-delay: 0.4s; }
	.pHContact.jsAnimateClass .pHContact__item--logo {transition-delay: 0.5s; }

	/* Break in 2 cols */
	@media (max-width:62rem) {
		.pHContact.bMain.bMain--dark {padding-top: calc(var(--topbar-notice-height) + 2 * var(--width-std)); }
		.pHContact__infos {flex-wrap: wrap; }
		.pHContact__item {width: 45%; }

		.pHContact__item--family {flex:0 1 auto; width: 17em; }
		.pHContact__item--logo {flex:0 1 auto; width: 15em; }
	}
	
	/* Stacked */
	@media (max-width:46rem) {
		.pHContact__cInfos {margin-top: 1em; }

		.pHContact__infos {flex-direction: column; gap: 3em; }
		.pHContact__item {width: 100%; flex:1 1 auto; }

		.pHContact__item--family {align-self: flex-start; }
		.pHContact__item--logo {align-self: flex-start; margin-top: -2em; width: min(100%, 16em); }
	}