@font-face {
    font-family: 'discoregular';
    src: url('../font/DISCO___-webfont.eot');
    src: url('../font/DISCO___-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/DISCO___-webfont.woff') format('woff'),
         url('../font/DISCO___-webfont.ttf') format('truetype'),
         url('../font/DISCO___-webfont.svg#discoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@import url('https://fonts.googleapis.com/css?family=Cantarell:400,700');

body
{
	font-family: 'Cantarell', sans-serif;
	font-weight: 400;
}

.titre-form
{
	display: block;
	background-color: #f2f2f2;
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.07);
}

.titre-form > h1
{
	font-family: 'discoregular', sans-serif;
	text-transform: uppercase;
	padding: 45px 0 20px 0;
	text-align: center;
	color: #272822;
	font-size: 30px;
}

.titre-form > p
{
	text-align: center;
	position: relative;
	top: -30px;
}

.form-reserv 
{
	display: flex;	
	border-radius: 5px;
    border: 1px solid #f0f0f0;
    background-color: #fff;
    box-shadow: 2px 3px 5px #cfcfcf;
    padding: 20px;
    width: 50%;
    margin: auto;
    margin-top: 220px;    
}

#myForm
{
	width: 50%;
	margin: auto;
}
	
.form-reserv input, .form-reserv textarea 
{
	background-color: #fafafa;
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
    margin-top: 6px; 
    margin-bottom: 16px; 
    resize: vertical; /* L'utilisateur peut augmenter la taille vertical (pas en horizontal) */
}

.form-reserv input[type=submit], .form-reserv input[type=reset]
{
  	font-size: 18px;
  	text-align: center;
  	cursor: pointer;
  	outline: none;
  	color: #fff;
  	background-color: #20a1f2;
  	border: none;
  	box-shadow: 0 5px #096caa;
}

.form-reserv input[type=submit]:hover, .form-reserv input[type=reset]:hover 
{
	background-color: #0d8fe0;
}

.form-reserv input[type=submit]:active, .form-reserv input[type=reset]:active 
{
  background-color: #0d8fe0;
  box-shadow: 0 2px #0b83ce;
  transform: translateY(4px);
}
	
.form-reserv input:focus 
{
	border-color: rgba(82, 168, 236, 0.75);
	box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
	outline: none;
}
	
.correct 
{
	border-color: rgba(68, 191, 68, 0.75)!important;
}
	
.correct:focus 
{
	border-color: rgba(68, 191, 68, 0.75)!important;
	box-shadow: 0 0 8px rgba(68, 191, 68, 0.5)!important;
}
	
.incorrect 
{
	border-color: rgba(191, 68, 68, 0.75)!important;
}
	
.incorrect:focus 
{
	border-color: rgba(191, 68, 68, 0.75)!important;
	box-shadow: 0 0 8px rgba(191, 68, 68, 0.5)!important;
}
	
.tooltip 
{
	display: inline-block;
	margin-left: 20px;
	color: #20a1f2;
}