body {
    margin:0;
    padding:0;
    box-sizing: border-box;
    background-image: url(ress/WP01\ -\ Copie.jpg);
    background-size: cover;
    background-attachment: fixed;
 
}
.pcheader {
    height: 10vh;
    background-color: black;
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
  z-index: 99;
  width: 100vw;
}
.pcfooter {
    height: 7vh;
    background-color: rgb(0, 0, 0);
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
 
 z-index: 10;
    width: 100vw;
}
.logo01 {max-height: 8vh;}

.imglogo {display: flex;
align-items: center;}
.pctitre {
    font-family:"Audiowide", serif;
    color: aliceblue;
    font-size: 2vw;
    margin-left: 1vw;
}
ul {
    display: flex;
   
    align-items: center;
    list-style-type: none;
  
    li {
      padding: 16px 1vw;
  
      a {
        position: relative;
        display: block;
        padding: 4px 0;
        font-family:"Audiowide", serif;
        color: #ecf0f1;
        text-decoration: none;
        text-transform: uppercase;
        transition: 0.5s;
  
        &::after {
          position: absolute;
          content: "";
          top: 100%;
          left: 0;
          width: 100%;
          height: 3px;
          background: #3498db;
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 0.5s;
        }
  
        &:hover {
          color: #95a5a6;
        }
  
        &:hover::after {
          transform: scaleX(1);
          transform-origin: left;
        }
      }
    }
  }
  
  .icon-contact {
    display: none;
   
    align-items: center;
    list-style-type: none;
  
    li {
      padding: 16px 1vw;
  
      a {
        position: relative;
        display: block;
        padding: 4px 0;
        font-family:"Audiowide", serif;
        color: #ecf0f1;
        text-decoration: none;
        text-transform: uppercase;
        transition: 0.5s;
  
        &::after {
          position: absolute;
          content: "";
          top: 100%;
          left: 0;
          width: 100%;
          height: 3px;
          background: #3498db;
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 0.5s;
        }
  
        &:hover {
          color: #95a5a6;
        }
  
        &:hover::after {
          transform: scaleX(1);
          transform-origin: left;
        }
      }
    }
  }
.contenu {
max-width: 100vw;
padding-top: 11vh;
padding-bottom: 7vh;
padding-left: 5%;
padding-right: 5%;
display:flex;
align-items: center;
animation: expand .8s ease forwards;
gap:5vw;}
@keyframes expand {
  0% {
    transform: translateX(1200px);
  }
  100% {
    transform: translateX(0px);
  }
}

.img-contenu {width: 25vw;
  animation: slideIn 1.5s ease-in-out forwards;}
@keyframes slideIn {
  0% {
    transform: translateX(500px) scale(.2);
  }
  100% {
    transform: translateX(0px) scale(1);
  }
}

.text-droite {display: flex;
  flex-direction: column;
  align-self: flex-start;

  

}
.titre {overflow: hidden;}
.titre-page {
  font-family:"Audiowide", serif;
  margin-bottom: 20px;
  transform: translateY(100px);
  animation: slideUp .8s ease forwards .5s;
}
@keyframes slideUp {
  0% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0px);
  }
}

.footerico {max-height: 4vh;}
.pcontenu {
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-style: normal;
  padding: 4vh;
  background-color: rgba(240, 248, 255, 0.468);
}
.nav-bar {
	position: absolute;
	background-color: rgb(4, 4, 4);
	top: 0;
	right: 100%;
	height: 100vh;
	width: 100vw;
	display: none;
	justify-content: center;
	align-items: center;
	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: rgba(0, 0, 0, 0.2);
	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: 3px;
	border-radius: 5px;
	background-color: #fff;
	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: white;
}

.nav-list {
	list-style: none;
}

.nav-list-item {
	text-align: center;
	padding: 10px 0;
}

.nav-link {
	color: #fff;
	font-size: 22px;
	text-decoration: none;
	position: relative;
	padding-bottom: 4px;
}

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

.contenuresp {
  display: none;
  grid-template-columns: auto;
  padding-top: 12vh;
  padding-bottom: 7vh;
}
.img-contenu-resp {
  max-width: 80%;
  margin-left: 10%;
}

.gal-sites {display: flex;

justify-content: space-around;
align-items: center;
justify-items: center;
}
.img-galsites {
  max-width: 66%;
}
.formulaire {margin-top: .5vh;
  width: 40vw;
   text-align: center;
 }
 
   input, textarea {
     width: 100%;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1.2em;
     color: rgb(0, 0, 0);
     padding: 1vh;
   }
   textarea {height:15vh;}
   h4 {color: rgb(4, 4, 4);
     font-family: Arial, Helvetica, sans-serif;
   margin-bottom: 0;
 margin-top: 0;}
 .button {
   color:white;
   background-color: rgb(6, 6, 6);
   border-radius: 10px;
 }

 h3 {font-family: 'Roboto';}

 h5 {font-family: 'Roboto';
font-size: 1vw;
margin-bottom: 0;}
.galroumanie {
  margin-left:auto;
  margin-right:auto;
  max-width:40%;
  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:#030303;background-color:#ffffff5a;
  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:#000000;background-color:#ffffff5a;
  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){

.menupc {display:none;}
.logo01 {max-height: 4vh;}
.contenu {display:none;}

.contenuresp {
  display: grid;
  grid-template-columns: auto;
}
.pctitre {font-size: 4vw;}
body {
  margin:0;
  padding:0;
  box-sizing: border-box;
  background-image: url(ress/WP01h.jpg);
  background-size: cover;
  background-attachment: fixed;

}
.nav-bar {display: flex;}
.formulaire {margin-top: .5vh;
  width: 90vw;
   text-align: center;
   padding-bottom: 7vh;
   padding-left: 5vw;
 }
 h5 {font-family: 'Roboto';
  font-size: 4vw;
  margin-bottom: 0;}
}