html {
/* L'image est positionnée en fond et est centrée */
background: url(fond.jpg) no-repeat center center fixed;
/* Ajout de la propriété avec les préfixes pour tous les moteurs de rendu */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#7f5537;
}
body {
    margin: 10px;
     text-align: left;
	color:#62412a;
    font-family: 'Comic Sans MS' ;
    font-weight: normal;
    font-style: normal;
 }
@font-face {
    font-family: 'Comic Sans MS';
     src: url("./font/ComicSansMS.ttf"); 	 src: url('./font/ComicSansMS.eot');
    src: url('./font/ComicSansMS.eot?#iefix') format('embedded-opentype'),
        url('./font/ComicSansMS.woff2') format('woff2'),
        url('./font/ComicSansMS.woff') format('woff'),
        url('./font/ComicSansMS.ttf') format('truetype');
}


#header{
	height: auto;
	width: auto;
	position: relative;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	background-attachment: fixed;
    font-size: 1.875em;
    border-radius: 20px;
		width: auto;	
		text-align:center;
}

/* nav */
#nav {margin-top:-0px;
 padding:6px;	
 margin-left: auto;
	margin-right: auto;
background-image: url(fond2.jpg);
background-repeat: no-repeat;
background-size: cover;
	line-height: 100%;
	border-radius: 2em;
    box-shadow: 0 1px 3px rgba(0,0,0, .4);
    font-size:15px;
width:100%;
max-width: 480px}

#nav li {margin: 0 5px;padding: 0 0 8px;float: left;position: relative;list-style: none; color: #7f5537}

/* main level link */
#nav a {font-weight: bold; color: #7f5537;text-decoration: none;display: block; padding:  8px 20px;margin: 0;font-size:15px;
    border-radius: 1.6em;
	}
#nav a:hover {background: #c9a082;color: #7f5537;}

/* main level link hover */
#nav .current {font-weight: bold; color: #7f5537;text-decoration: none;display: block; padding:  8px 20px;margin: 0;font-size:15px;
    border-radius: 1.6em;
	} 

#nav li:hover > a {background: #c9a082 ;color: #9f6324;border-top: solid 1px #f8f8f8;
    
	box-shadow: 0 1px 1px rgba(0,0,0, .2);
	}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {background: none;border: none;color: #666;
box-shadow: none;
}
#nav ul a:hover {
	color: #7f5537 !important;
border-radius: 0;
	}


/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;} 
#nav1:after {content: ".";display: flex;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav1 {display: flex;
flex-direction: column;} 
/* nav1 */
#nav1 {margin-top:-0px;
 padding:25px;	
 margin-left: auto;
	margin-right: auto;
background-image: url(liv.jpg);
 background-repeat: no-repeat;
background-size: cover;
	line-height: 100%;
	border-radius: 2em;
    box-shadow: 0 1px 3px rgba(0,0,0, .4);
    font-size:15px;
width:500px;
height:360px;
}

#nav1 li {width:40%;margin: 0 5px;padding: 0 0 8px;float: left;position: relative;list-style: none; color: #7f5537}

#nav1 a {font-weight: bold; color: #7f5537;text-decoration: none;display: block; padding:  8px 20px;margin: 0;font-size:15px;
    border-radius: 1.6em;
	}
#nav1 a:hover {background: #c9a082;color: #7f5537;}

/* main level link hover */
#nav1 .current {font-weight: bold; color: #7f5537;text-decoration: none;display: block; padding:  8px 20px;margin: 0;font-size:15px;
    border-radius: 1.6em;
	} 

#nav1 li:hover > a {background: #c9a082 ;color: #9f6324;border-top: solid 1px #f8f8f8;
    
	box-shadow: 0 1px 1px rgba(0,0,0, .2);
	}

/* sub levels link hover */
#nav1 ul li:hover a, #nav li:hover li a {background: none;border: none;color: #666;
box-shadow: none;
}
#nav1 ul a:hover {
	color: #fff !important;
border-radius: 0;
	}

/* clearfix */



a{
	font-weight: bold;
	text-decoration: none;
border:none ;
	color: #7f5537;
}
a:hover,a:active,a:focus{
border:none!important;
	color:  #efda07;
}

.top {
  vertical-align: middle;
}		
h1{
text-align:center;
font-size:22px}




/* Styles responsive pour la navigation du header */
.header-nav {
    margin: 5px auto auto;
    width: 50%;
}

/* Styles responsive pour la navigation du sommaire */
.sommaire-nav {
    margin: 10px auto auto;
    width: 100%;
    height: 304px;
}



/* Media queries pour rendre la page responsive */

/* Tablettes (max-width: 768px) */
@media screen and (max-width: 768px) {
    body {
        margin: 5px;
    }
    
    #header {
        font-size: 1.5em;
    }
    
    .header-nav {
        width: 80%;
    }
    
    #nav {
        font-size: 14px;
        max-width: 100%;
    }
    
    #nav a {
        padding: 6px 15px;
        font-size: 14px;
    }
    
    .sommaire-nav {
        width: 90%;
        height: auto;
        min-height: 300px;
    }
    
    #nav1 {
        width: 100% !important;
        height: auto !important;
        min-height: 300px;
        padding: 20px;
    }
    
    #nav1 li {
        width: 45%;
    }
   

    
    .stylep {
        font-size: 14px;
    }
}

/* Smartphones (max-width: 480px) */
@media screen and (max-width: 480px) {
    body {
        margin: 3px;
    }
    
    #header {
        font-size: 1.2em;
        padding-top: 5px;
    }
    
    .header-nav {
        width: 95%;
    }
    
    #nav {
        font-size: 12px;
        padding: 4px;
    }
    
    #nav a {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .sommaire-nav {
        width: 95%;
        height: auto;
        min-height: auto;
    }
    
    #nav1 {
        width: 100% !important;
        height: auto !important;
        min-height: auto;
        padding: 15px;
        font-size: 13px;
    }
    
    #nav1 li {
        width: 100%;
        float: none;
        margin: 5px 0;
    }
    
    #nav1 a {
        padding: 6px 15px;
        font-size: 13px;
    }
    

    
    .stylep {
        font-size: 13px;
        margin: 10px 0;
    }
    
    h1 {
        font-size: 18px;
    }
   .p1 {
        font-size: 12px;
  }	
      .desc {
        font-size: 11px;
    }   
}

/* Très petits écrans (max-width: 320px) */
@media screen and (max-width: 320px) {
    .p1 {
        font-size: 11px;
    }   
    .desc {
        font-size: 11px;
    }   

	#nav {
        font-size: 11px;
    }
    
    #nav a {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    #nav1 {
        padding: 10px;
        font-size: 12px;
    }
    
    #nav1 a {
        padding: 5px 12px;
        font-size: 12px;
    }

}