body
{
	font-size: 100%;
	font-family: Helvetica, Arial, Tahoma, Sans-Serif;
	margin:0px;
	width:100%;
	color: #424242;
}

ul li::before {
  content: "\200B";
}
ul li::marker {
  color: #01B9B0;
}
a {
	color: black;
}

@media screen and (max-width: 750px)
{
body
{
	font-size: 90%;
}
}

/* -------------------- entete pour telephones mobiles ---------------*/

#header_phone
{
	display : none;
	align-items: center;
	font-family:verdana,arial,"trebucher MS",sans-serif;
	font-size:1.2em;
	text-align:center;
	width:100%;
	padding-top: 5px;
}

#header_phone a {
	display: flex;
	justify-items: center;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 50%;
	text-decoration: none;
	color: #FFFFFF;
	margin-left: 3px;
	margin-right: 3px;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	background-color: #7C7D8C;
	border-radius: 10px;
}

/* -------------------- entete pour pc ---------------*/
#header_pc {
	width: 100%;
	display: inline-flex;
	justify-content: space-around;
	align-content: center;
	flex-direction: row;
	background-color: #7C7C88;
	font-family: arial,verdana,"trebucher MS",sans-serif;
	font-size: 1.1em;
	min-height: 55px;
}

#header_pc div, #header_pc a
{
	display: flex;
	align-items: center;
	color: white;
	text-decoration: none; 
}

@media screen and (max-width: 650px)
{
#header_pc
{
	margin: auto;
	display: flex;
	flex-direction: column;
}
#header_pc div, #header_pc a
{
	margin: 0px auto 0px auto;
	justify-content: center;
}

}


/* ---------------------------- haut de page ----------------------------*/
.header
{
	display: flex;
	justify-content: center;
	margin-left:auto;
	margin-right:auto;
	align-items: center;
	margin-top:10px;
	width: 96%;
	min-height: 6rem;
}

.header .logo,.header .titre_page,.header .logo_droit
{
	margin-left:10px;
	margin-right:10px;
}

.header .titre_page
{
	color: #7C7C88;
	font-family:verdana,arial,"trebucher MS",sans-serif;
	font-size:3.0em;
	text-align: center;
}

.header img
{
    width: auto\9;
    height: auto;
    width: 100%;
    max-width: 100%;
}

.header .logo_droit
{
	border:1px solid black;
}


/* ------------------------- page principale ------------------------- */
.all_page
{
	display: flex;
	min-width: 200px;
	flex-direction: column;
	font-size: 1em;
	margin: 15px auto 15px auto;
	box-shadow: 100px 0px 110px -150px rgb(0, 0, 0),-100px 0px 110px -150px rgb(0, 0, 0);
	border-radius: 0px;
	max-width: 1300px;
	width:100%;
}

h1 {
	text-align: center;
	color: #01B9B0;
	font-size: 1.4rem;
	letter-spacing: 0.05rem;
	line-height: 1.8rem;
}

/* -------------- menu -----------------*/
.menu {
	display: inline-flex;
	z-index: 2;
	width: 90%;
	line-height: 1.2em;
	min-height: 2.2em;
	font-size: 1.2em;
	font-family: verdana,arial,"trebucher MS",sans-serif;
	text-align: center;
	overflow: auto;
	color: #7A7C88;
	margin: auto;
	letter-spacing: 0.01rem;
	position: sticky;
	top: 1px;
	background-color: white;
	padding: 5px 0px;
}

.menu a {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
	color: #7A7C88;
	border-left: 1px solid #7A7C88;
	border-right: 1px solid #7A7C88;
}

a.menu_actif {
	background-color: #4FA99F;
	color: white;
}

.menu a:first-of-type {
  border-left: none;
}

.menu a:last-of-type {
	border-right: none;
}
.menu a div
{
	
	display: block;
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
}

.menu .menu_bt
{
	display: none;
}

@media screen and (max-width: 550px) 
{
div.logo + span.titre_page
{
	display:none;
}

.menu {
	display: block;
	text-align: left;
	position: sticky;
	width: 100%;
	background-color: transparent;
	overflow: visible;
	line-height: 1.9em;
	z-index: 10000;
	top: 0px;
}

.menu .menu_bt {
	width: 100%;
	display: flex;
	align-items: center;
	background-color: #1BADA1;
	color: white;
	min-height: 2.2rem;
}

.menu .menu_bt img
{
	float:left;
	width :1.3em;
	height :1.3em;
	margin-right: 1em;
	margin-left: 0.5em;
}


.menu a {
	width: 100%;
	display: none;
	border: none;
	border-top: 1px solid white;
	background-color: #1BADA1;
	color: white;
	padding-left: 45px;
}

a.menu_actif {
	color: #C3C3C3;

}
.menu:hover a 
{
  	display: block;
}




}


