/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Mes styles */

html {
    font-size:62.5%;
}

body * {
	box-sizing: border-box;
}

img {
	max-width: 100%;
	width: auto;
	height: auto;
}


/* Généralités */

body {
	background-color: #fff;
	font-size:2rem;
	text-align:center;
    color:black;
    font-family:Athiti,sans-serif;
}

.container {
    max-width: 1920px;
	margin: auto;
}

p {
	line-height: 1.5;
	margin-bottom: 2rem;
}

textarea{
	width:100%;
}

/*header*/
header {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9c948d+0,ffffff+100 */
	background: #9c948d; /* Old browsers */
	background: -moz-linear-gradient(top,  #9c948d 0%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #9c948d 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #9c948d 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c948d', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

	display:flex;
	flex-basis:100%;
	justify-content:end;
	align-items:center;
	flex-direction:column;
	margin-bottom:6rem;
	padding-bottom:2rem;
	padding-top:2rem;
}


.logo {
	display:flex;
	flex-direction:column;
	justify-content:center;
}

h1 {
	padding:0 0 1.5rem 0;
	display: inline-block;
	text-align: center;
	font-size:3rem;
	text-transform: uppercase;
	text-decoration:none;
	color: black;
	font-weight:bold;
}

/*message d'erreur*/

alert{
	display:flex;
	justify-content:center;
}

alert #overlay{
  position:fixed;
  z-index:999;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:#000;
  opacity:0.7;
  display: none;
}
alert #alertPanel{
  position:absolute;
  top:25%;
  min-height: 17rem;
  width: 45rem;
  max-width: 99%;
  margin:auto;
  z-index:9999;
  color:#000;
  border:1px solid #303030;
  background-color:#eaeaea;
  display: none;
  text-align: center;
  font-size: 2.4rem;
  font-weight:100%;
  margin-bottom: 2rem;
  border-radius:15px;
}
alert div.texte{
  width: 40rem;
  max-width: 99%;
  display:inline-block;
  padding:2rem 0 1rem 0;
  word-wrap: break-word;
  padding-top: 10%;
}

.close1{
	
	padding: 0.5rem 4rem;
	border: 1px solid darkred;
	border-radius: 5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
	background-color: #e1dedc;
}

alert #alertPanel h2{
	display:none;
  font-weight:100%;
  font-size:22px;
  padding:25px 0px 15px 15px;
  text-align:center;
  text-shadow:1px 1px 1px #000;
  margin:0px;
  background-color: #323232;
  border:2px solid #fff;
  -moz-box-shadow:0px 0px 8px #000;
  -webkit-box-shadow:0px 0px 8px #000;
  box-shadow:0px 0px 8px #000;
  color: #FFFFFF;
}

/**********************/

h1::before, h1::after {
	font-family:"Font Awesome 5 Free";
	font-weight: 900;
	content:"\f005";
	font-size:1.5rem;
	color:#950000;
	margin :0 1rem 0.5rem 1rem;
	display:inline-block;
	vertical-align:middle;
}

header img {
	width:40%;
	margin:auto;
	margin-top:4rem;
	margin-bottom:2.5rem;
	max-width:40rem;
}

header nav {
	position:relative;
	width: 100%;
	text-align:center;
	display:ruby;
}
	
header li {
	font-weight:bold;
	padding:1rem;
	
}

.ho {
	border-top:1px solid #393331;
}

header a, .a_admin {
	text-decoration:none;
	color:black;
}

header li a:hover, .button_carte:hover, .ajouterHome:hover, .a_admin:hover {
	background-color:#950000;
	color:#fff;
	transition: 1s;
}

header li a,.a_admin {
	display: inline-block;
	width: 35rem;
	border: 1px solid #950000;
	border-radius: 5px;
	padding:0.5rem 1.5rem;
	background-color: #ebe2db;
	box-shadow:3px 3px 7px black;
}

a {
	text-decoration:none;
}

#connexion_bt {
	position:absolute;
	right:7.5rem;
	top:1.5rem;
	font-size:2rem;
	border:1px solid black;
	border-radius:5px;
	padding:0.5rem 0.75rem;
	color:black;
}

.panier_bt {
	position:absolute;
	right:2.5rem;
	top:1.5rem;
	font-size:2rem;
	color:black;
	border:1px solid black;
	border-radius:5px;
	padding:0.5rem;
}

