@font-face {
	font-family: "Virtual";
	src: url("../font/virtual-regular.ttf") format("truetype"); /* Assurez-vous de spécifier le chemin correct vers votre fichier de police */
  }

  @font-face {
	font-family: "BodoniBkBTItalic";
	src: url("../font/BodonBkI.ttf") format("truetype"); /* Assurez-vous de spécifier le chemin correct vers votre fichier de police */
  }

  body {
    
    margin: 0;
    padding: 0;
    background-color: rgb(253, 253, 253);
}

.contenu-principal{
	
	display: flex;
	flex-direction: column;
	align-items: center;
	padding:50px;
	font-family: "BodoniBkBTItalic", sans-serif;
	
}

.contenu-principal form{
	display: flex;
	flex-direction: column;
	background-color: rgba(95, 180, 89, 0.507);
	padding: 50px;
	box-shadow: 0 10px 15px rgba(18, 63, 16, 0.562);
	margin:20px;
}

.contenu-principal input[type="text"], input[type="email"], input[type="message"] {
	padding: 5px;
	margin-bottom: 10px;
	font-family: "BodoniBkBTItalic", sans-serif;
}

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    background-color: rgba(95, 180, 89, 0.507);
	
}

.wrapper {
	background-color: #ffffff;
	width: 100%; /* Prend toute la largeur de la fenêtre */
	height: 120px;
	display: flex;
	justify-content: space-between; /* Pour placer le logo à gauche et le menu à droite */
	align-items: center; /* Centrer les éléments verticalement */
	box-shadow: 0 10px 15px rgba(255, 255, 255, 0.562); /* Ombre sur le header */
	margin-top: 20px; /* Petit espace entre le haut du header et le wrapper */
	position: relative; /* Ajouter position relative pour que les images soient absolues par rapport au wrapper */
}

.logo img {
	margin-left: 50px;
	/*max-width: 100px;
	height: auto;*/
}

.nav-area ul {
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
}

.nav-area li {
	margin: 0 20px;
}

.nav-area li a {
	font-family: "Virtual", sans-serif;
	font-size:35px;
	text-decoration: none;
	color:#000;

}

/* Styles pour le menu mobile */
.mobile-menu-icon {
	display: none; /* Cacher le bouton du menu par défaut */
	cursor: pointer;
  }
  
  .mobile-menu-icon span {
	display: block;
	width: 30px;
	height: 3px;
	background-color: #000;
	margin: 5px;
	transition: transform 0.4s;
  }
  
  /* Media query pour les écrans plus petits */
  @media screen and (max-width: 768px) {
	.nav-area {
	  display: none; /* Cacher le menu par défaut pour les écrans plus petits */
	  position: absolute;
	  top: 100%;
	  left: 0;
	  width: 100%;
	  background-color: #fff;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}
  
	.nav-area.active {
	  display: flex; /* Afficher le menu lorsque le bouton est cliqué */
	  flex-direction: column;
	  align-items: center;
	  padding: 20px;
	}
  
	.nav-area ul {
	  flex-direction: column;
	}
  
	.mobile-menu-icon {
	  display: block; /* Afficher le bouton du menu pour les écrans plus petits */
	  position: absolute;
	  top: 15px;
	  right: 15px;
	  z-index: 999;
	}
  
	/* Styles pour le bouton du menu lorsqu'il est ouvert */
	.mobile-menu-icon.active span:nth-child(1) {
	  transform: rotate(-45deg) translate(-5px, 6px);
	}
  
	.mobile-menu-icon.active span:nth-child(2) {
	  opacity: 0;
	}
  
	.mobile-menu-icon.active span:nth-child(3) {
	  transform: rotate(45deg) translate(-5px, -6px);
	}
  }
  

.searchbar form {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.searchbar input[type="text"] {
	padding: 5px;
}

.searchbar button {
	padding: 5px 10px;
}

.icon img{
	margin-right: 50px;
}

.contacts{
	background-color: rgba(95, 180, 89, 0.507);
	text-align: center;
	margin: 10%;
	margin-top: 5%;
	padding: 20px;
}

footer {
	position: relative;
	background-color: rgba(95, 180, 89, 0.507); /* Footer vert avec une légère transparence */
	height: 400px; /* 80% de la hauteur de la fenêtre */
		
  }
  
  .cloud-effect-footer {
	position: absolute;
	bottom: -50px; /* Ajuster la position verticale du nuage pour qu'il dépasse le footer */
	left: -50px; /* Ajuster la position horizontale du nuage pour qu'il dépasse le footer */
	width: calc(100% - 50px); /* Largeur du nuage (100% de la largeur du footer + 100px de marges) */
	height: calc(100% - 70px); /* Hauteur du nuage (100% de la hauteur du footer - 100px de marges) */
	background-color: rgba(255, 255, 255, 0.445); /* Nuage transparent blanc */
	border-radius: 10px; /* Bordures arrondies pour le nuage rectangle */
	z-index:0; /* Placer le nuage en arrière-plan, derrière le contenu du footer */
	filter: blur(12px); /* Ajouter un effet flouté au nuage de fumée */
	margin: 80px; /* Ajouter une marge de 50px autour du nuage de fumée */
  }
  
  .footer-content {
    position: relative;
    display: flex;
    flex-direction: column; /* Utiliser une disposition en colonne pour aligner verticalement les éléments */
    justify-content: center;
    align-items: center;
    height: 88%; /* Assurez-vous que la hauteur du contenu est égale à la hauteur du footer */
}

.footer-links ul {
	list-style: none;
	padding: 0;
	text-align: center;
	
	
  }
  
  .footer-links li {
	margin-bottom: 10px;
  }
  
  .footer-links a {
	text-decoration: none;
	color: #000;
  }
  
  
  .rights-reserved {
	text-align: center;
  }