a:link 
{ 
 text-decoration:none; 
} 

input[type="radio"].demo5 {
  display: none;
}
input[type="radio"].demo5 + label {
  position: relative;
  padding-left: 1.3rem;
}
input[type="radio"].demo5 + label::before,
input[type="radio"].demo5 + label::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  content:'';
  width: 1rem;
  height: 1rem; 
  border-radius: 1rem;
}
input[type="radio"].demo5 + label::before {
  border: 1px solid #0CB652;
  background-color: #eee;
}
input[type="radio"].demo5:checked + label::after {
  background-color: #0CB652;
}
#radio {
 display:block;  
 width:auto;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#0CB652;
 color:white;
 text-decoration:none;
 text-align:center;
 padding:20px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 cursor:pointer;
}	

checkbox.cg { border-radius: 60%; width:30px; height:30px; }		  



/* écrans TELEPHONES largeur maxi 480 px ************************************************************************/
/*******************************************************************************************************************************************/
@media(max-width: 480px) {
	
.video {
	width: 100%;
	height: auto;

}

#moncercle{
  background:#bfd70e;
  border-radius:50%;
  width:160px;
  height:160px;
  border:2px solid #679403; 
}

.circles {
  display: flex;
}
.circle-with-text {
  background: linear-gradient(orange, red);
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  margin: 5px 10px;
  font-size: 15px;
  padding: 5px;
  display: flex;
  height: 70px;
  width: 70px;
  color: #fff;
}
.multi-line-text {
  font-size: 14px;
}

.circle2-with-text {
background: linear-gradient(135deg, orange 60%, cyan);	
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  margin: 5px 10px;
  font-size: 20px;
  padding: 5px;
  display: flex;
  height: 70px;
  width: 70px;
  color: #fff;
}
	
