/**********************************************************************************/
/**********************              GENERAL                 **********************/
/**********************************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;300;400;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400;1,700&display=swap');


/*@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('../ressources/fonts/Roboto-Regular.ttf') format('truetype');
	font-weight: normal; 
}

@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('../ressources/fonts/Roboto-Bold.ttf') format('truetype');
	font-weight: bold; 
}

@font-face {
	font-family: 'Roboto Slab', serif;
	src: url('../ressources/fonts/RobotoSlab-Regular.ttf') format('truetype');
	font-weight: normal; 
}

@font-face {
	font-family: 'Roboto Slab', serif;
	src: url('../ressources/fonts/RobotoSlab-Bold.ttf') format('truetype');
	font-weight: bold; 
}*/


body,html {
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding: 0;
	height: 100%;
}

a {
	text-decoration: none;
	color: inherit;
}

h2 {
	font-size:16pt;
	font-weight:300;
}

button{
	border: none;
	outline: none;
	padding: 8px;
	background-color: transparent;
	font-family: 'Roboto', sans-serif;	
	cursor: pointer;

	-webkit-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}

.marginAuto{margin:0 auto;}





/* Positionnement */
   .dIB{display:inline-block !important;}
   .dB{display:block 		 !important;}
   .fL{float:left    		 !important;}
   .fR{float:right   		 !important;}
/* Dimensions */
   .h100{height:100%         !important;}
   .mh100{min-height:100%    !important;}
/* Texte */
   .taC{text-align:center    !important;}
   .taJ{text-align:justify   !important;}




/**********************************************************************************/
/**********************                MENU                  **********************/
/**********************************************************************************/

	.zone_menus {
		position: fixed;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		top: 0;
		left: 0;
		right: 0;
		padding: 8px;
		height: 100px;
		z-index: 1004;
		box-sizing: border-box;

		-webkit-transition: all 0.5s;
		-ms-transition: all 0.5s;
		transition: all 0.5s;
	}

	#zone_clinique {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex: 1 1 auto;

		-webkit-transition: all 0.5s;
		-ms-transition: all 0.5s;
		transition: all 0.5s;
	}

	#zone_logo {
		flex:  0 0 auto;
		width: 200px;
		background-color: white;
		text-align: center;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		overflow: hidden;
		cursor: pointer;
		-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);
		-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);

		-webkit-transition: all 0.5s;
		-ms-transition: all 0.5s;
		transition: all 0.5s;
		
	}

	#zone_logo>img {
		max-width: 100%;
		max-height: 84px;
		vertical-align: middle;

		-webkit-transition: all 0.5s;
		-ms-transition: all 0.5s;
		transition: all 0.5s;
	}

	#zone_titre{
		flex:  1 1 auto;
		margin: 0px 24px;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	#zone_titre>div{
		display: inline-block;
	}

	#zone_titre h1 {
		font-family: 'Roboto Slab', serif;
		font-size: 20pt;
		color: white;
		line-height: 25px;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0px 0px 4px rgba(0, 0, 0, 0.6), 0px 0px 8px rgba(0, 0, 0, 0.4);

		-webkit-transition: all 0.5s;
		-ms-transition: all 0.5s;
		transition: all 0.5s;
	}

	#zone_categories{
		flex: 0 0 auto;
		max-width: 600px;
		margin-right: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 100%;
	}

	#zone_categories>.element {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 0px 16px;
		padding: 0px;
		
		flex: auto;

		-webkit-transition: all 0.3s;
		-ms-transition: all 0.3s;
		transition: all 0.3s;
	}

	#zone_categories>.element>span{
		font-family: 'Roboto Slab', serif;
		font-size: 15pt;
		color: white;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0px 0px 4px rgba(0, 0, 0, 0.6), 0px 0px 8px rgba(0, 0, 0, 0.4);
		text-align: center;
		vertical-align: middle;
		border-bottom: solid 2px transparent;

		-webkit-transition: all 0.3s;
		-ms-transition: all 0.3s;
		transition: all 0.3s;
	}

	#zone_categories>.element:hover>span{
		border-bottom: solid 2px white;
	}

	.zone_menus.scroll {padding: 0px; height: 50px; background-color:rgba(7,28,250,1);}
	.zone_menus.scroll #zone_logo {width: 150px; -webkit-border-radius: 0px; -moz-border-radius: 0px;border-radius: 0px;-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0);-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0);box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0);}
	.zone_menus.scroll #zone_logo>img {max-width: 150px;max-height: 50px;}
	.zone_menus.scroll #zone_titre h1 {font-size: 16pt;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0), 0px 0px 12px rgba(0, 0, 0, 0);}
	.zone_menus.scroll #zone_categories>.element{margin: 0px; padding: 0px 12px; height: 100%;}
	.zone_menus.scroll #zone_categories>.element:hover{background-color: rgba(255, 255, 255, 0.3);}
	.zone_menus.scroll #zone_categories>.element>span{text-shadow: 1px 1px 2px rgba(0, 0, 0, 0), 0px 0px 8px rgba(0, 0, 0, 0);border: none;}
	.zone_menus.scroll #zone_categories>.element:hover>span{border: none;}

