/*

Site internet JPA WG
Version : 2.1
Site	: https://jpa-wg.com

Theme 	: jpai 2.1
Author	: Integration : Yann Lobry

*/



#meme-langage {
	padding: 6vw 0 0;
}

#meme-langage .fond {
	background-color: #E5F5F5;
	 position: absolute;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 width: 100%;
	 height: 100%;
	 z-index: -2;
}

#meme-langage > div {
	padding: 0 6.6vw;
}

.titre-filet {
	font-weight: 300;
	 position: relative;
	 margin: 0 0 5.8vw 0;
	 color: #222;
	 text-align: center;
	 line-height: 1.3em;
	 font-size: 4.65em;
	 letter-spacing: 0.01em;
}

#meme-langage .titre-filet {
	margin-bottom: 3vw;
}


#meme-langage-nav {
	list-style-type: none;
	margin-bottom: 7vw;
}

#meme-langage-nav li {
	float: left;
	width: 16.6666%;
}

#meme-langage-nav a {
	display: block;
	text-align: center;
	position: relative;
}

#meme-langage-nav .active a:after {
	content: '';
	 display: block;
	 position: absolute;
	 bottom: -1.3vw;
	 left: 50%;
	 width: 9.2vw;
	 height: 0.7vw;
	 background-color: #009CA3;
	 transform: translateX(-50%);
}

#meme-langage-nav .container-image {
	display: block;
	margin: 0 auto 0.75vw;
	width: 5.073vw;
	height: 6.928vw;
	padding-top: 2vw;
	position: relative;
	-o-transition: all .2s;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s;
}

#meme-langage-nav  .active .container-image {
	width: 7vw;
	padding-top: 0;
}

#meme-langage-nav a .container-image svg {
	fill:#1A1E23;
	width: 100%;
	height: auto;
	-o-transition: all .2s;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s;
}

#meme-langage-nav a .container-image svg.picto-deux {
	fill: #009CA3;
	position: absolute;
	top: 0;
	transform: translate(-0.15vw, 0.15vw);
	z-index: -1;
	opacity: 0;
}

#meme-langage-nav .active a .container-image svg.picto-deux {
	opacity: 0.5;
}

#meme-langage-nav .container-intitule {
	display: block;
	 padding-top: 0;
	 -o-transition: all .2s;
	 -webkit-transition: all .2s;
	 -moz-transition: all .2s;
	 transition: all .2s;
	 color: #1A1E23;
	 text-align: center;
	 font-weight: 500;
	 font-size: 1.35em;
	 line-height: 1.35em;
}

/*#meme-langage-nav .container-intitule span {
	position: relative;
	display: inline-block;
}

#meme-langage-nav .container-intitule span:before {
	display: block;
	 content: '';
	 position: absolute;
	 top: 0.6vw;
	 left: -1.2vw;
	 width: calc(100% + 1.7vw);
	 height: 64%;
	 background-color: #FBDE10;
	 z-index: -1;
	 opacity: 0;
	 -o-transition: all .2s;
	  -webkit-transition: all .2s;
	  -moz-transition: all .2s;
	  transition: all .2s;
}

#meme-langage-nav .active .container-intitule span:before {
	opacity: 1;
}*/

#cont-meme-langage-slide {
	
}

#meme-langage-slide h4 {
	 margin-bottom: 1.7vw;
	  opacity: 0;
	  -o-transition: all 2s;
	  -webkit-transition: all 2s;
	  -moz-transition: all 2s;
	  transition: all 2s;
	  color: #222;
	  text-align: center;
	  font-weight: 700;
	  font-size: 1.58em;
	  line-height: 1.35em;
}

#meme-langage-slide .slick-active h4 {
	opacity:1;
}

#meme-langage-slide h4 span.titre-souligne {
	position: relative;
	display: inline-block;
}

#meme-langage-slide h4 span.titre-souligne:before {
	display: block;
	 content: '';
	 position: absolute;
	 top: 0.8vw;
	 left: -0.2vw;
	 width: calc(100% + 0.4vw);
	 height: 64%;
	 background-color: #b7e4e4;
	 z-index: -1;
}

#meme-langage-slide p {
	 font-weight: 400;
	  opacity: 0;
	  -o-transition: all 2s;
	  -webkit-transition: all 2s;
	  -moz-transition: all 2s;
	  transition: all 2s;
	  color: #222;
	  text-align: center;
	  font-size: 1.27em;
	  line-height: 1.55em;
}

