/* .............................................................................
SITE BLOCKS
............................................................................. */

/*
BLOCK / Standard styles
Styles standard des blocs principaux. */
.bMain {
	padding-top: var(--base-spacing-top);
	padding-bottom: var(--base-spacing-bottom);
}

/*
	ALT :
	No double padding.
	Si 2 blocks avec cette classe se chevauchent, ne pas mettre
	d'espacement entre ces 2 blocs. */
.bMain--noDP+.bMain--noDP {
	padding-top: 0;
}

/*
	ALT :
	Forcer zero padding top ou bottom. */
.bMain--noTP {
	padding-top: 0;
}

.bMain--noBP {
	padding-bottom: 0;
}

/* 
	ALT :
	Block generique avec background gris. */
.bMain--gray {
	background-color: var(--color-gray);
}



/*
BLOCK / Layout cols
Differentes options de layout pour le texte. */
.c2 {
	--espacement: 1.5002em;
	display: flex;
	margin: calc(-1 * var(--espacement));
}

.c2__col {
	display: block;
	flex: 0 0 auto;
	width: 50%;
	padding: var(--espacement);
}

.c3 {
	--espacement: 1.5002em;
	display: flex;
	margin: calc(-1 * var(--espacement));
}

.c3__col {
	display: block;
	flex: 0 0 auto;
	width: 33.33%;
	padding: var(--espacement);
}

/* Break cols */
@media (max-width:47rem) {
	.c2 {
		flex-wrap: wrap;
	}

	.c2__col {
		width: 100%;
	}

	.c3 {
		flex-wrap: wrap;
	}

	.c3__col {
		width: 100%;
	}
}



/*
BLOCK / Sidebar
Main container de la sidebar. */
.bSidebar {}

.bSidebar__box {
	padding-bottom: var(--width-std-gap);
}

/* Espacement entre le page head et la sidebar quand ils sont un par-dessus l'autre */
@media (max-width:62rem) {
	.bSidebar__box:first-child {
		padding-top: var(--width-std-gap);
	}
}



/*
BLOCK / Avantages
Liste des avantages sur l'accueil. */
.bAvantages {
	--espacementV: 1vw;
	--espacementH: 1vw;
	--nbItems: 5;
}

.bAvantages__list {}

.bAvantages__items {
	display: flex;
	margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));
}

.bAvantages__items .iAvantage {
	flex: 0 0 auto;
	width: calc(100% / var(--nbItems));
	padding: var(--espacementV) var(--espacementH);
}

/* Carousel */
.bAvantages .jsCarouselStd {}

/* Arrows */
.bAvantages__nav {}

.bAvantages__nav button.btnNav {
	color: var(--color-blue-pale);
}

	.bAvantages__nav button.btnNav:hover {
		color: var(--color-blue);
	}

/* Before init, on affiche les boites comme elles seront apres le init. */
.bAvantages .jsCarouselStd.flickity-enabled {
	display: block;
}

.bAvantages .jsCarouselStd:not(.flickity-enabled)>*:nth-child(1n+4) {
	display: none;
}

/* 4k */
@media (min-width:125rem) {
	.bAvantages {
		--espacementV: 1em;
		--espacementH: 1em;
	}
}

/* 3 cols */
@media (max-width:62rem) {
	.bAvantages {
		--nbItems: 3;
	}
}

/* 2 cols */
@media (max-width:47rem) {
	.bAvantages {
		--nbItems: 2;
	}
}

/* 1 col */
@media (max-width:25rem) {
	.bAvantages {
		--nbItems: 1;
	}
}



/*
BLOCK / Pourquoi granbyindustries
Liste en slider sur l'accueil. */
.bPourquoi {
	--espacementV: 1px;
	--espacementH: 1px;
	--nbItems: 1;
	--contentWidth: 48%;
	background: var(--color-gray);
	padding-top: var(--width-narrow-left);
	padding-bottom: var(--width-narrow-left);
}

.bPourquoi__in {
	background: #fff;
	padding: 8% var(--width-in-right) 8% var(--width-in-left);
}

.bPourquoi__head {
	text-align: center;
	border-bottom: 1px solid var(--color-blue);
	padding-bottom: var(--width-in-left);
	margin-bottom: var(--width-in-left);
}

.bPourquoi__list {
	position: relative;
}

.bPourquoi__items {
	display: flex;
	margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));
}

