body 
{
	background-color: #FFE862;
	margin: auto;	/* Pour centrer dans notre page */
	font-family: 'Century Schoolbook', 'Times New Roman', Georgia;
	min-height: 75%;
}

html
{
	scroll-behavior: smooth;
}
 
ul 
{
	padding: 0;
}

li 
{
	list-style-type: none;	/* pas de puce */
}

.titre h1 
{
	font-family: vivaldi;
	font-size: 4em;
	text-align: center;
	text-decoration: underline;
	text-shadow: 6px 6px 6px #CF9FE1;
}
.titre h3 
{
	text-align: center;
}

input, textarea, select 
{
	background-color: #E5CD3C;
}
 
.err
{   /* Message d'erreur centré */
	text-align: center;
	color: #ff0000;
}
/*---------------------------*/
/* Mise en page de l'en tete */
/*---------------------------*/
header 
{
	display: flex;
	justify-content: space-between;	/* Header sur toute la largeur */
	background-color: #E5CD3C;
	font-family: vivaldi;
	margin: 0;
}
header div 
{	/* Partie centrale (texte) */
	flex: 1;  /* Agrandissement de la largeur du bloc du milieu*/
	padding: 0 0.5em;	/* Marge entre les photos l'adr et le tel */
	text-align: center;
}
header h2 
{	/* Nom du Restaurant */
	font-size: 5em;	/* Agrandissement taille de la police */
	text-shadow: 6px 6px 6px #CF9FE1;
	margin: 0;	/* Supression des marges extérieure */
}
header h1 
{	/* Restaurant Pizzéria */
	font-size: 3em;
	margin: 0;
}

.coord 
{	/* Téléphone et adresse */
	display: flex;
	justify-content: space-between;	/* Adr et tel prés des photos */
}

.coord h3 
{
	margin-bottom: 0;	/* Bas de header */
}

/* Cas d'écran plus petit*/
@media (max-width:867px)
 {	/* Ecriture plus petite  pour les tablettes */
	header h1 
	{
		font-size: 2em;
	}
	header h2 
	{
		font-size: 3em;
	}
	.coord 
	{	/* Tel et adr sur 2 lignes pour petit écrans */
		display: block;
	}
	nav li 
	{  /* Taille d'écriture du menu plus petite */
		font-size: 0.8em;
	}
	footer h3 
	{	/* Taille d'écriture du pied de page plus petite */
		font-size: 0.8em;
	}
}

@media (max-width:700px) 
{
	header img 
	{	/* Sur tel on affiche pas les photos de la banière */
		display: none;
	}
}

/*--------------------*/
/*        menu        */
/*--------------------*/
.menu 
{
	font-size: 1.3em;
}
.menu ul, .smenu ul 
{
	display: flex;	/* menu horizontal*/
	justify-content: space-between;
	margin: 0;
}
.menu li, .smenu li 
{
	flex: 1;
	min-height: 1.5em;
	text-align: center;
}
.menu li 
{
	height: 1.5em;
}
.menu a, .smenu a 
{
	display: block;
	text-decoration: none;	/* Pas de soulignement */
	color: #B4BE19;	      /* Couleur d'écriture */
	background-color: #F9FEB0;	/* de fond */
	border: 3px solid #B4BE19;
	height: 100%;
}
.menu a:hover, .smenu a:hover 
{
	background-color: #B4BE19;
	color: #F9FEB0;	/* Couleur d'écriture */
	border: 3px solid #F9FEB0;
}
.menu .sousmenu 
{
	display: none;	/* dissimulation du sous menu */
	flex-direction: column;	/* Menu vertical */
	padding: 0 1.5em;	/* sous-menu dessous le menu principal*/
}
.menu .sousmenu li 
{
	z-index: 10;
}
.menu li:hover .sousmenu 
{
	display: flex;
}
.portable 
{
	/* Cacher pour les grands ecrans */
	display: none;
	background-color: #B4BE19;
	color: #F9FEB0;
}

/* Menu pour portable*/
@media (max-width:700px) 
{
	.menu ul, .smenu ul 
	{ /* Menu verticaux */ 
		display: block;
		flex-direction: row;
	}
	.ecran 
	{
		display: none;
	}
	.portable 
	{
		display: block;
	}
	#adLst
	{
		display: none;
	}
}

