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

/*
PAGE HEAD / Styles
La section en haut de page de la page de styles. */
.pHStyles,
section.pHStyles.bMain {text-align: center;padding-top: calc(var(--base-spacing-top) + var(--topbar-height));}
.pHStyles__c { }



/*
PAGE HEAD / Home
100% hauteur du viewport, avec hauteur minimale et maximale.
Si le contenu est plus grand que la hauteur du viewport, il s'adapte, mais ça
ne devrait pas arriver ici car le contenu est petit. */
.phHome {--offset: 14.5vw;position: relative;min-height: clamp(20em, 100vh, 70vw);background: transparent;display: grid;grid-template-columns: var(--offset) 1fr;grid-template-rows: 1fr;align-items: center;padding: var(--topbar-height) var(--width-std-right) 4% 0;}
.phHome::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0; background: var(--color-green); }
.phHome__cCtn {z-index: 2;grid-column: 2 / 3;grid-row: 1 / 2;margin-left: -0.6em;}
.phHome__cDown {z-index: 1;grid-column: 1 / 2;grid-row: 1 / 2;align-self: end;margin-left: 30%;}
.phHome__cBG {position: absolute;z-index: 0;bottom: -15%;right: 0;width: 100%;max-width: min(58.5vw, 100vh);aspect-ratio: 1 / 1;overflow: hidden;}

.phHome__header { }
.phHome__btns {margin-top: 5%;}
.phHome__down { }
.phHome__media {border-radius: 50%;overflow: hidden;transform: translateX(4%);max-width: none;}
.phHome__media * {width: 100%;height: 100%;object-fit: cover;}

/* Offset the first line of the title */
.phHome__header .titleHome > *:first-child {margin-left: calc(-1 * var(--offset));}

	/* 
	ANIMATE */
	.phHome.jsAnimateClass { }
	.phHome.jsAnimateClass.animate { }

	/* Expand background */
	.phHome.jsAnimateClass::before {transform: scaleY(0); transform-origin: 50% 100%; transition: transform 1s var(--ease-cubic); transition-delay: 0s; }
	.phHome.jsAnimateClass.animate::before {transform: none; }

	/* Show title one line at a time */
	.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; }

	/* Fadein the background image (or video) */
	.phHome.jsAnimateClass .phHome__media {opacity: 0; transition: opacity 2s; transition-delay: 0.6s; }
	.phHome.jsAnimateClass.animate .phHome__media {opacity: 1; }

	/* Buttons fade in */
	.phHome.jsAnimateClass .phHome__btns {opacity: 0; transition: opacity 1s; transition-delay: 1s; }
	.phHome.jsAnimateClass.animate .phHome__btns {opacity: 1; }

	/* Arrow down fade in */
	.phHome.jsAnimateClass .phHome__down {opacity: 0; transition: opacity 1s; transition-delay: 1.15s; }
	.phHome.jsAnimateClass.animate .phHome__down {opacity: 1; }

	/* Contenu over image */
	@media (max-width:62rem) {
		.phHome {--offset: 21vw;padding: calc(2 * var(--topbar-height)) var(--width-std-right) var(--width-std) var(--width-std-left);display: grid;grid-template-columns: 1fr;grid-template-rows: auto;gap: calc(1 * var(--base-spacing-top)) 0;}
		.phHome__cCtn {margin-left: 0;grid-column: 1 / 2;grid-row: 1 / 2;}
		.phHome__cDown {margin-left: 0;grid-column: 1 / 2;grid-row: 3 / 4;}
		.phHome__cBG {justify-self: end;position: relative;grid-column: 1 / 2;grid-row: 2 / 4;inset: auto;margin-left: -20%;margin-right: calc(-1 * var(--width-std-right));margin-bottom: calc(-1 * var(--base-spacing-bottom) - var(--width-std));width: auto;max-width: 35em;}

		.phHome__header {margin-left: calc(-1 * var(--width-std-left)); margin-right: calc(-1 * var(--width-std-right)); padding-left: var(--offset); }
		.phHome__header .titleHome {margin-left: -0.05em; }
		.phHome__btns {margin-top: calc(0.5 * var(--base-spacing-top));gap: 0.5em 1em;justify-content: center;}
		.phHome__media {transform: translateX(22%);}
	}

	/* Spacings */
	@media (max-width:46rem) {
		.phHome {padding-top: calc(1.5 * var(--topbar-height)); gap: calc(0.6 * var(--base-spacing-top)) 0;}
	}