.bPourquoi__items .iPourquoi {
	flex: 0 0 auto;
	width: calc(100% / var(--nbItems));
	padding: var(--espacementV) var(--espacementH);
}

/* Carousel */
.bPourquoi .jsCarouselStd {}

/* Arrows */
.bPourquoi__nav {
	position: absolute;
	bottom: 0;
	right: 0;
	width: var(--contentWidth);
	max-width: none;
	margin: 0;
}

/* Buttons */
.bPourquoi__nav button.btnNav {
	color: var(--color-blue-pale);
}
	/* Hover */
	.bPourquoi__nav button.btnNav:hover {
		color: var(--color-blue);
	}

/* Before init, on affiche les boites comme elles seront apres le init. */
.bPourquoi .jsCarouselStd.flickity-enabled {
	display: block;
}

.bPourquoi .jsCarouselStd:not(.flickity-enabled)>*:nth-child(1n+2) {
	display: none;
}

/* 100% height slides */
.flickity-resize.bPourquoi__items .iPourquoi {
	min-height: 100%;
	display: flex;
}

.flickity-resize.bPourquoi__items .iPourquoi__in {
	height: auto;
}

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

.bPourquoi .jsCarouselStd.flickity-enabled .iPourquoi {
	left: auto !important;
	transform: translateX(0) !important;
}

/* Set animations transitions */
.bPourquoi .jsCarouselStd .iPourquoi {
	transition: opacity 0.5s, visibility 0.5s;
}

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

/* Break cols */
@media (max-width:62rem) {
	.bPourquoi {
		--contentWidth: 100%;
		margin-left: calc(-1 * var(--width-std-left));
		margin-right: calc(-1 * var(--width-std-right));
		padding: var(--base-spacing-top) var(--width-std-left) var(--base-spacing-bottom) var(--width-std-right);
	}

	.bPourquoi__head {
		border-bottom: none;
		padding-bottom: 0;
	}

	.bPourquoi__nav {
		position: static;
	}
}



/*
BLOCK / Emploi details
Description du poste (zone blanche) dans la page pour postuler. */
.bEmpDetails {
	background: var(--color-gray);
	padding-bottom: var(--width-narrow-left);
}

.bEmpDetails__in {
	background: #fff;
	padding: 5.5em 6% 5.5em 6%;
	position: relative;
	z-index: 1;
	margin-top: -6.5em;
}

.bEmpDetails__postulerTop {
	text-align: center;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}

.bEmpDetails__head {
	text-align: center;
	position: relative;
	margin-bottom: 65px;
}

.bEmpDetails__ctn {
	margin-top: 2.5em;
}

.bEmpDetails__postulerBottom {
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
}

.bEmpDetails__head .iSideBox {
	position: absolute;
	z-index: 2;
	top: calc(100% - 3.5em);
	right: 0;
}

.bEmpDetails__ctn h2 {
	font-size: 1.8em;
}

/* Coller les bords */
@media (max-width:62rem) {
	.bEmpDetails {
		margin-left: calc(-1 * var(--width-std-left));
		margin-right: calc(-1 * var(--width-std-right));
		padding: 0 var(--width-std-left) var(--base-spacing-bottom) var(--width-std-right);
	}

	.bEmpDetails__in {
		margin-top: -10vw;
	}

	.bEmpDetails__ctn {
		margin-top: 2.5em;
	}
}

/* Make space pour le bouton pour postuler */
@media (max-width:47rem) {
	.bEmpDetails {
		padding-bottom: 6em;
	}

	.bEmpDetails__in {
		padding-top: 4.5em;
	}

	.bEmpDetails__head .iSideBox {
		top: calc(100% - 4em);
	}
}



/*
BLOCK / Postuler
Block pour postuler dans la page de details d'offre d'emploi. */
.bPostuler {
	background-color: var(--color-gray);
}

/* Coller les bords */
@media (max-width:62rem) {
	.bPostuler {
		margin-left: calc(-1 * var(--width-std-left));
		margin-right: calc(-1 * var(--width-std-right));
	}
}



/*
BLOCK / Map
Block avec la map dans la page des succursales. */
.bMap {}

/* Coller les bords */
@media (max-width:62rem) {
	.bMap {
		margin-left: calc(-1 * var(--width-std-left));
		margin-right: calc(-1 * var(--width-std-right));
	}
}



