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

/*
PAGE HEAD / Page
La section en haut de page de la grande majorite des pages du site. */
.pHPage {--rs-width:5em;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:
	Lower. */
	.pHPage--lower {min-height: 30em;}

	/*
	ALT:
	Home. */
	.pHPage--home {--spacing-bottom: 4em;min-height: 50em;margin-bottom: calc(-1 * var(--spacing-bottom));}
	.pHPage--home .pHPage__cCtn {padding-bottom: var(--spacing-bottom);}

		/*
		ANIMATE */
		.pHPage--home.animate .iPHHome__ctn .subTitle {opacity: 0; }
		.pHPage--home .iPHHome__ctn .subTitle {opacity: 1; transition: opacity 1s; transition-delay: 0.8s; }

		.pHPage--home.animate .iPHScroll__point {opacity: 0; }
		.pHPage--home .iPHScroll__point {opacity: 1; transition: opacity 1s; transition-delay: 0.8s; }

		.pHPage--home.animate .iPHScroll__line {transform: scaleY(0); }
		.pHPage--home .iPHScroll__line {transform: scaleY(1); transform-origin: 50% 0%; transition: transform 1s; transition-delay: 1s; }

		.pHPage--home.animate .iPHScroll__btn {opacity: 0; }
		.pHPage--home .iPHScroll__btn {opacity: 1; transition: opacity 1s; transition-delay: 1.6s; }

		.pHPage--home.animate .iPHBox__in {clip-path: inset(0% 0% 0% 100%); }
		.pHPage--home .iPHBox__in {clip-path: inset(0% 0% 0% 0%); transition: clip-path 1s; transition-delay: 1.6s;}

		.pHPage--home.animate .iPHBox__ctn {opacity: 1; }
		.pHPage--home .iPHBox__ctn {opacity: 1; transition: opacity 1s; transition-delay: 2.2s; }

	/*
	ALT:
	Landing page */
	.pHPage--landing{
		padding-bottom: var(--base-spacing-top);
	}
	.pHPage--landing .pHPage__cCtn{
	    flex-wrap: wrap;
	    padding-left: var(--rs-width);
	    padding-right: 0;
	    padding-bottom: 3.5em;
	}
	    @media (max-width: 62rem){
	        .pHPage--landing .pHPage__cCtn{
	            order: 1;
	            align-items: flex-start;
	            padding-bottom: 15vw;
	        }
	    }
	    @media (max-width: 47rem){
	    	.pHPage--landing .pHPage__cCtn{
	    	    padding-bottom: 5em;
	    	}
	    }
	.pHPage--landing .topBar{
	    position: relative;
	    z-index: 0;
	    background: none;
	    margin-bottom: 0;
	    left: 0;
	    flex-grow: 0;
	}
		@media (max-width: 62rem){
			.pHPage--landing .topBar{
				margin-bottom: 2em;
			}
		}
	.pHPage--landing .pHPage__bg{
		background-color: var(--color-green);
		right: auto;
		width: 75vw;
	}
		@media (max-width: 992px){
			.pHPage--landing .pHPage__bg{
				width: 100%;
			}
		}
	.pHPage--landing h1{
		margin-bottom: .25em;
	}
	.pHPage--landing h2,
	.pHPage--landing .h2{}
		.pHPage--landing .onDark h1,
		.pHPage--landing .onDark h2{
			color: var(--color-orange);
		}
		@media (max-width: 1600px){
			.pHPage--landing .h2,
			.pHPage--landing h2{
				font-size: calc(1em + 2vw);
			}
		}
		@media (max-width: 600px){
			.pHPage--landing .h2,
			.pHPage--landing h2{
				font-size: 1.3em;
				line-height: 1.3;
			}
		}
	.pHPage--landing h1 + h2{
		margin-top: 0;
	}
	.pHPage--landing .iPHHome__ctn{
	    max-width: 100%;
	    padding-right: 4em;
	}
	    @media (max-width: 992px){
	        .pHPage--landing .iPHHome__ctn{
	            max-width: 100%;
	        }
	    }
	.pHPage--landing__titleReveal{
	    overflow: hidden;
	}
		.pHPage--landing__titleReveal.animated{
			overflow: visible;
		}
	.pHPage--landing__titleReveal.reveal > *,
	.pHPage--home .pHPage--landing__titleReveal.reveal .iPHScroll__btn{
	    transform: translateY(110%);
	}
	    .pHPage--landing__titleReveal > *,
	    .pHPage--landing .iPHScroll__btn{
	        transform: translateY(0);
	        transition: transform .8s;
	        transition-delay: .3s;
	        margin-top: 2rem;
	    }
	        @media (max-width: 992px){
	            .pHPage--landing .iPHScroll__btn{
	                display: none;
	            }
	        }
	    .pHPage--home .iPHHome__ctn .pHPage--landing__titleReveal .subTitle {opacity: 1;transition: all 1s;transition-delay: 0.3s;max-width: 16em;}
	.pHPage--landing h2{
	    margin-top: 0;
	}
	.pHPage--home.pHPage--landing .iPHBox__in {transition-delay: .6s;}
	    @media (max-width: 992px){
	        .pHPage--home.pHPage--landing .iPHBox__in {min-height: 0;}
	    }
	.pHPage--home.pHPage--landing .iPHBox__ctn{transition-delay: 1.2s;}
	    @media (max-width: 992px){
	        .pHPage--home.pHPage--landing .iPHBox__ctn{
	            width: 100%;
	        }
	    }
	.pHPage--landing .iPHBox__ctn{
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}

		@media (max-width: 992px){
			.pHPage--landing .iPHBox__ctn img:not(:nth-child(1)):not(:nth-child(2)){
				display: none;
			}
		}

	/* Mobile */
	@media (max-width:62rem) {
		.pHPage {--rs-width: 0; min-height: 100vw; display: flex; flex-direction: column; }
		.pHPage__in {min-height: 100vw; }
		.pHPage--home {--spacing-bottom: 0.1px; }

		.pHPage--home .pHPage__in {min-height: min(calc(var(--vhDefer) - var(--topbar-height)), 65em); }
	}


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

/* Event : page de details d'un evenement. */
.iPHEvent {padding-top: 5em;align-self: stretch;display: flex;flex-direction: column;justify-content: space-between;}
.iPHEvent > * {flex:0 0 auto; }
.iPHEvent__cBack { }
.iPHEvent__cCtn {padding: 3em 0; display: flex; }
.iPHEvent__cCtn > * {flex:1 1 auto; }
.iPHEvent__date {flex:0 0 auto;margin-right: 3em;padding-top: 1.1em;}
.iPHEvent__ctn { }
.iPHEvent__ctn > h1:first-child {margin-top: -0.15em;}
.iPHEvent__cLink {margin-bottom: -1.6em;}

	/* Date over content */
	@media (max-width:62rem) {
		.iPHEvent {padding-top: 2em;}
		.iPHEvent__cBack {margin-left: calc(-0.8 * var(--width-std-left));}
		.iPHEvent__cBack .btnSubtle__label {display: none; }
		.iPHEvent__cCtn {display: block;padding: 2em 0;}
		.iPHEvent__date {margin: 0 0 2em 0;padding: 0;}
	}

/* Home : big title, subtitle and scroll down incentive. */
.iPHHome { }
	.pHPage--landing .iPHHome{
		display: flex;
	}
		@media (max-width: 62em){
			.pHPage--landing .iPHHome{
				flex-wrap: wrap;
			}
		}
.iPHHome__cCtn { }
	.pHPage--landing .iPHHome__cCtn{
		display: flex;
		align-items: center;
	}
.iPHHome__cScroll {position: absolute;top: 38%;bottom: var(--spacing-bottom);left: calc(var(--width-std-left) / 2);transform: translateX(-50%);}
.iPHHome__ctn {width: 100%;max-width: 35em;}

/* Scroll incentive */
.iPHScroll {height: 100%;display: flex;flex-direction: column;align-items: center;}
.iPHScroll__point {flex:0 0 auto; font-size: 1.1em; height: 1em; width: 1em; background-color: var(--color-orange); border-radius: 50%; }
.iPHScroll__line {flex:1 1 auto; width: 2px; background-color: #fff; }
.iPHScroll__btn {flex:0 0 auto; }

	/* Mobile */
	@media (max-width:62rem) {
		.iPHHome__cCtn {padding-left: calc(2.4em + 6vw);order: 1;}
		.iPHHome__cScroll {top: 43%;left: var(--width-std-left);bottom: var(--width-std-left);transform: none;}

		.iPHScroll__point {font-size: 0.9em; }
		.iPHScroll__line {width: 1px; }
	}



/* .............................................................................
BOTTOM
Submenu, filters or other things at the bottom. */
.pHPage__cBottom {--height: 4.5em;flex:0 0 auto;padding-right: 0;}
	.pHPage--landing .pHPage__cBottom{padding-left: var(--rs-width);}
		@media (max-width: 62em){
			.pHPage--landing .pHPage__cBottom{
				order: 1;
				padding-left: var(--width-std-left);
				padding-right: var(--width-std-left);
			}
		}

/* Filters for the events list */
.iPHFilters {--espacement: 0.5em;--largeurBox: 24em;position: relative;overflow: hidden;}
.iPHFilters__cHead {display: none;}
.iPHFilters__cCtn {display: flex;margin: 0 calc(-1 * var(--espacement));}
.iPHFilters__cCtn > * {flex: 0 0 auto; width: var(--largeurBox); padding: 0 var(--espacement); margin: 0; }
.iPHFilters__hLabel { }
.iPHFilters__hIcon { }
.iPHFilters__hIconClose { }
.iPHFilters__hIconFilter { }
.iPHFilters__filter {height: var(--height);}
.iPHFilters__submit {display: none;}
.iPHFilters__filter .select2 {height: 100%; }
.iPHFilters__filter .select2.select2-container .select2-selection {height: 100%;border:none;display: flex;align-items: center;}

	/* Filters 50% side-by-side */
	@media (max-width:62rem) {
		.iPHFilters {--espacement: 0.5em;--largeurBox: calc(0.5 * (100% - var(--width-std-left)));}
	}

	/* Hidden filters, reveal on click on head. */
	@media (max-width:47rem) {
		.iPHFilters {--espacement: 0.5em;--largeurBox: 100%;--paddingBox: 1.5em;overflow: visible;}
		.iPHFilters__cHead {display: flex;align-items: center;background-color: #fff;color: var(--color-green);height: var(--height);padding: 0 var(--paddingBox);transition: background-color 0.3s, color 0.3s;}
		.iPHFilters__cCtn {display: block;background: var(--color-orange);margin: 0;padding: 0 var(--paddingBox) 1em var(--paddingBox);position: absolute;z-index: 3;left: 0;right: 0;}
		.iPHFilters__cCtn > * {padding: var(--espacement) 0;}
		.iPHFilters__hLabel {flex: 1 1 auto;text-transform: uppercase;}
		.iPHFilters__hIcon {font-size: 3em;flex: 0 0 auto;display: grid;color: var(--color-orange);margin: 0 -0.25em 0 0;transition: color 0.3s;}
		.iPHFilters__hIcon > * {grid-column: 1 / -1;grid-row: 1 / -1;}
		.iPHFilters__hIconClose {opacity: 0; transition: opacity 0.3s; }
		.iPHFilters__hIconFilter {opacity: 1; transition: opacity 0.3s; }
		.iPHFilters__filter {height: auto;}
		.iPHFilters__submit {display: block;text-align: center;margin: 0.8em 0;}
		.iPHFilters__filter .select2 {height: auto; }
		.iPHFilters__filter .select2.select2-container .select2-selection {height: auto; }

		/*
		STATE / On.
		Ouvrir les filtres au complet. */
		.iPHFilters .iPHFilters__cCtn {opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }

		/* On */
		.iPHFilters.on .iPHFilters__cCtn {opacity: 1; visibility: visible; }
		.iPHFilters.on .iPHFilters__cHead {background-color: var(--color-orange); color: #fff; }
		.iPHFilters.on .iPHFilters__hIcon {color: #fff; }
		.iPHFilters.on .iPHFilters__hIcon .iPHFilters__hIconClose {opacity: 1; }
		.iPHFilters.on .iPHFilters__hIcon .iPHFilters__hIconFilter {opacity: 0; }
	}


/* .............................................................................
SIDE BOX
Box at right in the home page. */
.pHPage__sideBox {position: absolute;z-index: 7;right: 0;bottom: 14%;}
	.pHPage--landing .pHPage__sideBox{
		top: var(--rs-width);
		left: 75vw;
		transform: translateX(-50%);
		width: 40vw;
	}
.iPHBox {max-width: 29em;}
	.pHPage--landing .iPHBox{
		max-width: 40vw;
		position: relative;
		bottom: -1px;
		display: flex;
	}
		@media (max-width: 62em){
			.pHPage--landing .iPHBox{
				max-width: 100%;
				bottom: auto;
				margin-top: 0;
				margin-bottom: 8vw;
				margin-left: var(--width-std-left);
				filter: none;
			}
		}
.iPHBox__in {min-height: 27em;position: relative;display: flex;align-items: center;}
.iPHBox__ctn {flex: 0 1 auto;padding: 8%;}
.iPHBox__bg {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; overflow: hidden; }
.iPHBox__bg::before {position:absolute; z-index:0; display:block; content:''; top:-1px; bottom:-1px; left:-1px; right:-1px; background-color: var(--color-green); opacity: 0.85; }
.iPHBox__bg * {width: 100%; height: 100%; object-fit: cover;}

/* Redefinir certains styles du head. */
.iPHBox .iHead .svgIcon {font-size: 4.4em;color: var(--color-orange);margin-left: -0.18em;margin-bottom: -0.15em;}
.iPHBox .iHead + * {margin-top: 0.8em;}

	/* Box floating under the image */
	@media (max-width:62rem) {
		.pHPage__sideBox {position: static;margin-left: var(--width-std-left);margin-top: 2em;}
			.pHPage--landing .pHPage__sideBox{
				transform: none;
				margin-bottom: 4em;
				width: 100%;
				margin-top: 0;
				margin-left: 0;
				padding-left: calc(var(--width-std-left)/2);
				flex-grow: 0;
			}
		.iPHBox {margin-left: auto;margin-top: -20vh;}
			.pHPage--landing .pHPage__sideBox .iPHBox{
				filter: none;
				margin-top: 0;
			}

		.iPHBox .iHead .svgIcon {font-size: 3.5em; }
	}

	/* Box under */
	@media (max-width:47rem) {
		.iPHBox {margin-top: 0;}
		.iPHBox__in {min-height: 0;}
	}


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


/* .............................................................................
SOCIAL MEDIAS
At right, they are sticky. */
.pHPage__rs {flex: 0 0 auto;width: var(--rs-width);position: relative;z-index: 6;}

	/* Mobile */
	@media (max-width:62rem) {
		.pHPage__rs {display: none; }
	}



/* .............................................................................
ANIMATE
Animation of the page head for each page. */
.animate .pHPage__bg > * {opacity: 0; transform: translateY(20%); }
.pHPage__bg > * {opacity: 1; transform: translateY(0); transition: opacity 1s, transform 1s; transition-delay: 0s; }

.animate .pHPage__titleReveal > * {transform: translateY(110%); }
.pHPage__titleReveal > * {transform: translateY(0); transition: transform 1s; transition-delay: 0.3s; }

.animate .pHPage__cBottom {opacity: 0; }
.pHPage__cBottom {opacity: 1; transition: opacity 1s; transition-delay: 0.6s; }

.animate .iPHEvent__date {opacity:0; }
.iPHEvent__date {opacity:1; transition: opacity 1s; transition-delay: 0.9s; }

.animate .iPHEvent__ctn > *:not(.pHPage__titleReveal) {opacity:0; }
.iPHEvent__ctn > *:not(.pHPage__titleReveal) {opacity:1; transition: opacity 1s; transition-delay: 0.9s; }

.animate .iPHEvent__cLink {opacity:0; }
.iPHEvent__cLink {opacity:1; transition: opacity 1s; transition-delay: 1.1s; }

.animate .iPHEvent__cBack {opacity:0; }
.iPHEvent__cBack {opacity:1; transition: opacity 1s; transition-delay: 1.1s; }