/* #Page Styles
*  Override de certaines couleurs/grille et nouveaux styles
================================================== */

.pageEntete {
	background-image:url(../img/entetes/entete_carriere.jpg);
	background-size: cover;
	/*min-height: 450px;*/
	margin-bottom:0;
}
.pageEntete hr.separateur {
	height:3px;
	border-top:3px solid #fff;
	margin:20px 0;
	max-width:150px;
}
.pageEntete .slogan {
	color:#fff;
	font-size:1.714285714285714em; /* 24/14 */
	line-height:1.2;
	font-weight:600;
	margin:25px 0 0 0;
}
.accrocheEntete {
	margin-bottom:0;
}


h2.titreStrate {
	font-size:2.285714285714286em; /* 32px / 14px */
	font-weight:400;
	line-height:1.2;
	color: #2B2E34;
	margin: 0 0 30px 0;
	text-align: center;
}


/* Emplois offerts */
.sEmplois {
	padding:50px 0;
	background: #FCFAF2;
}
.sEmplois h3.categorie {
	font-size:1.142857142857143em; /* 16px / 14px */
	line-height:1.2;
	font-weight:700;
	text-transform: uppercase;
	color: #000;
	padding-bottom: 5px;
	border-bottom: 1px dotted #000;
	margin: 70px 0 30px 0;
}
.sEmplois .onglets2 .nav {
	margin-bottom: 20px;
}
.sEmplois .onglets2 .nav .shortName {
	display: none;
}
.sEmplois .onglets2 .nav,
.sEmplois p {
	font-size:1.142857142857143em; /* 16px / 14px */
}
.sEmplois .onglets2 p:not(.aucunPoste) {
	margin-bottom: 1.2em;
}
.sEmplois .onglets2 strong {
	font-weight: 600;
}
.sEmplois .onglets2 p:not(.aucunPoste) strong {
	font-size:1.125em; /* 18px / 16px */
}





/* Strate des avantages */
.sAvantages {
	padding:50px 0;
}
.sAvantages h3 {
	color: #2B2E34;
	margin: 0 0 10px 0;
	text-transform: uppercase;
}
.lstAvantages {
	display:flex;
	justify-content:space-evenly;
	flex-wrap:wrap;
	margin:30px 0 0 0;
	padding:0;
	list-style-image:none;
	list-style-type:none;
}
.lstAvantages > li {
	display:flex;
	width:25%;
	/*flex:1 0 auto;*/
	padding:10px;
	margin:0;

	border-right:1px dotted #A4A7A2;
}
.lstAvantages.pour3 > li {
	width:33.33333333%;
}
.lstAvantages > li:last-child {
	border-right:0;
}
.lstAvantages li > div {
	width: 100%;
	text-align:center;
}
.lstAvantages li li {
	margin: 6px 0;
}
.lstAvantages .icone {
	display:block;
	height: 102px;
	width: 102px;
	background:#EAF3E6 no-repeat center center;
	border-radius: 50%;
	margin:0 auto 30px auto;
	text-align:center;
}
/*.lstAvantages .icone:hover {
	outline: 10px solid #EAF3E6;
}*/
.lstAvantages .icone.vacances {
	background-image:url(../img/site_drh/ico_vacances.svg);
}
.lstAvantages .icone.horaire {
	background-image:url(../img/site_drh/ico_horaire.svg);
}
.lstAvantages .icone.mieuxEtre {
	background-image:url(../img/site_drh/ico_mieux_etre.svg);
}
.lstAvantages .icone.developpement {
	background-image:url(../img/site_drh/ico_developpement.svg);
}
.lstAvantages .icone.avantagesNombreux {
	background-image:url(../img/site_drh/ico_avantages_nombreux.svg);
}
.lstAvantages .icone.equilibre {
	background-image:url(../img/site_drh/ico_equilibre.svg);
}
.lstAvantages .icone.milieuDynamique {
	background-image:url(../img/site_drh/ico_milieu_dynamique.svg);
}



