/*
Charte de couleurs :
Vert 	  : #00B38F LIBRE
Jaune 	  : #F7E34A Pre-Reserve et Reservé Client
Rouge	  : #FF6347 Pré-Réservé coté admin
Orange 	  : orange / #FFA500 Selection
Gris 	  : #424A52 Fermé
*/
:root {
	--couleur_principale: #00B38F;
	--couleur_pre_reserve: #F7E34A;
  --couleur_reserve: #FF6347;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

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

.flex-outer,
.flex-inner {
  list-style-type: none;
  padding: 0;
}

.flex-outer {
  max-width: 450px;
  /*display:inline-block;*/
  margin: 0 auto;
}

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: top;
}

.flex-inner {
  padding: 0 8px;
  justify-content: space-between;
}

.flex-outer > li:not(:last-child) {
  /*margin-bottom: 20px;*/
}

.flex-outer li label,
.flex-outer li p {
  padding: 8px;
  /*font-weight: 300;
  letter-spacing: .09em;
  text-transform: uppercase;*/
}

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 120px;
  text-align: left;
}

.flex-outer > li > label + *,
.flex-inner {
  flex: 0 0 280px;
}

.flex-outer li p {
  margin: 0;
}

.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea {
  /*padding: 15px;*/
  font-family: "ZoeLocation",Helvetica,Arial,sans-serif;
}

.flex-outer li button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}

.flex-inner li {
  width: 100px;
}
/*******************/

html{
	font-family: "ZoeLocation", Helvetica, Arial, sans-serif;
	height:100%;
	margin:0 0 0 0;
	text-align:center;
	background-color:#424A52;
	min-width:320px;
	padding:0 0 0 0;
}

body{
	border-top: 4px solid #00B38F;
	margin:0 0 0 0;
	padding:0 0 0 0;
	max-width:1000px;
	/*min-width:670px;*/
	margin: auto;
	background-color:#FFFFFF;
}

table.elFormulaire > tbody > tr > td {
    /*display: flex;
    flex-wrap: wrap;*/
	/*display: inline-block;*/
}
input {
	width:90%;
	height:25px;
	border: 1px solid black;
	outline: none;
}
textarea{
	border: 1px solid black;
	outline: none;
}
input:focus, textarea:focus{
	border: 1px solid var(--couleur_principale);
}
*:focus {
    outline: none;
}
input.participantsNom, input.participantsPrenom, select.participantsAge{
	border:none;
}

.legende_preReserver{
	background-color:var(--couleur_pre_reserve);
	display:block;
	height:20px;
	width:35px;
	float:left;
}

.legende_reserver{
	background-color:var(--couleur_reserve);
	display:block;
	height:20px;
	width:35px;
	float:left;
}
/* RESPONSIVE */

/* PETIT */
@media screen and (max-width: 800px) {
	#top > div {
		vertical-align: middle;
		text-align: left;
		font-size:15px;
	}
	#wrapper{
		display:none;
	}

	#logo{
		margin-left: 10%;
		float:left;
	}

	#logoBottom{
		display:none;
	}

	#top > div.text1{
		clear: right;
		float: right;
		margin-right: 10%;
	}

	.equipement {
		padding:0 0 0 0;
	}

	#content{
		padding:0 10px 0 10px;
	}

	.legendeReserver{
		width:20px;
	}
}
#top {
	margin-top:10px;
}
/* GRAND */
@media screen and (min-width: 801px) {
	#top {
		/*position:fixed;*/
	}
	#top > div {
		display: inline-block;
		padding:0 5px 0 5px;
		vertical-align: middle;
		text-align: left;
		font-size:15px;
	}

	#top > div.text1{
		font-size:15px;
		font-weight: 400;
		padding-top:30px;
	}

	#logoBottom{
		display:inline-block;
		background-color:#00b38f;
	}

	.equipement {
		padding:20px 0 20px 0;
	}

	#content{
			padding:0 0 0 0;
	}

	.legendeReserver{
		width:35px;
	}
}

#content {
    clear: right;
}

.galerie > li > a > img {
	width:100%;
}

hr{
    display: block;
    padding: 0;
    border: 1px solid #F7E34A;
    font-family: arial;
    text-align: center;
    font-size: 60px;
	max-width:400px;
	height:1px;
	color:#F7E34A;
	background-color:#F7E34A;
	margin:auto;
}