/*-------------------------------------------------*/
/*        Mise en page zone de déconnexion         */
/*-------------------------------------------------*/
.logg 
{
	display: Flex;
	justify-content: space-between;
	width: 35%;
	font-size: 1.5em;
	font-family: 'cooper black';
	color: #3C1E84;
	margin: .5em auto;
}
.logg button 
{
	background-color: #E5CD3C;
	border-radius: 2em;
	border: 3px solid #CF9FE1;
	color: #3C1E84;
	height: 2.5em;
	font-family: 'cooper black';
}

/*------------------------------*/
/* Mise en page du pied de page */
/*------------------------------*/
iframe 
{	/* Pour adapté largeur de iframe à l'écran */
	margin: auto;
	width: 60%;
}
#cart
{	/* Fenetre modale englobant iframe */
	width: 100%;
	display: none;
	text-align: center;
}
#cart:target 
{	/* Rendre iframe de google map visible */
	display: block;
}
footer 
{
	display: flex;
	justify-content: space-around;
	background-color: #CF9FE1;
	color: #7C2C98;
	border: 10px ridge;
	border-radius: 30px;  /* coins arrondis */
	margin: 1em;
	margin-top: 3em;
}
footer h3 
{
	margin: 0;
}
footer a 
{
	text-decoration: none;
	color: #7C2C98;
}

/*-------------------------------*/
/*   Mise en page du diaporama   */
/*-------------------------------*/
.diaporama 
{	/* position de la fenetre du diaporama */
	display: block;
	margin: auto;
}

.affich 
{	/* Format des images */
	position: absolute;
	width: 59%;
	border: 1em ridge #7c2c98;
	border-radius: 10%;
	opacity: 0;	/* Photo non visible  au lancement du prg */
	transition: opacity 3s linear;	/* La photo apparai en 3 sec*/
}

#cdeDiap 
{	/* div des boutons à la taille du diaporama */
	height: 100%;
}

#cdeDiap button 
{	/* Format des boutons */
	position: relative;	/* Position des btns par rapport au coin supérieur gauche de la div diaporama*/
	border-radius: 100%;
	width: 8%;
	height: 10%;
	background-color: #F9FEB0;
	font-weight: 500; /* Ecriture en gras */
	font-size: 150%;
}
#cdeDiap button:hover 
{
	cursor: pointer;
	box-shadow: 8px 8px 8px #7c2c98;
	background-color: yellow;
}

/* Positionnement des 3 boutons */
#prec 
{
	top: 45%;	/* 50% moins 1/2btn */
	left: -4%;	/* decalage d'un demis btn à gauche */
}
#stop 
{
	top: 96%;	/* 100% moins decalage  d'un demis btn */
	left: 38%;	/* 50%  moins 12%(btn prec plus 1/2 btn stop) */
}
#suiv 
{
	top: 45%;
	left: 82%;	/* 100% moins 20% (btn prec, btn stop, 1/2 btn suiv */
}

@media (max-width:867px) 
{	/*  Ecran de tablette */
	#cdeDiap button 
	{
		font-size: 50%;
		width: 12%;
		height: 16%;
	}
	#prec 
	{
		left: -5%;	/* decalage d'un demis btn à gauche */
	}
	#stop 
	{
		top: 100%;	/* 100% moins decalage  d'un demis btn */
		left: 40%;	/* 50%  moins 12%(btn prec plus 1/2 btn stop) */
	}
	#suiv 
	{
		left: 76%;
	}
}