/* barre etatScroll  */
	#etatScroll {
		position: fixed;
		bottom: 0;
		width: 0%;
		height: 4px;
		background-color: rgb(7,28,250);
		z-index: 1004;

		transition: 0.2s;
		-ms-transition: 0.2s;
		-moz-transition: 0.2s;
	}



/**********************************************************************************/
/**********************           PAGE DIAPORAMA             **********************/
/**********************************************************************************/
	/* Partie generale */
		#partieAccueil{
			display:block;
			position: relative;
			overflow: hidden;
			width:100%;
			height:100vh;
		}

		.zone_diapo{
			position: relative;
			width: 100%;
			height: 100%;

			-webkit-transition: all 0.5s;
			-ms-transition: all 0.5s;
			transition: all 0.5s;
		}

		.zone_diapo>img{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			object-fit: cover;
		}

		.zone_diapo>img:first-of-type{
			z-index: 1001;
		}

		.zone_diapo>.texte{
			position: absolute;
			top: 15%;
			left: 15%;
			padding: 8px;
			background-color: rgba(255,255,255,0.8);
			-webkit-border-radius: 8px;
			-moz-border-radius: 8px;
			border-radius: 8px;
			box-sizing:border-box;
			z-index: 1002;
		}

		.zone_diapo>.texte * {
			margin: 0;
		}

	/* Puces */

		.zone_puces {
			position:absolute;
			bottom:24px;
			width: 100%;
			text-align:center;
			z-index: 1003;
		}

		.zone_puces .puce {
			position:relative;
			display:inline-block;
			width:18px;
			height:18px;
			margin-right: 4px;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, 0.8);
			border: solid 1px rgba(0, 0, 0, 0.4);
			cursor:pointer;

			-webkit-transition: all 0.5s;
			-ms-transition: all 0.5s;
			transition: all 0.5s;
			
		}

		.zone_puces .puce.active {
			background-color: rgba(7,28,250,1);
		}

		.zone_puces .puce:hover:not(.active) {
			background-color: rgba(255, 255, 255, 1);
		}

/**********************************************************************************/
/**********************            PARTIE GENERAL            **********************/
/**********************************************************************************/
	.partie {
		background-color:white;
	}

	.partie .separation {
		position:relative;
		width:100%;
		height:100px;
		border-top: solid 1px white;
	}

	.partie .separation h2 {
		margin: 0;
		text-align: center;
		line-height: 100px;
		font-family: 'Roboto Slab', serif;
		font-size: 22pt;
		font-weight: bold;
		color:white;
	}

	.partie .contenu {
		margin: auto;
		padding: 50px 0px;
		width:1050px;
	}


/**********************************************************************************/
/**********************            PAGE CLINIQUE             **********************/
/**********************************************************************************/

	#partieClinique  {
		background-color: rgb(255,255,255);
	}

	#partieClinique h2 {
		color: rgb(7,28,250);
	}

	#partieClinique .contenu {
		border-top: solid 1px rgb(7,28,250);
	}

	#listeRubriques {
		background-color: white;
	}

	#listeRubriques>div:first-of-type {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 60px;
	}

	#listeRubriques>div:first-of-type>a {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0px 8px;
		flex: 1 1 auto;
		height: 100%;
		color: white;
		font-weight: bold;
		background-color: rgb(7,28,250);
		cursor: pointer;

		-webkit-transition: all 0.3s;
		-ms-transition: all 0.3s;
		transition: all 0.3s;
	}

	#listeRubriques>div:first-of-type>a:hover {background-color: rgb(88,148,237);}
	#listeRubriques>div:first-of-type>a.active {background-color: white;color: rgb(7,28,250);cursor: initial;}

	#listeRubriques>div:first-of-type>a>span {
		text-align: center;
	}

	#listeRubriques>.message {
		display: inline-table;
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		border-bottom: solid 1px #EEE;
	}

	#listeRubriques>.message:last-of-type {
		border-bottom: 0;
	}

	#listeRubriques>.message p {
		text-align: justify;
	}

	#listeRubriques>div img{
		max-height: 200px;
		max-width: 40%;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	}

	#listeRubriques>div:nth-of-type(2n+1) img{
		float: right;
		margin: 20px 0px 20px 20px;
	}

	#listeRubriques>div:nth-of-type(2n) img{
		float: left;
		margin: 20px 20px 20px 0px;
	}

	#listeRubriques>div img.alone{
		display: block;
		float: inherit !important;
		margin:auto !important;
	}