/*
PAGE HEAD / Page
Assez similaire à l'accueil, mais plus flexible.
100% hauteur du viewport, avec hauteur minimale et maximale.
Si le contenu est plus grand que la hauteur du viewport, il s'adapte. */
.phPage {position: relative;min-height: clamp(20em, 100vh, 60vw);background: transparent;display: grid;grid-template-columns: var(--width-std-left) 1fr;grid-template-rows: 1fr auto;align-items: center;padding: var(--topbar-height) var(--width-std-right) 4% 0;}
.phPage::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0; background: var(--color-green); }
.phPage__cCtn {z-index: 2;grid-column: 2 / 3;grid-row: 1 / 2;padding-top: calc(0.5 * var(--topbar-height));}
.phPage__cDown {z-index: 1;grid-column: 1 / 3;grid-row: 2 / 3;margin-left: 4%;margin-top: 2em;}
.phPage__cVisuals {position: absolute;z-index: 0;top: var(--topbar-height);bottom: calc(-1 * var(--base-spacing-top));right: 0;width: 56%;overflow: hidden;display: flex;flex-direction: column;}
.phPage__cSideProduct {position: absolute;z-index: 0; top: var(--topbar-height); bottom: 0; left: 46%; right: 0; }
.phPage__cSideProduct::before {position:absolute;z-index: -1;display:block;content:'';top: 8%;bottom: 18%;right: 19%;aspect-ratio: 1;background: radial-gradient(transparent 40%, var(--color-green-alt) 40%);border-radius: 50%;}

	/*
	ALT :
	Red BG. */
	.phPage--red { }
	.phPage--red::before {background-color: var(--color-red); }

	/*
	ALT :
	Content height.
	On ne définit pas une hauteur minimale.
	La hauteur du contenu = la hauteur du page head. */
	.phPage--ctnHeight {min-height: 0; }

	/*
	ALT :
	FAQ.
	Hauteur minimale plus restreinte.
	Contenu align vers le bas au lieu de centered. */
	.phPage--faq {min-height: clamp(20em, 100vh, 42vw); align-items: end; }

	/*
	ALT :
	No BG animation.
	La page avec le formulaire pour postuler ne doit pas afficher l'animation sur le BG. */
	.phPage--noBGAnim { }