#meme-langage-slide .slick-active p {
	opacity:1;
}

#meme-langage-slide p strong {font-weight: 600;}

#meme-langage-slide p em {font-weight: 400;}




#txt-final-commun {
	padding: 4vw 0 5.2vw;
}

#txt-final-commun .container-logo {
	 margin: 0 auto 0.8vw;
	 width: 6.1vw;
	 height: 7.5vw;
}

#txt-final-commun .container-logo img {
	width: 100%;
	height: auto;
}

#txt-final-commun p {
	text-align: center;
}

#txt-final-commun p.un {
	 color: #1A1E23;
	 font-style: italic;
	 font-weight: 400;
	 font-size: 1.27em;
	 line-height: 1.45em;
	 margin-bottom: 4vw;
}







@media screen and (min-width: 1281px) {
	
	#meme-langage {
		padding: 77px 0 0;
	}
	
	#meme-langage .fond {
		width: 106vw;
		 left: 50%;
		 transform: translateX(-50%);
		 right: auto;
		 border-top: solid 1px #e7e7e7;
	}
	
	#meme-langage > div {
		padding: 0 85px;
	}
	
	.titre-filet {
		 margin: 0 0 74px 0;
	}
	
	#meme-langage .titre-filet {
		margin-bottom: 38px;
	}
	
	
	#meme-langage-nav {
		margin-bottom: 90px;
	}
	
	#meme-langage-nav .active a:after {
		bottom: -17px;
		 width: 118px;
		 height: 9px;
	}
	
	#meme-langage-nav .container-image {
		margin: 0 auto 10px;
		 width: 65px;
		 height: 89px;
		 padding-top: 26px;
	}
	
	#meme-langage-nav  .active .container-image {
		width: 90px;
		padding-top: 0;
	}
	
	#meme-langage-nav a .container-image svg.picto-deux {
		transform: translate(-2px, 2px);
	}
	
	#meme-langage-nav .container-intitule {
		 padding-top: 0;
	}
	
	#meme-langage-slide h4 {
		 margin-bottom: 22px;
	}
	
	#meme-langage-slide h4 span.titre-souligne:before {
		top: 11px;
		 left: -2px;
		 width: calc(100% + 4px);
	}
	
	#txt-final-commun {
		padding: 51px 0 67px;
	}
	
	#txt-final-commun .container-logo {
		margin: 0 auto 10px;
		 width: 78px;
		 height: 96px;
	}
	
	#txt-final-commun p.un {
		 margin-bottom: 51px;
	}
	
}





@media screen and (max-width: 1060px) {
	
	#meme-langage .titre-filet {
		 margin-bottom: 32px;
	}
	
	#meme-langage-slide h4 {
		 margin-bottom: 18px;
		 font-size: 17px;
	}
	
	#meme-langage-slide p {
		 font-size: 14px;
	}
	
	#txt-final-commun {
		 padding: 42px 0 55px;
	}
	
	#txt-final-commun .container-logo {
		 margin: 0 auto 8px;
		 width: 65px;
		 height: 80px;
	}
	
	#txt-final-commun p.un {
		 font-size: 14px;
		 margin-bottom: 42px;
	}
	
}






@media screen and (max-width: 920px) {
	
	#meme-langage-nav {
		margin-bottom: 37px;
	}
	
	#meme-langage-nav .container-image {
		 margin: 0 auto 7px;
		 width: 47px;
		 height: 63px;
		 padding-top: 18px;
	}
	
	#meme-langage-nav a .container-image svg.picto-deux {
		transform: translate(-1.4px, 1.4px);
	}
	
	#meme-langage-nav .container-intitule {
		font-size: 13px;
	}
	
	#meme-langage-nav .container-intitule span:before {
		 top: 6px;
		 left: -11px;
		 width: calc(100% + 16px);
	}
	
	#meme-langage-nav .active .container-image {
		width: 64px;
	}
	
}






@media screen and (max-width: 820px) {
	
	#meme-langage > div {
		 padding: 0 6.3vw;
	}
	
}





@media screen and (max-width: 805px) {
	
	#meme-langage {
		padding-top: 60px;
	}
	
}






/* responsive via JS pour Meme language < 805px */

.meme-lang-unslicked #container-meme-langage-nav {
	display: none;
}

.meme-lang-unslicked #meme-langage-slide {
	/*display: flex;
	flex-wrap: wrap;
	justify-content: space-between;*/
}

.meme-lang-unslicked .meme-langage-un-slide {
	/*width: 46%;*/
	margin-bottom: 42px;
}