/*---------------------------------------*/
/*   Mise en page de la page d'accueil   */
/*---------------------------------------*/
.accueil 
{
	text-align: center;
	width: 90%;
	margin: auto;
	margin-top: 10%;
}
.art 
{	/* Photo à gauche article à droite */
	display: grid;
	grid-template-areas: "a a a b b b b"
						 "a a a c c c c"
						 "a a a c c c c";
							
/* Photo en 'a' titre en 'b' article en 'c' */
	align-content: center;
}
.artG 
{	/* Photo à droite article à gauche */
	display: grid;
	grid-template-areas: "b b b b a a a"
						 "c c c c a a a"
					 	 "c c c c a a a";
	justify-items: end;
}
.art img, .artG img 
{
	grid-area: a;
	border: 1em ridge #7c2c98;
	width: 80%;
	max-width: 30vw;
}
.art h3, .artG h3 
{
	grid-area: b;
	margin-top: 0;
	justify-self: center;
	font-size: 2em;
	text-decoration: underline;
}
.txtArt
{
	grid-area: c;
}
@media (max-width:700px) 
{	/* Ecran de portable */
	.titre h1 
	{
		font-size: 2em;
	}
	.art, .artG 
	{ /*  Photo avant l'article */
		display: grid;
		grid-template-areas: " b "
						     " a "
							 " c ";
	/* Photo en 'a' titre en 'b' article en 'c' */
	}
	.art img, .artG img
	{
		justify-self: center;
	}
	.art h3, .artG h3 
	{
		margin-top: 5%;
	}
}

/*-----------------------------------------------------*/
/*   bouton de modification, effacement et création    */
/*-----------------------------------------------------*/
.artMod 
{
	width: 30%;
	margin: 1em auto;
	display: flex;
	justify-content: space-around;
	height: 3.5em;
}
.artMod a 
{
	width: 35%;
}
.accueil button, .carte button, .menuMod button, .vinmod button
{
	border: .75em ridge #b2b2b2;
	border-radius: 2em 0;
	cursor: pointer;
	font-family: 'cooper black';
	font-size: 1.2em;
}
.btnMod 
{
	background-color: #7cf900;
}
.btnEff, .btnEffCont
{
	background-color: #ff0000;
}
.accueil .btnCre, .message .btnCre
{
	width: 40%;
	background-color: #3B67FF;
	border-radius: 50%;
	height: 4em;
}

/*-------------------------------------*/
/*         zone de confirmation        */
/*-------------------------------------*/
.confirm, .modifbte
{
	display: none;
	width: 40%;
	margin: auto;
	border: 1em ridge #7c2c98;
	background-color: #FFE862;
	border-radius: 2em;
	margin-top: 1em;
}
.confirm button 
{
	background-color: #E5CD3C;
	border: .75em ridge #7c2c98;
	border-radius: 2em;
	max-height: 3em;
}
.confirm button:hover 
{
	background-color: #CF9FE1;
}
.confirm a 
{
	width: 20%;
	display: inline-block;
	margin: 1em;
	vertical-align: middle;
}
.btnAb 
{ /* abandon modif plat */
	background-color: #7c2c98;
}


/*------ Modification de la page d'accueil -----*/
#chgPht 
{
	display: none;
}
#chgPht:target 
{
	display: block;
}
#chgPht img 
{
	margin: 0.5em;
}
#chgPht img:hover 
{
	cursor: pointer;
}
.modA button 
{
	background-color: #3B67FF;
	border-radius: 2em;
	margin: 1em;
}
.modA input 
{
	margin-bottom: 0.5em;
}
.modA .enrg 
{
	background-color: #D8E23B;
}
.modA .btnnon 
{
	background-color: #7c2c98;
}
#chgPht input[type="radio"] 
{
	display: none;	/* On supprime le rond à cocher */
	cursor: pointer;
}
#newPhoto 
{
	display: none;
}

/*---------------------------------------*/
/*   Mise en page des mentions légales   */
/*---------------------------------------*/
.mentLeg
{
	width: 80%;
	margin: auto;
	text-align: center;
}
.mentLeg h3
{
	margin-top: 3em;
	text-decoration: underline;
}
.mentLeg p
{
	text-align: justify;	
}


/*------------------------------------------*/
/*       Mise en page de la page liens      */
/*------------------------------------------*/
.lien 
{
	width: 60%;
	margin: auto;
	display: flex;
	align-items: center;
}
.lien h3 
{
	text-align: center;
}
.lien img 
{
	display: block;
	min-width: 30%;
	margin-top: 3em;
	margin-right: 2em;
}
@media (max-width:700px) 
{
	.lien
	{
		display: inline;
		text-align: justify;
	}
	.lien div
	{
		margin: 2em;
	}
	.lien img
	{
		margin: auto;
	}
}  

