/* first value for computer */
body
{
	background-color:   #dce9ef ;
}

p {
  margin-bottom: 0.5em; // on ajoute un espace après chaque paragraphe
}

// Default values
#container {
	display: grid;
	grid-template-areas:
	"h  h"
	/*	"sh sh" */
	"m  c"
	"f  f";
	grid-template-rows:     auto /* 50px */ 650px 50px;
		grid-template-columns:  134px auto;
                
	width:  100%;
	height: 500px;
}

            
#content {
	border: solid;
	border-color: grey;
	grid-area:          c;
}

#footer {
	background-color:   #b302fe;
	color: white;
	grid-area:          f;
}

#header {
	background-color:   #6cd4f7;
	color: #0210b7;
	grid-area:          h;
}


// div menu
#menu {
	border : solid 2px #888;  /* On applique des bordures à la balise ul */
	border-right: none;
	list-style-type:none; /* On enlève la puce */ 
	margin: 0; /* On retire les marges intérieures et extérieures */
	padding:0; 

	grid-area:          m;
}

.navbar {
	margin-left: -40px;
}

#menu li {
	list-style: none; // supprime les flèches
//	list-style-type:none; /* On enlève la puce */ 
    background: #080;
	background: url(./menu.gif)  left bottom no-repeat;
    color: #000;
//	padding: 8px 0px 0px 10px;
	margin-left: 0px;
}

#menu li a {
       height: 24px;
       color: #0f0;
         voice-family: "\"}\"";
         voice-family: inherit;
       text-decoration: none; // hide underscore
       }

#menu li a:link, #menu li a:visited {
       color: #333;
       display: block;
       background:  url(./menu.gif)  left top no-repeat;
       padding: 8px 0 0 10px;
}

#menu li a:hover {
       height: 24px;
//       color: #FFF;
	background: url(./menu.gif) left bottom no-repeat;
       padding: 8px 0 0 10px;
}

.SelectedMenu {
       height: 24px;
	margin-left: 10px;
//	margin-top: 10px;
    padding: 8px 0 0 10px;
}


/*
            #subheader {
                background-color:   yellow;
                grid-area:          sh;
            }
*/


/* Smartphones huawei(portrait) plus petit que 1000 ----------- */
@media only screen  and (orientation:landscape)
{
	body
	{
/*		background-color:   blue; */
	}

	#container
	{
		display: grid;
		grid-template-areas:
		"h  h"
		/*	"sh sh" */
		"m  c"
		"f  f";
		grid-template-rows:     142px /* 50px */ auto 50px;
		grid-template-columns:  134px auto;
        
		width:  980px;
		height: 1000px;
	}
    
	#header
	{
/*                background-color:   #00CCff 	 	 	;
				color: #0210b7; */
                grid-area:          h;
	}
}

/* Smartphones (portrait) ----------- */
@media only screen  and (orientation:portrait)
{
/* Styles */
	body
	{
/*		background-color:   yellow; */
	}

	#container
	{
		display: grid;
		grid-template-areas:
		"h  h"
		/*	"sh sh" */
		"m  c"
		"f  f";
		grid-template-rows:     142px /* 50px */ auto 50px;
		grid-template-columns:  134px auto;
        
		width:  980px;
		height: 1200px;
	}
}


/* Smartphones (landscape) ----------- */
@media only screen and (min-device-width : 1599px)
{
/* Styles */
	body
	{
/*		background-color:   green; */
	}
}

/* dell ----------- */
@media only screen and (min-device-width : 1536px)
{
/* Styles */
	body
	{
/*		background-color:   red; */
	}
	
	#container {
		display: grid;
		grid-template-areas:
		"h  h"
		/*	"sh sh" */
		"m  c"
		"f  f";
		grid-template-rows:     auto /* 50px */ 650px 50px;
		grid-template-columns:  134px auto;
                
		width:  100%;
		height: 80%;
	}
}


details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
}

summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
}

details[open] {
    padding: 0.5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
}