/*--------------- article type page accueil ----------*/

.article
{
	display : flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 90%;

	align-items: center;
	line-height:1.5em;
	font-size: 1em;
	padding-top:10px;
	padding-bottom:10px;
	margin: auto;
}


/* specifique IE : la hauteur de l'article se base sur la hauteur de la photo avant reduction... bizarrement un 100% sur le height regle ça*/
@media all and (-ms-high-contrast: none)
{
	.article
	{
		height:100%;
	}
}

.article .article_gauche
{
	flex: 1 47%;
	text-align:center;
}

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

.article .article_droit
{
	flex: 1 50%;
	text-align: justify;
	margin-left: 3%;
}

.article .article_pleine_page
{
	width: 100%;
	flex: 1 100%;
	text-align: justify;
}


.article p a img
{
	width:2em;
	height:2em;
	vertical-align:middle;
	margin-left:0.5em;
}

ul.specialite
{
	margin-top: 0.5em;
	list-style: none outside none;
	padding: 0px;
	text-align: center;
}
ul.specialite li
{
	min-height: 2em;
	border-top: 1px solid #bbb;
	letter-spacing: 0.04rem;
	align-items: center;
	display: flex;
	justify-content: center;
	line-height: 1.3rem;
	border-bottom: 1px solid #bbb;
}

ul.specialite li:first-of-type {
  border-top: 2px solid #bbb;
}

ul.specialite li:last-of-type {
	border-bottom: 2px solid #bbb;
}

@media screen and (max-width: 1000px) /*750*/
{

.article .article_gauche , .article .article_droit
{
	flex: 1 100%;
	margin-left: 0px;
}

}
/* ------------------slider------------------------------*/
.slider_contener
{
	width: 100%;
	overflow: hidden;
	display:block;
}

.slider_contener img
{
	height: 100% !important;
	width: 100% !important;
}

.slider_contener p
{
    flex-grow: 1;
    flex-basis: 100px;
}
.slider2
{
	display: flex;
	width: 300%;
	position: relative;
	animation: slider2 12s infinite;
}

@keyframes slider2
{
	0%, 41.667%, 100%	{ transform: translateX(0%); }
	50.000%, 91.667%	{ transform: translateX(-33.333333%); }		
	99.99%			{ transform: translateX(-66.666667%); }
}

.slider3
{
	display: flex;
	width: 400%;
	position: relative;
	animation: slider3 18s infinite;
}


@keyframes slider3
{
	0%, 27.778%, 100%	{ transform: translateX(0%);}
	33.333%, 61.111%	{ transform: translateX(-25%);}		
	66.667%, 94.444%	{ transform: translateX(-50%);}		
	99.990%			{ transform: translateX(-75%);}
}

.slider4
{
	display: flex;
	width: 500%;
	position: relative;
	animation: slider4 24s infinite;
}

@keyframes slider4
{
	0%, 20.833%, 100%	{ transform: translateX(0%);}
	25.000%, 45.833%	{ transform: translateX(-20%);}	
	50.000%, 70.833%	{ transform: translateX(-40%);}
	75.000%, 95.833%	{ transform: translateX(-60%);}
	99.990%			{ transform: translateX(-80%);}
}

.slider5
{
	display: flex;
	width: 600%;
	position: relative;
	animation: slider5 30s infinite;
}

@keyframes slider5
{
	0%, 16.667%, 100%	{ transform: translateX(0%);}
	20.000%, 36.667%	{ transform: translateX(-16.666667%);}
	40.000%, 56.667%	{ transform: translateX(-33.333333%);}
	60.000%, 76.667%	{ transform: translateX(-50%);}
	80.000%, 96.667%	{ transform: translateX(-66.666667%);}
	99.990%			{ transform: translateX(-83.333333%);}
}
.slider6
{
	display: flex;
	width: 700%;
	position: relative;
	animation: slider6 36s infinite;
}

@keyframes slider6
{
	0%, 14.583%, 100%	{ transform: translateX(0%);}
	16.67%, 31.250%		{ transform: translateX(-14.285714%);}
	33.333%, 47.917%	{ transform: translateX(-28.571429%);}
	50.000%, 64.583%	{ transform: translateX(-42.857143%);}
	66.667%, 81.250%	{ transform: translateX(-57.142857%);}
	83.333%, 97.917%	{ transform: translateX(-71.428571%);}
	99.990%			{ transform: translateX(-85.714286%);}
}