/*
BLOCK / Succursales
Liste des succursales. */
.bSuccursales {
	--espacementV: 2.5vw;
	--espacementH: 2vw;
	--largeurBox: 33.33%;
	background-color: var(--color-gray);
}

.bSuccursales__list {
	padding: 2em 0;
}

.bSuccursales__items {
	display: flex;
	flex-wrap: wrap;
	margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));
}

.bSuccursales__items>* {
	flex: 0 0 auto;
	width: var(--largeurBox);
	padding: var(--espacementV) var(--espacementH);
}

#wpsl-search-input {
	width: 100% !important;
}

/* Huge screens */
@media (min-width:125rem) {
	.bSuccursales {
		--espacementV: 3.125em;
		--espacementH: 2.5em;
	}
}

/* 4 cols */
@media (min-width:112rem) {
	.bSuccursales {
		--largeurBox: 25%;
	}
}

/* 2 cols et grossir font-size */
@media (max-width:62rem) {
	.bSuccursales {
		--espacementV: 4vw;
		--espacementH: 3vw;
		--largeurBox: 50%;
	}

	.bSuccursales .iSuccursale.typo--lessFlow p:not([class]) {
		font-size: 1em;
	}
}

/* Coller les bords */
@media (max-width:62rem) {
	.bSuccursales {
		margin-left: calc(-1 * var(--width-std-left));
		margin-right: calc(-1 * var(--width-std-right));
	}
}

/* 1 col */
@media (max-width:37rem) {
	.bSuccursales {
		--espacementV: 1.5em;
		--espacementH: var(--width-std-left);
		--largeurBox: 100%;
	}

	.bSuccursales__items {
		display: block;
	}
}



/*
BLOCK / Side bar slider
Box avec slides et navigation avec des points (ronds). */
.bSBSlider {
	background: #87867e;
}

.bSBSlider__list {}

.bSBSlider__items {}

.bSBSlider__items .iSBSlide {
	width: 100%;
}

/* Carousel */
.bSBSlider .jsCarouselStd {}

/* Dots */
.bSBSlider__items .flickity-page-dots {
	position: absolute;
	bottom: 5%;
}

/* Before init, on affiche les boites comme elles seront apres le init. */
.bSBSlider .jsCarouselStd.flickity-enabled {
	display: block;
}

.bSBSlider__items:not(.flickity-enabled)>*:nth-child(1n+2) {
	display: none;
}



/*
BLOCK / Liste des emplois.
Liste des postes disponibles, filtrable. */
.bOffresEmploi {}

.bOffresEmploi__filtres {
	background: var(--color-gray);
}

.bOffresEmploi__liste {}

.bOffresEmploi__grid {
	transition: height 0.5s;
}

.bOffresEmploi__more {
	text-align: center;
	margin-top: 2em;
}

.bOffresEmploi__more button:disabled {
	cursor: progress;
	opacity: 0.5;
}

.bOffresEmploi .iHead {
	padding-top: calc(0.5 * var(--base-spacing-top));
}



/*
BLOCK / Title
Description. */



#bg_before:before {
    content: '';
    background: #b9bbc1;
    height: calc(30vw + 2.5rem);
    display: block;
    position: absolute;
    /* left: -7vw; */
    top: 0;
    z-index: -1;
    width: 100%;
}

	.pHEmp__row {
    flex-wrap: wrap;
    display: flex;
    padding-top: 2.5rem;
    padding-right: var(--width-narrow-right);
	padding-left: var(--width-narrow-left);
}


.pHEmp__left {
    width: 40%;
    padding-top: 7rem;
    padding-left: 0;
    padding-right: 2rem;
}

.pHEmp__right {
    width: 60%;
}

.pHEmp__left .iLocation {
    padding: 0;
    margin-bottom: 3rem;
}

.pHEmp__left h1 {
    font-size: min(3.2em, 2.2vw);
    line-height: .9;
    margin-bottom: 3rem;
}

.pHEmp__right img {
    width: 100%;
    height: 31vw;
    object-fit: cover;
    object-position: center;
    z-index: 2;
    position: relative;
}



.bEmpDetails__mt_3 {
    margin-top: -3.5em;
}



.bEmpDetails__mt_3 {
    margin-top: -3vw;
    z-index: 10;
    background: transparent;
}

.bEmpDetails__mt_3  .bEmpDetails__postulerTop {
    left: calc(50% - 5.5vw);
    z-index: 10;
    top: 1.5vw;
}

