body {background-color: #e1f8fe;}


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

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

.main{
	margin-top:-20px;
	backround-color: #e1f8fe;
	no-repeat top center;
}


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



.titre-section{
	text-transform:none;
	display: block;
	margin:20px 0 30px;
	font-size: 3.5rem;
    line-height: 1;
	letter-spacing: .02em;
    font-family: FigtreeBook;
    font-weight: 400;
	color: #525254;
    font-style: normal;}
	.titre-section#types{margin-bottom:50px;}



/*Blocs*/

body.page-health .block-color .premier-arret{
	background: url('https://www.brunet.ca/globalassets/sante/sante-voyage/2024/bloc-premier-arret-300x2.png') transparent no-repeat bottom left;background-size: 300px 392px;
	padding: 2rem;	
	margin-top: -6rem;	
}




.block-color-lowercase {
	border-bottom: 1px solid #31393e;
}
      
body.page-health .block-color {
    background-color: transparent;
}


.grid:nth-of-type(3) {	
	background: url('https://www.brunet.ca/globalassets/sante/sante-voyage/2024/bloc-avant-partir-300x2.png') #ffffff no-repeat top right;
	background-size: 300px 392px;	
	padding: 2rem;	
	margin-top: -6rem;
}

.grid:nth-of-type(4) {	
	background: url('https://www.brunet.ca/globalassets/sante/sante-voyage/2024/bloc-en-route-300x2.png') #e1f8ff no-repeat top left;
	background-size: 300px 392px;	
	padding: 2rem;	
	margin-top: -6rem;
}

.grid:nth-of-type(5) {	
	background: url('https://www.brunet.ca/globalassets/sante/sante-voyage/2024/bloc-destination-300x2.png') #ffffff no-repeat top right;
	background-size: 300px 392px;	
	padding: 2rem;	
	margin-top: -6rem;
}
.grid:nth-of-type(6) {	
	background: url('https://www.brunet.ca/globalassets/sante/sante-voyage/2024/bloc-autre-300x2.png') #f4f4f4 no-repeat top left;
	background-size: 300px 392px;	
	padding: 2rem;	
	margin-top: -6rem;
}

.block-color p.type {
	max-width: 100rem;
	text-align: left;
	color: #000000;
}

.services-sante-search {
	background: url('https://www.brunet.ca/globalassets/sante/sante-voyage/2024/fond-recherche-sante-loupe-1200.jpg') #0A6E9D no-repeat top left;	
}

.services-sante-search .container-header {
	text-align: left;
}
.services-sante-title-text {
    padding: 0 40% 0 0;
}
.services-sante-search .search-container {
    margin: 0 40% 0 0;
}

	
.premier-arret p.type a{text-decoration:none; color:#232323; padding: 1rem;}
.block-color p, .block-narrow p {padding: 1rem;}

.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;
	
	}
		
	.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;
}

div.avant-partir {
	margin-top: -80px;
}
div.en-route, div.destination, div.autres {
	margin-top: -40px;
}

	
/*À 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: transparent;
	padding: 25px 0px 20px;
    margin-bottom: 0;
	border-bottom: 1px solid #31393e;
	
}
.faq-question{margin-top:0px; margin-left: 85px;}

.faq-answer{
	background-color:#f6f4f6; 
	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: FigtreeBold;*/
}
.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) {
	
	body.page-health .block-color .premier-arret{
		background: url('https://www.brunet.ca/globalassets/sante/sante-voyage/2024/bloc-blank.png') transparent no-repeat;
		background-size: 300px 392px;	
		padding: 2rem;	
		margin-top: -6rem;	
	}
	
	.grid:nth-of-type(3) {	
		background: url('https://www.brunet.ca/globalassets/sante/sante-voyage/2024/bloc-blank.png') transparent no-repeat;
		background-size: 300px 392px;	
		margin-top: -6rem;
	}

	.grid:nth-of-type(4) {	
		background: url('https://www.brunet.ca/globalassets/sante/sante-voyage/2024/bloc-blank.png') transparent no-repeat;
		background-size: 300px 392px;	
		padding: 2rem;	
		margin-top: -6rem;
	}

	.grid:nth-of-type(5) {	
		background: url('https://www.brunet.ca/globalassets/sante/sante-voyage/2024/bloc-blank.png') transparent no-repeat;
		background-size: 300px 392px;	
		padding: 2rem;	
		margin-top: -6rem;
	}
	
	.grid:nth-of-type(6) {	
		background: url('https://www.brunet.ca/globalassets/sante/sante-voyage/2024/bloc-blank.png') transparent no-repeat;
		background-size: 300px 392px;	
		padding: 2rem;	
		margin-top: -6rem;
	}
	
	.faq-question{
		margin-left: 45px;
		margin-right: 120px;
	}
	
	.faq-answer{
		padding: 19px 43px 14px;
	}
	
	.drawer-content{
		width: 51%;
		margin:0px;
	}
	
	    .grid {
        margin-bottom: 50px;
    }
}