/* Candidature spontanée */
.sCandidature {
	padding:50px 0;
	background-color:#EADCA3;
	text-align:center;
}
.sCandidature .textWrap {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
.sCandidature h3 {
	font-size:1.142857142857143em; /* 16px / 14px */
	line-height:1.2;
	font-weight:700;
	text-transform: uppercase;
	color: #000;
	/* margin: 70px 0 30px 0; */
}
.sCandidature a {
	color: #000;
}
.sCandidature a.button {
	color: #fff;
	background: #000;
	width:auto;
	max-width:none;
	font-weight: 600;
	padding: 7px 15px;
}
.sCandidature a.button:not(:last-child) {
	margin: 0 1rem 0.5rem 0;
}
.sCandidature a.button:hover,
.sCandidature a.button:focus{
	background: #727272;
}

/* Strate de navigation (menu secondaire) */
.sMenu {
	background: #333;
	padding: 50px 0;
}
.sMenu .lesLiens {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;

	list-style:none;
	padding:0;
	margin:0;
}
.sMenu .lesLiens > li {
	display:flex;
	flex-direction:column;

	width:31%;
	margin: 0;
	/*margin:0 0 25px 0;*/
}

.sMenu .lesLiens a {
	/* Take available height */
	display: flex;
	flex-direction: column;
	flex-grow: 1;

	color:inherit;
	text-decoration:none;
}
.sMenu .lesLiens a:hover,
.sMenu .lesLiens a:focus {
	color:inherit;
	text-decoration:underline;
	outline:0;
}

.sMenu .lesLiens .conteneurImg {
	display: block;
	position:relative;
	aspect-ratio: 737 / 489; /* Taille de l'image */
	overflow:hidden;
}
.sMenu .lesLiens .conteneurImg span {
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	transition:transform 0.2s ease;
	background:#bbb no-repeat center center;
	background-size:cover;
}
.sMenu .pourquoi .conteneurImg span {
	background-image:url(../img/site_drh/bg_pourquoi.jpg?dec2022);
}
.sMenu .postes .conteneurImg span {
	background-image:url(../img/site_drh/bg_postes.jpg?dec2022);
}
.sMenu .faq .conteneurImg span {
	background-image:url(../img/site_drh/bg_faq.jpg?dec2022);
}

.sMenu .lesLiens a:hover .conteneurImg span,
.sMenu .lesLiens a:focus .conteneurImg span {
	transform:scale(1.05);
}

.sMenu .lesLiens .titreLien {
	/* Take available height */
	flex-grow:1;
	flex-shrink:0;
	background-color:#fff;
	padding:25px 20px;

	/* Centrer le texte verticalement */
	/*display: flex;
	flex-direction: column;
	justify-content: center;*/

	font-size:1.285714285714286em; /* 18/14 */
	line-height:1.444444444444444; /* 26/18 */
	color:#2B2E34;
	font-weight:600;
	margin:0;
	text-transform: none;
}

/* Informations supplémentaires */
.sComplement {
	padding: 50px 0;
	text-align:center;
}
.sComplement .textWrap {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}


@media only screen and (max-width: 1023px) {
	.lstAvantages > li,
	.lstAvantages.pour3 > li {
		width:50%;
		padding:10px;
	}
	.lstAvantages > li:nth-child(2n) {
		border-right: 0;
	}
	.lstAvantages li > div {
		max-width: 200px;
		margin: 0 auto;
	}
}


/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {

}

@media only screen and (max-width: 767px) {
	.pageEntete.h400 {
		min-height: 300px;
	}
	.pageEntete h1.titrePage{
		margin: 20px 0;
	}
	.pageEntete .slogan {
		font-size:1.285714285714286em; /* 18/14 */
	}


	.sAvantages,
	.sEmplois,
	.sCandidature,
	.sMenu,
	.sComplement {
		padding:30px 0;
	}

	.sMenu .lesLiens > li {
		width:47.5%;
		margin:0 0 5% 0;
	}


	.sEmplois .onglets2 .nav .fullName {
		display: none;
	}
	.sEmplois .onglets2 .nav .shortName {
		display: inline;
	}
}

@media only screen and (max-width: 599px) {
	.lstAvantages > li,
	.lstAvantages.pour3 > li {
		width:100%;
		padding:20px 0;
		max-width: 300px;
		margin: 0 auto;
	}
	.lstAvantages.lstAvantages > li:first-child {
		padding-top:0;
	}
	.lstAvantages.lstAvantages > li:last-child {
		padding-bottom:0;
	}
	.lstAvantages.lstAvantages > li,
	.lstAvantages.lstAvantages > li:nth-child(2n) {
		border-right: 0;
	}
	/*.lstAvantages > li + li{
		border-top:1px dotted #fff;
	}*/




	.sMenu .lesLiens > li {
		width:100%;
	}
	.sMenu .lesLiens > li:last-child {
		margin-bottom:0;
	}
	.sMenu .lesLiens .conteneurImg {
		aspect-ratio: 16 / 8; /* Format "allongé" puisque 1 par ligne */
	}
}


@media only screen and (max-width: 479px) {

}

@media only screen and (min-width: 960px) {

}

@media only screen and (min-width: 1671px) {
	.pageEntete {
		background-image:url(../img/entetes/entete_carriere_large.jpg);
	}
}
