@font-face 
    {
	    font-family: "Roboto";
        src: url('../police/Roboto-Light.ttf');
    }
@font-face 
    {
        font-family: "Roboto";
        font-style: italic;
        src: url('../police/Roboto-Italic.ttf');
    }
@font-face 
    {
        font-family: "Roboto";
        font-weight: bold;
        src: url('../police/Roboto-Bold.ttf');
    }
@font-face 
    {
	    font-family: "SpaceMono";
        src: url('../police/SpaceMone-Regular.ttf');
    }
@font-face 
    {
        font-family: "SpaceMono";
        font-style: italic;
        src: url('../police/SpaceMono-Italic.ttf');
    }
@font-face 
    {
        font-family: "SpaceMono";
        font-weight: bold;
        src: url('../police/SpaceMono-Bold.ttf');
    }
html
    {
        margin: 0;
        height: 100%;        
    }
body
    {
        display: flex;
        flex-direction: column;
        margin: 0;
        height: 100%;               
    }
a
    {
        text-decoration: none;
        color: black;
    }
h1
    {
        font-family: "SpaceMono";
    }
h2  
    {
        font-family: "SpaceMono";
    }
/* HEADER */
header
    {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        background-color: #88c0d0;
        font-family: "SpaceMono";
    }
#HG
    {
        display: flex;
        flex-grow: 1;
        padding-left: 2vw;
    }
#HD
    {
        display: flex;
        flex-direction: row;
        flex-grow: 3;
        justify-content: space-evenly;
		background-color: #88c0d0;
        align-items: center;
    }
header a:hover
    {
        color: #ffca4b;
    }
/* MAIN */
main    
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-grow:1;  
        font-family: "Roboto";  
    }
main a:hover
    {
        color: #275fa0;
        text-decoration: underline;     
    }
#accueil
    {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }
#accueil section
    {
        display: flex;
        flex-direction: column;        
        align-items: center;
    }
#accueil a
    {
        font-weight: bold;
    }
#reunion
    {
        width: 50vw;

    }
#reservation
    {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 40vw;
        height: 55vh;
        background-color: #88c0d0;
        padding-bottom: 5vh;
    }
.info_resa
    {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
hr  
    {
        width: 5vw;
        border: 1px dashed black;
        margin-bottom: 0;
    }
/* form */
form
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;        
    }
input
    {
        text-align: center;
    }
label
    {
        font-weight: bold;
    }
#deco 
    {
        font-family: "Roboto";
    }
.form_pir
    {
        width: 40vw;
        height: 60vh;
        background-color: #88c0d0;
        margin-bottom: 5vh;
    }
#form_co
    {
        width: 40vw;
        height: 40vh;
        background-color: #88c0d0;
        margin-bottom: 5vh;
    }
.msg_
    {
        color: red;
    }
.oblig
    {
        color: red;
    }
.bouton
    {
        border-radius: 10px;
        border: 1px solid black;
    }
.bouton:hover
    {
        border: 1px solid #ffca4b;
    }
/* tableau */
table
    {
        display: flex;
        flex-direction: column;
        border: 1px solid black;
        height: 90%;
        width: 70vw;
        margin-bottom: 10vh; 
        border-spacing: 0;
        box-shadow: 2px 2px 10px #275fa0;
    }

thead
    {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 10%;
        justify-content: space-around;
        align-items: center;
    }

thead tr  
    {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        width: 100%;
        border-bottom: 1px solid black;
    }
thead th
    {
        border-left: 1px solid black;
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
        align-items: center;
    }
tbody tr
    {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        width: 100%;
        border-bottom: 1px solid black;
    }

td  
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-grow: 1;    
        width: 60vw; 
        border-left: 1px solid black;
    }
td p 
    {
        margin: 0;
    }
.heure
    {
        width: 15vw;
        background-color: #88c0d0;
        font-weight: bold;
    }
.case
    {
        width: 35vw;
        height: 15vh;
    }
.resa
    {
        width: 35vw;
        height: 15vh;
        background-color: #275fa0;        
    }
.resa a 
    {
        color: #ffca4b;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
.resa a:hover
    {
        color: white;
        text-decoration: none;
    }
.vide
    {
        width: 30vw;
        background-color: #275fa0;
    }
.jour
    {
        background-color: #ffca4b ;
    }
/* FOOTER */
footer
    {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        background-color: #ffca4b;
        font-family: "SpaceMono";
    }
footer a:hover
    {
        color: #88c0d0;
    }