/**********************************************************************************/
/**********************             PAGE EQUIPE              **********************/
/**********************************************************************************/


	#partieEquipe {background:rgb(88,148,237);}

	#partieEquipe .contenu{text-align:center;}
	#wrap_equipe{
		display:inline-block;
		vertical-align:top;
		position:relative; /* Pour placer les boutons en absolu */
		width:880px;
		height:270px;
		overflow:hidden;
		box-sizing:border-box;
	}
	#wrap_equipe ul{
		margin:0;
		padding:0;
		height:100%;
		list-style:none;
		display:table;
		table-layout:fixed;
	}
	#wrap_equipe ul li{display:table-cell;}
	#btnPrevPersonne,#btnNextPersonne{
		display:inline-block;
		width:35px;
		height:270px;
		vertical-align:top;
		cursor:pointer
	}

	#btnPrevPersonne span,#btnNextPersonne span{
		display:block;
		width:18px;
		height:38px;
		margin-top: 110px;
		background:url('../ressources/images/icones/sprite.png') no-repeat;
	}
	#btnPrevPersonne span{background-position:-270px 0;}
	#btnNextPersonne span{background-position:-288px 0;margin-left:15px;}

	.personne{
		display:inline-block;
		position:relative;
		width:200px;
		height:200px;
		margin:0 10px;
		cursor:pointer;
		vertical-align:top;

		-webkit-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	.personne.inf4 {
		margin-bottom: 50px;
	}

	.personne > div{
		width:100%;
		height:100%;
		-webkit-border-radius:50%;
		border-radius:50%;
		border: 12px solid rgba(7,28,250,0.8);
		box-shadow: 2px 2px 2px rgba(0,0,0, 0.18);
		text-align:center;
		overflow:hidden;
		position:relative;
		z-index: 1001;
		box-sizing:border-box;

		-webkit-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	.personne img{
		position: absolute;
		top: 50%;
		left: 50%;
		min-height: 100%;
		min-width: 100%;

		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);

		-webkit-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	.personne > div span {
		background:rgba(7,28,250,0.9);
		position:absolute;
		z-index: 1000;
		top:130px;
		left:0px;
		padding: 5px 20px 5px 40px;
		font-family: 'Roboto', sans-serif;
		color:#FFF;
		font-weight:400;
		font-size:14px;
		border-radius: 0 13px 13px 0;
		transition: all 0.5s ease-in;
	}

	.personne:hover img{
		-webkit-transform: translate(-50%, -50%) scale(1.1);
		-moz-transform: translate(-50%, -50%) scale(1.1);
		-ms-transform: translate(-50%, -50%) scale(1.1);
		-o-transform: translate(-50%, -50%) scale(1.1);
		transform: translate(-50%, -50%) scale(1.1);
	}

	.personne:hover > div {	border: 12px solid rgba(7,28,250,0.5);}
	.personne h3 {margin-top:17px;color:#FFF;}


	#zone_description_equipe{
		margin-top: 15px;
		background-color: white;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	}
	#zone_description_equipe>div {
		display: none;
		font-family: 'Roboto Slab', serif;
		color: #333;
		padding:10px;
		text-align: left;
	}


/**********************************************************************************/
/**********************             PAGE SERVICES            **********************/
/**********************************************************************************/
	#partieServices {background-size:200px;background-position:bottom right;background-color: rgb(255,255,255);background-repeat: no-repeat;}#partieServices .separation {background-color: rgb(255,255,255);}

	#partieServices .contenu {border-top: solid 1px rgb(7,28,250);}
	#partieServices h2 {color: rgb(7,28,250);}


	.services{
		display:inline-block;
		text-align:center;
		width:31%;
		height:auto;
		margin:10px 1%;
		font-family: 'Roboto', sans-serif;
		vertical-align:top;
		cursor:pointer;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		overflow: hidden;
		-webkit-box-shadow: 0px 0px 0px 1px #CCC;
		-moz-box-shadow: 0px 0px 0px 1px #CCC;
		box-shadow: 0px 0px 0px 1px #CCC;
	}
	.services.ferme::after{
		content: "";
		position: relative;
		top: -50px;
		height: 50px;
		margin-bottom:-50px;
		display: block;
		width: 100%;
		box-shadow: inset 0px -40px 40px -20px white;
	}
	.servImg{
		position: relative;
		width: 100%;
		height: 210px;
		line-height: 210px; /*Ne pas Modifier (en rapport avec la hauteur du bloc)*/
		overflow: hidden;
		background-color: white;
		border-bottom: solid 1px #CCC;
	}

	.servImg::after{
		content: '+ d\'infos';
		position: absolute;
		top: 100%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(7,28,250,0.8);
		color: white;
		-webkit-border-radius: 8px 8px 0px 0px;
		-moz-border-radius: 8px 8px 0px 0px;
		border-radius: 8px 8px 0px 0px;
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		font-size: 14pt;
		text-decoration: underline;

		-webkit-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.servImg:hover::after{
		top: 0%;
	}

	.servImg img{
		width:100%;
		margin:-100%;
		vertical-align:middle;
		position:relative;
		-webkit-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	.services h3{
		margin:0;
		font-size:18px;
		line-height:42px;
		color:#333;
	}
	.services .servInfo > div{
		display: block;
		width: 100%;
		color: #777;
		font-size: 12px;
		padding:0 5px 10px;
		margin-top: -10px;
		height:60px;
		overflow:hidden;
		box-sizing:border-box;
	}

	.services .servInfo > div p  {
		font-family: 'Roboto Slab', serif;
	}

	.servInfo{
		min-height:40px;
		background-color:#FFF;
		border-bottom-right-radius: 4px;
		border-bottom-left-radius: 4px;
		-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
	}
	#partieServices .contenu{text-align:center}

	#servInfos{
		width: 1030px;
		margin: 10px 10px;
		background-color: white;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		overflow: hidden;
		text-align:left;
		-webkit-box-shadow: 0px 0px 0px 1px #CCC;
		-moz-box-shadow: 0px 0px 0px 1px #CCC;
		box-shadow: 0px 0px 0px 1px #CCC;
	}
	#servInfos img{
		max-width:60%;
		float:left;
		display:inline-block;
		vertical-align: top;
		margin-right:15px;

		-webkit-transition: all 0.3s;
		-ms-transition: all 0.3s;
		transition: all 0.3s;
	}
	#servInfosSup{
		vertical-align: top;
		padding:30px 15px 15px;
	}

	#servInfos h3{
	  margin:0 0 18px 0;
	  font-size:20px;
	  line-height:20px;
	  color:#333;
	  text-align: left;
	}
	#servInfos *{
		font-family: 'Roboto Slab', serif;
	  color: #777;
	  font-size: 13px;
	  text-align:justify;
	}
	#servInfos:after {
	  content: "";
	  display: table;
	  clear: both;
	}
	#fermer{
		background:url('../ressources/images/icones/btn_delete.png') center center no-repeat;
		background-size: 12px;
		width:16px;
		height:16px;
		float:right;
		margin:-20px -5px 0 0;
		cursor:pointer;
	}


