/* Main elements of the page */

body 
{}
  
p,a, h1, h2, em, strong
{ font-family: Comic Sans MS, serif;}

p,a, em, strong
{ font-size: 1.1em; }

h1
{ font-size: 1.5em; } 

h2
{ font-size: 1.3em; } 

nav p
{ font-size: 0.9em; 
text-align: center; }

nav 
{  text-align: center; }

a, a:visited {
    /* Les liens "au repos" et déjà visités antérieurement */
    color: rgb(167,167,167);
    text-decoration: none ;
    
}
a:hover, a:focus, a:active {
    /* Les liens au survol, au focus, et actifs : on leur donne la couleur rouge pour l'exemple */
    color: rgb(65,162,24);
    border-bottom: 3px solid ;
}




/* Header*/

header
{   background-color: rgb(255,255,255);
    color: rgb(167,167,167);
    height: 70px;
    border-bottom: 4px rgb(74,74,74) solid;
    text-transform: uppercase;
    font-weight: bold;
}
  
header article
{ display: inline-block;
  vertical-align:top;
  float: left;
  width: 50px;
  margin: 6px;}

header aside
{ float: right;
  vertical-align: middle;
  color: rgb(167,167,167);}

header aside ul
{list-style-type: none;}

header aside li
{ display: inline-block;
    margin-right: 20px;}

header aside a
{   font-size: 1.5em;
    padding-bottom: 3px;
    text-decoration: none; }

  
/* change size header*/
@media all and (max-width: 950px)
{
    header
    { height: 140px; 
    vertical-align: middle;
    margin: 0px;
    padding: 0px;    }
    
    header article
    { text-align: center; 
      display: inline;
      width: 100%;
      margin: 6px;}
      
    header aside
    { text-align: center; 
      display: block;
      width: 100%;
      margin: 6px;}
}  


/* Section page acceuil */

#Section-1, #Section-3, #Section-5
{ 
background-color: rgb(255,255,255);
display: inline-block;
vertical-align: top;
text-align: left;
width: 100%;
margin-top: 10px;
}

#Section-1 aside, #Section-3 aside, #Section-5 aside
{ 
display: inline-block;
vertical-align: top;
text-align: center;
}

#Section-1 aside
{ width: 370px; }
#Section-3 aside
{ width: 540px; }
#Section-5 aside
{ width: 540px; }

#Section-1 article, #Section-3 article, #Section-5 article
{ 
display: inline-block;
vertical-align: top;
text-align: left;
}

#Section-1 article
{ width: calc(100% - 390px);}
#Section-3 article
{ width: calc(100% - 560px);}
#Section-5 article
{ width: calc(100% - 560px);}

#Section-2, #Section-4, #Section-6
{ 
background-color: rgb(230,230,230);
display: inline-block;
vertical-align: top;
text-align: center;
width: 100%;
}

#Section-2 article,#Section-4 article
{ 
display: inline-block;
vertical-align: top;
text-align: center;
width: 23%;
font-size: 0.9em;
margin: 0px;
padding: 0.1%;
}

#Section-6 article
{ 
display: inline-block;
vertical-align: top;
text-align: center;
width: 350px;
font-size: 0.9em;
margin: 0px;
padding: 0.1%;
}

.image
{
border-radius: 20px 20px 20px 20px;
}

video
{
border: 2px rgb(65,162,24) solid;
    margin: 10px;
    padding: 0px;  
}

/* change size section*/
@media all and (max-width: 950px)
{
    #Section-1 aside, #Section-1 article, #Section-3 aside, #Section-3 article, #Section-5 aside, #Section-5 article
    { display: inline;
    vertical-align: middle;
    margin: 0px;
    padding: 0px;    
    }

}  


/* Footer*/
footer
{   background-color: rgb(74,74,74);
    color: rgb(167,167,167);
    display: inline-block;
    vertical-align: top;
    width: 100%;
}
  
footer article
{ background-color: rgb(74,74,74);
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 300px;
    margin: 5px;
    padding: 5px;
}
footer aside
{ 
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: calc((100% - 400px)/2);
}

footer nav
{ 
    vertical-align: middle;
    text-align: center;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
  
/* change size Footer*/
@media all and (max-width: 900px)
{  
    footer 
    { text-align: center; 
    background-color: rgb(74,74,74);
    margin: 0px;
    padding: 0px;
    width: 100%;}
    
    footer aside
    { text-align: center; 
      background-color: rgb(74,74,74);
      margin: 0px;
      padding: 0px;
      width: 100%;}
      
      
      
}