/*Declaration des police non standard
autant d@font face que de police
*/

@font-face {
  font-family: "nom de police"
  src:url(chemin du ficher de police);
}

*{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
  font-size: 62.5%; /*1rem=10px*/
}

body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  font-family: "Playfair Display", "Helvetica", "sans-serif", serif;
  font-size: 1.6em; /* on revient a 16px par defaut*/
  line-height: 1.4;
  color: #535E6D;
  background-image: url("../img/fond2.jpg");
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  /* background: rgb(232,228,212);
  background: linear-gradient(0deg, rgba(232,228,212,1) 0%, rgba(255,255,255,1) 21%, rgba(246,244,238,1) 77%, rgba(232,228,212,1) 100%); */

}



/* body:after {
  background-image: url("../img/motif+++.jpg");
  background-repeat: repeat;
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  content: "";
} */


h1, h2, h3{
color: #c1b999;
}

@media screen and (max-width:763px){
  h1{
    font-size: 1.8em;
  }
}


a{

}

a:hover
a:focus
a:active{

}

img{
  max-width: 100%;
}




/*--------header-------*/
header{
  text-align: center;
  margin-bottom: 1em;
}

header img{
  max-width: 15em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.2em;
  padding-top: 0.2em;
  vertical-align: top;
  transition-duration: 1s;
}

@media screen and (max-width:763px){
  header img{
    max-width: 8em;
  }
}

header img:hover{
  transform: scale(1.05);
}

h1{
  margin: 0;
  padding-bottom: 0.5em;
  transition-duration: 0.75s;
}


h1:hover{
  transform: scale(1.1);
}
/* -----menu */

.containernav{
  display: block;
  height: 4em;
}

@media screen and (max-width:763px){
  .containernav{
    height: 3em;
  }
}

nav{
  /* min-width: 50%; */
  overflow: hidden;
  resize: horizontal;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 0.5em;
  padding-bottom: 2em;

}



nav a{
  flex: initial;
  text-decoration: none;
  color: #989799;
  padding: 1% 3%;
  border: 1px solid #989799;
  background-color: white;
  transition-duration: 0.75s;
  -webkit-box-shadow: 10px 9px 20px -15px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 9px 20px -15px rgba(0,0,0,0.75);
  box-shadow: 10px 9px 20px -15px rgba(0,0,0,0.75);
}

@media screen and (max-width:763px){

  nav{
    padding-top: 0em;
  }

  nav a{
    padding: 0.5% 1%;
    font-size: 0.7em;
    align-items: baseline;
    width: 16.6%;
  }


  nav .shorter{
    font-size: 0.55em;
  }

  nav .fas ,.fa {
    font-size: 200%;
  }

}

.fas, .fa{
  display: block;

}

nav a:hover{
  transform: scale(1.1) rotate(0.005turn);
  box-shadow: 9px 13px 14px 1px rgba(0,0,0,0.58);
}


/* Le sticky */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}


/*--------main-------*/
main{
  margin top: 0;
  margin-bottom: auto;

}

h2{
  text-align: center;
  font-size: 2.5em;
}

@media screen and (max-width:763px){
  h2{
    font-size: 2em;
  }
}

section{
  width: 80%;
  margin-left: auto;
  margin-right: auto;

}

.hid img{
  height: 30px;

}

/* ------section présentation -----*/

#présentation{

  width: 100%;
  background-image: url("../img/principale1.jpg");
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  animation: slider 30s linear infinite 0s;
  animation-delay: 5s;
  animation-timing-function: ease-in-out;
  color: white;
  padding-bottom: 1em;
  text-align: center;
  /* -webkit-box-shadow:inset 0px 2px 15px 10px black;
  -moz-box-shadow:inset 0px 2px 15px 10px black;
  box-shadow:inset 0px 2px 15px 10px black; */
}

@keyframes slider {

  0% {
    background-image: url("../img/principale1.jpg");
  }

  33% {
    background-image: url("../img/sa.jpg");
  }

  66% {
    background-image: url("../img/347.jpg");
  }

}

.black{
  background-color: rgba(0, 0, 0, 0.1);
}

#chapeau{
  font-size: 1.6em;
  font-style: italic;
}