/* Elements inside */
.phPage__back {flex: 1 1 auto;}
.phPage__back .btnIcon {margin-left: -0.32em;}
.phPage__articleMeta {display: flex;align-items: center;gap: 0.5em 1.2em;flex-wrap: wrap;margin-bottom: 1em;}
.phPage__category { }
.phPage__date {font-size: 0.85em;}
.phPage__offerMeta {margin-top: 1.8em;}
.phPage__header { }
.phPage__header .titleArticle {width: 50%; }
.phPage__ctn {margin-top: 1em;width: min(100%, 28em);}
.phPage__tagline {margin-top: 0.5em;width: min(100%, 16em);}
.phPage__btns {margin-top: 2.5em;}
.phPage__header + .phPage__btns {margin-top: 1em;}
.phPage__down { }
.phPage__tag {position: absolute; top: 0; left: 18%; width: 20%; z-index: 1; }
.phPage__media {margin-top: auto;max-height: 100%;}
.phPage__image {position: relative; margin-left: auto;aspect-ratio: 1;width: auto;height: 100%;}
.phPage__image picture {border-radius: 50%;overflow: hidden;transform: translateX(13%);max-width: none;}
.phPage__image picture * {width: 100%;height: 100%;object-fit: cover;}
.phPage__sideProduct {width: 100%;height: 100%; }
.phPage__sideProduct * {width: 100%;height: 100%;object-fit: contain;object-position: right center;}
.phPage__recetteInfos {max-width: 30em;margin-top: 1em;}
.phPage__collab {margin-top: 2em;max-width: 30em;flex: 2 1 auto;display: flex;align-items: flex-end;}

	/* Share side box */
	.phPage .iSideBox {position: absolute;z-index: 5;left: calc(100% - var(--width-std));top: 50%;writing-mode: vertical-lr;transform: translateY(-50%) rotate(-180deg);}
	.phPage .iSideBox__icon {transform:rotate(180deg); }
	.phPage .iSideBox__ctn::before {transform: scaleY(0); }
	.phPage .iSideBox__ctn .rs {--spacing: 0.15em;font-size: 2em;transform: rotate(180deg);}

		/* Follow the bottom margin */
		@media (max-width:62rem) {
			.phPage .iSideBox {left: auto;right: var(--width-std-right);top: auto;bottom:var(--width-std);direction: rtl;transform: rotate(-180deg);transform: none;}
			.phPage:has(+ .bILCR--overflowTop) .iSideBox {bottom:calc(1 * var(--base-spacing) + var(--width-std)); }
			.phPage .iSideBox__icon {transform:none; }
			.phPage .iSideBox__ctn .rs {transform: none; }
		}

	/* Si suivi d'un bloc "overflow", ajout d'espace en bas. */
	.phPage:has(+ .bILCR--overflowTop) {padding-bottom: calc(1 * var(--base-spacing));}
	.phPage:has(+ .bILCR--overflowTop) .phPage__cCtn {padding-top: calc(1.5 * var(--topbar-height)); }

	/* Si contient un bouton "Back", s'assurer qu'il colle le haut. */
	.phPage__cCtn:has(.phPage__back) {display: flex;flex-direction: column;height: 100%; }
	.phPage__cCtn:has(.phPage__back) .phPage__btns {flex-grow: 1; align-items: flex-start; }

	/* Si suivi du formulaire pour postuler */
	.phPage:has(+ .bOfferForm) {padding-bottom: 0; }

	/* 
	ANIMATE */
	.phPage.jsAnimateClass { }
	.phPage.jsAnimateClass.animate { }

	/* Expand background */
	.phPage.jsAnimateClass::before {transform: scaleY(0); transform-origin: 50% 100%; transition: transform 1s var(--ease-cubic); transition-delay: 0s; }
	.phPage.jsAnimateClass.animate::before{transform: none; }

		/* Kill this animation on specific pages */
		.phPage--noBGAnim.jsAnimateClass::before {transition: none; transform: none; }

	/* Show title one line at a time */
	.phPage.jsAnimateClass .phPage__header .animLine__in {transform: translateY(100%); transition: transform 1s var(--ease-cubic); transition-delay: calc(0.3s + var(--delay, 0s)); }
	.phPage.jsAnimateClass.animate .phPage__header .animLine__in {transform: none; }

	/* Fadein the background image (or video) */
	.phPage.jsAnimateClass .phPage__image,
	.phPage.jsAnimateClass .phPage__cSideProduct {opacity: 0; transition: opacity 2s; transition-delay: 0.6s; }
	.phPage.jsAnimateClass.animate .phPage__image,
	.phPage.jsAnimateClass.animate .phPage__cSideProduct {opacity: 1; }

	/* Fade ins les autres éléments*/
	.phPage.jsAnimateClass .phPage__back,
	.phPage.jsAnimateClass .phPage__tagline,
	.phPage.jsAnimateClass .phPage__ctn,
	.phPage.jsAnimateClass .phPage__btns,
	.phPage.jsAnimateClass .phPage__recetteInfos,
	.phPage.jsAnimateClass .phPage__collab,
	.phPage.jsAnimateClass .phPage__articleMeta,
	.phPage.jsAnimateClass .phPage__offerMeta,
	.phPage.jsAnimateClass .phPage__down {opacity: 0; transition: opacity 1s; transition-delay: 1s; }
	.phPage.jsAnimateClass.animate .phPage__back,
	.phPage.jsAnimateClass.animate .phPage__tagline,
	.phPage.jsAnimateClass.animate .phPage__ctn,
	.phPage.jsAnimateClass.animate .phPage__btns,
	.phPage.jsAnimateClass.animate .phPage__recetteInfos,
	.phPage.jsAnimateClass.animate .phPage__collab,
	.phPage.jsAnimateClass.animate .phPage__articleMeta,
	.phPage.jsAnimateClass.animate .phPage__offerMeta,
	.phPage.jsAnimateClass.animate .phPage__down {opacity: 1; }

	/* Last element: share box */
	.phPage.jsAnimateClass .iSideBox {opacity: 0; transition: opacity 1s; transition-delay: 1.2s; }
	.phPage.jsAnimateClass.animate .iSideBox {opacity: 1; }

	/* Contenu over image */
	@media (max-width:62rem) {
		.phPage {padding: calc(2 * var(--topbar-height)) var(--width-std-right) var(--width-std) var(--width-std-left);display: grid;grid-template-columns: 1fr;grid-template-rows: auto;gap: calc(0.4 * var(--base-spacing-top)) 0;}
		.phPage__cCtn,
		.phPage:has(+ .bILCR--overflowTop) .phPage__cCtn {grid-column: 1 / 2;padding: 0;}
		.phPage__cDown {margin-left: 0;grid-column: 1 / 2;grid-row: 3 / 4;}
		.phPage__cVisuals,
		.phPage__cSideProduct {justify-self: end;position: relative;grid-column: 1 / 2;grid-row: 2 / 4;inset: auto;margin-left: -20%;margin-right: calc(-1 * var(--width-std-right));margin-bottom: calc(-1 * var(--base-spacing-bottom) - var(--width-std));width: auto;max-width: 40em;display: block;}
		.phPage__cSideProduct {margin-left: 10%; margin-bottom: 0; }
		.phPage__cSideProduct::before {right: 8%;}

		.phPage__back {margin-top: calc(-1 * var(--topbar-height)); }
		.phPage__header .titleArticle {width: min(100%, 12em); }
		.phPage__tagline {margin-top: calc(0.2 * var(--base-spacing-top)); }
		.phPage__btns {margin-top: calc(0.5 * var(--base-spacing-top));gap: 0.5em 1em; }
		.phPage__tag {top: 10%;left: 13%;width: 30%;}
		.phPage__image picture {transform: translateX(22%); }

		.phPage:has(+ .bILCR--overflowTop) {padding-bottom: calc(1 * var(--base-spacing) + var(--width-std));}
	}

	/* Spacings */
	@media (max-width:46rem) {
		.phPage {padding-top: calc(1.5 * var(--topbar-height));}
		.phPage__cVisuals {margin-left: -15%;}

		.phPage__back {margin-top: calc(-0.5 * var(--topbar-height)); }
	}



/*
PAGE HEAD / Animation lines styles. */
.animLine {display: block; overflow: hidden; }
.animLine__in {display: block;}

.animLine + .animLine {margin-top: -0.61em;}
.animLine.h1__note + .animLine {margin-top: -0.43em;}

.titleResponsive .animLine + .animLine {margin-top: -0.25em;}
.titleArticle .animLine + .animLine {margin-top: -0.25em;}
.titleOffer .animLine + .animLine {margin-top: 0;}