#list_LengthHC, #list_Length {
	position:absolute;
	right:1rem;
	top:0rem;
}

#deconnexion_bt {
	position:absolute;
	right:7.5rem;
	top:1.5rem;
	font-size:2rem;
	border:1px solid black;
	border-radius:5px;
	padding:0.5rem 0.6rem;
	color:black;
}

#bonjour,#bonjour1 {
	position:absolute;
	right:12.5rem;
	top:1.6rem;
	font-size:2rem;
	color:black;
}

#button button {
	border-radius:5px;
	margin-right:2rem;
	padding:0.5rem 1.5rem;
	
	background-color: black;
}

#button a {
	text-decoration:none;
}
/*menu deroulant*/

.sous{
	display:none;
	position:absolute;
	width:100%;
	z-index:1000;
}

nav > ul li:hover .sous{
	display:block;
}

.sous a{
	border-bottom:none;
	border-top:none;
	box-shadow:none;
	border-radius:0;
	font-weight:normal;
}

#last_sous_a{
	border-bottom:1px solid darkred;
	border-radius:0 0 5px 5px;
	padding-bottom:1rem;
}

.sous li{
	float:none;
	width:100%;
	text-align:center;
	padding: 0 2rem 0 0;
}

nav ul li{
	/*float:left;*/
	width:25%;
	text-align:center;
	position:relative;
}

/*main*/

.photoHome {
	max-width:20rem;
	border-radius:15px;
	box-shadow:3px 3px 7px black;
}

.prixHome{
	margin-bottom:0;
}

.home {
	display:flex;
	width:90%;
	margin:auto;
	overflow: auto;
	padding-bottom:1rem;
}

.meal {
	border-radius:15px;
	margin:1rem;
	background-color: #f7f7f6;
	padding:3rem;
	box-shadow:3px 3px 7px black;
}

.meal a{
	color:black;
}

h2 {
	text-transform:uppercase;
	font-size:3rem;
}

.h2_article{
	margin-bottom: 0.5rem;
	vertical-align: middle;
	display: table-cell;
}

.p_article, .desc2{
	margin-bottom:0;
}

article option {
	font-size:1.6rem;
	font-weight:normal;
}

article select{
	border-radius:5px;
}

#message {
	padding:2rem 4rem;
	margin:3rem auto;
	background-color: darkred;
	color:black;
	font-weight:bold;
	text-transform:uppercase;
}

fieldset {
	border:1px solid darkred;
	border-radius:15px;
	padding:2rem;
	width:90%;
	margin:3rem;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

input {
	width:100%;
	margin-bottom:2rem;
	text-align:right;
}

label {
	margin-bottom:2rem;	
	display:block;
}

.label {
	text-align:left;
}

.input {
	text-align:right;
	width:65%;
}

#hour,#minute {
	width:10rem;
}

form {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}

.button {
	margin-bottom:3rem;
}
.button a{
	color:black;
}
.button button {
	
	width: 20rem;
	border: 1px solid #950000;
	border-radius: 5px;
	padding:0.5rem 1.5rem;
	background-color: #ebe2db;
	box-shadow:3px 3px 7px black;
	margin-right:2rem;
	margin-bottom:2rem;
}


.button button:hover {
	background-color:#950000;
	color:#fff;
	transition: 1s;
}

th, td {
	border:1px solid darkred;
	padding:0.5rem 0.5rem;
}

#colspan {
	text-align:right;
}

.corbeille {
	border-bottom:none;
	border-top:none;
	border-right:none;
}

.ajout_panier {
	margin:2rem;
}

#birthdate {
	width:10rem;
}

.quantiteHome{
	width:5rem;
}

.ajout {
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}

.ajout input,.desc3 input {
	margin-bottom:0;
	margin-right:1rem;
	border-radius: 5px;
	
	
}

.ajouterHome {
	border: 1px solid #950000;
	border-radius: 5px;
	padding:0.5rem 1.5rem;
	background-color: #ebe2db;
	box-shadow:3px 3px 7px black;
}

#h2_home{
	display: inline;
	border-bottom:1px solid black;
	margin-bottom:2rem;
	line-height:1.5;
}

#h3_home{
	margin-top: 2rem;
	font-family: 'Dancing Script', cursive;
	text-transform:capitalize;
	color:darkred;
	width: 80%;
	margin: 2rem auto;
	display: flex;
	flex-direction: column;
	opacity: 0;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}

