body{
width:100vw;
margin:0px;
font-size:22pt;
background:rgb(230,230,230);
font-family: Verdana, sans-serif;
color:black;
/*background-image:url("PhotoPartieFacade.jpg");*/
}

small{
    font-size:7pt;
    font-size:white;
    margin-top  :0px;
}

#bandeau{
	width:100vw;
	height:100px;
	background-color:#00CCFF;
	}
	
	
div #middle{
	width:600px;
	height:400px;
	background-color:#FFCC00;
	}
div#piedpage {
	width:600px;
	height:50px;
	background-color:#33FF99;
	}

p{

width:60%;
min-width:300px;
max-width:600px;

}

form {

  
}






table {
  table-layout: auto;
  width: 70%;
  border-collapse: collapse;
  border: 1px solid black;
  background-color:white;
  font-size:14pt;
}

thead td:nth-child(1) {
  width: 5%;
}

thead td:nth-child(2) {
  width: 35%;
}

thead td:nth-child(3) {
  width: 5%;
}

thead td:nth-child(4) {
  width: 10%;
}

th,
td {
  padding: 20px;
}

label {
  font : 1.2em "typewriter", sans-serif;
}




textarea {
  display : block;

  padding : 10px;
  margin  : 10px 0 0 10px;
  width   : 750px;
  height  : 260px;

  resize  : none;
  overflow: auto;
}

h1{
display: center;
margin-bottom: 1;
font-family: Verdana, sans-serif;
font-size:14pt;
color :white;
border: 1px  #B58442 double;
border-radius: 10px;
background:rgb(150,150,200) ;
width:100%;
height:20px;

}

#header{
height:50px;
//background:#EFFBF8;
//background:#2F2F2E;
color: #B58442;
font-size:30pt;
text-align: center;
padding-top:5%;
padding-bottom : 5%;
padding-left:-40%;
border: 3px  #B58442 double;
border-radius: 10px;
background: white ;
    }
Encadrer{
padding : 5px 5px 5px 5px;
border-width:10px;
border-style: none;
border-color:white;
background-color: #B58442 ; 
color:#931A1C;
}
MargeTitre{
//margin-top : 10%;
margin-left: 0%;
color:#B58442;
}
#headerhorizontal{
height:100%;
width:50px;
background:rgb(180,160,200);
//background:#B404AE;
//background:#2F2F2E;
color:white;
font-size:45pt;
text-align: center;
    }
.container {
 display: flex;
  gap: -1px; /* espace entre les divs */
}

.headertitle{
flex-grow: 1;
border-radius: 10px;
height: 20%;
min-height: 100px;
width:100%;
background:black;
/*background:#B404AE;*/
/*background:#2F2F2E;*/
margin-left: 1%;
color:rgb(60,255,200);
font-size:25pt;
vertical-align:middle;
    }
.headerter{
flex-grow: 1;
border-radius: 10px;
height: 100%;
min-height: 200px;
width:600px;
background:white;
/*background:#B404AE;*/
/*background:#2F2F2E;*/
margin-left: 1%;
color:grey;
font-size:15pt;
vertical-align:middle;
    }
.signature{
    width: 100px;
    height: 100px;
    background: white;
    border-radius:50%;
    margin-left:70%;
    display: flex;
  align-items: center;
  justify-content: center;
    
}

.tsign{
    cursor: pointer;
     width: 100px;
    height: 100px;
     background: white;
    font-size:15pt;
    border-radius:50%;
    text-align:center;
    vertical-align:middle;
    color:rgb(0,100,160);
}
.tsign:hover {
    cursor: pointer;
  }

#headerquater{
margin: 0;
border-radius: 10px;
height: 100px;
width:100%;
background:lightblue;
//background:#B404AE;
//background:#2F2F2E;
margin-left: 12%;
color:rgb(60,255,200);
font-size:15pt;
text-align: center;
    }


.headerbis{
text-align: center;
writing-mode:vertical-lr;
border-radius: 10px;
flex-grow: 1;
/*height:100%;*/
width:50px;
background:rgb(255,255,240);
color:white;
font-size:20pt;
text-align: center;
    }
.sinput{
    cursor: pointer;
text-align: center;
writing-mode:vertical-rl;
border-radius: 10px;
flex-grow: 2;
/*height:100%;*/
width:50px;
background:white;
color:white;
font-size:15pt;
text-align: center;
    }
.sinput:hover {
    cursor: pointer;
  }
.bouton a {
font-size:15pt;
display:block;
width:300px;
line-height:200px;
text-align:center;
vertical-align:middle;
background-color:lightblue;
font-weight:bold;
color:white;
text-decoration:none;
}
.bouton a:hover {
	font-size:20pt;
display:block;
width:300px;
line-height:200px;
text-align:center;
vertical-align:middle;
background-color: white;
font-weight:bold;
color:blue;
text-decoration:none;
<!--background:url(ImageBoutonBleuGrise.jpg)-->
} 
  