@media screen and (max-width:763px){
  #chapeau{
    font-size: 1.3em;
  }
}

 #présentation p{
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0,5em;
   margin-top: 0;
 }




  .fond{
    background-color: rgba(0, 0, 0, 0.2);
    padding-top: 0.2em;
    padding-bottom: 0.2em;
  }

 #présentation h2{
   width: 90%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 1em;
   padding-bottom: 0.5em;
   color: white;
 }

 span{

 }



/* ------Articles -----*/

 article{
   text-align: left;
   border: 1px solid rgba(152, 151, 153, 0.3);
   border-radius: 25px;
   padding: 1em;
   margin-bottom: 4.5em;

 }

 article h3{
   margin-top: 0;
   font-size: 1.5em;
 }

 @media screen and (max-width:763px){
   article h3{
     font-size: 1.2em;
   }
 }

 article .mainphoto{
   float: left;
   margin-right: 1em;
 }

 article:nth-child(2n+1) .mainphoto{
   float: right;
   margin-left: 1em;
 }

 @media screen and (max-width:763px){
   article:nth-child(2n+1) .mainphoto{
     float: block;
     margin: auto;
   }

   article .mainphoto{
     float: block;
     margin: auto;
   }
 }

 .mainphoto{
   width: 30em;
   height: auto;
   float: left;
   transition-duration: 1s;
   -webkit-box-shadow: 10px 9px 20px -15px rgba(0,0,0,0.75);
   -moz-box-shadow: 10px 9px 20px -15px rgba(0,0,0,0.75);
   box-shadow: 10px 9px 20px -15px rgba(0,0,0,0.75);
 }

 @media screen and (max-width:763px){
   .mainphoto{
     margin-bottom: 1em;
   }
 }


 /* .mainphoto:hover {
   transform: rotate(-0.004turn);
 } */

 @media screen and (max-width:763px){
   .mainphoto:hover {
     transform: none;
   }
 }

 /*  */
 .accordion {
   display: inline-block;
   background-color: #b7b4aa;
   color: #535E6D;
   cursor: pointer;
   padding: 18px;
   margin-top: 1em;
   width: 100%;
   text-align: left;
   border: none;
   outline: none;
   transition: 0.4s;
   border-radius: 15px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;

 }

 /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 .active, .accordion:hover {
   background-color: rgba(160, 134, 56, 0.8);

 }

 /* Style the accordion panel. Note: hidden by default */
 .panel {
   padding: 2em 1em;
   background-color: rgba(255, 255, 255, 0.5);
   display: none;
   overflow: hidden;
   margin-top: -1.5em;
   text-align: center;
   border-radius: 15px;
   -webkit-box-shadow: 10px 9px 20px -15px rgba(0,0,0,0.75);
   -moz-box-shadow: 10px 9px 20px -15px rgba(0,0,0,0.75);
   box-shadow: 10px 9px 20px -15px rgba(0,0,0,0.75);

 }

 .hiddenphoto{
   width: 30%;
   height: auto;
   transition: 2s;
 }

 .hiddenphoto:nth-child(3){
   width: 50%;

 }


 .hiddenphoto:hover {
   /* position: absolute; */
   width: 55%;
   height: auto;
   z-index: 1;
}

@media screen and (max-width:763px){
  .hiddenphoto:hover {
    /* position: absolute; */
    width: 100%;
 }
}

 .iconcontainer{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 1em;
   color: #989799;
 }

.icon{
  text-align: center;

  padding: 0.5em;
  width: 7em;
}

.icon i{
  justify-content: center;
  font-size: 2em;
  transition-duration: 0.75s;
}

@media screen and (max-width:763px){
  .icon i{
    font-size: 1em;

  }

}

.icon i:hover{
  transform: scale(1.1) rotate(0.007turn)translateY(5px);

}

.icon h4{
  font-weight: bold;
  margin-top: 0.3em;
  margin-bottom: 0;
}

@media screen and (max-width:763px){
  .icon h4{
    font-size: 1em;
  }

}

.icon p{
  font-size: 0.8em;
}

.imgtransition p{
  color: white;
  text-align: center;
  margin: auto;
  width: 50%;
}

.imgtransition{
  display: flex;
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 300px;
  height: 30em;
  width: 100%;
  background-image: url("../img/esclamandes2.jpg");
  /* -webkit-box-shadow:inset 0px 2px 15px 10px black;
  -moz-box-shadow:inset 0px 2px 15px 10px black;
  box-shadow:inset 0px 2px 15px 10px black; */
}

