@charset "utf-8";
/* CSS Document */

.container {
  margin: 0;
  overflow: hidden;
  *zoom: 1; 
  text-align:center;
  height:auto;
  }
  
.site-content {
  padding-top: 130px;
  text-align:center;
  height:100%;
  
}

img {
    max-width: 100%;
    height: auto;
}



/*------------------------------------*\
    $SLIDE ACTU
\*------------------------------------*/

.item-1, 
.item-2, 
.item-3 {
	position: absolute;
  display: block;
 
  width: 18%;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

@keyframes anim-1 {
	0%, 8.3% { left: 100%; opacity: 0; }
  8.3%,25% { left: 77%; opacity: 1; }
  33.33%, 100% { left: 100%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { left: 100%; opacity: 0; }
  41.63%, 58.29% { left: 77%; opacity: 1; }
  66.66%, 100% { left: 100%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { left: 100%; opacity: 0; }
  74.96%, 91.62% { left: 77%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
  
 }




/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.header {
  position: fixed;
  width:100%;
  height:auto;
  left: 0;
  right: 0; 
  margin:0 0 5px 0;
  padding:0 0 5px 0;
  background-color:#fff;
  text-align:center;
  z-index: 1;
  border-bottom :#000 solid 1px;
  
  }

.logo {
	
display: inline-block;
width: 90%;
height: auto;
padding:0;
margin:0;
text-align:center;
vertical-align: middle;
}



/*------------------------------------*\
    $CONTENU
\*------------------------------------*/

.bloc_contenu {
	position:relative;
	display: inline-block;
	width: 100%;
	height: auto;
	left: 0;
  	right: 0; 
 	padding:30px 0 5px 0;
	text-align:center;
	
}

.contenu_photo {
display:inline-block;
width: 70%;
height: auto;
text-align:center;
vertical-align:middle;
max-width: 712px;
}

.contenu_slogan {
display:inline-block;
width: 350px;
height: auto;
text-align:center;
vertical-align: middle;
}

.contenu_pages {
	display:inline-block;
	width: 70%;
	height: auto;
	text-align:left;
	vertical-align:top;
	margin: 15px 0 0 0;
}


/*------------------------------------*\
    $TABLE
\*------------------------------------*/


.tableau1 td {
background-color: #fff;
text-align: center;
padding: 2px;
border: 0.1px dotted #000000;
width: auto;
}

.tableau2 td {

text-align: left;
padding: 2px;
border: 0px;
width: auto;
}


/*------------------------------------*\
    $CARTOUCHES
\*------------------------------------*/

.cartouche_accueil {
	display:inline-block;
  	width:32%;
	text-align:center;
	vertical-align: top;
	margin: 5px 2px;
}

/*------------------------------------*\
    $CARTOUCHES ACCEUIL DES SOINS
\*------------------------------------*/

.cartouche_accueil_soins {
	display:inline-block;
  	width:32%;
	text-align:center;
	vertical-align: top;
	margin: 5px 2px;
}

/*------------------------------------*\
    $FIN CARTOUCHES
\*------------------------------------*/

.contenu_actu {
	display:inline-block;
	width: 20%;
	height: auto;
	text-align:left;
	vertical-align:top;
	margin: 15px 0 0 0;
	padding:0 0 0 5px;
	border-left: #635f54 solid 1px;
}


.logos_partenaires {
	display:inline-block;
  	width:90%;
	height:auto;
	text-align:left;
	margin: 15px 0 0 0;
}

/*------------------------------------*\
    $CARTOUCHES DES SOINS
\*------------------------------------*/


.soins_photos {
	display:inline-block;
  	width:20%;
	text-align:left;
	margin: 0 2px 10px;
	padding: 15px 0;
	vertical-align:top;
}

.slide {
	display:inline-block;
  	width:20%;
	text-align:left;
	margin: 0 2px 10px;
	padding: 15px 0;
	vertical-align:top;
}


.soins_explicatif {
	display:inline-block;
  	width:75%;
	text-align:left;
	margin: 10px 10px 25px;
	padding: 5px 0;
	vertical-align:middle;
	border-bottom:#635f54 solid 1px;
	border-top:#635f54 solid 1px;
	
}

.soins_explicatif_2 {
	display:inline-block;
  	width:75%;
	text-align:left;
	margin: 10px 10px 25px;
	padding: 5px 0;
	vertical-align:middle;
	border-top:#635f54 solid 1px;
	
}

/*------------------------------------*\
    $DECO DIVERS
\*------------------------------------*/

.cadre_vert {
  	width:60%;
	text-align:center;
	margin: 5px 5px;
	padding: 5px 5px;
	vertical-align:middle;
	background-color:#98BB55;
	color:#FFF;	
}


/*------------------------------------*\
    $DOWN
\*------------------------------------*/

.down {
	width:100%;
	background:#e7e6eb;
	text-align:center;
	margin: 15px 0 0 0;
	padding: 15px 0 15px 0;
	border-top: #635f54 solid 1px;
}

.block_down {
	display:inline-block;
  	width:22%;
	text-align:left;
	vertical-align: top;
	margin: 0 0 0 0;
}

.mediafly {
	width:90%;
	text-align:right;
	margin: 0 0 0 0;
	padding: 15px 0 0 0;
}




/*------------------------------------*\
    $MENU
\*------------------------------------*/

.menu {
	list-style-type: none;
  	float: left;
  	width:100%;
	margin-top:2px;
  	line-height: 40px;
	background-color: #fff;
	color:#635f54;
}

.menu a, .dropbtn {
    display: inline-block;
    padding: 0;
	margin: 0 40px;
	
	color:#635f54;
	font-size:15px;
	width:auto;
}
	
  .menu a:hover, .dropdown:hover .dropbtn {
    color: #635f54; 
	border-bottom: solid 4px #c1d41a;
	}
	
	.menu a, .dropdown {
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
	line-height: 30px;
    background-color: #fff;
    min-width: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: #445920;
    padding: 2px 2px;
    text-decoration: none;
	font-size:13px;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
	font-weight: bold;
	border-bottom: 0px;
	}

.dropdown:hover .dropdown-content {
    display: block;
}


/*------------------------------------*\
    $FENETRE MODALE
\*------------------------------------*/
#masque {
	display:none; /*le masque et son contenu sont invisibles à l'état initial*/
	position: fixed; /*rend le masque insensible au défilement*/
	top:0; right:0; bottom:0; left:0; /*permet de couvrir entièrement la fenetre du navigateur, y compris le contenu à l'extérieur de masque*/
	background-color: rgba(0,0,0,0.5); /*couleur de fond semi transparente*/
	z-index: 1000; /*assure que masque est au dessus de tous les autres éléments de contenu*/
}
#masque:target {
	display:block; /*le clic du lien pointant vers masque fait disparaitre le conteneur masque et son contenu*/
}
.fenetre-modale {
	background:#FFF;
	padding:5px;
	border: 5px solid #bbb;
	position:relative;
	margin: 10% auto;
	width: 40%;
	box-shadow: 0 0 20px #000;
	border-radius: 5px;
	height:auto;
}
img.bombe {
	float: right;
	margin: 0 0 0 20px;
}

img.btn-fermer {
	float:right;
	margin: -20px -20px 0 0;
}



/*------------------------------------*\
    $RESPONSIVE
\*------------------------------------*/
@media only screen and (max-width: 1000px) {
  
  .site-pusher, .site-container {
	  position:relative;
    height: 100%; }

  .site-container {
    overflow: hidden; }
	
  .site-pusher {
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }

.header {
	position: static;
	text-align:center;
	width:100%;
	top:0;
	margin:0 0 5px 0;
  	padding:0 0 5px 0;
	
	}
	
.logo {
	
display: inline-block;
width: 40%;
height: auto;
padding:0;
margin:0;
text-align:center;
vertical-align: middle;
}
	
	
.site-content {
    position: relative;
	width: auto;
    right: 0;
    left: 0;
    padding-top: 0;
    overflow-y: auto;
	z-index: -1;
	-webkit-overflow-scrolling: touch; }
	
	


/*------------------------------------*\
    $SLIDE ACTU
\*------------------------------------*/

.item-1, 
.item-2, 
.item-3 {
	position: absolute;
  display: block;
 
  width: 50%;

	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

@keyframes anim-1 {
	0%, 8.3% { left: 100%; opacity: 0; }
  8.3%,25% { left: 77%; opacity: 1; }
  33.33%, 100% { left: 100%; opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% { left: 100%; opacity: 0; }
  41.63%, 58.29% { left: 77%; opacity: 1; }
  66.66%, 100% { left: 100%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { left: 100%; opacity: 0; }
  74.96%, 91.62% { left: 77%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
  
 }
 
 
/*------------------------------------*\
    $CONTENU
\*------------------------------------*/

.bloc_contenu {
	display: inline-block;
	width: 95%;
	left: 0;
  	right: 0; 
 	padding:5px 0 5px 0;
	text-align:center;
}

.contenu_photo {
display:inline-block;
width: auto;
height: 100%;
text-align:center;
max-width: 100%;
}

.contenu_slogan {
display:inline-block;

width: 100%;
height: 100%;
text-align:center;
vertical-align:top;
}

.contenu_pages {
	display:inline-block;
	width: 100%;
	text-align:center;
	margin: 15px 0 0 0;
}






/*------------------------------------*\
    $CARTOUCHES
\*------------------------------------*/

.cartouche_accueil {
	display:inline-block;
  	width:100%;
	text-align:center;
	vertical-align: top;
	margin: 5px 2px;
}

/*------------------------------------*\
    $FIN CARTOUCHES
\*------------------------------------*/

.contenu_actu {
	display:inline-block;
	width: 100%;
	height:auto;
	text-align:center;
	margin: 15px 0 0 0;
	border: #635f54 solid 1px;
}

.logos_partenaires {
	display:inline-block;
  	width:100%;
	text-align:center;
	margin: 15px 0 0 0;
}

/*------------------------------------*\
    $CARTOUCHES ACCUEIL DES SOINS
\*------------------------------------*/

.cartouche_accueil_soins {
	display:inline-block;
  	width:90%;
	text-align:center;
	margin: 5px 2px;
}


/*------------------------------------*\
    $CARTOUCHES DES SOINS
\*------------------------------------*/

.soins_photos {
	display:inline-block;
  	width:90%;
	text-align:center;
	margin: 10px 2px;
	padding: 15px 0;
	border-top: #635f54 solid 1px;
}

.soins_explicatif {
	display:inline-block;
  	width:90%;
	text-align:left;
	margin: 5px 2px 10px;
	border-bottom:#635f54 solid 0px;
	border-top:#635f54 solid 0px;
	
}

.soins_explicatif_2 {
	display:inline-block;
  	width:90%;
	text-align:left;
	margin: 10px 10px 25px;
	padding: 5px 0;
	vertical-align:middle;
	border-top:#635f54 solid 1px;
	
}

/*------------------------------------*\
    $DOWN
\*------------------------------------*/

.down {
	width:100%;
	background:#e7e6eb;
	text-align:center;
	margin: 15px 0 0 0;
	border-top: #635f54 solid 1px;
}

.block_down {
	display:inline-block;
  	width:95%;
	text-align:left;
	margin: 15px 0 0 0;
}

.mediafly {
	width:90%;
	text-align:right;
	margin: 0 0 0 0;
	padding: 15px 0 100px 0;
}


/*------------------------------------*\
    $FENETRE MODALE
\*------------------------------------*/
#masque {
	display:none; /*le masque et son contenu sont invisibles à l'état initial*/
	position: fixed; /*rend le masque insensible au défilement*/
	top:0; right:0; bottom:0; left:0; /*permet de couvrir entièrement la fenetre du navigateur, y compris le contenu à l'extérieur de masque*/
	background-color: rgba(0,0,0,0.5); /*couleur de fond semi transparente*/
	z-index: 1000; /*assure que masque est au dessus de tous les autres éléments de contenu*/
}
#masque:target {
	display:block; /*le clic du lien pointant vers masque fait disparaitre le conteneur masque et son contenu*/
}
.fenetre-modale {
	background:#FFF;
	padding:5px;
	border: 5px solid #bbb;
	position:relative;
	margin: 20% auto;
	width: 70%;
	box-shadow: 0 0 20px #000;
	border-radius: 5px;
	height: auto;
	font-size:x-small;
}
img.bombe {
	float: right;
	margin: 0 0 0 20px;
}

img.btn-fermer {
	float:right;
	margin: -10px -10px 0 0;
}




/*------------------------------------*\
    $MENU
\*------------------------------------*/
.header__icon {
    position: relative;
    display: block;
	top:0px;
    float: right;
    width: 50px;
    height: 66px;
    cursor: pointer; }
    .header__icon:after {
      content: '';
      position: absolute;
      display: block;
      width: 1rem;
      height: 0;
      top: 5px;
      left: 15px;
      -moz-box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;
      -webkit-box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;
      box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black; }


 .menu {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
	margin:0px;
	padding:2px;
    overflow-y: auto;
	-webkit-overflow-scrolling: touch;
    background-color: #fff;
    width: 250px;
    -moz-transform: translateX(250px);
    -ms-transform: translateX(250px);
    -webkit-transform: translateX(250px);
    transform: translateX(250px); }
    .menu a {
      display: block;
      height: 40px;
	  width:210px;
	  padding: 0 5px;
      text-align: center;
      line-height: 40px;
	  border-bottom: solid 1px #FFF;
	  font-size:12px;
	  }
	
 }

  .with--sidebar .site-pusher {
    -moz-transform: translateX(-250px);
    -ms-transform: translateX(-250px);
    -webkit-transform: translateX(-250px);
    transform: translateX(-250px);
	margin:0;
	padding:0;
	}
  .with--sidebar .site-cache {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); }


	
	
	}