#h3_home strong{
    font-size:2.5rem;
}

#h3_home.h3_homeOn {
    opacity: 1;
}

#h3_home strong{
	margin:1rem;
}

.h2_home2{
	margin:10rem 3rem 3rem 3rem;
}

.h2_home3{
	width: 94%;
	margin: auto;
}

.h2_home2::before, .h2_home2::after,.h2_carte::before, .h2_carte::after,.h2_infos::before, .h2_infos::after {
	font-family:"Font Awesome 5 Free";
	font-weight: 900;
	content:"\f005";
	font-size:1.5rem;
	color:#950000;
	margin :0 1rem 0.5rem 1rem;
	display:inline-block;
	vertical-align:middle;
}

.button_suite{
	text-transform:uppercase;
	font-size:2rem;
	text-align:right;
	color:black;
	display:block;
	margin:1rem 7rem 0 0;
}

.button_carte{
	text-transform: uppercase;
	font-size: 2rem;
	text-align: center;
	color: black;
	display: inline-block;
	margin-top: 1rem;
	margin-bottom: 15rem;
	padding: 1.5rem 2.5rem;
	border-radius: 30px;
	width: 35rem;
	border: 1px solid #950000;
	background-color: #ebe2db;
	box-shadow:3px 3px 7px black;
}

/*slider*/

.slider{
	margin:5rem auto;
	width:70%;
	
}

.slider img {
	    display: block;
        width: 100%;
        height: auto;
        border-radius:15px;
}

/*page article*/

.meal_art img{
	max-width: 100%;
}

.desc3{
	text-align:justify;
	font-style:italic;
	display: inline-block;
}

.desc8{
	display:inline;
	font-style:normal;
}

/*page carte*/

.carte {
	display:flex;
	width:100%;
	margin:auto;
	flex-wrap:wrap;
	justify-content:center;
	margin-bottom:3rem;
}

.h1_carte{
	margin-top:5rem;
	font-size:3rem;
}

.h2_carte{
	margin: 5rem 3rem 1rem 3rem;
}

h3{
	font-size: 2.5rem;
	text-transform: uppercase;
	text-decoration: underline;
	margin-top:2rem;
}

.ss_titre{
	margin-bottom:0;
}

/*page infos*/

.infos_div{
	text-align:left;
	margin:2rem 5rem;
	display:flex;
	flex-direction:column;
}

#infos p{
	margin-bottom:0;
}

iframe{
	margin:1rem 0;
	height:19rem;
}

.infos_div h3, #infos2 h3{
	margin-bottom:1rem;
}

#infos2{
	text-align:left;
	margin-left:5rem;
}

#infos2 i, #infos2 img{
	font-size:3rem;
	height:3rem;
	margin:2rem;
}

#paiement{
	display: flex;
}

.adresse{
	min-width: 22rem;
}

/*page order*/

.table{
	margin:2rem 0 2rem 0.5rem;
	width: 100%;
}

td{
	vertical-align:middle;
}

.table img {
	width:14rem;
	border-radius:5px;
}

#displayNone{
	display:none;
}

#mess {
	width:90%;
}

#sessionUser, #sessionEmail{
	display:none;
}

/*page retour*/

.espace {
	height:40rem;
}

#boutonRetour{
	text-transform: uppercase;
	font-size: 2rem;
	text-align: center;
	color: black;
	display: inline-block;
	margin-top: 1rem;
	margin-bottom: 15rem;
	padding: 1.5rem 2.5rem;
	border-radius: 30px;
	width: 35rem;
	border: 1px solid #950000;
	background-color: #ebe2db;
	box-shadow:3px 3px 7px black;
	margin-top:5rem;
}

#boutonRetour a{
	text-decoration:none;
	color: black;
}

/*page booking*/

#hour,#minute{
	width:48%;
}

#booking2{
	width:90%;
	margin:5rem auto;
}

/*page homeAdmin*/

#nav_admin{
	width:100%;
	display:flex;
	justify-content:center;
	flex-direction:column;
	align-items:center;
	margin:5rem 0;
}

#nav_admin a{
	margin:1rem;
}

#order_field{
	width:90%;
	justify-content: center;
	padding-left:0;
	padding-right:0;
}

