body {
    margin:0;
    padding:0;
    box-sizing: border-box;
    background-color: #e7ffe0;
}

/*LANDING PAGE*/
.landingpage {
    display: flex;
    flex-direction: column;
    margin: 15vh 25vw;height: 70vh;

  justify-content: space-between;
  align-items: center;

}
.landinglogo {max-width: 65%;}
.landinglink {
    text-decoration: none;
    font-size: 5em;
    font-family: "Bangers", system-ui;
    color: #457636;
}
.landingh2 {
      font-family: "Chicle", serif;
      color:rgb(196, 37, 22);
   font-size: 3em;
}
.landingh3 {
       font-family: "Roboto Condensed", sans-serif;
      color:rgb(196, 37, 22);
   font-size: 1em;
}
.fond {max-width:100%;
position: fixed;
top:0;
left:0;
z-index: -99;}
.fondhorizontal {max-width: 85%;
margin-left: 10%;}
.fondresp {max-width:100%;
position: fixed;
top:0;
left:0;
z-index: -99;
display:none}
.fondvertical {max-width: 98%;
margin-left: 1%;}

/*menu burger*/

.nav-bar {
	position: absolute;
	background-color: #e7ffe0;
	top: 0;
	right: 100%;
	height: 100vh;
	width: 100vw;
	display: none;
	justify-content: center;
	align-items: center;
 z-index: 99;
	transition: position 2.9s;
	-webkit-transition: position 2.9s;
	-moz-transition: position 2.9s;
	-ms-transition: position 2.9s;
	-o-transition: position 2.9s;
}

.toggle {
	left: 0;
	box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4);

}