.boutonbis a {
font-size:25pt;
display:block;
width:300px;
line-height:200px;
text-align:center;
vertical-align:middle;
background-color:blue;
font-weight:bold;
color:white;
text-decoration:none;
}
.boutonbis a:hover {
	font-size:35pt;
display:block;
width:450px;
line-height:300px;
text-align:center;
vertical-align:middle;
background-color: white;
font-weight:bold;
color:blue;
text-decoration:none;
<!--background:url(ImageBoutonBleuGrise.jpg)-->
}  

.boutonter a {
font-size:15pt;
display:block;
width:353px;
line-height:100px;
text-align:center;
vertical-align:middle;
background-color:#EFFBF8;
font-weight:normal;
color:darkgreen;
text-decoration:none;
}
.boutonter a:hover {
	font-size:17pt;
display:block;
width:355px;
line-height:100px;
text-align:center;
vertical-align:middle;
background-color: white;
font-weight:bold;
font-style:italic;
color:blue;
text-decoration:none;
<!--background:url(ImageBoutonBleuGrise.jpg)-->
}  

.boutonpenterL2 a {
font-size:15pt;
display:block;
width:400px;
line-height:100px;
text-align:center;
vertical-align:middle;
background-color:white;
font-weight:normal;
color:black;
font-family: Verdana, sans-serif;
text-decoration:none;
border: 3px  black double;
}
.boutonpenterL2 a:hover {
	font-size:15pt;
display:block;
width:400px;
line-height:100px;
text-align:center;
vertical-align:middle;
background-color: grey;
font-weight:bold;
font-style:italic;
color:white;
text-decoration:none;
border: 3px  darkgreen double;
<!--background:url(ImageBoutonBleuGrise.jpg)-->
}  
.boutonpenter a {
font-size:12pt;
display:block;
width:200px;
line-height:50px;
text-align:center;
vertical-align:middle;
background-color:white;
font-weight:normal;
color:black;
font-family: Verdana, sans-serif;
text-decoration:none;
border: 3px  black double;
}
.boutonpenter a:hover {
	font-size:14pt;
display:block;
width:200px;
line-height:100px;
text-align:center;
vertical-align:middle;
background-color: #B58442;
font-weight:bold;
font-style:italic;
color:white;
text-decoration:none;
border: 3px  #750709 double;
<!--background:url(ImageBoutonBleuGrise.jpg)-->
}
.boutonpenterbis a {
    font-size:20pt;
    display:block;
    width:800px;
    line-height:30px;
    text-align:center;
    vertical-align:middle;
    background-color:white;
    font-weight:normal;
    color:#750709;
    font-family: Verdana, sans-serif;
    text-decoration:none;
    border: 3px  #B58442 double;
border-radius: 10px;
}
.boutonpenterbis a:hover {
    cursor: pointer;
    font-size:14pt;
    display:block;
    width:800px;
    line-height:30px;
    text-align:center;
    vertical-align:middle;
    background-color: #B58442;
    font-weight:bold;
    font-style:italic;
    color:white;
    text-decoration:none;
    border: 3px  #750709 double;
	border-radius: 10px;
    <!--background:url(ImageBoutonBleuGrise.jpg)-->
}
.boutonpenterbissmall a {
    font-size:20pt;
    display:block;
    width:300px;
    line-height:30px;
    text-align:center;
    vertical-align:middle;
    background-color:white;
    font-weight:normal;
    color:#750709;
    font-family: Verdana, sans-serif;
    text-decoration:none;
    border: 3px  #B58442 double;
border-radius: 10px;
}
.boutonpenterbissmall a:hover {
    font-size:14pt;
    display:block;
    width:300px;
    line-height:30px;
    text-align:center;
    vertical-align:middle;
    background-color: #B58442;
    font-weight:bold;
    font-style:italic;
    color:white;
    text-decoration:none;
    border: 3px  #750709 double;
	border-radius: 10px;
    <!--background:url(ImageBoutonBleuGrise.jpg)-->
}
.boutonIns a {
    font-size:12pt;
    display:block;
    width:80px;
    line-height:20px;
    text-align:center;
    vertical-align:middle;
    background-color:lightblue;
    font-weight:normal;
    color:white;
    font-family: Verdana, sans-serif;
    text-decoration:none;
    border: 3px  darkgreen double;
}
.boutonIns a:hover {
    font-size:14pt;
    display:block;
    width:100px;
    line-height:60px;
    text-align:center;
    vertical-align:middle;
    background-color: darkgreen;
    font-weight:bold;
    font-style:italic;
    color:white;
    text-decoration:none;
    border: 3px  darkgreen double;
    <!--background:url(ImageBoutonBleuGrise.jpg)-->
}
.boutonsexter a {
font-size:12pt;
display:block;
width:155px;
line-height:20px;
text-align:center;
vertical-align:middle;
background-color:white;
font-weight:normal;
color:darkgreen;
font-family: Verdana, sans-serif;
text-decoration:none;
border: 3px  darkgreen double;
}
.boutonsexter a:hover {
	font-size:12pt;
display:block;
width:155px;
line-height:20px;
text-align:center;
vertical-align:middle;
background-color: darkgreen;
font-weight:bold;
font-style:italic;
color:white;
text-decoration:none;
border: 3px  darkgreen double;
<!--background:url(ImageBoutonBleuGrise.jpg)-->
}  
.boutonsepter a {
font-size:20pt;
display:block;
width:455px;
line-height:40px;
text-align:center;
vertical-align:middle;
background-color:white;
font-weight:normal;
color:darkgreen;
font-family: Verdana, sans-serif;
text-decoration:none;
border: 3px  darkgreen double;
}
.boutonsepter a:hover {
	font-size:12pt;
display:block;
width:455px;
line-height:40px;
text-align:center;
vertical-align:middle;
background-color: darkgreen;
font-weight:bold;
font-style:italic;
color:white;
text-decoration:none;
border: 3px  darkgreen double;
<!--background:url(ImageBoutonBleuGrise.jpg)-->
} 
.grise {
 border:1px solid black; 
 background-color:silver;
 }