/* -------------------- Mentions ------------------------*/
.mentions
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;	
	margin-top:1em;	
	margin-bottom:1em;
}

.mentions div
{
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
	min-width:250px;
	margin-left:1%;
	margin-right:1%;
}
.mentions .editeur
{
	min-width:380px;
}

.titre_mention
{
	text-align: center;
	width: 100%;
	background-color: #01B9B0;
	color: white;
	line-height: 1.7em;
	font-size: 1.1em;
}
.mentions div span
{
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 450px)
{
.mentions
{
	display:block;
}
.mentions div, .mentions .editeur
{
	min-width:0px;
}

.mentions div span
{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
}

/*----------------equipe---------------*/


.trombi
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin:auto;
	width: 100%;
}

.personnel
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	/*! max-width: 500px; */
	justify-content: left;
	line-height:1.3em;
	margin-top:0.5em;
	margin-bottom:0.5em;
	min-width: 320px;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 10px;
}

@media screen and (max-width: 450px)
{
.trombi
{
	flex-direction: column;
}
}

.personnel img
{
	flex: 0;
}

.personnel span
{
	margin-left:1em;
	flex: 1 200px;
}

.personnel span br
{
	margin-bottom: 0.5em;
}

.personnel h1
{
	font-size: 1.3rem;
	margin-top: 0px;
	margin-bottom: 0.5em;
	text-align: left;
	letter-spacing: 0px;
}
/*------------------- no utiles -----------------*/
.numeros ul {
	display: flex;
	text-align: center;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	line-height: 1.35rem;
}
.numeros li{
	min-width: 300px;
	list-style-type: none;
	flex-basis: 1px;
}
.numeros li h2{
	font-size: 1rem;
	margin: 0px;
}


/* ----------------- ordonnance en ligne --------------- */
input[type=text], input[type=email], input[type=number], textarea, fieldset
{
/* nécessaire, sur les navigateurs basés sur Webkit, pour appliquer correctement le style des éléments de formulaire */
  -webkit-appearance: none;

  border: 1px solid #333;
  font-family: inherit;
  font-size: 1em;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


input:invalid {
  box-shadow: 0 0 2px 1px red;
}

input:focus:invalid {
  outline: none;
}


input:invalid+span::after {
  color:red;
  content: '?';
  padding-left: 5px;
}

input:valid+span::after {
  color:green;
  content: '?';
  padding-left: 5px;
}


/* specifique IE : sinon IE ne mets pas a jour*/
@media all and (-ms-high-contrast: none)
{
  input:focus:valid + span:after {
    content: '?';
    color:green;
    padding-left: 5px;
  }

  input:focus:invalid + span:after {
    content: '?';
    color:red;
    padding-left: 5px;
  }
}

.article form
{
	display: flex;
	flex-flow: row wrap;
	margin-bottom:1em;
}

.formulaire_coord , .formulaire_ordo
{
	border: 2px solid rgb(1, 185, 176);
	margin-bottom:1em;
	padding: 0px 0px 5px 0px;
	max-width: 100%;
}
.formulaire_coord  .titre_mention, .formulaire_ordo .titre_mention {
	margin: 0px 0px 0.7rem 0px;
}
.formulaire_coord
{
	flex: 1 1 25%;
	display: flex;
	flex-direction: column;
}

.formulaire_ordo
{
	flex: 1 1 70%;
}

.formulaire_valid
{
	flex: 1 1 100%;
	text-align: center;
}

.formulaire_coord div, .formulaire_ordo div
{
	display: flex;
	flex-direction: column;	
	margin: 0px 10px;
}
.formulaire_coord > div > div > div {
  flex: 1;
  min-width: 270px;
  flex-direction: column;
  display: flex;
}
.formulaire_coord > div > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0px;
}
.formulaire_coord input, .formulaire_ordo input
{
	margin-bottom:1em;
}

.formulaire_coord .input_concatener, .formulaire_ordo .input_concatener
{
	flex-direction: row;
	width: 100%;
	margin: auto;
}
.select_file {
	align-items: center;
	margin-bottom: 10px;
	flex-direction: row !important;
	width: 100%;
	justify-content: space-between;
}

input#fichier {
	width: 1px;
	flex-grow: 0;
	opacity: 0;
}
.preview {
	width: 60%;
	display: block !important;
	align-self: stretch;
	border: 1px dashed #a8a8a8;
	text-align: center;
	align-self: center;
}