a:visited , a:link {
	color: #000000;
	font-weight: normal;
	text-decoration:none;
}
a:hover, a:focus, a:active {
	color: #00B38F;
}

.legendeReserver {
	display:block;
	height:25px;
	float:left;
}

#bottom a:visited , #bottom  a:link, div.btnReserver a:visited, div.btnReserver a:link {
	color: #FFFFFF;
	text-decoration:none;
}
#bottom a:hover, #bottom a:focus, #bottom a:active, div.btnReserver a:hover, div.btnReserver a:focus, div.btnReserver a:active {
	color: #000000;
}

div > .text1.textVert a:visited , div > .text1.textVert a:link {
	color: #00B38F;
	text-decoration:none;
}
div > .text1.textVert a:hover, div > .text1.textVert a:focus, div > .text1.textVert a:active {
	color: #000000;
}

div > .link3 a:visited , div > .link3 a:link {
	color: #00B38F;
	text-decoration:underline;
	font-size:12px;
}
div > .link3 a:hover, div > .link3 a:focus, div > .link3 a:active {
	color: #000000;
	font-size:12px;
}

.texth1{
	text-decoration:none;
	font-size: 32px;
	margin-top:10px;
	font-weight:400;
}
.texth2{
	color:#000000;
	text-decoration:none;
	font-size: 24px;
	font-weight:200;
}

.texth3{
	color:#000000;
	text-decoration:none;
	font-size: 25px;
	font-weight:400;
}

.textVert{
	color:#00B38F;
}

.titrePage{
	font-size: 24px;
	font-weight:400;
}

@font-face {
    font-family: "ZoeLocation";
    src: url('font/Rubik-Light.ttf');
	font-weight: 200;
}
@font-face {
    font-family: "ZoeLocation";
    src: url('font/Rubik-LightItalic.ttf');
	font-weight: 200;
	font-style: italic;
}
@font-face {
    font-family: "ZoeLocation";
    src: url('font/Rubik-Regular.ttf');
	font-weight: 400;
}
@font-face {
    font-family: "ZoeLocation";
    font-style: italic;
    src: url('font/Italic.ttf');
	font-weight: 400;
}
@font-face {
    font-family: "ZoeLocation";
    src: url('font/Rubik-Medium.ttf');
	font-weight: 500;
}
@font-face {
    font-family: "ZoeLocation";
    src: url('font/Rubik-MediumItalic.ttf');
	font-weight: 500;
	font-style: italic;
}
@font-face {
    font-family: "ZoeLocation";
    src: url('font/Rubik-Bold.ttf');
	font-weight: 600;
}
@font-face {
    font-family: "ZoeLocation";
    src: url('font/Rubik-BoldItalic.ttf');
	font-weight: 600;
	font-style: italic;
}
@font-face {
    font-family: "ZoeLocation";
    src: url('font/Rubik-Black.ttf');
	font-weight: 700;
}
@font-face {
    font-family: "ZoeLocation";
    src: url('font/Rubik-BlackItalic.ttf');
	font-weight: 700;
	font-style: italic;
}

div{
	border:0px groove;
	background-color:#FFFFFF;
}

#bottom {
	border-top:4px;
    border-style: solid;
    border-top-color: #F7E34A;
	background-color:#00B38F;
	padding:10px 0 10px 0;
}

#bottom > .bottomMenu {
	display: inline-block;
	background-color:#00B38F;
	padding:0 40px 0 20px;
	vertical-align: top;
	text-align: left;
	color:#FFFFFF;
	font-size:12px;
	line-height : 20px;
	width:150px;
}

#bottom > .bottomMenu > .text1 {
	font-size:17px;
	font-weight: 500;
}

.box{
	display: inline-block;
	border:0px groove;
	padding:0 40px 0 20px;
	font-size:13px;
}

.box > img {
	width:120px;
}

.equipement {
	display: inline-block;
	border:0px groove;
    width: 250px;
	border:0px groove;
	/*padding:20px 0 20px 0;*/
	text-align:left;
}

.equipement > img {
	padding-right:20px;
	vertical-align:middle;
}

#copyright{
	font-size:11px;
	line-height : 30px;
	font-weight: 400;
}