.toggle-menu {
	background-color: #e7ffe0;
	position: fixed;
	top: 3vh;
	right: 2vh;
	width: 30px;
	height: 4vh;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
    padding: 2px 2px 2px 3px;
	border-radius: 5px;
	cursor: pointer;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

.line {
	width: 100%;
	height: 4px;
	border-radius: 5px;
	background-color: #000000;;
	transition: transform 0.2s ease-out;
	-webkit-transition: transform 0.2s ease-out;
	-moz-transition: transform 0.2s ease-out;
	-ms-transition: transform 0.2s ease-out;
	-o-transition: transform 0.2s ease-out;
}

.toggle .line1 {
	background-color: #000000;
	transform: scale(0.9) rotateZ(-45deg) translate(-6px, 4px);
}

.toggle .line2 {
	display: none;
}

.toggle .line3 {
	background-color: #000000;
	transform: scale(0.9) rotateZ(45deg) translate(-6px, -4px);
}

.toggle .toggle-menu {
	background-color: #e7ffe0;;
}
.nav-list {
	list-style: none;
}
.nav-link::before {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: #fff;
	transform: scaleX(0);
	transition: transform 0.4s ease-in-out;
	transform-origin: left;
	-webkit-transition: transform 0.4s ease-in-out;
	-moz-transition: transform 0.4s ease-in-out;
	-ms-transition: transform 0.4s ease-in-out;
	-o-transition: transform 0.4s ease-in-out;
}

.nav-link:hover::before {
	transform: scaleX(1);
}
ul {
    display: flex;
   
    align-items: center;
    list-style-type: none;
  }
.menuicons {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.iconeburger {max-height: 6vh;
margin-right: 4vw;}
.burgerbutton {
  height: 7vh;
  width: 50vw;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 3vh;
  margin-left: -7vw;
  text-align: center;
  color: #000;
  text-transform: uppercase;
  font-weight: 600;
  background-color: transparent;
  border: 3px solid #015430;
  border-radius: 50px;
  -webkit-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
  color: #015430;
}
.burgerbutton:hover {
  box-shadow: 0 0 5px 0 #015430 inset, 0 0 10px 2px #015430;
  border: 3px solid #015430;
}
  

/*header*/
.logobanner {max-height: 10vh;
margin-left: 5vw;}
.header {display:flex;
justify-content: space-between;
height: 10vh;
position: fixed;
top: 0;
left: 0;
margin-bottom: 11vh;
background-color: #e7ffe0;
width: 100%;}

.menupc {
height:10vh;
width:75vw;
display: flex;
justify-content: space-around;
align-items: center;
align-content: center;
padding-top: 2vh;

}
/*button*/

.button {
height: 5vh;
  width: 10vw;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  color: #000;
  text-transform: uppercase;
  font-weight: 600;
  margin-left: 30px;
  margin-bottom: 30px;
  cursor: pointer;
  display: inline-block;
}

.button-1 {
  background-color: transparent;
  border: 3px solid #015430;
  border-radius: 50px;
  -webkit-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
  color: #015430;
}
.button-1:hover {
  box-shadow: 0 0 5px 0 #015430 inset, 0 0 10px 2px #015430;
  border: 3px solid #015430;
}


/*FOOTER*/
.footerpc {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #cbfabd;
    border-top: #333 1px solid;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 7vh;
}
.iconpc {max-height: 5vh;}
/*LANDING PAGE*/
h3 { font-family: "Chicle", serif;
font-size: 2.5em;
margin-left: 10vw;
letter-spacing: 4px;
color: #ff0000;}






/*ACCUEIL*/
.prez {width:80%;
margin-left:10vw;
display:flex;
gap:5vw;
justify-content: space-between;}

.imgprez{max-width: 20vw;}
.pprez { font-family: "Roboto Condensed", sans-serif;
text-align: justify;}




/*TARIFS*/
.h3soustitre { font-family: "Chicle", serif;
  color: #01460e;
font-size: 1.7em;}
.biggrid {
  display: grid;
  grid-template-columns: 25% 25% 25% auto;
  gap: 10px;
  max-width: 80%;
  margin-left: 10%;
}
.photogrid {max-width: 100%;
}
.textgrid {display: flex;
  flex-direction: column;
justify-content: center;
align-content: center;
align-items: left;}

.h5grid {font-family: Roboto, sans-serif;
font-size: 1.1em;
margin-top: 0;}
.pgrid {font-family: "Roboto Condensed", sans-serif;
font-size: 1.2em;}


/*contact*/
.contacticons {
  width: 90%;
  margin-left: 5%;
  display: none;
  justify-content: space-evenly;
}
.icon-contact {max-height: 7vh;}
.formulaire {
padding-left: 10vw;}
input, textarea {width:80%;
padding: 5px 5px;
  font-family: "Roboto Condensed", sans-serif;}
textarea {height:15vh;}
h2 {font-family: Roboto, sans-serif; 
    font-weight: bold;
font-size: 1.2em;}
.abutton {max-width: 15vw;
font-weight: bolder;
background-color: #20B1A3;}
.abutton:hover {
background-color: #5cd3c7;}
/*GALLERIE*/

.galroumanie {
    margin-left:auto;
    margin-right:auto;
    max-width:60%;
    position:relative;
    margin-top: 4vh;
}

.flecheg{
    border:none;
    display:inline-block;
    padding:4px 8px;vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
    color:#065501;background-color:#11b0535a;
    position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%);
    font-size: 2em;
}
.fleched{
    border:none;
    display:inline-block;
    padding:4px 8px;vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    background-color:inherit;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
    color:#065501;background-color:#11b0535a;
    position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%);
    font-size: 2em;}

/*RESPONSIVE A PARTIR D'ICI*/
@media screen and (max-width: 800px){
/*LANDING PAGE*/
.fond {display: none;}
.fondresp {display:block;}
.landinglogo {max-width: 100%;
}
.landinglink {
    text-decoration: none;
    font-size: 2.5em;
    font-family: "Bangers", system-ui;
    color: #457636;
    margin-top: 0;
}
.landingh2 {
      font-family: "Chicle", serif;
      color:rgb(196, 37, 22);
   font-size: 1.5em;
   text-align: center;

}
.landingpage {
    display: flex;
    flex-direction: column;
    height: 60vh;

  justify-content: space-evenly;
  align-items: center;

}

/*ACCUEIL*/
.prez {width:94%;
margin-left:3vw;
display:flex;
flex-direction: column;
gap:2vh;
justify-content: space-between;}

.imgprez{max-width: 60vw;}
.pagetitle {margin-top: 11vh;}
.header {z-index: 99;}
/*TARIFS ET SERVICES*/
.biggrid {
  display: grid;
  grid-template-columns: auto;
  gap: 10px;
  max-width: 94%;
  margin-left: 3%;

}
.h5grid {font-family: "Roboto Condensed", sans-serif;
font-size: 0.7em;
margin-top: 0;}
.pgrid {font-family: "Roboto Condensed", sans-serif;
font-size: 0.8em;}
.textgrid {display: flex;
  flex-direction: column;
justify-content: center;
align-content: center;
align-items:center;
border-bottom: #457636 2px solid;
margin-bottom: 2vh;}
.photogrid {display: flex;
  justify-content: center;
align-content: center;
align-items:center;}
.photogrid {max-width: 90%;
margin-left: 5%;}
/*GALLERIE*/
.galroumanie {
    margin-left:auto;
    margin-right:auto;
    max-width:90%;
    position:relative;
    margin-top: 4vh;
}
.flecheg{    
    padding:2px 4px;vertical-align:middle;
   
    font-size: 1em;
}
.fleched{
   padding:2px 4px;vertical-align:middle;
  font-size: 1em;}
/*contact*/
.contacticons {display:flex;}
.formulaire {
padding-left: 3vw;}
input, textarea {width:90%;
padding: 5px 5px;
  font-family: "Roboto Condensed", sans-serif;}
textarea {height:15vh;}
h2 {font-family: Roboto, sans-serif; 
    font-weight: bold;
font-size: 1.2em;}
.abutton {max-width: 25vw;
font-weight: bolder;
background-color: #20B1A3;}
.abutton:hover {
background-color: #5cd3c7;}

.footerpc {display:none;}

.menupc {display:none;}
/*MENU BURGER*/
    .nav-bar {display: flex;}
    .button {
height: 7vh;
  width: 50vw;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  color: #000;
  text-transform: uppercase;
  font-weight: 600;


  cursor: pointer;
  display: inline-block;
}
}