.bEmpDetails__mt_3:before {
    content: '';
    background: #fff;
    position: absolute;
    width: 43%;
    height: 3vw;
    top: 0;
    left: 0;
}

.bEmpDetails__mt_3:after {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(100% - 2.5vw);
    background: white;
    position: absolute;
    display: block;
    top: 2.5vw;
    left: 0;
    z-index: -1;
}

#bg_before {
    position: relative;
    min-height: 33vw;
}

.pHEmp__left .jsShareBox {
    width: 72px;
    max-width: 15em;
    height: 72px;
    max-height: 72px;
    border-radius: 50%;
    transition: none;
}


.pHEmp__left .iSideBox.on {
    width: auto;
    background: transparent;
}

.pHEmp__left .iSideBox__ctn{
    display: flex;
    margin-bottom: 0;
    padding-bottom: 0!important;
}

.pHEmp__left .iSideBox__ctn .rs{
	display: flex;
}

.pHEmp__left .iSideBox__ctn {
    max-height: unset;
    overflow: hidden;
    pointer-events: none;
    -webkit-transition: max-height .3s;
    transition: max-width .3s;
    max-width: 0;
	
}

.pHEmp__left .iSideBox.on .iSideBox__ctn {
    position: absolute;
    background: #f88e2b;
    z-index: 10;
    display: flex;
    top: 0;
    justify-content: center;
    left: 72px;
    height: 72px;
    padding-left: 0;
    align-items: center;
    max-width: 100%;
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
    padding-right: 2rem;
}

.pHEmp__left .iSideBox__ctn .rs {
	padding-bottom: 0;
}

.pHEmp__left  .iSideBox.on .iSideBox__trigger .btnIcon {
    background: #f88e2b;
	border-top-left-radius: 2em;
	border-bottom-left-radius: 2em;
	border-top-right-radius: 0em;
	border-bottom-right-radius: 0em;
}


@media screen and (max-width: 1920px){

	.pHEmp__left {
        padding-top: 3rem;
    }

}

@media screen and (max-width: 1650px){
	#bg_before {
		min-height: 36vw;
	}

	.pHEmp__right img {
		height: 33vw;
	}

	.pHEmp__left .iLocation {
		padding: 0;
		margin-bottom: 1rem;
	}

	.bEmpDetails__mt_3 {
		margin-top: -3.5vw;
	}
}

@media screen and (max-width: 1440px){

	.pHEmp__left {
        padding-top: 3rem;
        width: 50%;
    }

	.pHEmp__right {
		width: 50%;
	}

	.bEmpDetails__mt_3 .bEmpDetails__postulerTop {
		left: 50%;
	}
}



@media screen and (max-width: 1280px){
	#bg_before {
        min-height: auto;
    }

	.pHEmp__right{
		display: none;
	}

	.pHEmp__left{
		width: 100%;
	}

	.pHEmp__row {
		padding-bottom: 7.5rem;
	}

	.bEmpDetails__mt_3:before{
		display: none;
	}

	.pHEmp__left h1 {
        font-size: 2.7em;
    }

	.bEmpDetails__mt_3 {
        margin-top: -4.5vw;
    }

	.bEmpDetails__mt_3:after {
		top: 0;
		height: 100%;
	}

	.bEmpDetails__mt_3 .bEmpDetails__postulerTop {
		top: 0;
	}

	#bg_before:before {
		height: 100%;
	}

	.pHEmp__left .jsShareBox {
		width: 60px;
    height: 60px;
    max-height: 60px;
	}


	.pHEmp__left .iSideBox.on .iSideBox__ctn {
		left: 60px;
		height: 60.5px;
}


}

@media screen and (max-width: 992px){
	#bg_before:before {
		height: 100%;
	}

	.pHEmp__left h1 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }

	.pHEmp__left .jsShareBox {
        width: 70px;
        height: 70px;
        max-height: 70px;
    }

		.pHEmp__left .iSideBox.on .iSideBox__ctn {
			left: 70px;
			height: 72px;
	}

}


@media screen and (max-width: 750px){
	.pHEmp__left .jsShareBox {
		width: 56px;
		height: 56px;
		max-height: 56px;
	}

	.pHEmp__left .iSideBox.on .iSideBox__ctn {
		left: 54px;
		height: 54px;
		padding-left: 0;
		border-bottom-right-radius: 2em;
		padding-right: 1rem;
	}

}