body {background-color: #FBF6F1;}


.home-intro-container .side-container{
	background: #f0ecf0;
}


.main, 
.top-container{
	color: #000000;
}


body.page-beauty .block-color{
	background-color:inherit;}

/*Jumbotron*/

	.page-beauty .jumbotron.jumbotron-bg-right {
		background-position-x: 76%;
		background-position-y: top;
		background-size: auto 92%;
	}

	.page-beauty .jumbotron .content-container{
		max-width: 600px;
	}

	.page-beauty .content-container h1.hero-title{margin-top: 10px;}


	.page-beauty .content-container h1.hero-title {
		font-size: 50px;
		line-height: 56px;
	}

	.page-beauty .jumbotron .content-container .hero-description{
		font-size: 20px;
		line-height: 28px;
		margin-top: 36px;
		max-width: 60rem;
		letter-spacing: normal;
	}

	
	
.ancres-jumbo {
	margin-top:40px;
}
	
	.ancres-jumbo a{
		font-size: 1.5rem;
		display: inline-table;
		border-radius: 25px;
		background: #E8F4FC;
		padding: 6px 16px;
		height: 13px;
		text-decoration: none;
		color:#32414B;
		text-align:center;
	}
		
		.ancres-jumbo a:first-child{
			margin-right:40px;
		}
	
	
	
		.ancres-jumbo a:hover{
			background:#aedcf3;
		}	

@media (max-width: 767px){
	.jumbotron-gradient{background-image: none;}
}

@media (max-width: 490px) {

	.ancres-jumbo{
		display: table;
		margin-bottom: 8px;
	}
	
	.jumbotron.jumbotron-bg-right{
		background-position-y: bottom;
		background-size: auto 55%;
	}
	
}	



	.page-beauty .jumbo-mobile{
		display: none;
	}



	@media (max-width: 1570px) {
		.page-beauty .jumbotron.jumbotron-bg-right{
			background-position-x: 90%;
		}
	}	

	@media (max-width: 1300px) {
		.page-beauty .jumbotron.jumbotron-bg-right{
			background-position-x: 100%;
		}
	}	

	@media (max-width: 1200px) {

		.page-beauty .jumbotron .container{
			width: 100%;
		}

		.page-beauty .jumbotron .content{padding-left: 25px;}
	}	

	@media (max-width: 1000px) {
		.page-beauty .jumbotron.jumbotron-bg-right{
			background-size: auto 86%;
		}

		.page-beauty .jumbotron .content-container .hero-description{max-width: 47rem;}
	}	
	
	@media (max-width: 875px) {

		.page-beauty .jumbotron .content-container .hero-description{max-width: 45rem;}
		.page-beauty .jumbotron .content-container .hero-description{
			max-width: 100%;
			font-size: 18px;
			line-height: 26px;}		

		.page-beauty .jumbotron.jumbotron-bg-right{
			background-size: auto 80%;
		}			

		.page-beauty .content-container h1.hero-title{
			font-size: 40px;
			line-height: 48px;
		}
	}	
	
	@media (max-width: 767px) {
		
		.page-beauty .jumbotron.jumbotron-standard.jumbotron-white.jumbotron-with-bgcolor.jumbotron-bg-right{
			height: auto;
			background-image: none !important;
			padding-top:0px;
		}

		.page-beauty .jumbo-mobile{
			display: block;
			width: 100%;
			margin-bottom:20px;
		}

		.page-beauty .jumbotron .content-container{
			width: 94%;
			max-width: 730px;
			margin: 0;
		}

		.page-beauty .content-container h1.hero-title{margin-top: 0px;}

		.page-beauty .jumbotron .content-container .hero-description{
			margin-top: 23px;
		}
		
		.ancres-jumbo a:first-child{margin-right:30px;}

	}	

	@media (max-width: 400px) {
		.page-beauty .jumbo-mobile{
			margin-bottom:8px;
		}
		.ancres-jumbo a:first-child{margin-right:20px;}
	}
	
	@media (max-width: 365px) {
		.page-beauty .jumbo-mobile{
			margin-bottom:5px;
		}
		
		.ancres-jumbo a{padding:6px 10px;}
		.ancres-jumbo a:first-child{margin-right:10px;}
	}	
		
	/* CSS  - FIN JUMBOTRON */


.grid-articles-promotions{
	margin-top:175px;
}

/*Bloc Article Simple - Conseil/Service */

.page-beauty .bloc-simple-img-txt{
	margin-top: 90px;
	margin-bottom: 140px;
}

	.page-beauty .bloc-simple-img-txt .articles-img-container {
		text-align:right;
	}

		.page-beauty .bloc-simple-img-txt .articles-img-container img{
			max-height:401px;
			width:auto;
		}

.page-beauty .bloc-simple-img-txt .articles-text-container{
	padding: 6% 4% 4%;
}


.page-beauty .bloc-simple-img-txt h1{
	text-transform: none;
	text-align: left;
	margin-bottom: 26px;
	line-height: 48px;
	letter-spacing: normal;
	
}

.page-beauty .bloc-simple-img-txt p{
	line-height: 28px;
	letter-spacing: normal;
	text-align: left;
	padding: 0px 0 3rem;
	font-size:20px;
}
	
.page-beauty .bloc-simple-img-txt p a{
	text-decoration: underline;
	color:#212121;
	font-weight:bold;
	font-size:18px;
	line-height: 25px;
	display:block;
}

	.page-beauty .bloc-simple-img-txt p a:hover{
		text-decoration: none;
	}


@media (max-width: 1023px) {
	.page-beauty .bloc-simple-img-txt .articles-text-container{
		padding: 5% 4% 3% 0%;
	}

}

@media (max-width: 995px) {
	.page-beauty .bloc-simple-img-txt .articles-text-container{
		padding: 5% 4% 3% 2%;
	}

}

@media (max-width: 990px) {
	.page-beauty .bloc-simple-img-txt .articles-text-container{
		padding: 5% 0% 0%;
	}
	
	.page-beauty .bloc-simple-img-txt .articles-img-container{padding-right: 2%;}

}

@media (max-width: 767px) {
	.page-beauty .bloc-simple-img-txt .articles-text-container{
		padding: 5% 2% 0%;
	}
	
}


@media (max-width: 740px) {
	.page-beauty .bloc-simple-img-txt .articles-text-container{padding-top: 17px;}	

	.page-beauty .bloc-simple-img-txt h1{ font-size: 34px; line-height:44px ;}

	.page-beauty .bloc-simple-img-txt{
		margin-bottom: 85px;
        margin-top: 40px;}

}
	
@media (max-width: 475px) {
	.page-beauty .bloc-simple-img-txt .articles-text-container{
		padding: 5% 4% 0%;
	}
	
	.page-beauty .bloc-simple-img-txt .articles-img-container{padding: 0px 2%;}
	

}	

/*Bloc Article Simple - Conseil/Service*/

/*Bloc Quand consulter votre pharmacien(ne)? id=bloc-consulter */

#bloc-consulter
{background-color:#ffffff;}

#bloc-consulter .block-color{
	padding-bottom: 130px;}


#bloc-consulter .block-color p{max-width: 90rem; padding-bottom:3rem;}

#bloc-consulter .col-md-6.div_consulter {
	border-radius:16px;
	border:1px solid #E2E2E2; 
	padding:27px 24px 32px;
	margin: 0 10px;
    width: 48%;
	min-height:350px;
	position:relative;
}


	#bloc-consulter .div_consulter .title-side h3{
		font-size:32px;
		line-height:38px;
		margin-top: 0;
		margin-bottom:21px;
		letter-spacing:normal; 
		font-family: 'Figtree';
	}
	
	
	#bloc-consulter .div_consulter#side2 .title-side h3{max-width: 365px;}
	#bloc-consulter .bloc-anglais .div_consulter#side2 .title-side h3{max-width: 290px;}

	
	
	#bloc-consulter .div_consulter .title-side .icon{
		border-radius: 16px;
		background:#008ED0;
		position:relative;
		width:64px;
		height:64px;
		float: left;
		margin: 5px 16px 0 0;
	}	
	
		#bloc-consulter .div_consulter .title-side .icon img{
			position:absolute;
			top: 18%;
			left: 19%;
		}	

	#bloc-consulter .col-md-6.div_consulter ul { 
		padding-left:28px;
	}

	#bloc-consulter .col-md-6.div_consulter .btn-container{
		position: absolute;
		bottom: 32px;
	}


