/* typos */
/* rouge #bd396b;
noir #000000;
bleu logo #425269;
vert logo #567c71;
vert clair #b6cfc1;
blanc #ffffff;*/

/* typos */

h1	{
	margin-top : 0px;
	margin-bottom : 20px;
	width : 100%;
	background-color : #bd396b;
	vertical-align : middle;
	padding : 3px;
	text-align : left;
	font-weight : normal;
	font-size : 20pt;
	color : #ffffff;
	}
h2	{
	margin-top : 0px;
	margin-bottom : 6px;
	font-weight : normal;
	font-size : 18pt;
	color : #8eddea;
	}
h3	{
	margin : 0px;
	font-size : 16pt;
	font-weight : normal;
	color : #ffffff;
	}
h4	{
	margin : 0px;
	font-size : 20pt;
	font-weight : normal;
	color : #567c71;
	}
.large {font-size : 12pt;}
.medium	{font-size : 10pt;}
.small	{font-size : 8pt;}
.mini {font-size : 6pt;}
.rouge {color: #bd396b;}
.bleu {color: #425269;}
.vert {color: #567c71;}
.vertclair {color: #b6cfc1;}
.blanc {color: #ffffff;}
.bold {font-weight: bold;}

/* GÉNÉRAL ################################################################ */

* {
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box;
	box-sizing: border-box;
	}
a	{
	text-decoration : none;
	border : 0px;
	color : inherit;
	}
sup	{
	line-height : 70%;
	}
.inline_block	{
	display : inline-block; margin-right : 2%;
	}
.inlineblock	{
	display : inline-block;
	}
.floatleft	{
	display : block;
	float : left;
	margin-right : 2%;
	}
hr { border: 0; height: 1px; background-color: #bd396b; }

/*fieldset {
border: 1pt solid #bd396b;
border-radius: 10px 10px 10px 10px;
background-color: #567c71;
padding: 2%;
color: #ffffff; 
}*/

/* CARROUSEL ################################################################ */

div#slider #slide {
	position: relative;
	width: 400%;
	margin: 0;
	padding: 0;
	font-size: 0;
	text-align: left;
	animation-name : slidy;
	animation-duration : 20s;
	animation-iteration-count : infinite;
	animation-timing-function : ease-in-out;
}
div#slide:hover { animation-play-state : paused; }

div#slider #slide figure.carrousel { width: 25%; height: auto; display: inline-block; margin: 0; }

div#slider { width: 100%; overflow: hidden }

div#slider #slide figure.carrousel figcaption	{
position : relative; bottom : 40px; right : 0px; height : 40px; width 100%;
border-top : 1px solid #bd396b; padding-top : 10px; background-color : #567c71;
font-size : 16px; color : #ffffff; text-align: center;
opacity: 0; transition : opacity 1s; }
div#slider #slide figure.carrousel:hover figcaption	{ opacity: 0.6; }

@keyframes slidy {
0%	{	left : 0%;	}
32%	{	left : 0%;	}
33%	{	left : -100%;	}
65%	{	left : -100%;	}
66%	{	left : -200%;	}
98%	{	left : -200%;	}
99%	{	left : -300%;	}
100%	{	left : -300%;	}
}


/* ##########################################################################
#############################################################################
#############################################################################
#############################################################################
############################################################################# */	
	
@media screen and (min-width: 1024px)   /* ################################  */
{

body {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	position : relative;
	font-family: 'Arial';
	color : #000000;
	}
header	{
	width:100%;
	display: table;
	height: 70px;
	margin-left:auto;
	margin-right:auto;
	position : relative;
	background-color: #000000;
	vertical-align: bottom;
	}
	
#footer	{
	width:100%;
	display: table;
	height: 50px;
	margin-left:auto;
	margin-right:auto;
	position : relative;
	background-color: #000000;
	vertical-align: middle;
	padding-left: 20px;
	padding-right: 20px;
	}
.footer	{
	display: table-cell;
	text-align: right;
	vertical-align: middle;
	height: 100%;
	}
	
	.container {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 19.5%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) - 4/3 : 75% - Carre : 100%  22,36%; */
	margin-bottom: 5px;
	}

#logoheader {
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	height: 100%;
	}

#navigation {
	display: table-cell;
	text-align: right;
	vertical-align: bottom;
	margin-left: 20px;
	height: 100%;
	}

.nav {
	display: inline-block;
	margin: 10px;
	padding: 10px;
	text-align: center;
	height: 30px;
	font-size: 10pt;
	color: #b6cfc1;
	}
.nav:hover {
	color: #ffffff;
	}

#global	{
	position : relative;
	width : 96%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	}
	
