/* L ENTETE DE LE PAGE  */

header{
    width: 100%;
    font-family: Arial;
    background-color:#663C00;
    color:#F8BF24;
    position: relative;
    }



  
/* LE TITRE  */

h1{
    font-family: 'Parisienne', cursive;
    text-align:center;
    text-transform:capitalize;
    text-shadow:5px 5px 7px #BC6F00;
       }
.hn{
    position: absolute;
    right: 10px;
    bottom: -70px;
    z-index: 100;
    }   
    
    
    
/* MENU DEROULANT */

body{
    margin:0px;
    padding:0px;
    width: 100%;
    text-align:center;
    font-family: Arial, sans serif;
    font-size: 15px;
    background-color: #663C00;
    
}

nav{
    width: 100%;
    background-color:#663C00;
    border-bottom: 5px solid #F8BF00;
    }

nav > ul{
    margin:0px;
    padding:0px;
   }

nav li{
    list-style-type:none;
   
}

nav > ul > li{
    float: left;
    position: relative;
    }

nav > ul::after{
    content:"";
    display:table;
    clear:both;
}

.sous-menu{
    display:none;
}

nav input[type=checkbox]{
    display:none;
}

nav label{
    display:none;
}

nav a{
    display:inline-block;
    text-decoration:none;
   }

.menu:hover a{
    font-weight: bold;
}

nav > ul > li > a{
    padding: 20px 60px;
    color: #F8BF24;
}


nav li:hover .sous-menu{
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 15%;
    padding: 0px;
    z-index: 1000;
}

.sous-menu li a{
    padding:10px 10px;
    font-size:15px;
    color:#663C00;
    width:100px;
}

.sous-menu li{
    border-bottom: 1px solid #663C00;
}

.menu .sous-menu{
    background-color: #FCD684;
}

.sous-menu li:hover a{
    color:#BC6F00;
}

nav input[type=checkbox]:checked + ul{
    display: block;
    text-align: left;
}
    
@media screen and (max-width:780px){
    .menu-mobile{
        display: block;
        color: #FFE5C1;
        background-color: #663C00;
        text-align: left;
        padding: 15px 10px;
    }

nav ul{
    width:80%;
    display: none;
    }
  
nav ul li, nav ul li a{
    width:80%;
    text-align: left;
    }
    
nav ul li a, nav ul li:hover a{
    padding: 10px 10px;
    }

nav li:hover .sous-menu{
    display: block;
    position: static;
    }
    }




/* LE CORPS DE LA PAGE */

.corps{
    width:100%;
    background-color: #FFE5C1;
    text-align: center;
    position: relative;
    }
    
 .corps p {
    padding-left: 10px;
    padding-right: 10px;
 }
 
 
.corps a{
    text-decoration: none;
    color: #BC6F00;
    }
 
.corps img{
    border: 2px solid #BC6F00;
    margin-top: 40px;
    }
    
    
    
    
  /* PLAN DU SITE */
  
 .plansite{
    width: 100%;
    position: relative;
    background-color: #FFE5C1;
    margin-left : auto;
    margin-right: auto;
    width: 310px;
   }
   
   .plansite a, ul, li {
    text-align: left;
    list-style-type: none;
    color: #663C00;
    text-decoration: none;
   }
    
  .plansite .marge{
    text-indent: 20px;
    font-weight: bold;
    }
  
   .plansite em{
    font-size: 12px;
    }
  
  
  
  
 /* LES PAGES LIVRE*/
 
 table{
    margin: auto;
    }
    
 table tr{
    padding: 5px;
    }
    
  @media screen and (max-width:780px){
   .fleche {
      position:fixed;
      bottom: 5px;
      right: 0px;
      margin: 0px;
      padding: 0px;
      z-index:6000;
    }
    
    .fleche img {
     width: 60px;
    }
   }
   
   
   
   
   
   
  /* ANCIEN SITE */
  
  
  .fleche2 {
    width: 100px;
    position:fixed;
    top: 0px;
    right: 60px;
    z-index:6000;
    }
  
  .fleche2 img {
     width: 100px;
     margin: 20px;
     padding: 20px;
    }
   
     
   
   
   
 /*  LES PAGES DESSINS PEINTURE ET BASSE */
 
 .dessins{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    }

.item{
    margin: 1%;
}
   
   
   
        
 /*  SLIDER  */
 
 .slider{
     width: 210px;
     height: 250px;
     box-sizing: border-box;
     box-shadow: 10px 10px 20px #663C00;
     margin: auto;
     overflow: hidden;
     line-height:250px;
     text-align:center;
 }
 
 .slider img{
     width: 200px;
     height: 100%;
     margin: auto;
     vertical-align: middle;
     display:inline-block;
     animation: ani 2s linear;
     border: 5px solid #FFE5C1;
        }
    

@keyframes ani{
   0%{transform: scale(1.2);}
   10%{transform: scale(1);}
   20%{transform: scale(1);}
}



 
 /* LES PAGES ALBUMAP ARTICLES ET ARTICLES1*/
 
 
.photosfamille img{
    border: 5px solid #BC6F00;
    margin-top:40px;
    width: 250px;
    }
  
.fleche {
    width: 100px;
    position:fixed;
    bottom: 5px;
    right: 0px;
    margin: 10px;
    z-index:6000;
    }
    

  
  
  /* LA PAGE FAMILLE*/
  
.corpsfamille {
    width: 100%;
    background-color: #663C00;
    color: #BC6F00;
    position: relative
    }
    
.left{
    float: left;
    margin-top: 40px;
    }

.right{
    float: right;
    margin-top: 40px;
   }
   
   
   
   
/*  LA PAGE LIENS  */

.sec{
   min-height: 100px;
   margin: 0% 10%;
   padding-bottom: 10px;
   margin-bottom: 10px;
   display: flex; /* contexte sur le parent */
   flex-direction: column; /* direction d'affichage verticale */
   justify-content: center; /* alignement vertical */
  }

.sec::after{
    content:"";
    display:table;
    clear:both;
}




/*  LE PIED DE PAGE   */

footer{
    clear:both;
    text-align:center;
    background-color:#663C00;
    font-family: Arial, sans serif;
    border-top:5px solid #F8BF24;
    color:#F8BF24;
   }

footer a {
    margin: 5px;
    text-decoration: none;
    color: #F8BF24;
   }
  
 
footer img{
     margin-top: 10px;
    }