/* DEFINITION DES PSEUDOS CONSTANTES */



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

/* 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: #AAA; color: #000;}
.sidebar    {background: #AAA; color: #000;}
.menu		{
			a{color:#FFF; text-decoration:none;}
			}
.masked-link  
            {
			a{color:#000; text-decoration:none;}
			}



/* DEFINITION DE LA GRILLE */     

.header {grid-area: header; z-index:10;}
.main {grid-area: main;}
.footer {grid-area: footer;}


/* DEFINITION DES STYLES LIES AU FORMAT D'APPAREIL (RESPONSIVE STYLE) */

@media screen and (min-width: 1801px) /* MODE ECRAN ORDINATEUR LARGE */  
{
    body    {font-size:100%;}
    
    #contenu
    {
    display: grid; 
    grid-template-columns: auto auto auto auto auto ;
    }
    
    #grid
    {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 9rem auto max-content;
    grid-gap: 0;
    padding: 0;
    margin: 0 16rem 0 16rem;
    grid-template-areas:  
    "header header header  "    
    "main main main" 
    "footer footer footer";
    }
    .header {position: fixed; top:0; left:16rem; right:16rem; height:7rem;}
}
    
@media screen and (min-width: 1001px) and (max-width: 1800px) /* MODE ORDINATEUR */  
{
    body    {font-size:100%;}
    
    #contenu
    {
    display: grid; 
    grid-template-columns: auto auto auto auto auto;
    }
    
    #grid
    {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 9rem auto max-content;
    grid-gap: 0;
    padding: 0;
    margin: 0 10rem 0 10rem;
    grid-template-areas:  
    "header header header  "    
    "main main main" 
    "footer footer footer";
    }
    .header {position: fixed; top:0; left:10rem; right:10rem; height:7rem;}
    
}

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

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

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