.titrepage {
	display: tablecell;
	width: 100%;
	height: 60px;
	text-align: left;
	padding-left: 2.6%;
	padding-top: 18px;
	background-color: #bd396b;
	vertical-align: middle;
	
	}

/*######## FLEX ##########*/
	
.contentflex {
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin-left: 1,5%;
	margin-right: 1,5%;
	background-color: #ffffff;
	}
.element {
	width: 33%;
	min-width: 300px;
	background-color: #567c71;
	padding:1.5%;
}
.contenu {
	display: table;
	position: relative;
	width: 96%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	vertical-align: top;
	}
.contenublack {
	display: table;
	position: relative;
	width: 100%;
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 5px;
	text-align: center;
	vertical-align: top;
	}
.tablecell {
	display: tablecell;
	position: relative;
	margin-left: 4px;
	margin-right: 4px;
	text-align: center;
	vertical-align: middle;
	}

.tiersplus {
	display: inline-block;
	position: relative;
	text-align: center;
	width: 32%;
	background-image: url("images/accueil01.jpg");
	background-size: cover;
	padding:1.5%;
	margin-right: 1%;
	}
.tierstable {
	display: inline-block;
	position: relative;
	width: 32%;
	background-image: url("images/accueil02.jpg");
	background-size: cover;
	padding:1.5%;
	color: #010437;
	}
.tierstourisme {
	display: inline-block;
	position: relative;
	width: 32%;
	background-image: url("images/accueil03.jpg");
	background-size: cover;
	padding:1.5%;
	margin-left: 1%;
	}
.cartouchenoir {
	width: 60%;
	position: relative;
	background-color: #000000;
	padding: 1%;
	padding-bottom: 2%;
	text-align: center;
	margin-top: 50%;
	margin-left: auto;
	margin-right: auto;
}
.tierstexteleft {
	display: tablecell;
	float: left;
	position: relative;
	width: 32%;
	text-align: left;
	vertical-align: top;
	margin-right: 1.8%;
	}
.tierstextemiddle {
	display: tablecell;
	float: left;
	position: relative;
	width: 32%;
	text-align: left;
	vertical-align: top;
	}
.tierstexteright {
	display: tablecell;
	float: left;
	position: relative;
	width: 32%;
	text-align: left;
	vertical-align: top;
	margin-left: 1.8%;
	}
.imginlinechambre {
	display: inline-block;
	width: 58%;
	min-height: 200px;
	background-image: url("images/bandeauchambre.jpg");
	background-size: cover;
	}
	
.chambreleft {
display: inline-block;
width: 60%;
height: auto;
margin-right: 1.5%;
vertical-align: top;
text-align: left;
}
.chambreright {
display: inline-block;
width: 38.5%;
height: auto;
vertical-align: top;
text-align: left;
}
	
/* formulaire ########################################### */

.moduleinput {
display: table;
width: 100%;
margin-bottom: 10px;
margin-top: 5px;
vertical-align: middle;
}
label {
width: 21%;
display: inline-block;
vertical-align: middle;
font-size: 10pt;
color: #b6cfc1;
}
.input {
width: 78%;
height: 25px;
display: inline-block;
background-color: #ffffff;
vertical-align: middle;
font-size: 10pt;
color: #425269;
padding: 3px;
border: none;
}
input:invalid {
  border: 1px dashed red;
  }
.inputcourt {
width: 30%;
height: 30px;
display: inline-block;
background-color: #ffffff;
vertical-align: middle;
font-size: 10pt;
color: #425269;
padding: 3px;
border: none;
}
.inputcarre {
width: 30px;
height: 30px;
display: inline-block;
background-color: #ffffff;
vertical-align: middle;
text-align: center;
font-size: 10pt;
color: #425269;
padding: 3px;
border: none;
}

textarea {
width: 100%;
height: 120px;
display: inline-block;
background-color: #ffffff;
vertical-align: middle;
font-size: 10pt;
color: #425269;
padding: 3px;
margin-top: 5px;
border: none;
}

.fieldsetform {
width: 100%;
display: inline-block;
border: 1pt solid #bd396b;
border-radius: 10px 10px 10px 10px;
padding: 2%;
margin: 2%;
text-align: left;
vertical-align: top;
}