@media (max-width: 1200px) {
	#bloc-consulter .col-md-6.div_consulter{
		margin:0 6px 30px;
		min-height:372px;
	}
	
		
		#bloc-consulter .div_consulter .title-side h3{font-size:30px; line-height:36px;}
		#bloc-consulter .div_consulter .title-side .icon{margin:5px 12px 15px 0;}
}

@media (max-width: 990px) {
	#bloc-consulter .col-md-6.div_consulter{
		width:auto;
		margin:0 0 30px;
	}
	
		#bloc-consulter .div_consulter .title-side .icon{margin:0 0 20px;float: none;}
		
		#bloc-consulter .col-md-6.div_consulter .btn-container{
			position: initial;
		}
	
		    
}

@media (max-width: 767px) {
	#bloc-consulter .col-md-6.div_consulter{
		margin:0 2% 30px;
	}
	    
}

/*Balado*/

#pagehome_balado .block-color{
	margin-top: -40px;
}
	

/*3 Conseils*/

#conseils{
	background-color:#FBF6F1;
	margin-top: -15px;
}


#conseils .block-button-div{
	background-color: #FBF6F1;
	padding-top:40px;
	margin-top:0;
}

#conseils .container-title {margin-top:0px;}



/*temp*/


.bloc-en-bref{
	padding: 0px;
    max-width: 1200px;
	min-height: 250px;
    margin: 0 auto 45px;
    display: -webkit-flex; /* Safari */     
    display: flex; /* Standard syntax */
}