fieldset {
 padding:0 20px 20px 20px;
 margin-bottom:10px;
 border:1px solid #DF3F3F;
 }
legend {
 color:#DF3F3F;
 font-weight:bold
 }
label {
 //margin-top:10px;
 display:block;
//text-align:center;
 }
label.inline {
 display:inline;
 margin-right:50px;
//text-align:center;
 }
input, textarea, select, option {
text-align:center;
background-color:silver;
 }

select {
 margin-top:0px;
 background-color:white;
 width:200px;
 height:20px;
 }
 
input[type=radio] {
 background-color:transparent;
 border:none;
 width:10px;
 }

d0  {
z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);
position:absolute;
top: 50px;
right: 325px;
}
d1  {
z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);
position:absolute;
top: 50px;
right: 100px;
}

d2  {
z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);
position:absolute;
top: 200px;
right: 100px;
}


d3  {
z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);
position:absolute;
top: 350px;
right: 100px;
}

d4  {
z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);
position:absolute;
top: 500px;
right: 100px;
}

d5  {
z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);
position:absolute;
top: 650px;
right: 100px;
}

l1  {
z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);

position:absolute;
top: 400px;
right: 80%;
}

l2  {
z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);
position:absolute;
top: 550px;
right: 80%;
}


l3  {
z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);	
position:absolute;
top: 60%;
right: 80%;
}

l4  {
z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);
position:relative;
top: 150px;
right: 0px;
}


l5  {
z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);
position:relative;
top: 300px;
right: 0px;
}

.boutonpenterbisbis a {
    font-size:10pt;
    display:block;
    width:100px;
    line-height:30px;
    text-align:center;
    vertical-align:middle;
    background-color:white;
    font-weight:normal;
    color:#750709;
    font-family: Verdana, sans-serif;
    text-decoration:none;
    border: 3px  #B58442 double;
}
.boutonpenterbisbis a:hover {
    font-size:12pt;
    display:block;
    width:200px;
    line-height:30px;
    text-align:center;
    vertical-align:middle;
    background-color: #B58442;
    font-weight:bold;
    font-style:italic;
    color:white;
    text-decoration:none;
    border: 3px  #750709 double;
    <!--background:url(ImageBoutonBleuGrise.jpg)-->
}
.breadcrumb ul {
    display: flex;
}
    
.breadcrumb li::before {
    content: "→";
}
    
.breadcrumb li:first-child::before {
    content: "";
}
/* CSS Document */
/* text decoration (balise a) :  
--> none : pas souligné,
--> underline : souligné (bas),
--> overline : souligné (haut)
--> overline underline : souligné en hait et en bas...*/


.date {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #FFFFFF;
    font-weight: bold;
    vertical-align:middle;
}


.jours {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: bold;
}

.tab_numero {
    background:url(img/icone.jpg);
    background-repeat:no-repeat;
    background-position:bottom right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    font-weight: normal;
    border-style:solid; 
    border-width:2px; 
    border-color:#000099;
    border-top:hidden;
}

.tab_cal {
    background:url(img/entete.jpg);
    background-repeat:no-repeat;
    border-style:solid; 
    border-width:2px; 
    border-color:#000099;
    border-bottom:hidden;
}

.reserve {
    background-color:#0099FF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#FFFFFF;
}

.descriptif {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    padding-left:10px;
}
.tde {height:20px;width:20px;cursor:pointer;}
#value {height:20px; width: <?=$value1;?>px; background:#E0E001;}
#glob {display: flex;}