/* DEFINITION DES PSEUDOS CONSTANTES */



body    {border: 0; margin: 0; padding: 0; background-color:#AAAAAA; font-family:arial;}
h1      {margin-top: 0;}


/* DEFINITION DE LA GRILLE */     

.header {grid-area: header;}
.main {grid-area: main;}
.footer {grid-area: footer;}


/* DEFINITION DES STYLES LIES AU FORMAT D'APPAREIL (RESPONSIVE STYLE) */
    
@media screen and (min-width: 1200px) /* MODE ORDINATEUR */  
{
    body    {font-size:100%;}
    
    #contenu
    {
    display: grid; 
    grid-template-columns: auto auto;
    }
    
    #grid
    {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 9rem auto max-content;
    grid-gap: 0;
    padding: 0;
    margin: 0 5rem 0 5rem;
    grid-template-areas:  
    "header header header header header header"    
    "main main main main main main" 
    "footer footer footer footer footer footer";
    }
    .header {position: fixed; top:0; left:5rem; right:5rem; height:9rem;}
    
}

@media screen and (min-width: 800px) and (max-width: 1200px) /* MODE TABLETTE */    
{
    body    {font-size:85%;}
    
    #contenu
    {
    display: grid; 
    grid-template-columns: auto auto;
    }

    #grid
    {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 9rem auto max-content;
    grid-gap: 0;
    padding: 0;
    margin: 0 5rem 0 5rem;
    grid-template-areas:  
    "header header header header"
    "main main main main"   
    "footer footer footer footer";
    }
    .header {position: fixed; top:0; left:5rem; right:5rem; height:9rem;}
}
    
@media screen and (max-width: 800px) /* MODE TEL MOBILE */    
{
    #contenu
    {
    display: grid; 
    grid-template-columns: auto;
    }

    #grid
    {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 9rem auto max-content;
    grid-gap: 0;
    padding: 0;
    margin: 0;
    grid-template-areas:  
    "header header header header"
    "main main main main"   
    "footer footer footer footer";
    }
    .header  {position: fixed; top:0; left:0; right:0; height:9rem;}
}    


/* DEFINITION DES STYLES NON FONCTION DU FORMAT D'APPAREIL*/

.box        {padding: 1rem; font-size: 100%; border:0 solid #32a1ce;}
.header     {background: #FFF; color: #AAA;}
.main       {background: #FFF; color: #000;}
.footer     {background: #EEE; color: #000;}
.sidebar    {background: #CCC; color: #000;}
.menu		{
			a{color:#FFF; text-decoration:none;}
			}