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

/* 
PAGE HEAD / Page
Toutes les pages utilisent ce haut de page. */
.pHPage {--right-size: 38%; position: relative;min-height: var(--page-head-height);}
.pHPage__layout {display: grid;grid-template-columns: var(--width-side-bar) var(--width-std-left) 1fr var(--right-size) var(--width-std-right);grid-template-rows: auto minmax(2em,1fr);}
.pHPage__layout::before {display: block; content: ' '; grid-row: 1 / 2; grid-column: 1 / -1; background-color: #fff; }
.pHPage__cSide {position: relative;z-index: 2;grid-row: 1 / 3;grid-column: 1 / 2;background: var(--color-light-gray);}
.pHPage__cCtn {position: relative;grid-row: 1 / 2;grid-column: 3 / 4;min-height: var(--page-head-height);padding: var(--topbar-height) 0;display: flex;flex-direction: column;justify-content: center;}
.pHPage__cRight {position: relative;grid-row: 1 / 3;grid-column: 4 / 5;justify-self: end;align-self: end;padding-top: var(--topbar-height);margin-left: 5%;width: 100%;}

	/* 4k */
	@media (min-width:110rem) {
		.pHPage {--right-size: 41em; }
	}

/* Side bar sticky with logos. */
.pHPage__sideWillPin {position: absolute;padding-top: var(--topbar-height);margin-top: calc(-1 * var(--topbar-height));}
.pHPage__sideLayout {position: relative;height: var(--page-head-height);width: var(--width-side-bar);background: var(--color-gray);padding: 20% 0;display: flex;flex-direction: column;justify-content: space-evenly;}
.pHPage__sideLogo {margin: 0 15%;}

	/* Lien sur logo */
	.pHPage__sideLogo a {display: block; text-decoration: none; transition: opacity 0.3s; }
	.pHPage__sideLogo a:hover {opacity: 0.7; }

/* Espacements entre le page head et les differentes sections. */
.pHPage + *,
.pHPage + .bMain {--base-spacing-top: calc(0.5 * var(--base-spacing));}
.pHPage + .bProgrammationList {--base-spacing-top: unset !important;}

/* Titre */
.pHPage__titre { }

/* Image */
.pHPage__img {position: relative;margin-top: 5%;padding: 0 2.5em;width: 100%;}
.pHPage__imgCircleMove { }
.pHPage__imgCircle {border-radius: 50%;overflow: hidden;}
.pHPage__img .iMacaronDate {position: absolute;z-index: 2;left: 0.8em;top: 15%;}

	/* Lien sur l'image */
	.pHPage__img a {display: block; text-decoration: none;height: 100%; }
	.pHPage__img a img {will-change: transform; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

	.pHPage__img a:hover img {transform: scale(1.05); }

	/* 
	ANIMATE */
	.js .jsAnimateClass:not(.pHPage--home) .pHPage__imgCircle {transform: scale(0.85); opacity: 0; transform-origin: 50% 50%; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s; }
	.js .jsAnimateClass.animate:not(.pHPage--home) .pHPage__imgCircle {transform: none; opacity: 1; }

/* Home carousel */
.pHPage__carouselList {position: relative;}
.pHPage__carouselTitle {text-align: center;font-size: 1.5em;margin-top: 1em;margin-bottom: 0.5em;}
.pHPage__carouselItems {display: flex; }
.pHPage__carouselItems .pHPage__carouselItem {flex:0 0 auto; width: 100%; }

	/* Overflow visible permet de ne pas couper les elements flottants. */
	.pHPage__carouselItems .flickity-viewport {overflow: visible; }

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

	/* Elements dans le carousel */
	.pHPage .btnMacaronNav {position: absolute;z-index: 2;right: 0;top: 70%;}
	.pHPage__carouselList .pHPage__img {margin-top: 0;}

	/* Fade effect */
	.jsCarouselHomePH.flickity-enabled .flickity-slider {transform: none !important;}
	.jsCarouselHomePH.flickity-enabled .pHPage__carouselItem {left: auto !important;}

	/* Set animations transitions */
	.jsCarouselHomePH .pHPage__carouselItem {transition: opacity 0.5s, visibility 0.5s;}
	.jsCarouselHomePH .pHPage__imgCircle {will-change: transform; transition: transform 0.5s;}

	/* .is-selected = slide du centre
	.is-previous = slide de gauche
	.is-next = slide de droite */
	.jsCarouselHomePH .pHPage__carouselItem:not(.is-selected) {opacity: 0;visibility: hidden; pointer-events: none;}
	.jsCarouselHomePH .pHPage__carouselItem:not(.is-selected) .pHPage__imgCircle {transform: scale(0.85);}

/* Bouton reservation */
.pHPage__btnReservation {transform: translateY(50%);position: absolute;left: 0;bottom: 0;}

/* Partager (dans le side) */
.pHPage__partager {position: absolute;top: var(--topbar-height);right: var(--width-std-right);margin-top: 1em;margin-right: -2em;}

/* Infos d'un evenement */
.pHPage__infosEvent {margin: 1em 0;}

	/* 
	ALT :
	Accueil.
	La portion de droite avec l'image est plus petite. */
	.pHPage--home {--right-size: 32%; }

		/* 4k */
		@media (min-width:110rem) {
			.pHPage--home {--right-size: 35em; }
		}

	/* 
	ALT :
	Listing with filters.
	Le bas du page head colle la prochaine section.
	Le side de droite est dans la meme row que le ctn. */
	.pHPage--listingWFilters {min-height: 0;}
	.pHPage--listingWFilters .pHPage__layout {grid-template-rows:auto; }
	.pHPage--listingWFilters .pHPage__layout::before {position: absolute; z-index: -1; top: 0; height: var(--page-head-height); left: 0; right: 0; }
	.pHPage--listingWFilters .pHPage__cCtn {min-height: 0; padding-bottom: 0; }
	.pHPage--listingWFilters .pHPage__cRight {grid-row: 1 / 2;padding-bottom: 1em;width: auto;}

	/* 
	ALT :
	Faire de la place pour le bouton partager a droite.
	Utile pour la page de details d'un evenement. */
	.pHPage--makeSpaceForPartager { }

	/* 
	ALT :
	Background blanc ne depasse pas dans le bas. */
	.pHPage--noOverflowingBG { }
	.pHPage--noOverflowingBG .pHPage__layout::before {margin-bottom: 0; }

	/* Content over image */
	@media (max-width:62rem) {
		.pHPage {--right-size:auto; min-height: auto;}
		.pHPage__layout {grid-template-columns: var(--width-std-left) 1fr var(--width-std-right); grid-template-rows: auto; }
		.pHPage__layout::before {margin-bottom: -25%; }
		.pHPage__cSide {display: none;}
		.pHPage__cCtn {grid-column: 2 / 3; min-height: auto; padding: 3em 0; }
		.pHPage__cRight {grid-row: 2 / 3;grid-column: 2 / 3;padding: 0 10%;margin: 0;justify-self: center;}

		.pHPage__img {margin-top: 0; }
		.pHPage__carouselTitle {margin-top: 0; }
		.pHPage__btnReservation {transform: none; position: static; margin-top: 1.5em; }

		.pHPage + *,
		.pHPage + .bMain {--base-spacing-top: var(--base-spacing);}
		.pHPage + .bProgrammationList {--base-spacing-top: calc(0.5 * var(--base-spacing));}
		.pHPage + .bProgrammationList--fullListing {--base-spacing-top: 0;}

		.pHPage__partager {top: 2em;right: 2em;margin: 0;}

		.pHPage--listingWFilters .pHPage__layout {grid-template-columns: var(--width-std-left) 1fr var(--right-size) var(--width-std-right);}
		.pHPage--listingWFilters .pHPage__cRight {grid-column: 3 / 4;justify-self: flex-end;padding: 0 0 1em 2em;}
		
		.pHPage--makeSpaceForPartager .pHPage__cCtn {margin-right: 5em;}
	}

	/* Sizes and position */
	@media (max-width:46rem) {
		.pHPage__cCtn {padding: 2.5em 0; }
		.pHPage__cRight {padding: 0; }
		.pHPage__carouselTitle {font-size: 1.3em; }
		.pHPage .btnMacaronNav {top: 65%;}
		.pHPage__partager {top: 1em;right: 1em;}
		.pHPage--listingWFilters .pHPage__cRight {padding-left: 1em;}
		.pHPage--makeSpaceForPartager .pHPage__cCtn {margin-right: 3em; }
	}