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

img {
  display: block;

  margin: auto;
}

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

.p3{
text-align:center;
font-size:12px}


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

/* Smartphones (max-width: 480px) */
@media screen and (max-width: 480px) {
    body {
        margin: 3px;
    }
    
    #header {
        font-size: 1.2em;
        padding-top: 5px;
    }
      
    h1 {
        font-size: 18px;
    }
   .p1 {
        font-size: 14px;
  }	
}

/* Très petits écrans (max-width: 320px) */
@media screen and (max-width: 320px) {
 
}

.ap-padding-32{padding-top:32px!important;padding-bottom:32px!important}
.ap-center{text-align:center!important}
.ap-bar{width:100%;overflow:hidden}.ap-center .ap-bar{display:inline-block;width:auto}
.ap-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.ap-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.ap-bar .ap-bar-item{padding:8px 16px;float:left;width:auto;border-radius:15%; border:2px solid white; display:block;background-color:#dfc7b5;text-align:center}