/* DEBUT DE LA PARTIE HAUTE DU SITE ET DES ELEMENTS QUI ENGLOBE LE SITE (texte,images...) */
 
 body, html {
	 
	 /* Cette partie  permet de nommé qu'elle police de caractère que tu utilisera pour le site et le Trickster permet simplement de dire au serveur que ta police est dans ton dossier du site */
	     font-family: 'logo3H6';
		   local("Trickster"),

		 src: url('../fonts/logo3H6.ttf')format('truetype');
		 font-weight: bold;
	 /* Cette partie  permet de nommé qu'elle police de caractère que tu utilisera pour le site et le Trickster permet simplement de dire au serveur que ta police est dans ton dossier du site */


	 text-align:center;
	 color:#000;
	 margin: 0 auto;
 }

header

{
		width:auto;
		height:100%
}


#logoResto{
	position: relative;
    border-top: 3px solid;
    border-bottom: 3px solid;
 	padding: 10px;
    color: #000;
    text-align: center;
	 margin-left: auto;
    margin-right: auto;
	
}



					/* FIN DE LA PARTIE HAUTE DU SITE ET DES ELEMENTS QUI ENGLOBE LE SITE (texte,images...) */



/* ------------------------------------------------------------------------------------------------------------------------------------------------------------ */

										/* DEBUT CODE DE LA PARTIE BODY */

/* --- Début du code : ceci permet de centrer tout le bloc centrer le body soit le corps --- */

.rev{
	max-width: 65%;
    margin: 0 auto;
}
/* --- Fin du code : ceci permet de centrer tout le bloc centrer le body soit le corps --- */

/* --- Début du code : ceci permet d'aligner le texte central dans son conteneur --- */

p{
	position:relative;
    	
	margin: 0px;
}
/* --- Fin du code : ceci permet d'aligner le texte central dans son conteneur --- */


h2{
    position:relative;
    text-align: center;	 
    text-transform: uppercase;	
}


h3{
	position:relative;
	 color: #fff;
	text-align: center;
	width: 100%;
	text-transform:uppercase;
}

/* --- Début du code : ceci permet de regler l'espacement entre tes tableaux --- */

table{
	position: relative;
	border-collapse : collapse;
	margin: 30px;
    PADDING: 8PX;
}
/* --- Début du code : ceci permet de regler l'espacement entre tes tableaux --- */


/* début code : ceci est l'entete orange de la tete de la table */

thead{
	position:relative;
	background: #d2500f;
    display: table-header-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
}	
/* fin du code : ceci est l'entete orange de la tete de la table */


/* --- Début du code: correspond à la couleur hsl afin soit la couleur claire du bloc central --- */

tbody {
	background-color: #ffebd6;	
	position:relative;
	height:100%;
	float: right;
}
/* --- Fin du code: correspond à la couleur hsl soit la couleur claire du bloc central --- */



td{
	position:relative;
	table-layout: auto;
    margin:20px;
    width: 400px;
}


.descriptionsPlats{

	    width: 100%;
		
}

/* --- Début du code: changement de couleur et mise en italic du mot ou --- */

.separateur{
	color: #d2500f;
	font-style: italic;  
    line-height: 41px;
 	
}
/* --- Fin du code: changement de couleur et mise en italic du mot ou --- */


/* --- Début du code: image a 200px de largeur et forcer à etre centrer sur une version d'écran normal type pc ou tv --- */

img {
	vertical-align: middle;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}
/* --- Fin du code: image a 200px de largeur et forcer à etre centrer sur une version d'écran normal type pc ou tv --- */


/* --- Début du code Forcer la table à ne plus ressembler à des table afin que les bloc s'alignes l'un en dessous des autres (mode responsive pour divers ecran --- */

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

 td, img { 
		display: block;
width: 200px;
     margin-left: auto;
    margin-right: auto;		
	}	 
}
/* --- Fin du code: Forcer la table à ne plus ressembler à des table afin que les bloc s'alignes l'un en dessous des autres (mode responsive pour divers ecran --- */


.nomPlat {
   position: relative;
   margin: 0 auto;  
   font-weight:bold;
   font-size:18px;

}


/* --- Début du code : ceci etant la réponse c de ton devoir afin d'afficher le cadre est l'espace. Pour avoir le meme effet visuel que ton devoir desactive les ligne 129 à 134 --- */

    /* .nomPlat + p { */
    /* border: 2px solid black; */
    /* margin: 10px; */
    /* padding: 5px; */
/* } */

/*  --- Fin du code: ceci etant la réponse c de ton devoir afin d'afficher le cadre est l'espace. Pour avoir le meme effet visuel que ton devoir desactive les ligne 129 à 134 --- */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------- */

											/* DEBUT CODE DE LA PARTIE BODY */