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

/*
PAGE HEAD / Page
Background gradient avec le titre et icone et sous-titre. */
.pHPage {
	position: relative;
	width: 100%;
	background: var(--color-blue);
}

.pHPage__in {
	margin: 0 auto;
	max-width: 35em;
	padding: 6em 0;
}

.pHPage__title {
	text-align: center;
}

.pHPage__icon {
	color: var(--color-orange);
	display: inline-block;
	font-size: 1em;
	margin-left: -0.2em;
	margin-right: -1em;
	transform: translateY(-0.2em);
}

.pHPage__ctn {
	margin-top: 5em;
	text-align: center;
}

/* 
	ALT:
	Meme hauteur qu'un item de la sidebar, pour un alignement parfait. */
.pHPage--sidebarItemHeight {
	min-height: var(--sidebar-item-height);
	display: flex;
	align-items: center;
}

.pHPage--sidebarItemHeight .pHPage__in {
	flex: 1 1 auto;
}

/* Mobile, full width */
@media (max-width:62rem) {

	.pHPage,
	.pHPage--sidebarItemHeight {
		width: auto;
		margin-left: calc(-1 * var(--width-std-left));
		margin-right: calc(-1 * var(--width-std-right));
		min-height: auto;
		display: block;
	}

	.pHPage__in {
		padding: 4em 0;
	}

	.pHPage__ctn {
		margin-top: 3em;
	}
}


/*
PAGE HEAD / Home
Haut de page de l'accueil avec carousel de slides, nav number et 
navigation rapide pour les services dans le bas. */
.pHHome {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.pHHome__ctn {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 6%;
	width: 42%;
	transform: translateY(-50%);
}

.pHHome__slides {
	position: relative;
	z-index: 0;
}

.pHHome__carousel {}

/* Carousel */
.jsCarouselHome {}

/* Before init */
.jsCarouselHome:not(.flickity-enabled)>*:not(:first-child) {
	display: none;
}

/* Fade effect
	Dans ce plugin, cet effet est gerer en CSS, pas en JS. */
.jsCarouselHome.flickity-enabled .flickity-slider {
	transform: none !important;
}

.jsCarouselHome.flickity-enabled .iPHSlideHome {
	left: auto !important;
	transform: translateX(0) !important;
}

/* Set animations transitions */
.jsCarouselHome .iPHSlideHome {
	transition: opacity 1s, visibility 1s;
}

/*
	.is-selected = slide du centre
	.is-previous = slide de gauche
	.is-next = slide de droite */
.jsCarouselHome .iPHSlideHome:not(.is-selected) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Mobile, full width */
@media (max-width:62rem) {
	.pHHome {
		width: auto;
		margin-left: calc(-1 * var(--width-std-left));
		margin-right: calc(-1 * var(--width-std-right));
	}
}


/*
ITEM / Slide
Slide with only an image. */
.iPHSlideHome {
	width: 100%;
}


/*
PAGE HEAD / Emploi
Background image avec le nom de la personne par-dessus. */
.pHEmp {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.pHEmp__bg {
	position: relative;
	z-index: 0;
}

.pHEmp__ctn {
	position: absolute;
	z-index: 1;
	top: 21%;
	left: 56%;
	right: 5%;
	font-size: 1.6vw;
}

.pHEmp__name {
	font-weight: bold;
	display: inline-block;
}

.pHEmp__icon {
	color: var(--color-orange);
	display: inline-block;
	font-size: 1.5em;
	margin-left: -0.2em;
}

.pHEmp__title {
	font-weight: 300;
	margin-top: 0.2em;
}

/* Max font-size */
@media (min-width:125rem) {
	.pHEmp__ctn {
		font-size: 2em;
	}
}

/* Mobile, full width */
@media (max-width:62rem) {
	.pHEmp {
		width: auto;
		margin-left: calc(-1 * var(--width-std-left));
		margin-right: calc(-1 * var(--width-std-right));
	}

	.pHEmp__ctn {
		font-size: 2.2vw;
	}
}

/*
PAGE HEAD / Emploi
Background image avec le nom de la personne par-dessus. */
.pHEmp {position: relative; width: 100%; overflow: hidden; }
.pHEmp__bg {position: relative; z-index: 0; }
.pHEmp__ctn {position: absolute;z-index: 1;top: 21%;left: 56%;right: 5%;font-size: 1.6vw;}
.pHEmp__name {font-weight: bold; display: inline-block; }
.pHEmp__icon {color: var(--color-orange);display: inline-block;font-size: 1.5em;margin-left: -0.2em;}
.pHEmp__title {font-weight: 300; margin-top: 0.2em; }

	/* Max font-size */
	@media (min-width:125rem) {
		.pHEmp__ctn {font-size: 2em; }
	}

	/* Mobile, full width */
	@media (max-width:62rem) {
		.pHEmp {width: auto; margin-left: calc(-1 * var(--width-std-left)); margin-right: calc(-1 * var(--width-std-right)); }
		.pHEmp__ctn {font-size: 2.2vw; }
	}