.preview img {
	width: 90%;
	margin: auto;
}

.preview p {
	text-align: center;
	word-break: break-word;
}


.input_concatener input
{
	flex-grow:1;
	width:20px
}

input[type="button"]{
	background: linear-gradient(45deg, #11AFBB, #C5D32E);
	border: none;
	border-radius: 2rem;
	padding: 1rem 2rem;
	color: white;
	font-size: 1.2rem;
	box-shadow: inset -5px -5px 6px 2px rgba(0, 0, 0, 0.21), inset 5px 5px 6px 2px rgba(255, 255, 255, 0.49);
	text-transform: uppercase;
	letter-spacing: 0.1rem;	
}
.progress_concatener
{
	border-radius: 3px;
	border: 1px solid grey;
	border-image: none;
	width: 100%;
	background-color: lightgrey;
}

.progress_bar
{
	width: 0px;
	height: 10px;
	display: block;
	background-color: rgba(8, 161, 25, 1);
}
.progress_detail_concatener
{
	display: flex;
	flex-wrap: wrap;
}

.progress_uploaded
{
	flex:1 0 11em;
	text-align: left;
}
.progress_percent
{
	flex-grow: 1;
	flex-shrink: 0;
	text-align: center;
}
.progress_text
{
	flex:1 0 11em;
	text-align: right;
}

/*---------------- pied de page horaire et adresse ----------*/

#footer1 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	background-color: #7C7C88;
	width: 90%;
	font-family: verdana;
	font-size: 1em;
	color: white;
	margin: auto;
	padding: 13px 0px;
	justify-content: space-around;
	align-items: stretch;
}

.col_horaires, .col_adresse {
	display: block;
	text-align: left;
	margin: 10px;
}
.col_horaires {
  min-width: fit-content;
}	

.col_adresse {
	display: flex;
	flex-direction: column;
	flex-basis: 0px;
	margin: 10px;
	min-width: fit-content;
	justify-content: space-between;
}
	
.lien_page {
	color: #C8D046;
	line-height: 1.4rem;
	text-decoration: none;
	border-bottom: 2px solid #A8AC6A;
	letter-spacing: 1px;
	width: fit-content !important;
}

a.lien_page:hover {
	border-bottom: 2px solid #C3C3C3;
}

/*XXXXXXXXXXXXX*/

.col_appli {
  max-width: 350px;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
}
@media screen and (max-width: 1000px)
{
.footerappli {
	flex-wrap: wrap !important;
	justify-content: space-between !important;
}

.footerappli div.col_horaires 
{
	width: 100%; 
}
.footerappli div.col_adresse
{
	width: 100%;
}
.col_appli {
	width: 100%; 
}	
}


@media screen and (max-width: 650px) 
{

#footer1
{
	flex-direction: column;
	align-items: center;
}
.col_horaires , .col_adresse, .footerappli div.col_horaires, .footerappli div.col_adresse
{
	width: 90%;
	text-align: center;
	display: block;
	min-width: unset;
}
}

.titre_col {
	color: #C8D046;
	font-weight: bold;
	letter-spacing: 1px;
	width: 100%;
}

.titre_col hr
{
	border: 0px;
	border-top: 1px solid;
	margin-bottom: -0.7em;
	border-color: white;
	width:100%
}

/* liste des horaires */
.list2c
{
	display : flex;
	flex-direction: column;
	margin: 5px 0px;
}

.lignelist2c
{
	display : flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:space-between;
	margin-bottom: 3px;
}

.lignelist2c span+span
{
	text-align:right;
	margin-left: 1em;
}

#courriel::before
{
	content:attr(data-debut) "\0040" attr(data-fin);
}

#courriel , #telephoner a
{
	font-family: inherit;
	font-size: inherit;
	text-align:inherit;
	padding : 0px;
	border : none;
	background:none;
	text-decoration: none;
	color: white;
}

#courriel:hover , a:hover
{
	color: #C3C3C3 !important;
}

/*---------------------- pied de page ----------------------- */

.footer_contener {
	display: block;
	width: 100%;
	max-width: 1300px;
	margin: 15px auto 15px auto;
	text-align: center;
}

.footer {
	display: flex;
	width: 90%;
	flex-direction: row;
	margin: auto;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: space-between;
}
@media screen and (max-width: 950px)
{
.footer {
	flex-direction: column;
}
}
.footer img
{
	width:100%;
}