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

/*
PAGE HEAD / Styles
La section en haut de page de la page de styles. */
.pHStyles {text-align: center; }
.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 {position: relative;min-height: clamp(20em, 100vh, 70vw);display: grid;grid-template-columns: 1fr 25em;grid-template-rows: 1fr;align-items: end;padding: var(--topbar-height) var(--width-std-right) 6% var(--width-std-left);gap: 3em;}
.phHome__cCtn {z-index: 2;grid-column: 1 / 2;grid-row: 1 / 2;margin-bottom: 5%;}
.phHome__cSide {z-index: 1;grid-column: 2 / 3;grid-row: 1 / 2;}
.phHome__cBG {position: absolute;z-index: 0;top: 0;bottom: 0;left: 0;right: 0; overflow: hidden;}

.phHome__header { }
.phHome__image {position: relative; }
.phHome__image::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0; background: var(--color-black); opacity: 0.35; }
.phHome__image,
.phHome__image * {width: 100%;height: 100%;object-fit: cover;}

	/* Contenu over side box */
	@media (max-width:62rem) {
		.phHome {min-height: 0; grid-template-columns: auto; grid-template-rows: 1fr auto; gap: 0; padding:0; }
		.phHome__cCtn {grid-column: 1 / 2;grid-row: 1 / 2;min-height: 80vh;padding: var(--topbar-height) var(--width-std-right) calc(2 * var(--width-std)) var(--width-std-left);margin-bottom: 0; display: flex;align-items: flex-end;}
		.phHome__cSide {grid-column: 1 / 2; grid-row: 2 / 3; background: var(--color-black); border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); padding:var(--width-std) var(--width-std-right) var(--width-std) var(--width-std-left); }
		.phHome__cBG {grid-column: 1 / 2; grid-row: 1 / 2; }
	}


/* Box a droite avec infos de saison et compte à rebours */
.iPHBox {display: flex;flex-direction: column;gap: 0.8em;}
.iPHBox__meteo {font-size: 1.1em;display: flex;align-items: center;justify-content: space-between;gap: 0.5em;padding: 0 2em;}
.iPHBox__season {display: flex; align-items: center; gap: 0.5em; }
.iPHBox__seasonIcon {flex:0 0 auto; font-size: 4.5em; margin-left: -0.2em; }
.iPHBox__temperature {flex:0 0 auto; font-size: 1.8em; font-weight: 700; }
.iPHBox__temperature sup {font-size: 0.6em; }
.iPHBox__box {position: relative; border-radius: var(--radius);padding: 2em;text-align: center;}
.iPHBox__box::before {position:absolute;z-index:0;display:block;content:'';top:0;bottom:0;left:0;right:0;border: 1px solid var(--color-gray-on-dark);border-radius: var(--radius);}
.iPHBox__logo {display: inline-block;text-align: center;margin: -0.7em 0 0 -9em;max-width: 11.5em;}
.iPHBox__countdownDays {font-size: 5em; line-height: 0.8; font-weight: 700; letter-spacing: -0.05em; }
.iPHBox__countdownLabel {font-size: 2em; margin-left: 0.25em; }
p.iPHBox__biggerP {font-size: 1.15em;text-wrap: balance;margin-top: 0.5em;}

	/* Cacher la météo */
	@media (max-width:62rem) {
		.iPHBox__meteo {display: none; }
	}

	/* Logo et textes plus petits */
	@media (max-width:46rem) {
		.iPHBox__box {padding: var(--width-std); }
		.iPHBox__logo {max-width: 30vw; margin-left: -6.5em; }
		.iPHBox__countdownDays {font-size: 4em; display: inline-block; margin-top: -0.15em; }
		.iPHBox__countdownLabel {font-size: 1.5em; }
		p.iPHBox__biggerP {font-size: 1em; }
	}

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

	/* Animation line styles */
	.animLine {display: block; overflow: hidden; }
	.animLine__in {display: block; }

	/* Fadein the background image (or video) */
	.phHome.jsAnimateClass .phHome__image::after {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0; background: var(--color-black); opacity: 1; transition: opacity 2s; }
	.phHome.jsAnimateClass.animate .phHome__image::after {opacity: 0; }

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

	/* Right box: fade in + scale the border */
	.phHome.jsAnimateClass .iPHBox__meteo {opacity: 0; transition: opacity 1s; transition-delay: 1s; }
	.phHome.jsAnimateClass.animate .iPHBox__meteo {opacity: 1; }
	.phHome.jsAnimateClass .iPHBox__box {opacity: 0; transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 1.1s; }
	.phHome.jsAnimateClass.animate .iPHBox__box {opacity: 1; }
	.phHome.jsAnimateClass .iPHBox__box::before {transform: scale(1.1); transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 1.1s; }
	.phHome.jsAnimateClass.animate .iPHBox__box::before {transform: none; }