body {background-color: #fff;}

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


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

.main{
	margin-top:-40px;
	background: url('https://www.brunet.ca/globalassets/beaute/conseils-soins-beaute/peau/2023/feuilles-background.png') #f0ecf0 no-repeat top center;
}

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

/*Jumbotron*/

.ancres-jumbo{
	font-size: 1.5rem;
	display: inline-table;
	border-radius: 25px;
	background: #FFC430;
	padding: 7px 16px;
	font-family: 'Roboto';
	height: 13px;
	text-decoration: none;
	color:#212121;
	text-align:center;
}

.ancres-jumbo:hover{
	color:#fff;
	background-color: #664e13;
}

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

.conteneur-titre-section{
	display:block;
	max-width:1200px;
	margin:0 auto 24px;
}

.bloc-allergies{
    background-image: url(https://www.brunet.ca/globalassets/sante/dossiers-thematiques-sante/ete-sante/allergie_bg.png);
    background-repeat: no-repeat, no-repeat;
    background-size: cover;
}

.bloc-conteneur-lyme {
    background-image: url(https://www.brunet.ca/globalassets/sante/dossiers-thematiques-sante/ete-sante/lyme_bg.png);
    background-repeat: no-repeat, no-repeat;
    background-size: cover;
    padding:10px 0;
}

.bloc-soleil  {
    background-image: url(https://www.brunet.ca/globalassets/sante/dossiers-thematiques-sante/ete-sante/soleil.png);
    background-repeat: no-repeat, no-repeat;
    background-size: cover;
}


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

#titre-section-text{
	font-family: FigtreeBook;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    text-transform: none;
    color: #212121;
    max-width: 100%;
    padding: 0;
}



/*Types de peau*/


	
.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 #0A6E9D;
}

.block-narrow h1, .block-narrow h2 {
    margin: 0 auto;
    font-family: FigtreeBook;
    text-transform: none;
    display: flex;
    margin: 50px 0 30px;
    font-size: 4rem;
    line-height: 1;
    letter-spacing: .02em;
    font-family: FigtreeBook;
    font-weight: 400;
    color: #525254;
    font-style: normal;
}

.block-narrow p.txt-soins {padding: 0; margin: 25px auto 0;font-family: FigtreeBook;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    text-transform: none;
    color: #212121;
    max-width: 100%;
    padding: 0;}
 
.faq-expand{
	background-color: #fff;
	padding: 25px 0px 20px;
    margin-bottom: 0;
    border:none;
	border-bottom: 1px solid #0A6E9D;
	
}
.faq-question{margin-top:0px; margin-left: 64px;}

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

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

.faq-readmore{
    display: flex;
    height: 65px;
    align-items: center;
}

.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) {
	
	.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 24px;
		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: 560px;
    display: grid;
    /* place-items: center; */
    padding-bottom: 10px;
    z-index: 10;
}
.popup.active a{
	text-align: left;
    margin: 0 auto;
    margin: 0px 15px 0;
    color: #0A6E9D;
    font-size: 16px;
    text-decoration: underline;
    margin-bottom: auto;
    display: flex;

}

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

.bloc-creme-solaire p{
	padding-bottom:0px;
}

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

.bloc-vrai-ou-faux .txt{
	margin-top:0;
	height:50px;
}

.qstn-container{
	padding: 0px 0 30px;
}
	
.bloc-creme-solaire .action{
    height: 220px;
    display: flex;
    flex-direction: column;
    position: relative;
 	z-index: 2; /* Assure que le bloc "action" est au-dessus de l'image */
 	background-color: white; /* Optionnel : Ajouter un fond pour garantir que le texte reste lisible */

}

.last-bloc .action{
	height: fit-content;
}

.small{
	display: inline-grid;
}

.bloc-vrai-ou-faux{
	display: inline-grid;
    margin: 0 10px 25px;
	padding: 0;
    position: relative;
    background-color: #fff;
    color:#212121;
    width:377px;
}

.bloc-vrai-ou-faux .action{
	z-index: 10;
    padding: 32px 0;
}

.bloc-creme-solaire{
    margin: 0 auto 25px;
	padding: 0 0 30px;
    position: relative;
    background-color: #fff;
    color:#212121;
    width:384px;
    overflow: hidden; /* Empêche l'image de dépasser du bloc */
}

.bloc-creme-solaire img {
  transition: transform 0.3s ease; /* Transition pour un effet fluide */
}

.bloc-creme-solaire:hover img {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
  transition: transform .1s;
}

.last-bloc:hover img {
  -ms-transform: none; /* IE 9 */
  -webkit-transform: none; /* Safari 3-8 */
  transform: none; 
  transition: transform 0s;
}

.last-bloc{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: #B2EAFB;
    height: 506px;
}

.last-bloc .action{
	background-color: transparent;
} 

.last-bloc .conteneur{
	display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: center;
    align-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin:0 auto;
}


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

.last-bloc img{
	width: 124px;
    margin: 0 auto;
}
.last-bloc .allergie_btn{
	width:32px;
}

.trio-bloc{
	 display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
}

.balado-head{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    padding: 48px 0 24px;
}

.flex-item:nth-child(1) {
    -webkit-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    align-self: auto;
        margin: 0px 15px 0;
        font-size: 16px;
	display: inline-table;
	border-radius: 25px;
	background: #212121;
	padding: 7px 16px;
	font-family: 'Roboto';
	height: 13px;
	text-decoration: none;
	color:#fff;
	text-align:center;
	width: fit-content;
    }
.flex-item:nth-child(2) {
    -webkit-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    align-self: auto;
    margin: inherit;
    font-family: Roboto;
    font-size: 12px;
    font-weight: 700;
    line-height: 17px;
    text-align: right;
    color: #212121;
    padding: 0;
}

.lyme-container{
	 display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: start;
    justify-content: start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 0 100px;
}

.bloc-lyme{
    padding: 0 0 30px;
    position: relative;
    background-color: #fff;
    color: #212121;
    height: 492px;
    border: 1px solid #E2E2E2;
    margin: 0 auto;
    overflow: hidden;
    transition: background-size 0.3s ease;
}

.bloc-lyme img {
  transition: transform 0.3s ease; /* Transition pour un effet fluide */
}

.bloc-lyme:hover img {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
  transition: transform .1s;
}

.lyme-container .small{
	margin: 0;
	padding: 0;
}

.large{
    background-image: url(https://www.brunet.ca/globalassets/sante/dossiers-thematiques-sante/ete-sante/lyme_v3.png);
    background-repeat: no-repeat, no-repeat;
    background-position: right, left;
    background-size: cover;
    width: max-content;
    display: -webkit-flex;
    height: 492px;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    margin: 0 auto;
    padding:24px;
    max-width: 792px;
    width:100%;
    position: relative;
  	overflow: hidden; /* Empêche l'image de fond de dépasser du bloc */
  	background-size: 100%; /* Taille de l'image de fond */
  	background-position: center;
  	transition: background-size 0.3s ease; 
}

.large:hover {
  background-size: 110%; /* Agrandit l'image de fond de 10% */
}

.image-text-item .episode-description{
	font-family: FigtreeBook;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    color: #212121;
    max-width: 100%;
    margin: 0;
    padding: 0 0 24px;
}

#s1ep9, #s3ep5{
    padding: 0 0 48px;
    max-width: 100%;
}

iframe{      
    display: block;
    height: auto;
    width: 100%;
    border: none;
    position: relative;
 }

.bloc-lyme .conseils-bubble,
.bloc-creme-solaire .conseils-bubble,
.image-text-item .conseils-bubble{
	font-size: 16px;
	display: inline-table;
	border-radius: 25px;
	background: #212121;
	padding: 7px 16px;
	font-family: 'Roboto';
	height: 13px;
	text-decoration: none;
	color:#fff;
	text-align:center;
	margin: 20px 15px 0;
	width: fit-content;
	flex-grow: inherit;
}

.large .conseils-bubble{
	background: #fff;
	color:#212121;
}

.large .txt{
	font-family:FigtreeBlack;
	color:#fff;
	font-size: 40px;
	line-height: 48px;
	text-align: left;
	margin-left:15px;
	padding:24px 0;
}


.small .txt,
.bloc-creme-solaire .txt{
	margin: 16px 15px 20px;
	font-family: FigtreeBold;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	text-align: left;
	height: 150px;
	padding: 0;
}

.last-bloc .txt{
	margin-top: 16px;
	margin-bottom: 20px;
	font-family: FigtreeBold;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
	height: fit-content;
}

.small .action p{
	margin: 16px 15px 20px;
	padding-bottom: 0;
	height: auto;
}

.bloc-lyme a,
.bloc-creme-solaire a{
    margin: 0px 15px 0;
    color: #0A6E9D;
    font-size: 16px;
    text-decoration: underline;
    margin-bottom: auto;
    display: flex;
    flex-grow: 1;
}

.large a{
	color:#fff;
}

.small img{
	width: 100%;
}

.image-text-item {
	background-color:#AEDCF3;
	background-image: url(https://www.brunet.ca/globalassets/sante/dossiers-thematiques-sante/ete-sante/bg_balado.png);
    background-repeat: no-repeat, no-repeat;
	border-left: #0C8ED0 8px solid;
}

.image-text-item .content-container, .image-text-item .content-container-padding {
    padding-left: 48px;
    padding-right: 48px;
}

.saviez-vous, .exposition{
	display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    margin: 20px auto;
}

.bloc-saviez-vous{
	-webkit-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    align-self: auto;
    max-width: 632px;
    width: 100%;
    margin: 0 auto;
}

.bloc-exposition{
	-webkit-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    align-self: auto;
    max-width: 580px;
    width: 100%;
    margin:0 auto;
}

.saviez-vous .balado{
	-webkit-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    align-self: auto;
    max-width: 568px;
    width:100%;
    margin: -80px auto 0;
}

.saviez-vous .txt{
	max-width: 80rem;
    margin: 0 auto auto;
    text-align: left;
    font-style: normal;
    padding: 0 32px 6rem 0;
	font-family: FigtreeBook;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
}

.bloc-exposition .txt{
	max-width: 80rem;
    margin: 0;
    text-align: left;
    font-style: normal;
    padding: 0 32px 6rem 0;
	font-family: FigtreeBook;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color:#212121;
}

.bloc-exposition h3{
	font-family: FigtreeBook;
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
	text-align: left;
	color:#212121;
}

.bloc-exposition .liens{
	color:#212121;
	display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.bloc-exposition .liens .boutons{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    padding:15.5px 16px;
    border-bottom:1px solid #212121;
    width:100%;
}

.bloc-exposition .liens .boutons:first-child {
  border-top: none;
}
.bloc-exposition .liens .boutons:last-child {
  border-bottom: none;
}

.boutons {
  display: inline-block;
  position: relative;
  overflow: hidden; /* Assure que le fond ne déborde pas du bouton */
  padding: 10px 20px;
}

.boutons a {
  display: inline-block;
  position: relative;
  color: #000; /* Couleur du texte */
  text-decoration: none;
  z-index: 1; /* Assure que le texte est au-dessus de l'effet de fond */
  transition: color 0.3s ease; /* Transition pour la couleur du texte */
}

.boutons::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c4f1ff;
  transition: transform 0.3s ease;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 0; /* Assure que l'effet de fond est derrière le texte */
}

.boutons:hover::before {
  transform: scaleX(1);
}

.v-f{
	padding:0 0 32px;
}

.bloc-saviez-vous h3{
	font-family: FigtreeBook;
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
	text-align: left;
}

.bloc-saviez-vous a {
	padding: 17.5px 32px;
    background-color: #E0F8FF;
    color: #212121;
}

.bloc-saviez-vous a:hover{
	background-color: #0c8ed0;
}

.block-color{
	margin-top:0;
}

.bloc-vrai-ou-faux .faux,
.bloc-vrai-ou-faux .vrai,
.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-vrai-ou-faux .faux,
.bloc-vrai-ou-faux .vrai,
.bloc-vrai-ou-faux .fermer{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.btn_vrai_faux{
	display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.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:#888888;cursor: pointer;}
.bloc-vrai-ou-faux .faux:hover {background-color:#cbcbcb;}

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


.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;
		padding-bottom:0;
	}	

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

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


.grid{
	background-color:#fff;
	padding-bottom:64px;
	margin-bottom:0;
}


@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: #fff;
    width: 100%;
	margin-top: 0;
    padding: 0px 10% 70px;
    margin-bottom: -41px;
}

.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 (max-width: 1240px){
	.conteneur-titre-section {
	    display: block;
	    max-width: 1200px;
	    width: 100%;
	    margin: 0 auto;
	    padding: 24px 24px 24px;
	}
	.qstn-container {
	    padding: 0px 24px 30px;
	}
	.bloc-creme-solaire {
	    margin: 0 auto 25px;
	    padding: 0 0 30px;
	    position: relative;
	    background-color: #fff;
	    color: #212121;
	    width: 100%;
	}
	.image-text-item .content-container, .image-text-item .content-container-padding {
	    padding-left: 24px;
	    padding-right: 24px;
	}
	.last-bloc {
	    background-color: #B2EAFB;
	}
	.last-bloc .conteneur {
	    display: -webkit-flex;
	    display: flex;
	    -webkit-flex-direction: column;
	    flex-direction: column;
	    -webkit-flex-wrap: wrap;
	    flex-wrap: wrap;
	    -webkit-justify-content: center;
	    justify-content: center;
	    -webkit-align-content: center;
	    align-content: center;
	    -webkit-align-items: center;
	    align-items: center;
	    margin: 0 auto;
	}
	.large{
		background-size:cover;
		margin: 0 auto 20px;
	}
	.small {
    	width: 100%;
    	max-width: -webkit-fill-available;
        margin: 20px auto;
        display: inline-table;
	}
	.bloc-saviez-vous {
	    -webkit-order: 0;
	    order: 0;
	    -webkit-flex: 0 1 auto;
	    flex: 0 1 auto;
	    -webkit-align-self: auto;
	    align-self: auto;
        max-width: -webkit-fill-available;
	    width: 100%;
	    margin: 0 auto;
	    padding:0 24px;
	}
	.saviez-vous .balado {
	    -webkit-order: 0;
	    order: 0;
	    -webkit-flex: 0 1 auto;
	    flex: 0 1 auto;
	    -webkit-align-self: auto;
	    align-self: auto;
        max-width: -webkit-fill-available;
	    width: 100%;
	    margin: 80px auto 0;
	}
	.bloc-exposition {
	    -webkit-order: 0;
	    order: 0;
	    -webkit-flex: 0 1 auto;
	    flex: 0 1 auto;
	    -webkit-align-self: auto;
	    align-self: auto;
	    width: 100%;
	    margin: 0 auto;
	    padding:0px;
	    max-width: -webkit-fill-available;
	}
	.bloc-vrai-ou-faux {
	    width: 100%;
	    max-width: -webkit-fill-available;
	}
	.popup.active {
	    height: 100%;
	}
	.block-narrow {
	    padding:0 24px;
	}
	.block-narrow h2{
	    text-align: left;
	}

	.bloc-soleil {
	    background-image: none;
	}
	.bloc-conteneur-lyme {
	    background-image: none;
	}
	.bloc-allergies{
	    background-image: none;
	}
	
}

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

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

	
}