.submit	{
width: 100px;
height: 28px;
padding: 7px;
display: inline-block;
background-color: #567c71;
border: none;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: 8pt;
color: #000000;
}
.submit:hover	{
background-color: #b6cfc1;
color: #000000;
}
.submitcourt	{
width: 50px;
height: 20px;
padding-bottom: 4px;
position: relative; top: -2px;
display: inline-block;
background-color: #7ca18d;
border: none;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: 8pt;
color: #ffffff;
}
.submitcourt:hover	{
background-color: #4b6063;
color: #ffffff;
}
.reset	{
width: 100px;
height: 28px;
padding: 7px;
display: inline-block;
background-color: #425269;
border: none;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: 8pt;
color: #ffffff;
}
.reset:hover	{
background-color: #bd396b;
color: #ffffff;
}

} /* fin min-width 1024


/* ##########################################################################
#############################################################################
#############################################################################
#############################################################################
############################################################################# */	
	
	

@media screen and (min-width: 620px) and (max-width: 1023px)   /* ################################  */
{

body {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	position : relative;
	font-family: 'Arial';
	color : #000000;
	}
header	{
	width:100%;
	display: table;
	height: 70px;
	margin-left:auto;
	margin-right:auto;
	position : relative;
	background-color: #000000;
	vertical-align: bottom;
	}
	
#footer	{
	width:100%;
	display: table;
	height: 50px;
	margin-left:auto;
	margin-right:auto;
	position : relative;
	background-color: #000000;
	vertical-align: middle;
	padding-left: 20px;
	padding-right: 20px;
	}
.footer	{
	display: table-cell;
	text-align: right;
	vertical-align: middle;
	height: 100%;
	}
	
	.container {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 19.5%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) - 4/3 : 75% - Carre : 100%  22,36%; */
	margin-bottom: 5px;
	}

#logoheader {
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	height: 100%;
	}

#navigation {
	display: table-cell;
	text-align: right;
	vertical-align: bottom;
	margin-left: 20px;
	height: 100%;
	}

.nav {
	display: inline-block;
	margin: 2px;
	padding: 5px;
	text-align: center;
	height: 25px;
	font-size: 10pt;
	color: #b6cfc1;
	}
.nav:hover {
	color: #ffffff;
	}

#global	{
	position : relative;
	width : 96%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	}
	
.titrepage {
	display: tablecell;
	width: 100%;
	height: 60px;
	text-align: left;
	padding-left: 2.6%;
	padding-top: 18px;
	background-color: #bd396b;
	vertical-align: middle;
	
	}

/*######## FLEX ##########*/
	
.contentflex {
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin-left: 1,5%;
	margin-right: 1,5%;
	background-color: #ffffff;
	}
.element {
	width: 33%;
	min-width: 300px;
	background-color: #567c71;
	padding:1.5%;
}
.contenu {
	display: table;
	position: relative;
	width: 96%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	vertical-align: top;
	}
.contenublack {
	display: table;
	position: relative;
	width: 100%;
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 5px;
	text-align: center;
	vertical-align: top;
	}
.tablecell {
	display: tablecell;
	position: relative;
	margin-left: 4px;
	margin-right: 4px;
	text-align: center;
	vertical-align: middle;
	}

.tiersplus {
	display: inline-block;
	position: relative;
	text-align: center;
	width: 32%;
	background-image: url("images/accueil01.jpg");
	background-size: cover;
	padding:1.5%;
	margin-right: 1%;
	}
.tierstable {
	display: inline-block;
	position: relative;
	width: 32%;
	background-image: url("images/accueil02.jpg");
	background-size: cover;
	padding:1.5%;
	color: #010437;
	}
.tierstourisme {
	display: inline-block;
	position: relative;
	width: 32%;
	background-image: url("images/accueil03.jpg");
	background-size: cover;
	padding:1.5%;
	margin-left: 1%;
	}
.cartouchenoir {
	width: 60%;
	position: relative;
	background-color: #000000;
	padding: 1%;
	padding-bottom: 2%;
	text-align: center;
	margin-top: 50%;
	margin-left: auto;
	margin-right: auto;
}
.tierstexteleft {
	display: block;
	position: relative;
	width: 100%;
	text-align: justify;
	vertical-align: top;
	margin-bottom: 10px;
	}
.tierstextemiddle {
	display: block;
	position: relative;
	width: 100%;
	text-align: justify;
	vertical-align: top;
	margin-bottom: 10px;
	}
.tierstexteright {
	display: block;
	position: relative;
	width: 100%;
	text-align: justify;
	vertical-align: top;
	margin-bottom: 10px;
	}
