/* CSS Document */



 body {
    margin:0;
	padding:0;
	}
  
  @font-face{
  font-family:"Chilanka";
    src: url("../Chilanka-Regular.ttf");
    }

    }
  
 


 div,p{
    font-family:"Chilanka";
    font-size: 18px;
    margin: 0 ;
    line-height : 180%;
    color:#d8d4cb;/*5F5F7F*/
   }
   
 
  
   
   
h1{
   color:#d8d4cb; 
   font-size:32px;
   font-family:"Chilanka";
   text-shadow: #A2A2A2 0.1em 0.1em 0.2em;
   
    }
    
h1 span{
   color:#d8d4cb; 
   font-size:1.2em;
   font-family:"Chilanka";
   line-height:1.8em;
   text-shadow:  #A2A2A2 0.1em 0.1em 0.2em;
   font-style: italic;

}    

h2{
   color:#d8d4cb;
   font-size: 1.4em;
   font-family:"Chilanka";
   text-shadow: #A2A2A2 0.1em 0.1em 0.2em;
   text-align:center;
   }

h2:before, h2:after {
 /*content:''; */
 display:inline-block;
 vertical-align: middle; 
 width: 50px; 
 height: 3px;
  
 background: #d8d4cb;
  }
h2:before {
margin-right: .5rem
 }
h2:after {
 margin-left: .8rem ;
  color:#d8d4cb;
  text-align:center;
  font-size: 1.4em;
  text-shadow:#e2c962  0.1em 0.1em 0.2em;
  }

h3{
  color:#d8d4cb;
  font-size: 1.2em;
  text-decoration: underline;
  }

h4{
   color:#d8d4cb;
   font-size: 1.5em;
   text-shadow: 1px 2px 3px rgba(0,0,0, 0.4);
  }

h5{
   font-size: 0.9em;
   }

h6{
   font-weight: normal;
   font-size: 0.8em;
   text-align:center;
   }
   
   
a:link {color: purple;}
a:visited {color: blue;}
a:hover {color: red;}
a:active {color: red;}    
 
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
      
img {
  display: table-cell;
  
  vertical-align: middle;
 }
 
.responsive {
  max-width: 100%;
  height: auto;
}
    

     

#page {
  height:100vh;	/* 1 */
  display:flex; /* 2 */
  flex-direction:column; /* 3 */
 background-image: url("../style/img/fe/fecran.png");
 /*background-image:linear-gradient(#25211d,#4f4c4d,#967a5d,#af936c,#967a5d,#4f4c4d,#25211d);/*marron*/
  /*background-image:linear-gradient(45deg,#302C36,#7E758B); /* dégradé mauve*/
  /*background-image:linear-gradient(#4C4B42,#d8d4cb);*/ /* dégradé gris chaud*/
 /* background-image: linear-gradient(#9B7D76,#d7bb90,#4E4957);  /*LEVER SOLEIL BRENNE*/
  /*background-image: url("../style/img/fond-eau.jpg");/* img fond de page*/
  /*background:rgb(62,63,36,1);*/  /* Couleur fond de page images;*/

   -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
  font-family:"Chilanka",Arial;
  font-size:1em;
  }
  
  #page2 {
  height:100vh;	/* 1 */
  display:flex; /* 2 */
  flex-direction:column; /* 3 */
  background-image: url("../style/img/fe/fecran.png");
 /*background-color:#1b1718;*/
  /* background-image:linear-gradient(45deg,#464542,#8b8880);/* dégradé gris chaud*/
  /*background-image:linear-gradient(45deg,#302C36,#7E758B); /* dégradé mauve*/
  /* background-image:linear-gradient(#192E1C,#2B382C,#4E6451,#6F8872,#4E6451,#2B382C,#192E1C);
/* background-image:linear-gradient(45deg,#192E1C,#2B382C,#4E6451,#6F8872);
 /* background-image: linear-gradient(#9B7D76,#d7bb90,#4E4957);  /*LEVER SOLEIL BRENNE*/
  /**background-image:linear-gradient(45deg,#a8a4a5,#1b1718); */  /*trop clair*/
  /*background-image:linear-gradient(45deg,#38372e,#787663); /*marron gris*/
  /*background-image:linear-gradient(45deg,#222409,#777e21);    /* Couleur beau vert foncé rgb(34,36,9,1) fond de page;*/
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
  font-family:"Chilanka",Arial;
  font-size:1em;
  }

#header {
   /* background:rgba(48,66,15,0.5); */
     background:rgba(75,75,66,0); /*(36,53,45,1);*/
    margin-bottom:0;
    padding:0px;
    height:7vh;
}



.flex-header {
    display: flex;
    padding:0px;
    margin:0;
    align-items: center;
    justify-content: center;
    

}

.flex-header > div {

    flex-direction: row;
    width:auto;
    
    margin:0;
    text-align: center;
    font-size: 0.8vw;
    
} 

  
#content {
  flex-grow:1; /* 4 */
  width:80%;
  margin:0px;     /*10*/
  margin-left:auto;
  margin-right:auto;
  
  } 
  
  
  #content2 {
  flex-grow:1; /* 4 */
  width:70%;
  margin:0px;     /*10*/
  margin-left:auto;
  margin-right:auto;
  
  } 
 /*-------------- Séparation en deux  -------------*/
   
.grid{
  height:98%;
  display: grid;
  margin-left:auto;
  margin-right:auto;
  grid-template-columns: 1fr 5fr;
  grid-gap: 10px;
  padding: 0px;
  margin-left:auto;
  margin-right:auto;
  margin-top:0px;
  border: solid 2px #d8d4cb;
  }