.meme-lang-unslicked .meme-langage-un-slide#service-six {
	margin-bottom: 0;
}

.meme-lang-unslicked #meme-langage-slide h4 {
	opacity: 1;
	text-align: left;
}

.meme-lang-unslicked #meme-langage-slide p {
	opacity: 1;
	text-align: left;
}

.meme-langage-un-slide .picto-clone {
	display: block;
	 float: left;
	 position: relative;
	 width: 91px;
	 margin: 9px 20px 0 0;
}

.meme-langage-un-slide .picto-clone svg {
	fill: #1A1E23;
	 width: 100%;
	 height: auto;
}

.meme-langage-un-slide .picto-clone svg.picto-deux {
	fill: #009CA3;
	 position: absolute;
	 top: 0;
	 transform: translate(-3px, 2px);
	 z-index: -1;
}







@media screen and (max-width: 990px) {
	
	#meme-langage .titre-filet {
		font-size: 48px;
	}
	
}







@media screen and (max-width: 740px) {
	
	#meme-langage .titre-filet {
		 font-size: 40px;
	}
	
}









@media screen and (max-width: 655px) {
			
	#meme-langage-slide #service-quatre h4 span.titre-souligne {
		display: inline;
	}
	
	#meme-langage-slide #service-quatre h4 span.titre-souligne:before {
		display: none;
	}
	
	#meme-langage-slide #service-quatre h4 span.titre-souligne-deux {
		position: relative;
		 display: inline-block;
	}
	
	#meme-langage-slide #service-quatre h4 span.titre-souligne-deux:before {
		display: block;
		 content: '';
		 position: absolute;
		 height: 64%;
		 background-color: #b7e4e4;
		 z-index: -1;
		 top: 11px;
		  left: -3px;
		  width: calc(100% + 6px);
	}
	
}






@media screen and (max-width: 555px) {
	
	#meme-langage .titre-filet {
		text-align: left;
	}
	
}







@media screen and (max-width: 495px) {
	
	#meme-langage-slide #service-un h4 span.titre-souligne {
		display: inline;
	}
	
	#meme-langage-slide #service-un h4 span.titre-souligne:before {
		display: none;
	}
	
	#meme-langage-slide #service-un h4 span.titre-souligne-deux {
		position: relative;
		 display: inline-block;
	}
	
	#meme-langage-slide #service-un h4 span.titre-souligne-deux:before {
		display: block;
		 content: '';
		 position: absolute;
		 height: 64%;
		 background-color: #b7e4e4;
		 z-index: -1;
		 top: 11px;
		  left: -3px;
		  width: calc(100% + 6px);
	}
	
}







@media screen and (max-width: 420px) {
	
	#meme-langage > div {
		 padding: 0 9.6vw;
	}
	
	#meme-langage .titre-filet {
		 font-size: 30px;
	}
	
}








@media screen and (max-width: 385px) {
		
	#meme-langage-slide #service-deux h4 span.titre-souligne {
		display: inline;
	}
	
	#meme-langage-slide #service-deux h4 span.titre-souligne:before {
		display: none;
	}
	
	#meme-langage-slide #service-deux h4 span.titre-souligne-deux {
		position: relative;
		 display: inline-block;
	}
	
	#meme-langage-slide #service-deux h4 span.titre-souligne-deux:before {
		display: block;
		 content: '';
		 position: absolute;
		 height: 64%;
		 background-color: #b7e4e4;
		 z-index: -1;
		 top: 11px;
		  left: -3px;
		  width: calc(100% + 6px);
	}
	
	#txt-final-commun .lien-fond-jaune span {
		display: none;
	}
	
}





@media screen and (max-width: 370px) {
	
	#meme-langage-slide #service-six h4 span.titre-souligne {
		 display: inline;
	}
	
	#meme-langage-slide #service-six h4 span.titre-souligne:before {
		display: none;
	}
	
	#meme-langage-slide #service-six h4 span.titre-souligne-deux {
		 position: relative;
		 display: inline-block;
	}
	
	#meme-langage-slide #service-six h4 span.titre-souligne-deux:before {
		 display: block;
		 content: '';
		 position: absolute;
		 height: 64%;
		 background-color: #b7e4e4;
		 z-index: -1;
		 top: 11px;
		 left: -3px;
		 width: calc(100% + 6px);
	}
	
	#meme-langage-slide #service-six h4 .nowrap {
		white-space: normal;
	}
	
}