.imginlinechambre {
	display: inline-block;
	width: 58%;
	min-height: 200px;
	background-image: url("images/bandeauchambre.jpg");
	background-size: cover;
	}
	
.chambreleft {
display: inline-block;
width: 60%;
height: auto;
margin-right: 1.5%;
vertical-align: top;
text-align: left;
}
.chambreright {
display: inline-block;
width: 38.5%;
height: auto;
vertical-align: top;
text-align: left;
}
	
/* formulaire ########################################### */

.moduleinput {
display: table;
width: 100%;
margin-bottom: 10px;
margin-top: 5px;
vertical-align: middle;
}
label {
width: 21%;
display: inline-block;
vertical-align: middle;
font-size: 10pt;
color: #b6cfc1;
}
.input {
width: 78%;
height: 25px;
display: inline-block;
background-color: #ffffff;
vertical-align: middle;
font-size: 10pt;
color: #425269;
padding: 3px;
border: none;
}
input:invalid {
  border: 1px dashed red;
  }
.inputcourt {
width: 30%;
height: 30px;
display: inline-block;
background-color: #ffffff;
vertical-align: middle;
font-size: 10pt;
color: #425269;
padding: 3px;
border: none;
}
.inputcarre {
width: 30px;
height: 30px;
display: inline-block;
background-color: #ffffff;
vertical-align: middle;
text-align: center;
font-size: 10pt;
color: #425269;
padding: 3px;
border: none;
}

textarea {
width: 100%;
height: 120px;
display: inline-block;
background-color: #ffffff;
vertical-align: middle;
font-size: 10pt;
color: #425269;
padding: 3px;
margin-top: 5px;
border: none;
}

.fieldsetform {
width: 100%;
display: inline-block;
border: 1pt solid #bd396b;
border-radius: 10px 10px 10px 10px;
padding: 2%;
margin: 2%;
text-align: left;
vertical-align: top;
}

.submit	{
width: 100px;
height: 28px;
padding: 7px;
display: inline-block;
background-color: #567c71;
border: none;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: 8pt;
color: #000000;
}
.submit:hover	{
background-color: #b6cfc1;
color: #000000;
}
.submitcourt	{
width: 50px;
height: 20px;
padding-bottom: 4px;
position: relative; top: -2px;
display: inline-block;
background-color: #7ca18d;
border: none;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: 8pt;
color: #ffffff;
}
.submitcourt:hover	{
background-color: #4b6063;
color: #ffffff;
}
.reset	{
width: 100px;
height: 28px;
padding: 7px;
display: inline-block;
background-color: #425269;
border: none;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: 8pt;
color: #ffffff;
}
.reset:hover	{
background-color: #bd396b;
color: #ffffff;
}


}





/* ##########################################################################
#############################################################################
#############################################################################
#############################################################################
#############################################################################
@media screen and (min-width: 480px) ##################################### */

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


body {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	position : relative;
	font-family: 'Arial';
	color : #000000;
	}
header	{
	width:100%;
	display: table;
	height: 70px;
	margin-left:auto;
	margin-right:auto;
	position : relative;
	background-color: #000000;
	vertical-align: bottom;
	}
	
#footer	{
	width:100%;
	display: table;
	height: 50px;
	margin-left:auto;
	margin-right:auto;
	position : relative;
	background-color: #000000;
	vertical-align: middle;
	padding-left: 20px;
	padding-right: 20px;
	}
.footer	{
	display: table-cell;
	text-align: right;
	vertical-align: middle;
	height: 100%;
	}
	
	.container {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 19.5%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) - 4/3 : 75% - Carre : 100%  22,36%; */
	margin-bottom: 5px;
	}

#logoheader {
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	height: 100%;
	}

#navigation {
	display: table-cell;
	text-align: right;
	vertical-align: bottom;
	margin-left: 20px;
	height: 100%;
	}

.nav {
	display: inline-block;
	margin: 1px;
	padding: 2px;
	text-align: center;
	height: 20px;
	font-size: 9pt;
	color: #b6cfc1;
	}
.nav:hover {
	color: #ffffff;
	}

#global	{
	position : relative;
	width : 96%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	}
	
.titrepage {
	display: tablecell;
	width: 100%;
	height: 60px;
	text-align: left;
	padding-left: 2.6%;
	padding-top: 18px;
	background-color: #bd396b;
	vertical-align: middle;
	
	}

/*######## FLEX ##########*/
	
.contentflex {
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin-left: 1,5%;
	margin-right: 1,5%;
	background-color: #ffffff;
	}