.bloc-en-bref .cote-ga,
.bloc-en-bref .cote-dr{
    text-align: left;
	background: #fff;
	
	/*
	-webkit-flex: 1;  Safari 
    -ms-flex: 1;  IE 10
    flex: 1;  Standard syntax 
	*/
	
    width:50%;
	}
.bloc-en-bref .cote-dr{
	background: #F5D4C2;
	padding: 0px;
	position:relative;
	width:50%;
}

.bloc-en-bref .cote-dr .infos{
	display:none;
}
.bloc-en-bref .cote-dr .active{
	display:block;
	position: relative;
    height: 100%;
}
.bloc-en-bref .cote-dr .active .btn-lg{
	padding: 8px 20px;
}

.bloc-en-bref .cote-ga{padding: 30px 45px;}
	
	
.infos {
	position: absolute;
}

.bloc-en-bref .lien{
	cursor: pointer;
	display: block;
    padding-bottom: 5px;
    width: 40px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
}

.bloc-en-bref .lien .sujet{
	cursor: pointer;
}

.bloc-en-bref .lien:hover{
    width: 100%;
}

.lien.active{
    width: 100%;
}


.bloc-en-bref .lien:focus{
    width: 100%;
}

.txt-sujet{
    font-family: 'Nexa';
    font-size: 16px;
    width: 100%;
    display: block;
    margin:0 0 25px;
}



.img-container{
    display: inline-block;
    position: relative;
    width: 100%;
}
.img-container img{
    max-width: 480px;
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;	
}
.txt-container{
	margin:0 30px 30px;
	position: absolute;
    bottom: 0;
}


@media (max-width: 490px) {
	.bloc-en-bref{padding: 0 2%;}


	.img-container{
		margin-top: 30px;

	}
	.txt-container{

		margin: 0 17px 17px;
	}

.bloc-en-bref .cote-ga{padding: 15px;}

}



/*MOBILE Types de peau*/


@media (max-width: 490px) {

	.titre-section, .titre-section#types{
		margin:20px 4px;
		line-height: 1.1em;
		font-size:2.6rem;
	}
	
	.bloc-back{
		top:-10px;
		z-index: 5;
		width:310px;
		height:310px;
		left: -4px;
	}
	
	.bloc-back .txt{
		margin:14px 0;
	}
	
	.bloc-back ul {
		font-size: 13px;
	}
	
	.bloc-back ul li{
		margin-bottom: 3px;
	}
	
	#grasse .bloc-back ul{ margin-left: 34px;}
	#seche .bloc-back ul{ margin-left: 7px;}
	#normale .bloc-back ul { margin-left: 38px;}
}	

@media (max-width: 320px) {

	
	.bloc-back{
		width:300px;
		height:300px;
		left: -2px;
	}
	

	
	.txt-sujet	{
		line-height: 1.3em;
		margin: 0 0 17px;}
	
	.titre-section, .titre-section#types{
		line-height: 1em;
	}

	
}	

/*Types de peau*/