/**********************************************************************************/
/**********************             PAGE CONTACT             **********************/
/**********************************************************************************/

	#partieContact {
		background-color: #EFEFEF;
	}

	#partieContact .separation {
		background-color: rgb(88,148,237);
	}

	#coordonneesContact{
		width: 1050px;
		margin: auto;
		position: relative;
		height: 450px;
		margin-bottom: -450px;
	}

	#coordonneesContact a{color: #333;}

	#coordonneesContact>div{
		display: block;
		position: absolute;
		width: 300px;
		height: 430px;
		padding: 20px;
		margin: 10px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		overflow-y: auto;
		border-collapse: separate;
		border-spacing: 0px 20px;
		box-sizing: border-box;
		color: #333;
		background-color: rgba(255,255,255,0.9);
		z-index: 1001;
	}

	#coordonneesContact>div>div{
		display: table-row;
		line-height: 30px;
	}

	#coordonneesContact>div>div>*{
		display: table-cell;
		vertical-align: top;
	}

	#coordonneesContact>div>div>:first-child{
		line-height: 30px;
		padding-right: 10px;
	}

	#horairesToday{font-weight: bold;}
	#horairesToday>div{cursor: pointer;}
	#horairesToday .ouvert{color: rgb(0,200,0);}
	#horairesToday .ferme{color: rgb(255,49,25);}

	#arrowAllHoraires {
		margin-left: 10px;
	}

	#horairesClinique>div {
		display: table;
		table-layout: fixed;
		border-collapse: collapse;
		box-sizing: border-box;
	}

	#horairesClinique>div>div {
		display: table-row;
		text-align: left;
	}

	#horairesClinique>div>div>* {
		display: table-cell;
	}

	#horairesClinique>div>div>:last-child {
		padding-left: 10px;
	}

	#horairesClinique ul {
		padding: 0;
	}

	#horairesClinique li {
		list-style-type: none;
	}

	#horairesClinique .exceptionnel {color: rgb(247,155,30); font-style: italic;font-size: 10pt;}
	#horairesClinique .today {font-weight: bold;}

	#openStreetMap{
		width:100%;
		height:450px;
	}

	#formContact{
	  width:1050px;
	  margin:0 auto;
	  border-top:15px solid rgb(88,148,237);
	  background:#FFF;
	  padding:0 20px 25px;
	  text-align:center;
	  font-family:Roboto;
	  text-align:center;
	  color:#B6B6B6;
	  box-sizing:border-box;
	}
	#formContact h3{
	  text-transform:uppercase;
	  font-size:20px;
	  line-height:60px
	}

	#formContact p {
		color: #333;
	}

	/*#formContact .valide_form {
		width: 66%;
		margin: auto;
		padding: 5px;
		font-style: italic;
		background-color: rgb(128, 227, 128);
		color: #333;
		box-sizing: border-box;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	}
	#formContact .invalide_form {
		width: 66%;
		margin: auto;
		padding: 5px;
		font-style: italic;
		background-color: rgb(255, 128, 128);
		color: #333;
		box-sizing: border-box;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	}*/

	.contactChamp{
		position: relative;
		width:66%;
		margin:12px auto;
		height:50px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		overflow: hidden;
		border: solid 1px rgb(255, 255, 255);
		-webkit-transition: all 0.3s;
		-ms-transition: all 0.3s;
		transition: all 0.3s;
	}

	.contactChamp *{box-sizing:border-box;}

	.contactChamp>input,
	.contactChamp>textarea{
		font-family: 'Roboto', sans-serif;
		width:100%;
		height:100%;
		padding-left:20%;
		background-color:#E8E9EA;
		border: none;
		outline:none;

		-webkit-transition: all 0.3s;
		-ms-transition: all 0.3s;
		transition: all 0.3s;
	}

	.contactChamp textarea{
		resize: none;
		padding-top:17px;
	}

	.contactChamp>label{
		position: absolute;
		top: 0;
		left: 0;
		width: 19%;
		height: 100%;
		background-color:rgb(88,148,237);
		color: #333;
		line-height:50px;

		-webkit-transition: all 0.3s;
		-ms-transition: all 0.3s;
		transition: all 0.3s;
	}

	.contactChamp>label>*{
		vertical-align: middle;
	}

	#formContact.closed label{
		width: 100%;
	}

	#nom+label {-webkit-transition: all 0.3, width 0.5s; -ms-transition: all 0.3, width 0.5s; transition: all 0.3s, width 0.5s;}
	#mail+label {-webkit-transition: all 0.3, width 0.7s; -ms-transition: all 0.3, width 0.5s; transition: all 0.3s, width 0.7s;}
	#tel+label {-webkit-transition: all 0.3, width 0.9s; -ms-transition: all 0.3, width 0.5s; transition: all 0.3s, width 0.9s;}
	#sujet+label {-webkit-transition: all 0.3, width 1.1s; -ms-transition: all 0.3, width 0.5s; transition: all 0.3s, width 1.1s;}
	#msg+label {-webkit-transition: all 0.3, width 1.3s; -ms-transition: all 0.3, width 0.5s; transition: all 0.3s, width 1.3s;}

	#formContact>button{
		font-family: 'Roboto', sans-serif;
		font-size: 12pt;
		height: 50px;
		margin-top: 24px;
		padding: 0 48px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	  	background-color: #333;
	  	color:rgb(88,148,237);
	  	border: none;
	  	outline: none;
	  	cursor:pointer;

	  	-webkit-transition: all 0.3s;
		-ms-transition: all 0.3s;
		transition: all 0.3s;
	}

	#requiredTag{
		margin-top: 8px;
		font-weight: 100;
		font-style: italic;
		font-size: 8pt;
	}

	.contactChamp.msgOpen {height: 150px;}
	.contactChamp.erreurLab {border: solid 1px rgb(255, 128, 128);}
	.contactChamp.erreurLab label{background-color:rgb(255, 128, 128);}
	.contactChamp.correctLab {border: solid 1px rgb(128, 227, 128);}
	.contactChamp.correctLab label{ background-color:rgb(128, 227, 128);}

	.floatButtons{
		position: fixed;
		z-index: 1004;
		display: block;
		right: 30px;
		bottom: 30px;
		width: 80px;
		height: 80px;
		padding: 8px;
		background-color: white;
		box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8);
		border-radius: 40px;
		overflow: hidden;
		text-align: center;
		box-sizing: border-box;

		-webkit-transition: all 0.3s;
		-ms-transition: all 0.3s;
		transition: all 0.3s;
	}

	.floatButtons>*{vertical-align: middle;line-height: 50px !important;}
	.floatButtons.first{right: 30px;}
	.floatButtons.second{right: 120px;}
	.floatButtons.third{right: 210px;}

	#floatRDV{background-color: white; color: rgb(7,28,250);}
	#floatRDV::after{
		content: 'RDV';
		position: absolute;
		bottom: 12px;
		margin: 0 10%;
		left: 0;
		width: 80%;
		font-size: 9pt;
		text-align: center;
	}
	#floatRDV:hover{background-color: rgb(7,28,250);color: white;}
	#floatSHOP{background-color: rgb(88,148,237);color: white;}
	#floatSHOP::after{
		content: 'boutique';
		position: absolute;
		bottom: 12px;
		margin: 0 10%;
		left: 0;
		width: 80%;
		font-size: 9pt;
		text-align: center;
	}
	#floatSHOP:hover{background-color: rgb(7,28,250);color: white;}

	#floatFORM{background-color: white;color: rgb(229, 122, 21);}
	#floatFORM::after{
		content: 'Référer';
		position: absolute;
		bottom: 12px;
		margin: 0 10%;
		left: 0;
		width: 80%;
		font-size: 9pt;
		text-align: center;
	}
	#floatFORM:hover{background-color: rgb(229, 122, 21);color: white;}