@media (max-width: 767px) {
	.faq-question{
		margin-left: 60px;
		margin-right: 100px;
	}
	
	.services-sante-title-text {
		padding: 0;
	}
	.services-sante-search .search-container {
		margin: 0;
	}
}

@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;
	}

	
}

/*VRAI OU FAUX*/


.popup{
	display:none;
	position:absolute;
    background: white;
    top:0;
    left:0;
}
.popup.active{
	height:462px;
	display: grid;
    /*place-items: center;*/
	padding-bottom: 10px;
}

.bloc-creme-solaire .popup.active{
    height:490px;
}

.bloc-vrai-ou-faux p,
.bloc-creme-solaire p{
	padding-bottom:0px;
}

.qstn-container{
	padding: 0px 0 30px;
}
	


.bloc-vrai-ou-faux,
.bloc-creme-solaire{
	display: inline-block;
    margin: 0 10px 25px;
	padding: 0 0 30px;
    position: relative;
    background-color: #fff;
    width:350px;
    height:462px;
}

.bloc-creme-solaire{
    height:490px;
}

.bloc-creme-solaire .toggle_cv{
	width: 40px;
    height: 40px;
}



.bloc-vrai-ou-faux img,
.bloc-creme-solaire img{width:100%;}

.bloc-vrai-ou-faux .txt,
.bloc-creme-solaire .txt{
	font-size: 18px;
    line-height: 1.3em;
	margin-top: 30px;
	margin-bottom: 20px;
}

.bloc-vrai-ou-faux .faux,
.bloc-vrai-ou-faux .vrai,
.bloc-vrai-ou-faux .fermer,
.bloc-creme-solaire .fermer{
	display: inline-table;
	background-color:#0a6e9d;
	border-radius: 25px;
	padding: 0px;
    width: 35px;
    height: 35px;
    line-height: 1em;
	margin: 0 5px;
    z-index: 8;	
}