font.sign2 {
	font-size: 20px;
	color:#04AA6D;
	font-weight:bold;
}	
font.sign {
	font-size: 20px;
	color:white;
	font-weight:bold;
}	
	
	
label.label { text-align: left; font-weight: bold; font-size: 12px; color:#F76A0C; height: 12px;font-family: arial, trebuchet; }	

	ul {
  width: 100%;
  max-width: 50em;
  min-width: 10em;
 display: flex;
  justify-content: center;
 padding:0;
 list-style-type:none;
 }
li {
 margin-left:2px;
 float:left; /*pour IE*/
 }
ul li a {
 display:block;
 float:left;   
 width:150px;
 background-color:#F76A0C;
 color:white;
 text-decoration:none;
 text-align:center;
 padding:20px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
ul li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 }

p.logo {
	color: #404040;
	padding-left: 5px;
	text-align: left;
	width: auto;
}	
p.exp {
	padding: 5px;
	text-align: left;
	font-style: arial,tahoma;
	font-weight : normal;
	font-size: 14px;	
}
p.menu {
	color: #404040;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	font: Arial,Tahoma;
	margin-left: 12px;	
	width: 100%;
}

img.photo {
 width:300px;
}

.box {
	margin-left:auto;
	margin-right: auto;
	width: 100%;
/*  display: flex; */
	display: block;
	direction: column;
/*  align-items: stretch; */
}

.box2 {
margin-left: 0px;
width: 100%;
background-color: white;
color: #404040;		
}

.box3 {
margin-left: 0px;
width: 100%;	
background-color: white;
}
div.tarif {
margin-bottom: 30%;
	margin-left: auto;
	margin-right: auto;
	width: 100%;		
}
table.tarif {
margin-bottom: 5%;
	margin-left: auto;
	margin-right: auto;
    height: auto;
	width: 100%;
	border: 1;
	border-color: white;
}

table.tarif2 {
margin-bottom: 5%;
	margin-left: auto;
	margin-right: auto;
    height: auto;
	width: 100%;
	border: 1;
	border-color: white;
}
table.debut {
	margin-top:5px;
	margin-left: auto;
	margin-right: auto;
    height: auto;
	width: 100%;
	border: 1;
	border-color: white;
}
table.photo {
	height: auto;
	margin-left: auto;
	margin-right: auto;
	width: 300px;	
	border: none;
	
}
th.photo {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;	
	
}
th.offre {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: grey;
	font-size: 30px;		
}
th.prix {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: white;
	background-color: #F76A0C;	
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 12px;
	text-align: center;	
}
th.prix2 {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: white;
	background-color: #04AA6D;	
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 12px;
	text-align: center;	
}
th.prix3 {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: white;
	background-color: #F76A0C;	
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 12px;
	text-align: center;	
}

td.prix {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: #404040;
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 12px;
	text-align: right;
	background-color: #F1B652;	
}
td.prixC {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: #404040;
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	background-color: #F1B652;		
}
td.prixL {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: #404040;
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 12px;
	text-align: left;
	background-color: #F1B652;		
}
th.titre {

font-family: arial;
font-size: 24px;
color: #F56001;
border: 0;
font-style: bold;
text-align: center;
width: auto;
padding: 0px;
background-color: white;
}

h1.titre {

font-family: arial;
font-size: 24px;
color: #F56001;
border: 0;
font-style: bold;
text-align: center;
width: auto;
padding: 0px;
background-color: white;
}

th.normalL {

font-family: arial;
font-size: 14px;
	color: #404040;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: left;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}
th.normalLCouleur {

font-family: arial;
font-size: 14px;
	color: #F56001;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: left;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}
th.normalLCouleurR {

font-family: arial;
font-size: 14px;
	color: #F56001;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: right;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}
th.normalC {

font-family: arial;
font-size: 20px;
	color: #404040;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: center;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}
th.normalD {

font-family: arial;
font-size: 20px;
	color: #404040;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: right;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}

input.nom, input[type=text], input[type=password] {
      width: 90%;
      height: 5px;
	  margin-top: 0px;
      margin-left: auto;
	  border:solid 5px #ccc;
      color:#fff;
      background-color: white;
      padding:10px;
	  color: grey;
	  font-weight: bold;
	  font-size:20px;
      border-radius: 10px;
}

input.nomPM {
      width: 90%;
      height: 5px;
	  margin-top: 0px;
      margin-left: auto;
	  border:solid 5px #ccc;
      color:#fff;
      background-color: white;
      padding:10px;
	  color: grey;
	  font-weight: bold;
	  font-size:20px;
      border-radius: 10px;
}
input.age {
      width: 45%;
      height: 5px;
	  margin-top: 0px;
      margin-left: auto;
	  border:solid 5px #ccc;
      color:#fff;
      background-color: white;
      padding:10px;
	  color: grey;
	  font-weight: bold;
	  font-size:20px;
      border-radius: 10px;
}
select.nom {
      width: 100%;
      height: 40px;
	  margin-top: 2px;
      margin: 0 auto;
	  border:solid 5px #ccc;
      color:#213D64;
      background-color: white;
      padding:5px;
	  font-weight: bold;
	  font-size: 14px;
      border-radius: 10px;
margin:10px 0;font-family: arial, trebuchet;
 }

 textarea.nom {
	  margin-top: 2px;
      margin: 0 auto;
	  border:solid 5px #ccc;
      color:#213D64;
      background-color: white;
      padding:5px;
	  font-weight: bold;
	  font-size: 14px;
      border-radius: 10px;	
	  color:#213D64;
	  resize: both;
	  min-width : 90%;
	  min-height : 40px;
	  max-width : 90%;
	  max-height : auto;

}  
	


div.photo {
position:relative;	
margin-left: auto;
margin-right: auto;	
width: 100%
	
}
nav.menu {
	margin-left: 5px;
	padding-left: 10px;
	padding-right: 10px;
	font: arial,tahoma;
	font-size: 12px;
	font-weight: bold;
	color: #404040;
	width: 60px;	
}

span.menu {
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;	
	background-color: #EFEFEF;	
	width: 100%;
	
}



#bouton {
 display:block; 
	margin-left: auto;
	margin-right: auto; 
 width:150px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#0CB652;
 color:white;
 text-decoration:none;
 text-align:center;
 padding:20px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 cursor:pointer;
}
#boutonOrange {
 display:block; 
	margin-left: auto;
	margin-right: auto; 
 width:150px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#F76A0C;
 color:white;
 text-decoration:none;
 text-align:center;
 padding:20px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 cursor:pointer;
}



#boutonY {
 display:block; 
	margin-left: auto;
	margin-right: auto;
 width:90px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#FFD800;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:10px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 border-radius: 10px;
 cursor:pointer;
}

#boutonZ {
 display:block; 
	margin-left: auto;
	margin-right: auto;
 width:40px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#FFD800;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:10px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 border-radius: 10px;
 cursor:pointer;
}

#boutonZvert {
 display:block; 
	margin-left: auto;
	margin-right: auto;
 width:40px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#0CB652;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:10px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 border-radius: 10px;
 cursor:pointer;
}

#boutonZrouge {
 display:block; 
	margin-left: auto;
	margin-right: auto;
 width:40px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#FF0010;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:10px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 border-radius: 10px;
 cursor:pointer;
}

}



