.working{
  text-align: center;
  margin-top: 13%;
}
.working_text{
  color: red;
}
body{
background-color: aliceblue;
margin-top: 0%;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 2%;
font-family: 'Roboto', sans-serif;
scroll-behavior: smooth;
}
.fade-in {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fade-out.active {
  display: none;
}
/*barre de navigation*/
.name{
  color: white;
  display: inline-block;
  margin-left: 3%;
}
.navbar{
  background-color: rgb(53,56,57);
  text-align: justify;
}
.lien{
  color: white;
  text-decoration: none;
  float: right;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 15px;
  padding: 0%;
}

.navbar .lien {
  color: white;
  text-decoration: none;
  float: right;
  border-radius: 5px;
  margin-top: 3px;
}

.navbar .lien:hover {
  background-color: aliceblue;
  color: rgb(53, 56, 57);
  margin-top: 3px;
  padding: 1px 2px; /* Ajuste le padding au survol pour créer une petite marge autour du texte */
  line-height: 0.5; /* Assurez-vous que la hauteur de la ligne reste la même au survol */
}

.lien_black{
  text-decoration: none;
  color: black;
}
.contact{
  margin-top: 5%;
}
/* #1 partie de la page*/
.lientxt{
  text-decoration: none;
  color: black;
}
.photo_de_présentation{
  margin-right: 1%;
  width: 25%;
  float: right;
}
.texte_de_présentation{
  margin-right: 35%;
  margin-left: auto;
  width: 30%;
  text-align: center;
  padding: 10%;
}
/*#2 partie de la page*/
.cv{
  margin: 5%;
  margin-left: 12%;
  margin-right: 12%;
  padding: 1%;
  padding-bottom: 6%;
  background-color: #E8E8E8;
  text-align: justify;
}
.Maintitle{
  font-size:xx-large;
  margin-left: 10%;
}
.Title1{
  font-size: x-large;
  margin-left: 5%;
}
.Title2{
  font-size: large;
  margin-left: 5%;
}
.describe_myself{
  width: 60%;
  margin: auto;
}
/*Objectifs #3e partie de la page*/
.objectifs{
  margin-top: 8%;
}
.title_objectifs{
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  text-align:center; 
}
.barre{
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  text-align: center;
  margin-top: 0%;
  margin-bottom: 0%;
}
.text_obj_barre{
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  text-align: center;
}
.bouton{
  background-color: #e7e7e7; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.mep{
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  margin-top: 8%;
  background-color: #E0E0E0; 
  padding: 2%;
  border-top-left-radius: 10%;
  border-bottom-right-radius: 10%;
}
.title_mep{
  width: fit-content;
  padding: 1%;
  margin-bottom: 5px;
  margin-top: 1%;
}
.soustexte_mep{
  width: fit-content;
  padding: 1%;
  margin-top: 5px;
  margin-bottom: 5px;
}
.mep_ul{
  margin-top: 5px;
}
.portfolio_text{
	margin-left: 5%;
	margin-right: 5%;
}
.bouton_portfolio{
	background-color: #e7e7e7;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-left: 40%;
}
.vues_d{
	display: block;
	float: right;
	margin-right: 12%;
	width: 29%;
}
.text_vue_g{
	float: left;
	margin-left: 12%;
	background-color: #E8E8E8;
	padding: 3%;
	width: 40%;
}
.text_vue_espace {
	float: left;
	margin-top: 15%;
	margin-left: 12%;
	background-color: #E8E8E8;
	padding: 3%;
	width: 40%;
}
.text_vue_espace_more{
	float: left;
	margin-top: 25%;
	margin-left: 12%;
	background-color: #E8E8E8;
	padding: 3%;
	width: 40%;
}
.vue_sansechelle{
	width: 76%;
	margin-left: 12%;
	margin-right: auto;
	margin-top: 1%;
}
.top{
	text-align: center;
}
.spacing_portfolio{
  margin-left: 5%;
  text-decoration: none;
}
.img_portfolio{
  width: 10%;
  border-radius: 50%;
}
.img_contact{
  width: 5%;
}
.cahier_charges{
  text-align: center;
}
.bouton_charges{
  background-color: rgb(211, 208, 209);
  border: none;
  padding: 0.5%;
}
.lien_charges{
  text-decoration: none;
  color: rgb(0, 0, 0);
}
#emailPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
.div_center{
  text-align: center;
}
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
}
.titre_centre{
  text-align: center;
  margin-top: 5%;
}
a.button {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    background-color: #E8E8E8; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte */
    text-align: center;
    text-decoration: none;
    border-radius: 5px; /* Arrondir les coins */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre pour donner du volume */
    transition: background-color 0.3s, box-shadow 0.3s; /* Transitions pour l'effet au survol */
}

a.button:hover {
    background-color: #fdfcfc; /* Couleur de fond au survol */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée au survol */
}