.bloc-creme-solaire p.btn-plus{
    color: #fff;
	line-height: 1em;
    font-size: 45px;
    font-family: Figtreelight;
}
	
	
.bloc-vrai-ou-faux .vrai:hover {background-color:#0c8ed0;cursor: pointer;}

.bloc-vrai-ou-faux .faux {background-color:#755b76;cursor: pointer;}
.bloc-vrai-ou-faux .faux:hover {background-color:#9e869f;}

.bloc-vrai-ou-faux .faux img,
.bloc-vrai-ou-faux .vrai img{
	width:65%;
	padding-top: 8px;	
}

.bloc-vrai-ou-faux .fermer,
.bloc-creme-solaire .fermer{
	display: block;
	cursor: pointer;
	background-color:#755b76;
    width: 30px;
    height: 30px;
	margin: 20px auto;
}
.bloc-vrai-ou-faux .fermer .hide_type,
.bloc-creme-solaire .fermer .hide_type{
	color: #fff;
    font-size: 21px;
    padding: 0;
    line-height: 1.4em;
}
.bloc-vrai-ou-faux .fermer img,
.bloc-creme-solaire .fermer img{
	cursor: pointer;
	width:45%;
	padding-top: 6px;	
}


			
	.popup p.txt {
		margin-top: 0px;
		margin-bottom: 10px;
		
	}	

.bloc-vrai-ou-faux p.reponse,
.bloc-creme-solaire p.reponse{
	font-size:30px;
	font-family:Figtreebold;
	margin: 14px 0 12px;
}
.true{
	color:#0a6e9d;
}
.false{
	color:#755B76;
}
.popup .explication{
	text-align: left;
	line-height: 22px;
	font-size: 14px;
	height: 225px;
}

.bloc-creme-solaire .popup .explication{
	height: 350px;
	padding: 0px 4px;
}

	.bloc-creme-solaire .popup .explication p{
		text-align: left;
		line-height: 1.6em;
		margin-bottom: 5px;
	}





@media (max-width: 320px) {
	.qstn-container{
		padding: 0px;
	}
	.bloc-vrai-ou-faux,
	.bloc-creme-solaire {width: 92%;}
	
	.bloc-vrai-ou-faux p.reponse{ margin:0;}
	
	.popup.active, .bloc-vrai-ou-faux {height:430px;}
	
	.bloc-creme-solaire{height:493px;}
	
	.bloc-creme-solaire .popup .explication p{line-height:1.48em;}
	
	.popup .explication{line-height:20px;}
}

/*ABC Ingrédient*/

/*.discover--products{
	background-color: transparent;
    width: 100%;
	margin-top: 40px;
    padding: 0px 10% 70px;
    
}*/

.grid-generic .block-generic .content.absolute{
	padding-top: 70px;
}
.grid-generic .block-generic .content.absolute h3{
	font-family: Figtreebook;
}
.grid-generic .block-generic .content.absolute p{
	max-width: 500px;
	margin: auto;
	padding: 20px 0;
}

.grid-generic .block-generic .content.absolute .btn-primary{
	background-color: #132531;
	border-color: #132531;
}

@media (max-width: 1057px) {
	.grid-generic .block-generic .content.absolute{
		padding-top: 35px;
	}
	
	.grid-generic .block-generic .content.absolute p{
		max-width: 500px;
		margin: auto;
		font-size: 18px;
		padding:0px;
	}	
}


/* Conseils */ 


.grid-products .col-md-4{}

	.grid-products .col-md-4 .content.absolute{
		position:relative;
		padding-top: 25px;
		background-color: #fff;
		height: 205px;
	}
	
	.grid-products .col-md-6 .content.absolute{
		padding-top: 25px;
		margin-left: 41%;
	}
	
.grid-products .col-md-6 .content.absolute h3{line-height:30px;}

	
	
	
	
.page-beauty .grid-generic .grid-products .block-generic:hover .btn{color:#fff;}



@media (min-width: 1680px) {
	
	.grid-generic .col-md-6 .content.absolute p,
	.grid-generic .col-md-4 .content.absolute p{
		margin: 0px !important; 
	}
	
}



@media (max-width: 1317px) and (min-width: 767px) {
	
	.grid-products .col-md-6 .content.absolute{
		/*margin-left: 197px;*/
	}
	
}

@media (max-width: 1240px) and (min-width: 767px) {
	
	.grid-products .col-md-6 .block-generic .content.absolute h3,
	.grid-products .col-md-4 .block-generic .content.absolute h3{
		font-size:2rem !important;
		line-height: 1.1em;
	}
	
}

@media (max-width: 1145px) and (min-width: 767px) {
	
	.grid-products .col-md-6 .block-generic .content.absolute p,
	.grid-products .col-md-4 .block-generic .content.absolute p{
		line-height: 1.1em;
		padding-top:10px;
		margin: 0;
	}
	
}


@media (max-width: 1115px) and (min-width: 767px) {
	
	.grid-products .col-md-6 .content.absolute{
		/*margin-left: 167px;*/
	}
	
}

@media (max-width: 1090px) and (min-width: 767px) {
	
	.grid-products .col-md-6 .block-generic .content.absolute p{
		line-height:1.4em !important;
		    font-size: 13px !important;
			}
			
	.grid-products .col-md-6 .content.absolute{
		/*margin-left: 153px;*/
	}
	
	
	
}


@media (max-width: 1005px) and (min-width: 992px) {
	
	.grid-products .col-md-6 .block-generic .content.absolute {
		padding-top:15px;
		margin-left: 147px;
	}
	
}

@media (max-width: 991px) and (min-width: 767px) {
	
	.grid-products .col-md-6 .block-generic .content.absolute p{
		font-size: 15px !important;
    margin-top: 16px;
			}
			
	.grid-products .col-md-6 .block-generic .content.absolute h3{
		line-height:1.1em !important;
		font-size: 3rem !important;
			}
			
	.grid-products .col-md-6 .content.absolute{
		/*margin-left: 319px;*/
	}
	
	
	
}
	
@media (max-width: 500px) and (min-width: 485px)   {
	
	.grid-products .col-md-6 .block-generic .content.absolute{
      padding-top: 7px;
			}
			
	.grid-products .col-md-6 .block-generic .content.absolute p{
		line-height: 1.1em;
		margin-top: 8px;
			}
			
			
	}
	
@media (max-width: 767px) {

		
	.grid-products .col-md-6 .content.absolute{
		height:227px;
		position:relative;
		padding-top: 25px;
		background-color: #fff;
		margin-left:0px;
		}
	
	.grid-products .col-md-6 .content.absolute p,
	.grid-products .col-md-4 .content.absolute p{
		margin: 0px;
	}

}
	
@media (max-width: 490px) {

	.grid-products .col-md-4 .content.absolute{
		height:227px;
		position:relative;
		padding-top: 25px;
		background-color: #fff;
		}
	
.grid-products .col-md-6 .content.absolute{height:277px;}	
		

}


@media (max-width: 490px) {

	.discover--products{
		padding: 0px 4% 70px;
	}
	


	
	.grid-generic .block-generic .content.absolute h3{
		line-height: 1em;
		margin-top: 50px;
		font-size:32px;
	}
	
	.grid-products .col-md-4 .content.absolute h3,
	.grid-products .col-md-6 .content.absolute h3{
		margin-top: 0px;
		margin-bottom: -11px;
	}
	
	.grid-generic .block-generic .content.absolute p{
		line-height:1.1em;
		padding: 8px 0;
		margin: 32px 0;
		font-size: 25px;
	}	
}




@media (max-width: 400px) {

	.grid-generic .block-generic .content.absolute h3{
		margin-top: 27px;
		font-size: 30px;
	}
	.grid-generic .block-generic .content.absolute p{
		margin: 26px 0;
	}		
	
	.grid-products .col-md-4 .content.absolute h3,
	.grid-products .col-md-6 .content.absolute h3{
		font-size:29px;
		margin-top: 0px;
	}
	
	.grid-products .col-md-4 .content.absolute p,
	.grid-products .col-md-6 .content.absolute p{
		font-size: 22px;
		margin: 12px 0;
	}
	
	.grid-products .col-md-4 .content.absolute{height:213px;}
	
	.grid-products .col-md-6 .content.absolute{padding-left:35px; padding-right:35px;height:272px;}

}

@media (max-width: 360px) {

	
	.grid-generic .block-generic .content.absolute h3{
		margin-top: 21px;
	}
	
	.grid-generic .block-generic .content.absolute p{
		margin: 11px 0;
		font-size: 23px;
	}	
	
	.grid-products .col-md-4 .content.absolute h3,
	.grid-products .col-md-6 .content.absolute h3{font-size: 27px;margin-top: 0px;}
	
	.grid-products .col-md-6 .content.absolute{height:300px;}
	
}

@media (max-width: 320px) {

	
	.grid-generic .block-generic .content.absolute h3{
		margin-top: 12px;
		font-size: 26px;
	}
	
	.grid-generic .block-generic .content.absolute p{
		    font-size: 20px;
	}	
	
	.grid-products .col-md-4 .content.absolute h3{
		font-size: 22px;
		margin-top: -6px;
		}
		
	.grid-products .col-md-6 .content.absolute h3{
		font-size: 22px;
		margin-top: -6px;
		}
		

	.grid-products .col-md-4 .content.absolute{height:185px;}
	
	.grid-products .col-md-6 .content.absolute{height:260px;}
	
	.grid-generic .col-md-4 .content.absolute p{
		    font-size: 18px;
	}		
	
	.grid-generic .col-md-6 .content.absolute p{
		    font-size: 18px;
	}		
	
}

/* Nicholas */



	
.toggle_cv, .close_cv {
	background-color:#755b76;
	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:#9e869f;}

.toggle_cv p, .close_cv p{color:#fff;line-height: 1.4em;}

.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;}

.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: #b39eb9;
	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: 'Figtree';
    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#premier-arret{
		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;
	}

	
}