/* écrans TABLETTES largeur MINI 481 px et MAXI 780 px ************************************************************************/
/*******************************************************************************************************************************************/
@media(min-width: 481px) AND (max-width: 780px) {
	
.video {
	width: 100%;
	height: auto;

}

#moncercle{
  background:#bfd70e;
  border-radius:50%;
  width:160px;
  height:160px;
  border:2px solid #679403; 
}
.circles {
  display: flex;
}
.circle-with-text {
  background: linear-gradient(orange, red);
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  margin: 5px 20px;
  font-size: 30px;
  padding: 10px;
  display: flex;
  height: 150px;
  width: 150px;
  color: #fff;
}

.multi-line-text {
  font-size: 30px;
}

.circle2-with-text {
background: linear-gradient(orange 60%, cyan);
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  margin: 5px 20px;
  font-size: 45px;
  padding: 14px;
  display: flex;
  height: 150px;
  width: 150px;
  color: #fff;
}

font.sign2 {
	font-size: 30px;
	color:#04AA6D;
	font-weight:bold;
}
font.sign {
	font-size: 30px;
	color:white;
	font-weight:bold;
}	


	
label.label { text-align: left; font-weight: bold; font-size: 16px; color:#F76A0C; height: 12px;font-family: arial, trebuchet; }	


	ul {
  width: 80%;
  max-width: 50em;
  min-width: 10em;
  display: flex; 
  justify-content: center;
 padding:0;
 list-style-type:none;
 }
li {
 margin-left:2px;
 float:left; /*pour IE*/
 }
ul li a {
 display:block;
 float:left;   
 width:200px;
 background-color:#F76A0C;
 color:white;
 text-decoration:none;
 text-align:center;
 padding:20px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
ul li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 }



	
p.logo {
	color: #404040;
	padding-left: 5px;
	text-align: left;
	width: 100%;
}
p.exp {
	padding: 5px;
	text-align: left;
	font-style: arial,tahoma;
	font-weight : normal;
	font-size: 18px;	
}
	
p.menu {
	color: #404040;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	font: Arial,Tahoma;
	margin-left: 12px;	
	width: 100%;
}

img.photo {
 width:600px;
}
div.tarif {
	margin-left: auto;
	margin-right: auto;
	width: 50%;		
}
table.tarif {
	margin-top:5px;
	margin-left: auto;
	margin-right: auto;
    height: auto;
	width: 60%;
	border: 1;
	border-color: white;
}
table.tarif2 {
	margin-top:5px;
	margin-left: auto;
	margin-right: auto;
    height: auto;
	width: 40%;
	border: 1;
	border-color: white;
}
table.debut {
	margin-top:100px;
	margin-left: auto;
	margin-right: auto;
    height: auto;
	width: 80%;
	border: 1;
	border-color: white;
}

table.photo {
	width: 600px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	
}
th.photo {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;	
	
}
th.offre {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: grey;
	font-size: 30px;		
}

th.prix {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: white;
	background-color: #F76A0C;	
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
}
th.prix {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: white;
	background-color: #04AA6D;	
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
}
th.prix2 {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: white;
	background-color: #04AA6D;	
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
}
th.prix3 {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: white;
	background-color: #F76A0C;	
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
}
td.prix {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: #404040;	
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 16px;
	text-align: right;
	background-color: #F1B652;		
}
td.prixC {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: #404040;
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	background-color: #F1B652;		
}
td.prixL {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: #404040;
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 16px;
	text-align: left;
	background-color: #F1B652;		
}
th.titre {
font-family: arial;
font-size: 26px;
color: #F56001;
border: 0;
font-style: bold;
text-align: center;
width: auto;
padding: 0px;
background-color: white;
}
h1.titre {
font-family: arial;
font-size: 24px;
color: #F56001;
border: 0;
font-style: bold;
text-align: center;
width: auto;
padding: 0px;
background-color: white;
}
th.normalL {
font-family: arial;
font-size: 20px;
	color: #404040;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: left;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}
th.normalLCouleur {

font-family: arial;
font-size: 20px;
	color: #F56001;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: left;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}
th.normalLCouleurR {

font-family: arial;
font-size: 20px;
	color: #F56001;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: right;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}

th.normalC {

font-family: arial;
font-size: 20px;
	color: #404040;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: center;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}
th.normalD {

font-family: arial;
font-size: 20px;
	color: #404040;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: right;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}

input.nom, input[type=text], input[type=password] {
      width: 90%;
      height: 5px;
	  margin-top: 0px;
      margin-left: auto;
	  border:solid 5px #ccc;
      color:#fff;
      background-color: white;
      padding:10px;
	  color: grey;
	  font-weight: bold;
	  font-size:20px;
      border-radius: 10px;
}

input.nomPM {
      width: 70%;
      height: 5px;
	  margin-top: 0px;
      margin-left: auto;
	  border:solid 5px #ccc;
      color:#fff;
      background-color: white;
      padding:10px;
	  color: grey;
	  font-weight: bold;
	  font-size:20px;
      border-radius: 10px;
}
input.age {
      width: 45%;
      height: 5px;
	  margin-top: 0px;
      margin-left: auto;
	  border:solid 5px #ccc;
      color:#fff;
      background-color: white;
      padding:10px;
	  color: grey;
	  font-weight: bold;
	  font-size:20px;
      border-radius: 10px;
}
select.nom {
      width: 100%;
      height: 40px;
	  margin-top: 2px;
      margin: 0 auto;
	  border:solid 5px #ccc;
      color:#213D64;
      background-color: white;
      padding:5px;
	  font-weight: bold;
	  font-size: 14px;
      border-radius: 10px;
margin:10px 0;font-family: arial, trebuchet;
 }
 textarea.nom {
	  margin-top: 2px;
      margin: 0 auto;
	  border:solid 5px #ccc;
      color:#213D64;
      background-color: white;
      padding:5px;
	  font-weight: bold;
	  font-size: 14px;
      border-radius: 10px;	
	  color:#213D64;
	  resize: both;
	  min-width : 90%;
	  min-height : 40px;
	  max-width : 90%;
	  max-height : auto;

}
	

div.photo {
position: relative;
margin-left: auto;
margin-right: auto;
width: 60%;
}

span.menu {
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;	
	background-color: #EFEFEF;	
	width: 100%;
	
}

nav.menu {
	margin-left: 200px;
	padding-left: 20px;
	padding-right: 20px;
	font: arial,tahoma;
	font-size: 12px;
	font-weight: bold;
	color: #404040;
	width: 200px;	
}
	
.box {
margin-bottom: 0%;
position: relative;
width: 100%;
margin-left: 0px;
height: auto;

}

.box2 {
float: left;
width: 100%;
margin-top: 10px;
margin-left: 0px;

}

.box3 {
float: left;
width: 100%;
margin-left: 0px;
}

#bouton {
 display:block; 
  	margin-left: auto;
	margin-right: auto; 
 width:200px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#0CB652;
 color:white;
 text-decoration:none;
 text-align:center;
 padding:20px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 cursor:pointer;

}

#boutonOrange {
 display:block; 
  	margin-left: auto;
	margin-right: auto; 
 width:200px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#F76A0C;
 color:white;
 text-decoration:none;
 text-align:center;
 padding:20px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 cursor:pointer;

}


#boutonY {
 display:block; 
	margin-left: auto;
	margin-right: auto;
 width:200px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#FFD800;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:20px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 border-radius: 10px;
 cursor:pointer;
}
#boutonZ {
 display:block; 
	margin-left: auto;
	margin-right: auto;
 width:40px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#0CB652;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:10px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 border-radius: 10px;
 cursor:pointer;
}

#boutonZvert {
 display:block; 
	margin-left: auto;
	margin-right: auto;
 width:40px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#0CB652;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:10px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 border-radius: 10px;
 cursor:pointer;
}

#boutonZrouge {
 display:block; 
	margin-left: auto;
	margin-right: auto;
 width:40px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#FF0010;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:10px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 border-radius: 10px;
 cursor:pointer;
}



}	
	