/**********************************************************************************/
/**********************           RESEAUX SOCIAUX            **********************/
/**********************************************************************************/
	#resSociaux{
		list-style:none;
		margin-top:20px;
		padding:0;
		width:100%;
		text-align:center;
	}
	#resSociaux li{
		display:inline-block;
		width:37px;
		height:37px;
		margin:0 5px;
	}
	#resSociaux li a{
		display:block;
		width:100%;
		height:100%;
		background-color: #EEE;
		background-image:url('../ressources/images/icones/sprite_social.png');
		background-repeat:no-repeat;
		background-size:200% auto;

		-webkit-border-radius:50%;
		-moz-border-radius:50%;
		border-radius:50%;

		-webkit-transition:all 0.3s;
		-ms-transition:all 0.3s;
		transition:all 0.3s;
	}

	#resSociaux #urlFacebook a	{background-position:left 0px;}#resSociaux #urlFacebook a:hover{background-position:right 0px;background-color:#1778F2;}#resSociaux #urlInstagram a	{background-position:left -111px;}#resSociaux #urlInstagram a:hover{background-position:right -111px;background-color:#BC2A8D;}#fixRes2{position: fixed;z-index:1002;right:51.5px;bottom: 120px;}#fixRes2 #resSociaux{margin:0px;width:auto;}#fixRes2 #resSociaux li{display:block;margin:5px 0px;}#fixRes2 #resSociaux li a{background-color: white;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);}@media screen and (max-width: 490px) {#fixRes2{bottom:95px;right:38.5px;}}