/*.grid-content > div {
  width:98%;
  margin-top:15px;
  text-align:center;
  font-size: 1.0em;
  border: solid 2px #0000ff;*/
  
  }
  
 .grid-gal {
  width:85%;
  height:71vh;
  margin-top:20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  grid-gap:12px;
  padding: 0px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:15px;
  font-size: 14px;
  color:#d8d4cb;
  font-style:bold;
  overflow:auto;
 
  }

.grid-gal > div {
  color:#d8d4cb;
  font-style:bold;
  text-align: center;
  font-size: 1.5em;
  text-shadow: 1px 2px 3px rgba(0,0,0, 0.8);
  
  }
  } 

#menu{
    
    z-index:9000;
    width:100%;
    
    
    }
 
 .grid-titre {
  width:100%;
  display: grid;
  grid-template-columns: 100px auto;
  grid-gap: 0px;
  margin-top:0px;
  margin-left:auto;
  margin-right:auto;
  
  }

.grid-titre > div {
  text-align: left;
  
  }
  
.box{
  width: 98%;
  height: 98%;
  margin-left:auto;
  margin-right:auto;
 
  display: flex;
  align-items: center;
  justify-content: center;
  
  }

.box_gal{
  width: 98%;
  height: 90%;
  margin-left:auto;
  margin-right:auto;
  display: flex;
  }
  

 .cbox2{
  width: 90%;
  height: 80vh;
  text-align:left;
  margin-top:25px;
  margin-bottom:25px;
  margin-left:auto;
  margin-right:auto;
  overflow:auto;
  
}    
 

.cbox{
  width: 100%;
  height: 80vh;
  text-align:left;
  margin-top:25px;
  margin-bottom:25px;
  margin-left:auto;
  margin-right:auto;
  overflow:auto;
  /*border: solid 2px #ff0000;*/
}

/*.cbox_acc{
  max-width: 85%;
  height: auto;
  margin:auto;
  overflow:auto;
  background:#000;
  border:solid 15px white;
  
} */

.cbox_gal{
  width: 98%;
  height: 98%;
  margin-left:auto;
  margin-right:auto;
  display: flex;
  align-items: center;
  justify-content: center;
 
  
 
  }

.cbox_form{
  width: 80%;
  max-height: 90vh;
  text-align:left;
  margin-top:25px;
  margin-bottom:25px;
  margin-left:auto;
  margin-right:auto;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
      

.grid-liens {
  width:98%;
  height:60vh;
  margin-top:20px;
  display: grid;
  grid-template-columns: 244px auto;   /*244 px*/
  grid-gap: 10px;
  padding: 10px;
  margin-left:auto;
  margin-right:auto;
  overflow:auto;
  
  }

.grid-liens> div {
  background-color: #e2ddd6;
  text-align: center;
  font-size: 1.1em;
 
  color:#000;
  }
 
 .grid-listes {
  /*max-width: 90%;******/
  height:80vh;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30rem,1fr));*/
  /*grid-template-columns: auto auto auto ;*/
  /*grid-auto-rows: auto;
  /*grid-template-columns: minmax(120px,auto) 1fr 1fr;*/
  /*grid-gap:140px;/*180*/
  /*padding: 20px;*/
  
  }

.grid-listes > div {
  /*max-width: 25%;*/
  text-align: center;
  font-size: 1.2em;
  color:#fff;
  /*border:solid 5px #0033FF;
  background:#d8d4cb;*/
  } */
  
 .grid-404 {
  width:90%;
  height:80vh;
  margin-top:50px;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  padding: 10px;
  margin-left:auto;
  margin-right:auto; 
  background:red;  }

.grid-404> div {
  text-align: left;
  font-size: 0.9em;
  border:solid 1px black;
  }
  
  .grid-main {
  width:75%;
  height:42vh;
  margin-top:120px;
  display: grid;
  grid-template-columns: 300px auto;
  grid-gap: 10px;
  padding: 10px;
  margin-left:auto;
  margin-right:auto;
  }

.grid-main> div {
  text-align: center;
  font-size: 0.9em;
  }
  
.main {
   
   width:100%;
   height:100%
   margin:0;
   
   
   
   }  

#footer {
   margin-bottom: 0px;
    background:rgba(0,0,0,0);  /*(36,53,45,1);*/  /*(36,53,45,1);*/
   color:#d8d4cb;
   height: 40px;
   
   }

.grid-foot {
  width:95%;
  height:2vh;
  display: grid;
  grid-template-columns:140px auto 140px;
  grid-gap: 0px;
  
  margin-left:auto;
  margin-right:auto;
  margin-top:0px;
  }

.grid-foot > div {
  padding:10px;
  text-align: center;
  font-size: 1em;
  color:#d8d4cbF;
 
  }
    
    
    margin:0;
    text-align: center;
    font-size: 0.7vw;
    
    
    @media (max-width: 800px) {
  .flex-header {
   
  }
}
 
@media screen and (min-width: 810px) and (max-width: 1176px) {
  .flex-header {
    
    height:18vh;
  }
}

@media screen and (min-width: 1180px) and (max-width: 1280px) {
  .flex-header {
    height:15vh;
  }
}
@media screen and (min-width: 1290px) and (max-width: 1366px) {
  .flex-header {
    height:15vh;
  }
}
@media screen and (min-width: 1370px) and (max-width: 1600px) {
  .flex-header {
    height:15vh;
  }
}
@media screen and (min-width: 1610px) and (max-width: 1798px) {
  .flex-header {
    height:15vh;
  }
}
@media screen and (min-width: 1610px) and (max-width: 1920px) {
  .flex-header {
    height:11vh;
  }
}

@media screen and (min-width: 1930px) and (max-width: 2560px) {
  .flex-header {
   height:9vh; 
  }
}

@media (max-width: 800px) {
  .flex-header {
    flex-direction: column;
  }
}