.btnReserver{
	background-color:#00B38F;
	width:180px;
	margin-left:auto;
	margin-right:auto;
	padding:10px 10px 10px 10px;
	font-weight:500;
	font-size:20px;
	color:white;
	border-radius: 10px;
}
.btnReserver:hover{
	color:#F7E34A;
	background-color:#424A52;
	cursor: pointer;
}


.navigation{
	text-align:left;
	padding-left:10px;
	font-size:12px;
}

/*SCRIPT*/
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  /*height: auto;*/
  float: left;
  border: 0;
  }

#galerie-pager a {
  display: inline-block;
}

#galerie-pager img {
  float: left;
}

#galerie-pager .rslides_here a {
  background: transparent;
  box-shadow: 0 0 0 2px #00B38F;

}

#galerie-pager a {
  padding: 0;
}

#galerie {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  margin: 0 auto;
  }

 .galerie{
	border:1px solid #00B38F;
 }

.rslides_tabs {
  list-style: none;
  padding: 0;
  font-size: 18px;
  list-style: none;
  margin: 0 auto 50px;
  padding: 10px 0;
  text-align: center;
  }

.rslides_tabs li {
  display: inline;
  float: none;
  margin-right: 1px;
  }

.rslides_tabs a {
  width: auto;
  line-height: 20px;
  padding: 9px 20px;
  height: auto;
  background: transparent;
  display: inline;
  }

.rslides_tabs li:first-child {
  margin-left: 0;
  }


#calContent{
	margin-left:auto;
	margin-right:auto;
	border:1px groove;
	width:610px;
}

.cal{
	border:1px groove green;
	float:left;
	width:300px;
}

#divCalendrier{
	border:1px groove #00B38F;
	max-width:600px; /*Responsive*/
	margin-left:auto;
	margin-right:auto;
	padding:30px 0 30px 0;
}
select{
    font-size: 15px;
}

/* DEB -  LIVRE D'OR */
.ldGlobal{
	border:0px groove blue;
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
	padding:10px 0 0 0;
}
.ldPseudo {
	color:blue;
	border:0px groove;
	float:left;
	font-size:12px;
	margin:0 10px 0 10px;
}
.ldCommentaire {
	border:0px groove;
	text-align:left;
	font-size:15px;
	padding:0 0 20px 0;
	margin:0 10px 0 10px;
}
.ldNote {
	border:0px groove;
	text-align:right;
	margin:0 10px 0 10px;
}
/* FIN -  LIVRE D'OR */


.creditPhoto{
	font-size:10px;
	text-align:right;
	max-width: 650px;
	margin:auto;
	padding-top:2px;
}

.creditPhoto > a{
	color:#00B38F;
	text-decoration:underline;
}

/* CSS JQUERY */
.hasDatepicker{
	margin-left:auto;
	margin-right:auto;
	max-width:34em;
	clear:both;
}
div.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
	margin:auto;
}

.ui-state-active {
	background-color:  orange !important;
}
.ui-state-highlight {
	background-color:  orange !important;
}