.imgtransition1{
  display: flex;
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 300px;
  height: 30em;
  width: 100%;
  background-image: url("../img/esclamandes4.jpg");
  /* -webkit-box-shadow:inset 0px 2px 15px 10px black;
  -moz-box-shadow:inset 0px 2px 15px 10px black;
  box-shadow:inset 0px 2px 15px 10px black; */
}

.imgtransition1 p{
  color: white;
  text-align: center;
  margin: auto;
  width: 50%;
}

.imgtransition2{
  display: flex;
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 300px;
  height: 30em;
  width: 100%;
  background-image: url("../img/fond4.jpg");
  /* -webkit-box-shadow:inset 0px 2px 15px 10px black;
  -moz-box-shadow:inset 0px 2px 15px 10px black;
  box-shadow:inset 0px 2px 15px 10px black; */
}

.imgtransition2 p{
  color: white;
  text-align: center;
  margin: auto;
  width: 50%;
}


/*----------- Localisation */

#localisation p{
  display: block;
  min-width: 20%;
}



#localisation img{
  float: left;
  margin-right: 1em;
}

.iconcontainerplage{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4em;

}

.iconL{
  text-align: center;

  padding: 0.5em;
  width: 7em;
  margin-left: 3em;
  margin-right: 3em;

}

.iconL i{
  justify-content: center;
  font-size: 2em;
  transition-duration: 0.75s;
}

.iconL i:hover{
  transform: scale(1.1) rotate(0.007turn)translateY(5px);

}

.iconL h4{
  font-weight: bold;
  margin-top: 0.3em;
  margin-bottom: 0;
}

.iconL p{
  font-size: 0.8em;
}


iframe{
  width: 100%;
  height: 30em;
  text-align: center;
  margin-top: 2em;
}
/*----------- tarifs */

#tarifs{
  padding-bottom: 2em;
}

h4{
  margin-top: 2em;
  font-size: 1.4em;
}

table {
	width: 90%;
	border-collapse: collapse;
	margin: auto; 4em;
}

@media screen and (max-width:763px){
  table{
    margin-top: 2em;
    font-size: 0.7em;
  }

}

.tdblod{
  font-weight: bold;
  font-size: 1.4em;
  text-align: center;
}

@media screen and (max-width:763px){
  .tdblod{
    font-size: 0.8em;
  }

}

table thead {
	font-family: "Kaushan Script";
	font-weight: normal;
	font-size: 1.6em;
	background-color: #63556F;
	border: 1px solid #63556F;
	color: white;
	padding: 10px;
}

/* Pour faire l'effet d'un background une ligne sur deux, plutot que de rajouter
une class, nous pouvons ajouter une pseudo-class que nous verrons plus tard en cours */
table tr:nth-child(even) {
	background-color: #97919D;
}

table tr:nth-child(odd) {
	background-color: #FAFAFA;
}

table tr:first-child {
	background-color: inherit;
}
table th {
	text-align: left;
	font-weight: normal;
	padding: 10px 25px;
}

table tr td {
	padding: 5px;
	border: 1px solid #ccc;
	text-align: center;
}

table tr td:first-child {
	text-align: left;
}

/*----------- Contact */

#contact{
  margin-bottom: 0em;
  font-size: 1.2em;
  text-align: center;
}

#titre{
  font-weight: bolder;
}

#contact a{
  text-decoration: none;
}
/*----------- vidéo */

#vidéo{
display:none;
  }

/*--------footer-------*/
footer{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #c1b999;
  color: white;
  min-height: 6em;
  padding: 1em;
}

footer div{
  margin-left: 2em;
  margin-right: 2em;
}

@media screen and (max-width:763px){
  footer div{

    margin-top: 1em;
  }
}

footer p{
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}

footer .Mentions a{
text-decoration: none;
color: white;
}

footer .suiveznous .ms{

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

footer .suiveznous a{

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-decoration: none;
  font-size: 2em;
  color: white;
  margin-top: 0.2em;
  transition: 3s;
  padding: 0.2em;
}

footer .suiveznous a:hover{

  transform: rotate(1turn);

}

/* ---- page mentions --- */


#mention{
  margin-bottom: 2em;
}