/* écrans ORDIS largeur MINI 781 px ************************************************************************/
/*******************************************************************************************************************************************/
@media(min-width: 781px) {
	
.video {
	width: 60%;
	height: auto;

}

#moncercle{
  background:#bfd70e;
  border-radius:50%;
  width:160px;
  height:160px;
  border:2px solid #679403; 
}

.circles {
  display: flex;
}
.circle-with-text {
  background: linear-gradient(orange, red);
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  margin: 5px 20px;
  font-size: 15px;
  padding: 15px;
  display: flex;
  height: 160px;
  width: 160px;
  color: #fff;
}
.multi-line-text {
  font-size: 30px;
}
.circle2-with-text {
background: linear-gradient(orange 60%, cyan);
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  text-align: center;
  margin: 5px 20px;
  font-size: 50px;
  padding: 14px;
  display: flex;
  height: 180px;
  width: 180px;
  color: #fff;
}

font.sign2 {
	font-size: 30px;
	color:#04AA6D;
	font-weight:bold;
}
font.sign {
	font-size: 30px;
	color:white;
	font-weight:bold;
}	

	
label.label { text-align: left; font-weight: bold; font-size: 18px; color:#F76A0C; height: 12px;font-family: arial, trebuchet; }	


	ul {
  display: flex;
  justify-content: center;
 padding:0;
 list-style-type:none;
 }
li {
 margin-left:2px;
 float:left; /*pour IE*/
 }
ul li a {
 display:block;
 float:left;   
 width:200px;
 background-color:#F76A0C;
 color:white;
 text-decoration:none;
 text-align:center;
 padding:20px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
ul li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 }
	
p.logo {
	color: #404040;
	margin-left: 5px;
	text-align: left;
	width: 100%;
}

p.exp {
	padding: 5px;
	text-align: left;
	font-style: arial,tahoma;
	font-weight : normal;
	font-size: 22px;	
}
	
p.menu {
	color: #404040;
	text-align: left;
	font-size: 12px;
	font-weight: bold;
	font: Arial,Tahoma;
	margin-left: 12px;	
	width: 100%;
}

img.photo {
 width:600px;
}
div.tarif {
	margin-bottom: 0%;
	margin-left: auto;
	margin-right: auto;
	width: 70%;		
}
table.tarif {
	margin-top:5px;
	margin-left: auto;
	margin-right: auto;
    height: auto;
	width: 60%;
	border: 1;
	border-color: white;
}
table.tarif2 {
	margin-top:5px;
	margin-left: auto;
	margin-right: auto;
    height: auto;
	width: 25%;
	border: 1;
	border-color: white;
}
table.debut {
	margin-top:5px;
	margin-left: auto;
	margin-right: auto;
    height: auto;
	width: 60%;
	border: 1;
	border-color: white;
}

table.photo {
	width: 600px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;	
}
table.prix {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;	
}

th.photo {
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;	
	
}
th.offre {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: grey;
	font-size: 30px;		
}
th.prix {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: white;
	background-color: #F76A0C;	
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
}
th.prix2 {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: white;
	background-color: #04AA6D;	
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
}
th.prix3 {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: white;
	background-color: #F76A0C;	
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
}

td.prix {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: #404040;
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 18px;
	text-align: right;
	background-color: #F1B652;		
}	
td.prixC {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: #404040;
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	background-color: #F1B652;		
}
td.prixL {
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	border: none;
	color: #404040;
	font-style: arial,tahoma;
	font-weight: bold;
	font-size: 18px;
	text-align: left;
	background-color: #F1B652;		
}


th.titre {

font-family: arial;
font-size: 28px;
color: #F56001;
border: 0;
font-style: bold;
text-align: center;
width: auto;
padding: 0px;
background-color: white;
}

h1.titre {

font-family: arial;
font-size: 32px;
color: #F56001;
border: 0;
font-style: bold;
text-align: center;
width: auto;
padding: 0px;
background-color: white;
}


th.normalL {

font-family: arial;
font-size: 20px;
	color: #404040;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: left;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}
th.normalLCouleur {

font-family: arial;
font-size: 20px;
	color: #F56001;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: left;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}
th.normalLCouleurR {

font-family: arial;
font-size: 20px;
	color: #F56001;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: right;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}
th.normalC {

font-family: arial;
font-size: 20px;
	color: #404040;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: center;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}
th.normalD {

font-family: arial;
font-size: 20px;
	color: #404040;
 border-width:2px;
 border-style:solid;
 border-color:white;
font-style: bold;
text-align: right;
width: auto;
padding: 0px;
background-color: white;
text-indent: 5em each-line;
}

input.nom, input[type=text], input[type=password] {
      width: 90%;
      height: 5px;
	  margin-top: 0px;
      margin-left: auto;
	  border:solid 5px #ccc;
      color:#fff;
      background-color: white;
      padding:10px;
	  color: grey;
	  font-weight: bold;
	  font-size:20px;
      border-radius: 10px;
}

input.nomPM {
      width: 40%;
      height: 5px;
	  margin-top: 0px;
      margin-left: auto;
	  border:solid 5px #ccc;
      color:#fff;
      background-color: white;
      padding:10px;
	  color: grey;
	  font-weight: bold;
	  font-size:20px;
      border-radius: 10px;
}
input.age {
      width: 45%;
      height: 5px;
	  margin-top: 0px;
      margin-left: auto;
	  border:solid 5px #ccc;
      color:#fff;
      background-color: white;
      padding:10px;
	  color: grey;
	  font-weight: bold;
	  font-size:20px;
      border-radius: 10px;
}
select.nom {
      width: 90%;
      height: 40px;
	  margin-top: 2px;
      margin: 0 auto;
	  border:solid 5px #ccc;
      color:#213D64;
      background-color: white;
      padding:5px;
	  font-weight: bold;
	  font-size: 14px;
      border-radius: 10px;
margin:10px 0;font-family: arial, trebuchet;
 }
 
 textarea.nom {
	  margin-top: 2px;
      margin: 0 auto;
	  border:solid 5px #ccc;
      color:#213D64;
      background-color: white;
      padding:5px;
	  font-weight: bold;
	  font-size: 14px;
      border-radius: 10px;	
	  color:#213D64;
	  resize: both;
	  min-width : 90%;
	  min-height : 40px;
	  max-width : 90%;
	  max-height : auto;

}


div.photo {
position: relative;
  margin-left:auto;
  margin-right: auto;
width: 40%;

}

span.menu {
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;	
	background-color: #EFEFEF;	
	width: 100%;
	
}

nav.menu {
	margin-left: 200px;
	padding-left: 20px;
	padding-right: 20px;
	font: arial,tahoma;
	font-size: 12px;
	font-weight: bold;
	color: #404040;
	width: 200px;	
}	

.box {
	margin-left:5%;
	margin-right: 5%;
	width: auto;
  display: flex;
  align-items: stretch;
}

.box2 {
margin-left: 0px;
width: 100%;
background-color: white;
color: #404040;		
}

.box3 {
divmargin-left: 0px;
width: 100%;	
background-color: white;
}


#bouton {
 display:block; 
  	margin-left: auto;
	margin-right: auto; 
 width:300px;
 font-family: arial, tahoma;
 font-weight: bold;
 font-size: 22px;
 background-color:#0CB652;
 color:white;
 text-decoration:none;
 text-align:center;
 padding: 20px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 cursor:pointer;

}	

#boutonOrange {
 display:block; 
  	margin-left: auto;
	margin-right: auto; 
 width:300px;
 font-family: arial, tahoma;
 font-weight: bold;
 font-size: 22px;
 background-color:#F76A0C;
 color:white;
 text-decoration:none;
 text-align:center;
 padding: 20px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 cursor:pointer;

}	



#boutonY {
 display:block; 
	margin-left: auto;
	margin-right: auto;
 width:200px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#FFD800;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:20px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 border-radius: 10px;
 cursor:pointer;
}
#boutonZ {
 display:block; 
	margin-left: auto;
	margin-right: auto;
 width:40px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#0CB652;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:10px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 border-radius: 10px;
 cursor:pointer;
}
	
#boutonZvert {
 display:block; 
	margin-left: auto;
	margin-right: auto;
 width:40px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#0CB652;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:10px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 border-radius: 10px;
 cursor:pointer;
}

#boutonZrouge {
 display:block; 
	margin-left: auto;
	margin-right: auto;
 width:40px;
 font-family: arial, tahoma;
 font-weight: bold;
 background-color:#FF0010;
 color:black;
 text-decoration:none;
 text-align:center;
 padding:10px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 border-radius: 10px;
 cursor:pointer;
}	
	
	
	
}