body{
    margin: 0;
    padding:0;    
    min-height: 100vh;} /*  neutraliser les marges par défaut du navigateur   */
   
#site{
    width:100%;
    margin:auto;
    display:grid;
    grid-gap: 0px;
    grid-template-columns: 1fr 4fr;
    grid-template-areas: 
    "header header"
    "nav nav"
    "article article"
    "footer footer";}


/* --HEADER----------------------------- */
header{
    	background:linear-gradient(to right,#ffffff,#1171d1); /* degrade bleu clair */
        background: -webkit-linear-gradient(left,#ffffff,#1171d1);
        background: -moz-linear-gradient(right,#1171d1,#ffffff);
        background: -o-linear-gradient(right,#1171d1,#ffffff);
        height:100px;
    grid-area: header;
    display:flex;
    justify-content:start;
    align-items:center;
    height:100px;}
    
    
    
    .header_flexbox-logo{
    animation:flexbox_header-logo;
    animation-duration: 2s;}
    
    .header_flexbox-logo img{
    width:80px;
    margin: 25px 0 20px 20px;}

	@keyframes flexbox_header-logo {     /* Animation du logo */
        0% {opacity: 0;
            transform: rotate(0deg) scale(0);}
        100% {opacity: 1;
            transform: rotate(360deg) scale(1);}
        } 

	.header_flexbox-emusicale{  /* Emusicale */
		width:100%;
        font-family: 'Peralta', cursive;
        text-shadow: 3px 3px 5px black;
        font-weight:1em;
        color: #f63328;
        margin:10px 0 25px 20px;
        font-size: 2.1em;}
	.header_flexbox-emusicale:first-letter{
            font-size: 2em;
            text-shadow: 3px 3px 3px #525252;
            font-weight:bold;
            color: #1171d1;}
    
	.header_flexbox-as{ /* Année scolaire */
		align-items: flex-end;
        color:white;
        text-align:end;
        font-size: 1.1em;
        font-family: Arial, sans-serif;
        width:30%;
        padding-right:30px;
        }
        
/* --NAVIGATION----------------------------- */
nav {
	font-family: Arial, sans-serif;
    margin: 0px auto;
    width: 100%;
    height: 40px;
    background: #1e1e1e;
    grid-area: nav;}

	nav .menu {
    	display: flex;
    	justify-content: space-around;
    	align-items: center;}

	nav .menu a {
    	width: 100%;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	height: 40px;
    	text-decoration: none;
    	color: white;}

	nav a:hover {
    	background: rgb(207, 207, 207);
    	color: #1e1e1e;}

	label, #toggle{
    	display: none;}
    	
    nav .bandeau {    	
    	display: flex;
    	justify-content: left;
    	align-items: center;
    	padding:10px;	
    	color:#fff;}
    	

/* --ARTICLE----------------------------- */

article{
	font-family: Arial, sans-serif;
	margin: 0px auto;
    width: 100%;
    background-color: white;
    height:auto;
    padding:30px 0;
    grid-area: article;}

    article .niveau {   
    	display: flex;
    	flex-direction:row;
    	flex-wrap:no-wrap;
    	justify-content: center;
    	align-items: center;
    	height:auto;
    	}
    	
    article .niveau a {
    	width: 40%;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	height: 200px;
    	text-decoration: none;
    	cursor: pointer;}
    	
    article .niveau a:hover{
    	background-color:#f5f5f5;
    	border: 0px solid #f5f5f5;
        border-radius: 30px;}
        
    article .ent {   
    	display: flex;
    	flex-direction:row;
    	flex-wrap:no-wrap;
    	justify-content: center;
    	align-items: center;
    	height:auto;
    	}
    	
    article .ent a {
    	width: 50%;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	height: 60px;
    	text-decoration: none;
    	cursor: pointer;}


/* --FOOTER----------------------------- */
footer{
	font-family: Arial, sans-serif;
	background-color: #dcdcdc;
    color:#757575 ;
    text-align:center;
    grid-area: footer;}
	
	footer .pied {
    	display: flex;
    	flex-direction:column;
    	height:40px;
    	justify-content: center;
    	align-items: center;
    	}


@media screen and (max-width:1024px) and (min-width:600px){
    #site{
        width:100%;
        grid-template-columns: 1fr 4fr;
        grid-template-areas: 
        "header header"
        "nav nav"
        "article article"
        "footer footer";}
     
    .header_flexbox-logo{display:none;} /* logo */
    .header_flexbox-as{ /* Année scolaire */
        font-size: 1em;
        width:200px;
        padding-right:30px;
        }
 article .niveau {   
    	flex-wrap:no-wrap;}
   
    }


@media screen and (max-width:600px) {
    /* smartphone */
    #site{
        width:98%;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "header"
        "nav"
        "article "
        "footer";}   

    header{height: 100px;}
    .header_flexbox-logo{display:none;} /* Logo */
    .header_flexbox-as{display:none;} /* Année scolaire */

    nav {height: 40px;}

    nav .menu {
        display: none;
        flex-direction: column;
        background: #1e1e1e;
        height: 200px;} /*  60 x nombre de rubique, ici 4   */

    nav .menu a {
        width: 100%;}

    label {
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 35px;
        color: white;
        cursor: pointer;}

    #toggle:checked + .menu {
        display: flex;}
    
    nav .bandeau {    	
    	justify-content: center;
    	align-items: center;}	
    
article .niveau {   
    	flex-wrap:wrap;}
  article .niveau img{   
    	margin:5px;}
.flexbox{
    background-color:white;}
}