/**********************************************************************************/
/**********************                FOOTER                **********************/
/**********************************************************************************/

	#btn_cookie_consent{
		position: fixed;
		bottom: 10px;
		left: 10px;
		height: 40px;
		width: 40px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		background-color: rgb(255, 197, 42);
		-webkit-box-shadow: 0px 4px 16px 0px rgba(51, 51, 51, 0.3);
		-moz-box-shadow: 0px 4px 16px 0px rgba(51, 51, 51, 0.3);
		box-shadow: 0px 4px 16px 0px rgba(51, 51, 51, 0.3);
		z-index: 1004;
	}

	#btn_cookie_consent>i{
		color: rgb(51, 51, 51);
	}

	#btn_cookie_consent>i+span{
		margin-left: 4px;
	}

	#btn_cookie_consent:hover{
		bottom: 16px;
	}

	#cookie_consent_popup{
		position: fixed;
		bottom: 60px;
		left: -440px;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 120px;
		max-width: 420px;
		background-color: white;
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		border-radius: 16px;
		-webkit-box-shadow: 0px 4px 16px 0px rgba(51, 51, 51, 0.3);
		-moz-box-shadow: 0px 4px 16px 0px rgba(51, 51, 51, 0.3);
		box-shadow: 0px 4px 16px 0px rgba(51, 51, 51, 0.3);
		overflow: hidden;
		z-index: 1004;

		-webkit-transition:all 0.6s;
		-ms-transition:all 0.6s;
		transition:all 0.6s;
	}

	#cookie_consent_popup.active{
		left: 10px;
	}

	#cookie_consent_popup::before{
		position: absolute;
		content: '';
		top: -370px;
		right: -200px;
		width: 460px;
		height: 460px;
		-webkit-border-radius: 230px;
		-moz-border-radius: 230px;
		border-radius: 230px;
		background-color: rgb(255,197,42);
		z-index: -1;
	}

	#cookie_consent_popup>header{
		display: flex;
		flex-direction: row;
		padding: 16px;
	}

	#cookie_consent_popup>header>*{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	#cookie_consent_popup>header>div{
		flex: 1 1 auto;
	}

	#cookie_consent_popup>header>i{
		padding: 0px 24px;
		color: rgb(51, 51, 51);
	}

	#cookie_consent_popup>div{
		padding: 16px;
	}

	#cookie_consent_popup h2{
		font-weight: 600;
		margin: 0;
		color: rgb(51, 51, 51);
	}

	#cookie_consent_popup h2+span{
		font-weight: 300;
		font-size: 9pt;
		color: rgb(128, 128, 128);
	}

	#cookie_consent_popup h3{
		font-weight: 600;
		margin: 0;
		font-size: 11pt;
		color: rgb(51, 51, 51);
	}

	#cookie_consent_popup p{
		margin: 0;
		font-weight: 300;
		font-size: 10pt;
		color: rgb(128, 128, 128);
	}

	#cookie_consent_popup>footer{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-top: solid 1px rgb(239, 239, 239);
	}

	#cookie_consent_popup>footer>*{
		flex: 1 1 0;
		padding: 16px;
		-webkit-transition:all 0.2s;
		-ms-transition:all 0.2s;
		transition:all 0.2s;
	}

	#cookie_consent_popup>footer>*:hover{
		background-color: rgb(239, 239, 239);
	}

	#btn_acceptConsent{font-weight: 700; color: rgb(229, 122, 21);}
	#btn_confirmConsent{font-weight: 700; color: rgb(229, 122, 21);}

	#cookie_consent_popup .listCookies{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		overflow-y: auto;
	}

	#cookie_consent_popup .listCookies>article{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 12px;
	}

	#cookie_consent_popup .listCookies>article>div:first-child{
		flex: 1 1 auto;
	}

	#cookie_consent_popup .listCookies button{color: rgb(128, 128, 128);}
	#cookie_consent_popup .listCookies button.active{color: rgb(53, 211, 125);}
	#cookie_consent_popup .listCookies button.active.disabled{cursor: inherit;}

	body>footer{
		background-color: #DADADA;
		text-align:center;
		padding: 0px;
		box-sizing:border-box;
	}
	body>footer ul{
		list-style-type:none;
		margin:0;
		padding:15px;
	}
	body>footer ul li{
		display:inline-block;
		
		font-size:13px;
		padding:5px 24px;
		color:#333;
		box-sizing:border-box;
	}


	body>footer>ul:first-of-type li:not(:first-child){
		border-left:solid 1px #898989;
	}
	body>footer ul li a{
		color:#333;
	}
	body>footer ul li a:hover{
		color:#000;
	}

	#liensPartenaires span{
		cursor:pointer;
		padding-right: 12px;
	}

	#partenaires {
		display: none;
		background-color: #555;
	}
	#partenaires .contenu {
		margin: auto;
	}
	#partenaires ul {
		display: inline-block;
		vertical-align: top;
		padding: 5px;
		margin: 5px auto;
	}

	#partenaires ul:nth-child(2n+1) {
		border-right: solid 1px #DADADA;
	}



	#partenaires li {
		display: block;
		border: none;
	}
	#partenaires li a {
		color: white;
	}
	#partenaires li a:hover {
		color:rgb(88,148,237);
	}

	/* Google reCaptcha */
	.grecaptcha-badge{visibility: hidden;}