#order_field2{
	width:90%;
	justify-content: center;
	padding-left:1rem;
	padding-right:1rem;
	flex-direction: column;
}

#panier{
	width:100%;
	font-size:1.3rem;
}

.a_admin{
	display:flex;
	justify-content:center;
}

#bookingSum, #orderSum, #messageSum{
	margin-bottom:0;
	line-height:1;
}

/*page contact*/

#contact_field,#create_account_field,#create_account_field2{
	align-items:initial;
}

/*page create_account*/

#birthdate{
	width:100%;
}

/*page create_meal*/

.crea_text{
	margin-bottom:2rem;
}

#create_area{
	margin-bottom:2rem;
}

.meal_field{
	align-items:baseline;
}

#des1{
	margin-bottom:4rem;
}

#des2{
	margin-bottom:24rem;
}

/*page adminEdit*/

.edit_text{
	margin-bottom:2rem;
}

#edit_area{
	margin-bottom:2rem;
}

.edit_field{
	align-items:baseline;
}

#edi1{
	margin-bottom:4rem;
}

#edi2{
	margin-bottom:24rem;
}

#edi3{
	margin-bottom:27rem;
}

/*page contactList*/

.messages{
	width:90%;
	margin:5rem auto;
}

.tdDiv{
	width:100%;
}

.colTexte{
	word-wrap: break-word; 
}

.divMessages{
	padding:3rem;	
}

/*admin_liste_booking*/

#orderList1{
	width:90%;
	margin:5rem auto;
}

#print{
	color:black;
}

.td_comment{
	display:flex;
	flex-direction:row;
	border-top: none;
    border-left: none;
}

.td_comment input{
	margin-bottom:0;
}

.td_comment button{
	background-color: transparent;
	border: none;
}

/*admin_orderDetails*/

#orderdetail1{
	width:90%;
	margin:5rem auto;
}

/*page publications légales*/

#pub_legales{
	padding:3rem;
	font-size:1.4rem;
}

#pub_legales b{
	font-weight:bold;
}

#pub_legales h2{
	margin-bottom:2rem;
	text-align:center;
	font-weight:bold;
}

/*maintenance*/

#maintenance{
	margin:10rem 0 10rem 0;
	background-color: red;
}

#maint{
	height:10rem;
}

/*page conditions_utilisation*/

#conditions_utilisation{
	text-align:left;
	padding:3rem;
	font-size:1.4rem;
}

#conditions_utilisation h2{
	margin-bottom:2rem;
	text-align:center;
	font-weight:bold;
}

#conditions_utilisation b{
	font-weight:bold;
}

/*page cookies*/

#cookies{
	text-align:left;
	padding:3rem;
	font-size:1.4rem;
}

#cookies h2{
	margin-bottom:2rem;
	text-align:center;
	font-weight:bold;
}

#cookies b{
	font-weight:bold;
}

#cookies h3{
	margin-bottom:2rem;
	font-size:1.8rem;
	font-weight:bold;
}

#cookies ul{
	margin-bottom:3rem;
	line-height: 1.5;
	list-style: disc;
	margin-left:3rem;
}

/*fenetre cookies*/

	.cookie-alert {
	   position: fixed;
	   bottom: 2rem;
	   left: 0; right: 0;
	   margin: 0 auto;
	   border-radius: 15px;
	   background:#2f2f2f;
	   color:#fff;
	   padding:1rem 1.5rem;
	   width:80%;
	   z-index:100;
	   opacity:0.8;
	}
	.cookie-alert a { 
		background-color:darkred;
	   display:block;
	   text-align: center;
	   padding:0.5rem 1rem;
	   margin:0.8rem auto 0 auto;
	   border-radius: 15px;
	   border: 1px solid darkred;
	   color:#fff;
	   transition: all .3s ease;
	   width:20rem;
	}
	   .cookie-alert a:hover {
	      background: darkred;
	      color:#fff;
	   }
	@media only screen and (max-width:480px) {
	   .cookie-alert {
	      text-align: center;
	      left: 0; right: 0;
	      margin: 0 auto;
	      max-width:70rem;
	      padding:1rem 3rem;
	   }
	}

/*footer*/

footer{
	padding:2rem;
	border-top:1px solid darkred;
	background-color: black;
	opacity:0.9;
	color:white;
	font-size:1.6rem;
	line-height:1.2;
	height: 26rem;
	padding-top: 15rem;
	position:relative;
}

