/* 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;}
			}


/* DIAPORAMA */

@keyframes slideshow__fade {
  0% {
	opacity: 1;
    z-index: 2;
  }

  90% {
   
    z-index: 2;
  }
 
}

.diaporama {
  position: relative;
}

.diaporama img:not(:first-child) {
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	margin: 0 auto;
	animation-duration: 144s; /* On retrouve 24 images x 6 secondes ici */
	animation-fill-mode: none;
	animation-iteration-count: infinite;
	animation-name: slideshow__fade;
	animation-timing-function: linear;
}

.diaporama img:nth-child(1) {
  animation-delay: 0s;
}
.diaporama img:nth-child(2) {
  animation-delay: 6s;
}
.diaporama img:nth-child(3) {
  animation-delay: 12s;
}
.diaporama img:nth-child(4) {
  animation-delay: 18s;
}
.diaporama img:nth-child(5) {
  animation-delay: 24s;
}
.diaporama img:nth-child(6) {
  animation-delay: 30s;
}
.diaporama img:nth-child(7) {
  animation-delay: 36s;
}
.diaporama img:nth-child(8) {
  animation-delay: 42s;
}
.diaporama img:nth-child(9) {
  animation-delay: 48s;
}
.diaporama img:nth-child(10) {
  animation-delay: 54s;
}
.diaporama img:nth-child(11) {
  animation-delay: 60s;
}
.diaporama img:nth-child(12) {
  animation-delay: 66s;
}
.diaporama img:nth-child(13) {
  animation-delay: 72s;
}
.diaporama img:nth-child(14) {
  animation-delay: 78s;
}
.diaporama img:nth-child(15) {
  animation-delay: 84s;
}
.diaporama img:nth-child(16) {
  animation-delay: 90s;
}
.diaporama img:nth-child(17) {
  animation-delay: 96s;
}
.diaporama img:nth-child(18) {
  animation-delay: 102s;
}
.diaporama img:nth-child(19) {
  animation-delay: 108s;
}
.diaporama img:nth-child(20) {
  animation-delay: 114s;
}
.diaporama img:nth-child(21) {
  animation-delay: 120s;
}
.diaporama img:nth-child(22) {
  animation-delay: 126s;
}
.diaporama img:nth-child(23) {
  animation-delay: 132s;
}
.diaporama img:nth-child(24) {
  animation-delay: 138s;
}


/* 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;
    }
    
    #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;
    }
    
    #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;
    }

    #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;
    }

    #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;}
}