/**********************************************************************************/
/**********************      MENTIONS LEGALES + ERREURS      **********************/
/**********************************************************************************/

	#partie_erreur,
	#partieMentions{
		background-color: white;
		padding-top:100px;
	}
	
	#partie_erreur .separation {border-top:0}

	#partieMentions h2{
		color: rgb(88,148,237);
	}
	
	#partieMentions .contenu {
		padding-top:35px;
	}

	#tab_mentions{
		display: table;
		width:100%;
	}

	#tab_mentions>div{
		display: table-cell;
	}

	#erreur404{
		text-align: center;
		display: block;
		width: 100%;
		color: rgb(88,148,237);
		font-size: 300px;
		font-weight: 600;
		line-height: 300px;
	}

	#paraErreur{
		max-width: 1050px;
		width:100%;
		margin:0 auto 7px auto;
		padding:0 10px;
		text-align:center;
		box-sizing:border-box;
	}

/**********************************************************************************/
/**********************            DEMANDE DE RDV            **********************/
/**********************************************************************************/

#partieRDV{
		padding-top:100px;
}
#partieRDV h2 {
	color: rgb(7,28,250);
}
#partieRDV .contenu {
	border-top: solid 1px rgb(7,28,250);
	padding-top:35px;
}

/**********************************************************************************/
/**********************            VERSION MOBILE            **********************/
/**********************************************************************************/