.footer{
	display:flex;
	flex-direction:column;
	width: 92%;
	position: absolute;
	bottom: 8rem;
}

.mentions{
	position:absolute;
	text-align:left;
	bottom:6rem;
}

.col-md-3{
	position:absolute;
	bottom:-1rem;
}

.mentions h3{
	font-weight:bold;
	font-size:1.8rem;
	margin-bottom:1rem;
}

.site-info{
	width:100%;
	position:absolute;
	bottom:1rem;
	font-size:1.2rem;
}

.fb{
	width:40%;
	margin:auto;
}

footer a{
	text-decoration:none;
	color:#ee3030;
}

/* tablette */

@media screen and (min-width: 680px) {
	header ul {
		display:flex;
		justify-content:space-evenly;
	}
	
	header li {
	font-weight:bold;
	
	padding:1rem;
	border-bottom:0px solid #393331;
	}
	
	.ho {
		border-top:0px solid #393331;
	}
	
	header li a {
		width:13rem;
		background-color: #ebe2db;
	}
	
	.footer {
		display:flex;
		flex-direction:row;
		position: absolute;
		left: 5rem;
		bottom: 3rem;
		justify-content: space-between;
	}
	
	.meal{
		margin:3rem;
	}

	.desc3{
		display:inline;
	}
	
	.desc4{
		margin-top: 2rem;
		margin-bottom:2rem;
		overflow: hidden;
	}
	
	.desc6 {
    	width: 60rem;
    	float:left;
    	margin:0 3rem 0 0;
		border-radius:15px;
		box-shadow:3px 3px 7px black;
	}
	
	.desc7{
		text-align: justify;
	}
	
	fieldset{
		width:70%;
	}
	
	#panier{
	font-size:1.8rem;
	}
	
	#order_field{
	padding-left:2rem;
	padding-right:1rem;
	}
	
	#hour,#minute{
	width:49%;
	}
	
	footer{
		height: 17rem;
		padding-top: 2rem;
	}
	
	.infos_div{
		flex-direction:row;
		justify-content:space-between;
	}
	
	iframe{
		margin-left:5rem;
		width:100%;
	}
	
	#h3_home{
		flex-direction:row;
		width: 63rem;
		justify-content: space-around;
	}
	
	.mentions{
		bottom:2rem;
	}
	
	.col-md-3{
		bottom:6rem;
		right:8rem;
	}
	
	.fb{
		margin-top: 1rem;
	}
	
	#mess {
	width:90%;
	}
	
}
/* desktop */

@media screen and (min-width: 1080px) {
	
		.welcomesection img {
		width:40%;
		float:right;
		margin-left:1rem;
	}
	
	header {
		display:flex;
		flex-direction:row;
		justify-content:space-evenly;
		height:22rem;
	}
	
	nav ul li{
		margin:0 1rem;
	}
	
	header li a {
		width:13rem;
		background-color: #ebe2db;
		
	}
	
	header img {	
	margin-left: 2rem;
	width:36%;
	}
	
	header nav {
		width:60%;
		margin-top:4rem;
		margin-right: 1rem;
	}
	
	h1 {
		padding-top:2.5rem;
	}
	
	.logo {
		display:flex;
		flex-direction:row;
		align-items:center;
		margin-top:3rem;
	}
	
	.logo img {
		margin-right:0;
	}
	
	.logo p {
		margin-bottom:0;
	}
	
	header ul {
		justify-content:space-evenly;
	}
	
	.special div {
		display:flex;
		justify-content:space-between;
	}
	
	.special div article {
		width:30%;
		margin:0 1rem;
	}
	
	figcaption {
		padding:4rem 0;
	}
	
	fieldset{
		width:50%;
	}
	
	.footer{
		justify-content:flex-start;
		position: absolute;
		left: 5rem;
		bottom: 3rem;
	}
	
	.sous{
		right: 0rem;
	}
	
	.col-md-3{
		left:28rem;
		width:15%;
	}
	
	#mess {
	width:90%;
	}
	
}


@font-face {
	font-family: "SF_Shai_Fontai";
	src: url('../font/SF_Shai_Fontai.ttf');
}

@font-face {
	font-family: "SF_Shai_Fontai_Extended";
	src: url('../font/SF_Shai_Fontai_Extended.ttf');
}