.element {
	width: 33%;
	min-width: 300px;
	background-color: #567c71;
	padding:1.5%;
}
.contenu {
	display: table;
	position: relative;
	width: 96%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	vertical-align: top;
	}
.contenublack {
	display: table;
	position: relative;
	width: 100%;
	background-color: #000000;
	margin-left: auto;
	margin-right: 10px;
	padding-right: 20px;
	margin-top: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
	text-align: center;
	vertical-align: top;
	}
.tablecell {
	display: block;
	position: relative;
	margin-left: 4px;
	margin-right: 4px;
	text-align: center;
	vertical-align: middle;
	}

.tiersplus {
	display: block;
	position: relative;
	text-align: center;
	width: 100%;
	background-image: url("images/accueil01.jpg");
	background-size: cover;
	padding:1.5%;
	}
.tierstable {
	display: block;
	position: relative;
	width: 100%;
	background-image: url("images/accueil02.jpg");
	background-size: cover;
	padding:1.5%;
	color: #010437;
	}
.tierstourisme {
	display: block;
	position: relative;
	width: 100%;
	background-image: url("images/accueil03.jpg");
	background-size: cover;
	padding:1.5%;
	}
.cartouchenoir {
	width: 60%;
	position: relative;
	background-color: #000000;
	padding: 1%;
	padding-bottom: 2%;
	text-align: center;
	margin-top: 50%;
	margin-left: auto;
	margin-right: auto;
}
.tierstexteleft {
	display: block;
	position: relative;
	width: 100%;
	text-align: justify;
	vertical-align: top;
	}
.tierstextemiddle {
	display: block;
	position: relative;
	width: 100%;
	text-align: justify;
	vertical-align: top;
	}
.tierstexteright {
	display: block;
	position: relative;
	width: 100%;
	text-align: justify;
	vertical-align: top;
	}
.imginlinechambre {
	display: inline-block;
	width: 58%;
	min-height: 200px;
	background-image: url("images/bandeauchambre.jpg");
	background-size: cover;
	}
	
.chambreleft {
display: block;
width: 100%;
height: auto;
vertical-align: top;
text-align: left;
}
.chambreright {
display: block;
width: 100%;
height: auto;
vertical-align: top;
text-align: left;
}
	
/* formulaire ########################################### */

.moduleinput {
display: table;
width: 100%;
margin-bottom: 10px;
margin-top: 5px;
vertical-align: middle;
}
label {
width: 21%;
display: inline-block;
vertical-align: middle;
font-size: 10pt;
color: #b6cfc1;
}
.input {
width: 78%;
height: 25px;
display: inline-block;
background-color: #ffffff;
vertical-align: middle;
font-size: 10pt;
color: #425269;
padding: 3px;
border: none;
}
input:invalid {
  border: 1px dashed red;
  }
.inputcourt {
width: 30%;
height: 30px;
display: inline-block;
background-color: #ffffff;
vertical-align: middle;
font-size: 10pt;
color: #425269;
padding: 3px;
border: none;
}
.inputcarre {
width: 30px;
height: 30px;
display: inline-block;
background-color: #ffffff;
vertical-align: middle;
text-align: center;
font-size: 10pt;
color: #425269;
padding: 3px;
border: none;
}

textarea {
width: 100%;
height: 120px;
display: inline-block;
background-color: #ffffff;
vertical-align: middle;
font-size: 10pt;
color: #425269;
padding: 3px;
margin-top: 5px;
border: none;
}

.fieldsetform {
width: 100%;
display: block;
border: 1pt solid #bd396b;
border-radius: 10px 10px 10px 10px;
padding: 2%;
margin: 2%;
text-align: left;
vertical-align: top;
}

.submit	{
width: 100px;
height: 28px;
padding: 7px;
display: inline-block;
background-color: #567c71;
border: none;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: 8pt;
color: #000000;
}
.submit:hover	{
background-color: #b6cfc1;
color: #000000;
}
.submitcourt	{
width: 50px;
height: 20px;
padding-bottom: 4px;
position: relative; top: -2px;
display: inline-block;
background-color: #7ca18d;
border: none;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: 8pt;
color: #ffffff;
}
.submitcourt:hover	{
background-color: #4b6063;
color: #ffffff;
}
.reset	{
width: 100px;
height: 28px;
padding: 7px;
display: inline-block;
background-color: #425269;
border: none;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: 8pt;
color: #ffffff;
}
.reset:hover	{
background-color: #bd396b;
color: #ffffff;
}



}