@media screen and (max-width: 1130px) {
	/* Menu */
		#zone_logo {width: 150px;}
		#zone_titre h1 {font-size: 18pt;}
		#zone_categories {max-width: 450px;}
		#zone_categories>.element>span {font-size: 13pt;}
}
@media screen and (max-width: 1070px) {
	/* Général */
		.partie .contenu {padding: 50px 20px;width: auto;}
	/* Services */
		#partieServices {background-image: none;}
		.services{width:45.8%;margin:10px 1.8%;}
		#servInfos {width: 100%;}
	/* Contact */
		#coordonneesContact{width: 100%;}
		#formContact{width:100%;}
		#formContact .contactChamp,
		#formContact .valide_form,
		#formContact .invalide_form{width:95%;}
}
@media screen and (max-width: 1000px) {
	/* Equipe */
		#partieEquipe .contenu{padding:50px 5px;text-align:center;}
		#wrap_equipe{width:660px;}
}
@media screen and (max-width: 880px) {
	/* Menu */
		#zone_titre h1 {font-size: 15pt;}
		#zone_categories {max-width: 340px; margin-right: 0px;}
		#zone_categories>.element {margin: 0px 8px;}
		#zone_categories>.element>span{font-size: 11pt;}
	/* Services */
		#servInfos img{ width:100%;margin-bottom:20px;}
		#servInfos #fermer{margin-top:-5px;}
}
@media screen and (max-width: 780px) {
	/* Equipe */
		#wrap_equipe{width:440px;}

@media screen and (max-width: 700px) {
	/* Menu */
		.zone_menus {flex-direction: column; padding: 0px; height: initial;-webkit-box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.4);-moz-box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.4);box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.4);}
		#zone_clinique {width: 100%; background-color: white;}
		#zone_logo {width: 100px; padding: 4px 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;border-radius: 0px;-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0);-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0);box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0);}
		#zone_logo>img {max-height: 54px;}
		#zone_titre {justify-content: center; margin: 0px 4px;}
		#zone_titre h1 {text-align: center; color: rgb(7,28,250);text-shadow: 1px 1px 2px rgba(0, 0, 0, 0), 0px 0px 12px rgba(0, 0, 0, 0);}
		#zone_categories {background-color: rgb(7,28,250); width: 100%; height: 40px; max-width: initial;}
		#zone_categories>.element {margin: 0px; height: 100%;}
		#zone_categories>.element>span{text-shadow: 1px 1px 2px rgba(0, 0, 0, 0), 0px 0px 8px rgba(0, 0, 0, 0);border: none;}
		#zone_categories>.element:hover>span{border: none;}
	/* Général */
		.partie .separation {height: 50px;}
		.partie .separation h2 {line-height: 50px;}
	/* Diaporama */
		#partieAccueil{height: initial;}
		.zone_diapo>img{object-fit: contain;height: initial;}
		.zone_diapo>img:first-of-type{position: relative;}
		.zone_diapo>.texte{top: initial;left: initial;bottom: 0;width: 100%;}
		.zone_diapo>.texte * {color: #333 !important;}
	/* Clinique */
		#partieClinique .contenu{padding: 20px 0px;}
		#listeRubriques>div:first-of-type{flex-wrap: wrap;height: initial;line-height: 60px;}
		#listeRubriques>div img,
		#listeRubriques>div:nth-of-type(2n+1) img,
		#listeRubriques>div:nth-of-type(2n) img{display: block;margin: auto;float: none;max-width: 100%;max-height: 100%;}
	/* Services */
		.services{width:100%;margin:10px 0 10px;}
		#partieServices .contenu { padding: 50px 0; }
		.servImg:hover img{width:100%;margin:-100%;opacity:1;-webkit-filter:none;filter:none;}
		.services:hover .servImg{background:none;}
	/* Google Map */
		#openStreetMap {height: 315px;}
	/* Contact */
		#coordonneesContact{
			height: initial;
			margin: auto;
		}
		#coordonneesContact>div{
			position: relative;
			margin: 0;
			width: 100%;
			height: initial;
		}
	/* Footer */
		body>footer>ul li:last-child{width:100%;margin-top:10px}
		body>footer>ul:first-child li:last-child{border-left:0;}

}
@media screen and (max-width: 530px) {
	/* Equipe */
		#wrap_equipe{width:220px;}
}
@media screen and (max-width: 490px) {

	* {
		/*CSS animations*/
		-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}
	/* Contact */
		/*#contactRDV{width: 100%;box-sizing: border-box;}*/

	/* Footer */
		#cookie_consent_popup{max-width: calc(100% - 20px); max-height: calc(100% - 70px)}
		body>footer ul{padding:0px;}
		body>footer ul li{width:100%;margin-top:10px;border: none !important;}

	/* RDV + SHOP */
		.floatButtons {width: 60px;height: 60px;}
		.floatButtons>*{line-height: 30px;font-size: 1.30em !important;}
		.floatButtons.first{right: 27px;}
		.floatButtons.second{right: 92px;}
		.floatButtons.third{right: 157px;}
		.floatButtons {box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);}*/

}

@media screen and (max-width: 320px) {
	/* Rest */
		#partieEquipe .contenu{zoom:73% !important;}
}