/** ENCOURS **/
.class_EnCours > a{
	background-color:  orange !important;
	color:black !important;
}
.class_EnCours_deb > a {
	background: linear-gradient(to top left, orange 50%, #00B38F 50%) !important;
	color:black !important;
}
.class_EnCours_fin > a {
	background: linear-gradient(to bottom right, orange 50%, #00B38F 50%) !important;
	color:black !important;
}
td.class_EnCours > span.ui-state-default{
	background-color:  orange !important;
	color:black !important;
}

/** RESERVE **/
.class_Reserve > a{
	background-color:  #FF6347 !important;
	color:black !important;
}
.class_Reserve_deb > a {
	background: linear-gradient(to top left, #FF6347 50%, #00B38F 50%) !important;
	color:black !important;
}
.class_Reserve_fin > a {
	background: linear-gradient(to bottom right, #FF6347 50%, #00B38F 50%) !important;
	color:black !important;
}

td.class_Reserve > span.ui-state-default{
	background-color:  #FF6347 !important;
	color:black !important;
}

/** PRE-RESERVE **/
.class_PreReserve > a{
	background-color:  #F7E34A !important;
	color:black !important;
}
.class_PreReserve_deb > a {
	background: linear-gradient(to top left, #F7E34A 50%, #00B38F 50%) !important;
	color:black !important;
}
.class_PreReserve_fin > a {
	background: linear-gradient(to bottom right, #F7E34A 50%, #00B38F 50%) !important;
	color:black !important;
}
td.class_PreReserve > span.ui-state-default{
	background-color: #F7E34A !important;
	color:black !important;
}

.class_preResa_resa > a {
	background: linear-gradient(to top left, #FF6347 50%, #F7E34A 50%) !important;
	color:black !important;
}

.class_resa_preResa> a {
	background: linear-gradient(to top left, #F7E34A 50%, #FF6347 50%) !important;
	color:black !important;
}

.class_preResa_preResa> a {
	background: linear-gradient(to top left, #F7E34A 50%, #F7E34A 50%) !important;
	color:black !important;
}

.class_resa_resa> a {
	background: linear-gradient(to top left, #FF6347 50%, #FF6347 50%) !important;
	color:black !important;
}

.class_selection_preResa_deb  > a {
	background: linear-gradient(to top left, orange 50%, #F7E34A 50%) !important;
	color:black !important;
}

.class_selection_resa_deb > a {
	background: linear-gradient(to top left, orange 50%, #FF6347 50%) !important;
	color:black !important;
}

.class_selection_preResa_fin  > a {
	background: linear-gradient(to top left, #F7E34A 50%, orange 50%) !important;
	color:black !important;
}

.class_selection_resa_fin> a {
	background: linear-gradient(to top left, #FF6347 50%, orange 50%) !important;
	color:black !important;
}

.class_selection_deb  > a {
	background: linear-gradient(to top left, orange 50%, #00B38F 50%) !important;
	color:black !important;
}

.class_selection_fin > a {
	background: linear-gradient(to top left, #00B38F 50%,  orange 50%) !important;
	color:black !important;
}

.class_selection > a {
	background-color: orange !important;
	color:black !important;
}

td.class_Ferme > span.ui-state-default{
	background-color: #424A52 !important;
	color:white !important;
}

td.class_PreReserve, td.class_Reserve, td.class_EnCours{
	opacity: 1 !important;
}

.dateSet{
	border : 1px groove #00B38F;
	color: #00B38F;
}

.plageSelected {
	background-color :red !important;
}

.tab th {
	background-color:#00B38F;
	font-size:15px;
	font-weight:400;
	border:1px groove;
}

.tab td {
	font-size:15px;
	font-weight:100;
	border:1px groove #00B38F;
}

.tab td  > input {
	height:25px;
}

.tab td.type1 {
}

.tab td.type2 {
	background-color:#F7E34A;
}
.tab_link{
	color:blue;
	cursor: pointer;
}
.tab_link:hover {
	color:red;
}

.tab.lien tr:hover{
	cursor:pointer;
	background-color:#F7E34A;
}

.tableTarif th {
	background-color:#00B38F;
	font-size:20px;
	font-weight:500;
}
.tableTarif td.type1 {
}

.tableTarif td.type2 {
	background-color:#F7E34A;
}

.tableTarif  tr.cliquable:hover{
	background-color:#F7E34A;
	cursor: pointer;
}
/**************** ADMIN *****************/
.table_admin th {
	background-color:#00B38F;
	font-size:20px;
	font-weight:500;
}
.table_admin td.type1 {
}

.table_admin td.type2 {
	background-color:#F7E34A;
}
.table_admin_link{
	color:blue;
	cursor: pointer;
}
.table_admin_link:hover {
	color:red;
}

.table_admin.lien tr:hover{
	background-color:#F7E34A;
}

.divFaq {
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	max-width:600px;
	padding:10px;
}

.divFaq > span {
	display:block;
	color:#00B38F;
	padding-left:20px;
	padding-bottom:5px;
}

.divFaq > a {
	text-decoration:underline;
}

a.popup:hover, a.popup:focus{
     background:rgba(0,0,0,.4);
     box-shadow:0 1px 0 rgba(255,255,255,.4);
}
a.popup > span{
     position:absolute;
		 margin-top:23px;
     margin-left:-35px;
		 color:var(--couleur_principale);
     background:rgba(0,0,0,.9);
     padding:15px;
     border-radius:3px;
     box-shadow:0 0 2px rgba(0,0,0,.5);
		 transform:scale(0) rotate(-12deg);
		 transition:all .25s;
		 opacity:0;
}
a.popup:hover span, a.popup:focus span{
     transform:scale(1) rotate(0);
		 opacity:1;
}