/*---------------------------------------------*/
/*       Mise en page de la galerie photos     */
/*---------------------------------------------*/
.photo 
{
	width: 90%;
	text-align: center;
	margin: auto;
	margin-top: 5em;
}
figure 
{
	border: 0.75em outset #7c2c98;
	border-radius: 5%;
	display: inline-block;
	text-align: center;

}
figure:hover 
{
	cursor: pointer;
	border-color: #CF9FE1;
}
figure img
{
		border-radius: 0 0 3% 3%;
		vertical-align: middle; /* Supprime l'espace entre l'image et la bordure */
}
figcaption 
{
	background-color: #B4BE19;
	color: #F9FEB0;
}
#gdPht 
{
	display: none;
	position: fixed;	/* Repositionnement de l' image */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#ferm 
{
	background-color: #F9FEB0;
	color: #B4BE19;
}
@media (max-width:867px) 
{
	#gdPht img
	{
		max-width: 90vw;
	}
}

/*-------------------------------------------------*/
/*       Mise en page du formulaire de contact     */
/*-------------------------------------------------*/
.message 
{
	margin-bottom: 10em;
}
.message form 
{
	width: 40%;
	margin: auto;
	display: grid;
	grid-template-areas: "a b""c d""e e""f f""g g";
	grid-gap: 2% 5%;
	justify-content: stretch;
}
.env 
{
	font-size: 1.2em;
	width: 50%;
	border-radius: 50%;
}
@media (max-width:867px) 
{
	.message form 
	{
		width: 90%;
	}
}

@media (max-width:700px) 
{
	.message form 
	{
		width: 90%;
		grid-template-areas: "a""b""c""d""e""f""g";
	}
}
.message div 
{	/* Centrage des labels */
	text-align: center;
}
.message input, .message textarea 
{
	width: 100%;
}
/* identification des inputs pour le positionnement */
.inp1 
{
	grid-area: a;
}
.inp2 
{
	grid-area: b;
}
.inp3 
{
	grid-area: c;
}
.inp4 
{
	grid-area: d;
}
.inp5 
{
	grid-area: e;
}
.inp6 
{
	grid-area: f;
}
.inp7 
{
	grid-area: g;
	color: #7c2c98;
}
.inp7 input 
{
	color: #7c2c98;
	border: .5em outset#7c2c98;
	background-color: #F9FEB0;
	width: 80%;
	margin: 2em 0 3em;
}
.inp7 input:hover 
{
	cursor: pointer;
}
.message .btnCre
{
	font-family: 'cooper black';
}

/*  Page de gestion des message  */
.gestMsg
{
	text-align: center;
}
.gestMsg .menCrt
{
	width: 60vw;
}

.gestMsg .btnEff
{
	border: .5em ridge #b2b2b2;
	border-radius: 2em 0;
	cursor: pointer;
	font-size: 1em;
	font-family: 'cooper black';
}

.msgTrt
{
	display: flex;
	width: 65%;
	margin: auto;
	justify-content: space-around;
}

.msgTrt .btnCre, .vinmod .btnCre
{
	width: 12vw;
	cursor: pointer;
	font-size: 1.2em;
	font-family: 'cooper black';
	border-radius: 2em 0;
	border: 0.5em ridge #7c2c98;
	background-color: #E5CD3C;
}

/*-------------------------------*/
/*    Mise en page des cartes    */
/*-------------------------------*/
.carte
{
	text-align: center;
}
.ttrCat 
{
	font-size: 2em;
	text-align: center;
}
.smenu 
{	/* Menu  d'accés rapide toujours visible en haut de l'écran */
	margin-top: 1em;
	position: sticky;
	top: 0.5em;
}
.boutVal 
{ 
	display: flex;
	justify-content: space-around;
}
.boutVal button
{
	width: 23vw;
}
.langage 
{   /* Menu de changement des langues */
	width: 20%;
	display: flex;
	justify-content: space-around;
	margin: auto;
	margin-top: 1em;
}
.langage a, .langage a:hover 
{
	background-color: transparent;
	border: none;
}
@media (max-width:867px) 
{
	.langage 
	{
		width: 50%;
	}
}
#lesMenus, #crtVin 
{
	text-align: center;
	border: 0.75em outset #7c2c98;
	border-radius: 2em;
	font-family: vivaldi;
	font-size: 1.5em;
	margin: 5%;
	background-color: #E5CD3C;
}
.menCrt 
{
	border: 0.5em outset #7c2c98;
	border-radius: 2em;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	margin: 1em;
	padding: 0.5em;
	background-color: #FFE862;
}
#menu5 img
{
	width: 80%;
}
.lesplts 
{
	text-align: center;
}
.lesplts .menCrt 
{
	border: 0.75em outset #7c2c98;
	background-color: #E5CD3C;
}
.menCrt strong 
{ /* Ligne avec nom + fait maison +prix */
	display: flex;
	justify-content: space-between;
	margin: 0 1em;
}
.modCat
{
	display: flex;
	justify-content: space-around;
}
.modCat .btnCre
{
	width: 20vw;
	padding: 1em;
	border-radius: 50%;
	border: 0.75em ridge #7c2c98;
	background-color: #E5CD3C;
}

/*-------------------------------*/
/*        cartes des vins        */
/*-------------------------------*/
#crtVin 
{
	font-family: 'Century Schoolbook';
	font-size: 1em;
}
.grdVin 
{
	display: grid;
	grid-template-columns: 4fr 3fr repeat(3, 1fr);
	gap: .75em .5em;  /*marge ligne de 0.75 et colonne de 0.5em */
}
.nVin 
{
	grid-column: 1;
	justify-self: start;
}
.cuvee 
{
	grid-column: 2;
	justify-self: start;
}
.coulRg 
{
	grid-column: 3;
}
.coulV 
{
	text-align: left;
}
.prx37, .prx50, .prx75 
{
	justify-content: center;
}
.prx37 
{
	grid-column: 6;
}
.prx50 
{
	grid-column: 7;
}
.prx75 
{
	grid-column: 8;
}
#crtVin .ttrCat 
{
	font-size: 2em;
}
.ttrV 
{
	font-size: 4em;
	font-family: vivaldi;
}
.portV 
{
	display: none;
}
@media (max-width:867px) 
{
	#crtVin .ttrV 
	{
		font-size: 3em;
	}
	#crtVin .ttrCat 
	{
		font-size: 1.5em;
	}
}
@media (max-width:700px) 
{
	.grdVin, .portV 
	{
		display: inline;
	}
	.qteV 
	{
		display: none;
	}
	.coulV 
	{
		text-align: center;
	}
}

/*------------------------------*/
/*    Modification des vins     */
/*------------------------------*/
.vinmod
{
	text-align: center;
}

/*------------------------------*/
/*    Modification des menus    */
/*------------------------------*/
.menuMod 
{
	display: inline-block;
	text-align: center;
}
.menuMod h3, .menuMod input
{
	margin-bottom: 1vh;
}

/*--------------------------------------------*/
/*    Mise en page formulaire de connection   */
/*--------------------------------------------*/
.connect 
{
	width: 40%;
	margin: 10% auto;
	padding: 1em;
	border: 0.55em ridge #7c2c98;
	border-radius: 2em;
	text-align: center;
	font-size: 1.2em;
	background-color: #E5CD3C;
}
@media (max-width:867px) 
{
	.connect 
	{
		width: 80%;
		font-size: 1em;
	}
}
.connect input 
{
	background-color: #FFE862;
}
.env 
{
	color: #7c2c98;
	border: .5em outset#7c2c98;
	background-color: #F9FEB0;
}
.env :hover, .logg button 
{
	cursor: pointer;
}

/*-------------------------------------------------*/
/*      Mise en page du bouton de déconnexion      */
/*-------------------------------------------------*/
.logg 
{
	display: Flex;
	justify-content: space-between;
	width: 35%;
	font-size: 1.5em;
	font-family: 'cooper black';
	color: #3C1E84;
	margin: .5em auto;
}
.logg button 
{
	background-color: #E5CD3C;
	border-radius: 2em;
	border: 3px solid #CF9FE1;
	color: #3C1E84;
	height: 2.5em;
	font-family: 'cooper black';
}

/*-------------------------------------------------*/
/*         Mise en page dauto implementation       */
/*-------------------------------------------------*/
#voirRst
{
	display: none;
	width: 15%;
	margin: auto;
	background-color: #E5CD3C;
}
#voirRst div:hover, .voirRst_focus
{
	background-color: #F9FEB0 !important;
}