#types-peau-temp{margin-top: 40px;}
#types-peau-temp .text-center{padding-bottom: 60px;}
.type-peau-component p.type a{text-decoration:none; color:#232323;}

.type-peau-component{
	width:300px;
	position: relative;
	margin: 15px 0;
}

.type-container{
	display: inline-flex;
	flex-wrap: wrap;
	gap:0px;
	justify-content: center;
	padding:0;
}


	.bloc-type-peau .type{	
		font-size:1.6em;
		padding: 0;
		text-transform: uppercase;
	}
		
	.bloc-type-peau .img-type{
		margin-bottom: 15px;
		width: 195px;
	}
	
	
.bloc-back{
	display:none;
	position:absolute;
	border-radius: 50%;
    background: white;
    border: 2px solid #9e869f;
    top:-3px;
    left:0;
    width: 330px;
    height:330px;
	z-index: 5;
}
.bloc-back .back-content{
	margin:-8px 15px 0;
}
.bloc-back.active{
	display: grid;
    /*place-items: center;*/
}
.bloc-back .type{
	padding:0;
	font-size: 1.6em;
	text-transform: uppercase;
}
.bloc-back .txt{
	padding:0;
	font-family: Roboto;
	font-size: 14px;
	margin: 20px 0;
    line-height: 1.3em;
	font-weight: 500;
}

.bloc-back ul{
	/*list-style-position: inside;*/
    text-align: left;
	margin-left: 20px;
}
.bloc-back ul li {
	font-family: Roboto;
	font-size: 14px;
	margin-bottom: 5px;
}

#normale .bloc-back ul{
	margin-left: 59px;
}
#grasse .bloc-back ul{
	margin-left: 46px;
}


	
/*À chaque peau ses soins*/


.block-narrow{
	margin-top:0px;
	border-bottom: 1px solid #31393e;
}


.block-narrow p.txt-soins {padding: 0; margin: 25px auto 0;}
 
.faq-expand{
	background-color: #F5D4C2;
	padding: 25px 0px 20px;
    margin-bottom: 0;
	border-bottom: 1px solid #31393e;
	
}
.faq-question{margin-top:0px; margin-left: 85px;}

.faq-answer{
	background-color:#ffffff; 
	padding:30px 50px 50px;
	margin-top: 17px;
	margin-bottom: 20px;
}

.faq-answer img{
	float: left;
	width: 400px;
}

.faq-readmore{line-height: 25px;}

.faq-chevron{
	display:none;
	
}


.drawer-content{
	display: block; float: right; width: 58%;
}

.drawer-content .titre{
	font-size: 20px;
	/*font-family: NexaBold;*/
}
.drawer-content p{
	margin: 8px 0 16px;
	font-weight: normal;
}
.drawer-content .sous-titre{
	font-family: Roboto;
	font-style: italic;
	font-weight: 500;
}
.drawer-content li{
	font-weight: regular;
}


@media (max-width: 1200px) {
	.drawer-content {
	    margin:0px auto;
	}
}

@media (max-width: 992px) {
	
	.faq-question{
		margin-left: 45px;
	}
	
	.faq-answer{
		padding: 19px 43px 14px;
	}
	
	.drawer-content{
		width: 51%;
		margin:0px;
	}
}


@media (max-width: 767px) {
	.faq-question{
		margin-left: 60px;
	}
}

@media (max-width: 490px) {
	.block-narrow{
		margin-top:-30px;
	}	
	
	.block-narrow h2{
		font-size: 26px;
	}	
	
	.faq-question{
		margin-left: 20px;
		font-size: 18px;
	}
	.faq-readmore{margin-top: 9px;}
	
	.faq-answer{
		background-color:transparent; 
		padding:0px;
		margin-top: 0px;
		margin-bottom: 20px;
	}

	.faq-answer img{
		width: 100%;
	}
	
	.drawer-content{
		width: 100%;
		font-size: 14px;
		padding: 20px;
		background-color: #f6f4f6;
		margin: 0 auto;
		
	}

	.drawer-content .titre{
		font-size: 16px;
	}

	
	
}
	


	
.toggle_cv, .close_cv {
	background-color:#E09E85;
	cursor: pointer;
	display: block;
    border-radius: 25px;
    padding: 0px;
    width: 30px;
    height: 30px;
    line-height: 1em;
    margin: 0 auto;
}

.close_cv{margin-top: 20px;}

.toggle_cv:hover, .close_cv:hover {background-color:#F5D4C2;}

.toggle_cv p, .close_cv p{color:#fff;line-height: 30px;}

.toggle_cv .open{font-size: 24px;}
.close_cv .hide_type{font-size: 21px;padding:0px;}

.fermer .hide_type{
	color:#fff;
	font-size: 21px;
}

.fermer:hover {background-color:#9e869f;}