* {
  font-family: "ROBOTO", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h3{
  text-decoration: underline;
}
a {
  color: white;
}
#logo {
  position: flex;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  background-image: url("../listings/BOUTON_EXPLORER.svg");
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 1s ease;
}
h1 {
  font-size: 6em;
}
h2 {
  margin-top: 3em;
}

.spaceHome{
  padding: 10px;
}
#navbar {    
  padding: 30px;
  min-height: 80px;
  transition: all 1s ease;
  background-color: rgb(255, 255, 255);
  /* backdrop-filter: blur(10px); */
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  opacity: 0;
  transition: height 1.5s ease, opacity 1.5s ease;
  justify-content: space-between;
  color: black;
  z-index: 100;
}
#navbar > div:first-child {
  display: flex;
  flex-direction: row;
  align-items: center; /* Centrer verticalement les éléments à l'intérieur */
}
#navbar a {
  color: black;
  font-size: 20px;
  text-decoration: none;
}
.nav-link {
  position: relative;
  text-decoration: none;
  color: white;
  padding: 0 10px; /* pour donner un peu d'espace */
  margin: 0 70px;
}

#navig {
  display: flex; /* Affiche les liens en ligne */
  align-items: center; /* Centrer verticalement les liens et le bouton */
}

/* Pseudo-élément pour le soulignement */
.nav-link::before {
  content: "";
  position: absolute;
  bottom: -5px; /* le positionne au bas du lien */
  right: 0; /* commence à droite */
  width: 0; /* largeur initiale à 0 pour le cacher */
  height: 5px; /* épaisseur du soulignement */
  background-color: rgba(160, 135, 52, 1); /* couleur du soulignement */
  transition: width 0.3s ease; /* effet d'animation */
}

/* Au survol du lien, changez la largeur du pseudo-élément pour le faire apparaître */
.nav-link:hover::before {
  width: 100%; /* largeur complète pour afficher le soulignement */
}

/* Style du bouton */
.dropbtn {
  background: none;
  padding: 10px;
  font-size: 1rem;
  border: none;
  cursor: pointer;
}

/* Style du contenu de la liste déroulante */
.dropdown-content {
  display: none;
  top: 45px;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  z-index: 1;
}

/* Style des liens dans la liste déroulante */
.dropdown-content a {
  color: black;
  padding: 5px 16px;
  text-decoration: none;
  display: block;
  margin: 13px;
}

/* Affichage de la liste déroulante au survol */
.dropdown:hover .dropdown-content {
  display: block;
}

.flex-raw {
  display: flex;
  flex-direction: row;
}
.flexProj {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-nowrap{
  flex-wrap: nowrap;
}

#maphoto{
  height: 500px;
  box-shadow: 15px 15px 2px 1px rgba(0, 0, 0, 0.2);
}
.image-text-aboutme{
  text-align-last: center;
}
.image-text-aboutme p{
  padding: 15px;
}
.background-img-txt-aboutme{
  margin: 15px;
  background-color: #2f2f2f;
  border-radius: 25px;
}

.imageProfil{
  margin: 15px;
  height: 150px;
}
.imageProfilHobbies{
  margin: 27px;
  height: 125px;
}

.cardProj {
  margin-top: 45px;
  height: 300px;
  background-color: #fff;
  position: relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.wrapper {
  display: flex;
  flex-direction: column; /* Nous changeons la direction pour un défilement vertical */
  height: auto; /* Changez la hauteur pour s'adapter automatiquement au contenu */
  width: 100%; /* Changez la largeur à 100% pour s'adapter à la largeur du viewport */
}

.centered {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.flip-card {
  background-color: transparent;
  width: 400px;
  height: 400px;
  margin-top: 2%;
  perspective: 1000px;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer; /* Affiche le curseur comme une main pour indiquer que la carte est cliquable */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.flip-card-front {
  background-image: url("../listings/BOUTON_EXPLORER.svg");
}

.flip-card-back {
  background-image: url("../listings/BOUTON_EXPLORER_back.svg");
  transform: rotateY(180deg);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

section {
  min-height: 100vh;
  flex: none;
  padding:15px;
}

.section--large {
  color: white;
  position: relative;
}
.section--background-accueil {
  background: linear-gradient(to right, rgba(204, 204, 204, 1), #4f4f4f);
}
.section--background-bio {
  background: linear-gradient(to left, rgba(47, 47, 47, 0.58), #4f4f4f);
}

.section--background-bio2 {
  background: linear-gradient(to left,  rgba(47, 47, 47, 1), #4f4f4f);
}
.section--background-bio3 {
  background-color: rgba(255, 255, 255, 1);
}
.section--background-bioP {
  /* background-color: rgba(83, 83, 83, 1); */
  background: linear-gradient(to left, #2f2f2f, #4f4f4f);
}
.mescompetencesContainer{
  max-height: 100vh;
}
.cardTechnique-container {
  display:flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 10px;
  flex-wrap: wrap;
}
.cardtechniqueM{
  height: fit-content;
}

.compTransverse-container{
  text-align: -webkit-center;
}

.cardTransverse-container{
  height: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.cardTransverse-containerM {
  display: flex;
  flex-direction: row;
  height: fit-content;
  justify-content: space-evenly;
}
.card-forceblurM {
  border-radius: 25px;
  padding: 15px;
  background-color: #2f2f2faa !important;
  transition: background-color 2.5s ease !important;
  color: white;
}

.card-content {
  width: 300px;
  /* effet de zoom au survol */
  transition: transform 0.3s ease;
}

#description-text1{
  margin-top: 10px;
  word-wrap: break-word; /* Ancienne propriété pour assurer la compatibilité */
  overflow-wrap: break-word; /* Préféré pour les navigateurs modernes */
  white-space: normal;
}
#description-text2{
  margin-top: 10px;
  word-wrap: break-word; /* Ancienne propriété pour assurer la compatibilité */
  overflow-wrap: break-word; /* Préféré pour les navigateurs modernes */
  white-space: normal;
}
#description-text3{
  margin-top: 10px;
  word-wrap: break-word; /* Ancienne propriété pour assurer la compatibilité */
  overflow-wrap: break-word; /* Préféré pour les navigateurs modernes */
  white-space: normal;
}
#description-text4{
  margin-top: 10px;
  word-wrap: break-word; /* Ancienne propriété pour assurer la compatibilité */
  overflow-wrap: break-word; /* Préféré pour les navigateurs modernes */
  white-space: normal;
}
#description-text5{
  margin-top: 10px;
  word-wrap: break-word; /* Ancienne propriété pour assurer la compatibilité */
  overflow-wrap: break-word; /* Préféré pour les navigateurs modernes */
  white-space: normal;
}

.card-content:hover {
  z-index: 1;
  transition: transform 2.5s ease;
  transform: scale(1.2);
}
.card-blur {
  padding: 15px;
  margin: 65% 0% 0% 15%;
  width: 95%;
  color: white;
  background-color: #2f2f2faa !important;
  transition: background-color 2.5s ease !important;
}

.card-forceblur {
  display: flex;
  flex-direction: column;
  text-align: right;
  width: 50%;
  height: 100%;
  padding: 15px;
  background-color: #2f2f2faa !important;
  transition: background-color 2.5s ease !important;
  color: white;
}

.card-forceblur-proj{
  padding: 15px;
  margin: 105% auto;
  background-color: #2f2f2faa !important;
  transition: background-color 2.5s ease !important;
  color: white;
}

/* Cartes contenant les projets */
#card1Pimg {
  background-size: contain;
  max-width: fit-content;
  min-width: fit-content;
  max-height: fit-content;
  min-height: fit-content;
  background-image: url("../listings/buypath.svg");
}
#card2Pimg {
  background-size: contain;
  max-width: fit-content;
  min-width: fit-content;
  max-height: fit-content;
  min-height: fit-content;
  background-image: url("../listings/plateformexp.svg");
}
#card3Pimg {
  background-size: contain;
  max-width: fit-content;
  min-width: fit-content;
  max-height: fit-content;
  min-height: fit-content;
  background-image: url("../listings/agirensemble.svg");
}
#card4Pimg {
  background-size: contain;
  max-width: fit-content;
  min-width: fit-content;
  max-height: fit-content;
  min-height: fit-content;
  background-image: url("../listings/kptur.svg");
}
#card5Pimg {
  background-size: contain;
  max-width: fit-content;
  min-width: fit-content;
  max-height: fit-content;
  min-height: fit-content;
  background-image: url("../listings/ksol.png");
}
/* Cartes contenant les projets */

/* Cartes contenant les compétences technique */
/*Angular*/
#card1img {
  border-radius: 15px;
  background-color: #2f2f2f;
  background-size: contain;
  max-width: 300px;
  min-width: 300px;
  max-height: 300px;
  min-height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../listings/angular.png");
}
/*csharp*/
#card2img {
  border-radius: 15px;
  background-color: #2f2f2f;
  max-width: 300px;
  min-width: 300px;
  max-height: 300px;
  min-height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../listings/csharp.png");
}
/*SQL*/
#card3img {
  border-radius: 15px;
  background-color: #2f2f2f;
  background-size: contain;
  max-width: 300px;
  min-width: 300px;
  max-height: 300px;
  min-height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../listings/sql.png");
}
/*Git*/
#card4img {
  border-radius: 15px;
  background-color: #2f2f2f;
  background-size: contain;
  max-width: 300px;
  min-width: 300px;
  max-height: 300px;
  min-height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../listings/git.png");
}
/*Docker*/
#card5img {
  border-radius: 15px;
  background-color: #2f2f2f;
  background-size: contain;
  max-width: 300px;
  min-width: 300px;
  max-height: 300px;
  min-height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../listings/docker.png");
}
/* Mes compétences */
/*Angular*/
#card1imgM {
  border-radius: 15px;
  background-color: #2f2f2f;
  background-size: contain;
  max-width: fit-content;
  min-width: fit-content;
  max-height: 500px;
  min-height: fit-content;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../listings/angular.png");
}
/*csharp*/
#card2imgM {
  border-radius: 15px;
  background-color: #2f2f2f;
  max-width: fit-content;
  min-width: fit-content;
  max-height: 500px;
  min-height: fit-content;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../listings/csharp.png");
}
/*SQL*/
#card3imgM {
  border-radius: 15px;
  background-color: #2f2f2f;
  background-size: contain;
  max-width: fit-content;
  min-width: fit-content;
  max-height: 500px;
  min-height: fit-content;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../listings/sql.png");
}
/*Git*/
#card4imgM {
  border-radius: 15px;
  background-color: #2f2f2f;
  background-size: contain;
  max-width: fit-content;
  min-width: fit-content;
  max-height: 500px;
  min-height: fit-content;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../listings/git.png");
}
/*Docker*/
#card5imgM {
  border-radius: 15px;
  background-color: #2f2f2f;
  background-size: contain;
  max-width: fit-content;
  min-width: fit-content;
  max-height: 500px;
  min-height: fit-content;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../listings/docker.png");
}

/* Cartes contenant les compétences transverses */
/* Capacité d'écoute */
#card6img {
  margin: 15px;
  border-radius: 25px;
  height: 300px;
  min-width: 480px;
  max-width: 480px;
  background-position: center;
  background-image: url("../listings/capaciteecoute.png");
  background-repeat: no-repeat;
  background-size: cover;
}
/* Design */
#card7img {
  margin: 15px;
  border-radius: 25px;
  height: 300px;
  min-width: 480px;
  max-width: 480px;
  background-position: center;
  background-image: url("../listings/design.png");
  background-repeat: no-repeat;
  background-size: cover;
}
/* Rédactionnelle */
#card8img {
  margin: 15px;
  border-radius: 25px;
  height: 300px;
  min-width: 480px;
  max-width: 480px;
  background-position: center;
  background-image: url("../listings/redactionnelle.png");
  background-repeat: no-repeat;
  background-size: cover;
}
/* Intégration */
#card9img {
  margin: 15px;
  border-radius: 25px;
  height: 300px;
  min-width: 480px;
  max-width: 480px;
  background-position: center; 
  background-image: url("../listings/integration1.png");
  background-repeat: no-repeat;
  background-size: cover;
}
/* Autonomie */
#card10img {
  margin: 15px;
  border-radius: 25px;
  height: 300px;
  min-width: 480px;
  max-width: 480px; 
  background-position: center;
  background-image: url("../listings/autonomie.png");
  background-repeat: no-repeat;
  background-size: cover;
}

#card6imgM {
  margin: 15px;
  border-radius: 25px;
  height: 300px;
  min-width: 350px;
  max-width: 350px;
  background-position: center;
  background-image: url("../listings/capaciteecoute.png");
  background-repeat: no-repeat;
  background-size: cover;
}
/* Design */
#card7imgM {
  margin: 15px;
  border-radius: 25px;
  height: 300px;
  min-width: 350px;
  max-width: 350px;
  background-position: center;
  background-image: url("../listings/design.png");
  background-repeat: no-repeat;
  background-size: cover;
}
/* Rédactionnelle */
#card8imgM {
  margin: 15px;
  border-radius: 25px;
  height: 300px;
  min-width: 350px;
  max-width: 350px;
  background-position: center;
  background-image: url("../listings/redactionnelle.png");
  background-repeat: no-repeat;
  background-size: cover;
}
/* Intégration */
#card9imgM {
  margin: 15px;
  border-radius: 25px;
  height: 300px;
  min-width: 350px;
  max-width: 350px;
  background-position: center; 
  background-image: url("../listings/integration1.png");
  background-repeat: no-repeat;
  background-size: cover;
}
/* Autonomie */
#card10imgM {
  margin: 15px;
  border-radius: 25px;
  height: 300px;
  min-width: 350px;
  max-width: 350px;
  background-position: center;
  background-image: url("../listings/autonomie.png");
  background-repeat: no-repeat;
  background-size: cover;
}
/* Cartes contenant les compétences transverses */

.contact-background {
  background-image: url("../listings/contactFond.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gap {
  gap:20px;
}
.timeline {
  margin: 60px 0 0 0;
  display: flex;
  border-radius: 25px;
  padding: 20px;
  position: relative;
  background: linear-gradient(to right, #2f2f2f, #4f4f4f);
  justify-content: space-evenly;
}

.timeline::before,
.timeline::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 49px;
  background: #ffffff; /* Couleur de la ligne de temps */
}

.timeline::before {
  left: 30px; /* Décalage pour laisser de la place à la flèche */
  width: calc(100% - 30px); /* Réduction de la largeur pour faire de la place à la flèche */
}

.timeline::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%) rotate(180deg);
  width: 48px;
  height: 230px;
  background-color: #ffffff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 1;
}


.timeline-item {
  position: relative;
  display: inline-block;
  width: 290px;
  height: fit-content;
  padding: 25px;
  border-radius: 10px;
  margin: 0 10px;
  background-color: #3f3f3fe2;
  color: #fff;
  vertical-align: top;
  transition: transform 0.3s;
}

.timeline-item:hover {
  transform: translateY(-10px); /* Déplacement vers le haut au survol */
  cursor: pointer;
}

.timeline-item::after {
  content: "En savoir plus";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  color: #ffffff; /* Couleur du texte */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0; /* Rendre invisible par défaut */
  transition: opacity 0.3s;
  backdrop-filter: blur(5px); /* Effet de flou */
  border-radius: 10px; /* Arrondir les bords */
}
.timeline-item:hover::after {
  opacity: 1; /* Rendre visible au survol */
}

.img-timeline {
  width: 100%; /* Utiliser toute la largeur de l'élément */
  height: auto; /* Garder les proportions de l'image */
  margin-top: 10px; /* Espacement au-dessus de l'image */
}

#popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999; /* S'assurer qu'elle est au-dessus de tout */
}

#popup-content {
  position: relative; /* Ajouté pour positionner absolument le bouton de fermeture */
  margin: 0 10vw;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
#popup-content h3 {
  margin-bottom: 5px;
}
#popup-content p {
  margin-bottom: 8px; 
}

#close-popup {
  float: right;
  position: relative;
  cursor: pointer;
  font-size: 24px; /* Ajustez selon la taille souhaitée */
  font-weight: bold;
}

/* Positionne le conteneur du FAB en bas à droite */
#fab-container {
  z-index: 2;
  position: fixed;
  bottom: 16px;
  right: 16px;
}

/* Style du FAB */
.fab {
  width: 56px;
  height: 56px;
  background-color: #a39a48;
  border-radius: 50%;
  color: white;
  text-align: center;
  line-height: 56px;
  font-size: 36px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* Animation au survol du FAB */
.fab:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#fablink {
  text-decoration: none;
}
/* Items */
.text-block{
  width: 65%;
  margin: auto;
  padding:15px;
}
.text-block p{
  margin: 10px;
  font-size: medium;
}

#text-block-1 {
  color: red;
}

#text-block-2 {
  color: blue;
}

/* Style global du formulaire */
.contact {
  height: 100vh;
  background: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("../listings/contactFond.svg");
  text-align: -webkit-center;
  color: black;
}
.section-title-sep{
  text-align: -webkit-center;
}

.section-title-sep-techn-trans{
  margin-left: 85px;
}
.separateur-title{
  width: 135px;
  height: 5px;
  background-color:#a39a48 ;
  margin: 5px 10px;
  border-radius: 25px;
}
.separateur{
  width: 60px;
  height: 5px;
  background-color:#a39a48 ;
  margin: 10px;
  border-radius: 25px;
}

.formulaire-contact{
  margin: 15% 0 0 0;
  width: fit-content;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius:25px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Style du titre du formulaire */
.formulaire-contact h2 {
  margin-bottom: 20px;
  text-align: center;
}

/* Style des labels et inputs de base */
.formulaire-contact label,
.formulaire-contact input,
.formulaire-contact textarea {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

/* Style spécifique aux inputs et textarea */
.formulaire-contact input[type="text"],
.formulaire-contact input[type="email"],
.formulaire-contact input[type="tel"],
.formulaire-contact textarea {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}

/* Style du bouton de soumission */
.formulaire-contact input[type="submit"] {
  background-color: rgba(160, 135, 52, 1); /* Utilisez la couleur exacte de l'image */
  color: #fff;
  border: none;
  padding: 10px 20px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover effect pour le bouton */
.formulaire-contact input[type="submit"]:hover {
  background-color: rgba(160, 135, 52, 1);
}
/* Style pour les champs obligatoires */
.formulaire-contact .required::after {
  content: "*";
  color: red;
}

.icons-contact{
  margin: 50px 0;
}

.logo-image-block img{
  height: 300px;
  width: 300px;
}
.image-block img {
  display: block;
  max-width: 60%;
  max-height: 500px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.item-background {
  background-color: #2f2f2f;
  color:rgb(255, 255, 255);
  min-height: 100vh;
  width: fit-content;
}

.item-header {
  margin: auto;
  width: 60%;
  padding: 80px 0 0 0;
  align-items: center;
  justify-content: center;
}
.item-header h1 {
  text-align: -webkit-center;
}


.container {
  display: none;
  padding: 30px;
  height: 70px;
}

#hamburger {
  width: 40px;
  height: 40px;
  display: block;
  position: relative;
  float: right;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
#hamburger span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: black;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#hamburger span:nth-child(1) {
  top: 0px;
}

#hamburger span:nth-child(2) {
  top: 12px;
}

#hamburger span:nth-child(3) {
  top: 24px;
}

#hamburger.open span:nth-child(1) {
  top: 14px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#hamburger.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

#hamburger.open span:nth-child(3) {
  top: 14px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.overlay-menu-content button {
  background: #ff6347;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
}

.overlay-menu {
  transition: width 0.4s ease-in;
  background-color: rgba(0, 0, 0, 0.85);
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 13;
}

.overlay-menu a {
  transition: color 0.2s;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 2rem;
  margin: 10px;
}

.overlay-menu a:hover {
  color: rgba(160, 135, 52, 1);
}

.overlay-menu a:active {
  color: rgba(160, 135, 52, 1);
}

.overlay-menu ul {
  list-style: none;
}

.overlay-menu-content {
  position: relative;
  top: 25%;
  text-align: center;
}
.overlay-menu-content a {
  display: block;
}

.overlay-menu-close {
  position: absolute;
  right: 2rem;
  top: 1rem;
  font-size: 3rem;
}

.overlay-menu-show {
  width: 100%;
}


#item p {
  font-size: 1.5rem;
}

.sticky-container {
  position: fixed;
  top: 330px;
  left: 15px;
  border-radius: 25px;
  width: fit-content;
  z-index: 1000;
  background-color: white;
  padding: 10px;
  margin-top: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.sticky-container h2 {
  margin-top:unset;
}

.linked-items-menu ul {
  list-style: none; /* Enlève les puces */
  padding: 0; /* Enlève le padding par défaut */
  margin: 0; /* Enlève la marge par défaut */
}

.linked-items-menu ul li a {
  display: block;
  padding: 5px 10px;
  text-decoration: none; /* Enlève le soulignement des liens */
  color: black; /* ou la couleur de texte de votre choix */
  border-radius: 4px; /* Optionnel, pour des coins arrondis */
  transition: background-color 0.3s; /* Pour une transition douce au survol */
}

.linked-items-menu ul li a:hover {
  background-color: #f0f0f0; /* Couleur de fond au survol */
}

.messages {
  position: fixed; /* Affiche au-dessus de tout */
  top: 20px; /* Position depuis le haut de la page */
  left: 50%; /* Centre horizontalement */
  transform: translateX(-50%); /* Ajuste pour un centrage parfait */
  z-index: 1000; /* S'assure que cela s'affiche au-dessus des autres éléments */
  width: auto;
  max-width: 80%; /* Adaptabilité à la largeur de l'écran */
  padding: 10px;
  box-sizing: border-box;
  text-align: center; /* Centrage du texte */
}

.messages li {
  background-color: black; /* Fond noir */
  color: white; /* Texte blanc */
  margin-bottom: 5px; /* Espacement entre les messages */
  padding: 10px;
  border-radius: 5px; /* Bords arrondis */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Ombre subtile */
  opacity: 1;
  transition: opacity 4s ease-in-out; /* Animation de disparition */
}

.messages li.success {
  border-left: 5px solid green; /* Indicateur visuel pour le succès */
}

.messages li.error {
  border-left: 5px solid red; /* Indicateur visuel pour une erreur */
}

/* Animation pour faire disparaître les messages après 4 secondes */
@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

.messages li {
  animation: fadeOut 5s 4s forwards; /* Commence à disparaître après 4 secondes, animation de 5 secondes */
}

.tabs {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  max-width: fit-content;
  margin: auto;
  border-radius: 25px;
  background-color: rgba(160, 135, 52, 1);
}

.tab {
  padding: 10px;
  cursor: pointer;
}

#tooltip {
  position: absolute;
  background-color: black;
  color: white;
  padding: 5px;
  border-radius: 5px;
  white-space: nowrap;
  margin-top: 5px;
}


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

  .timeline-item {
    font-size: 25px;
  }
  .timeline{
    flex-direction: row;
    flex-wrap: wrap;
  }
  .flexProj {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
  .flex-raw {
    display: flex;
    flex-direction: column;
  }
  .cardProj {
    background-color: unset;
    margin-bottom: 700px;
  }
  .card-forceblur-proj {
    font-size: 30px;
    width: unset;
    min-height: unset;
  }
  .card-blur {
    font-size: 25px;
  }
  .cardTechnique{
    margin-bottom:700px;
  }
  .cardTransverse{
    font-size: 20px;
  }
  .cardTransverseM{
    font-size: 20px;
    max-width: 300px;
  }
  .tabs {
    display: none;
  }

  #card6img{
    height: 400px;
  }
  #card7img{
    height: 400px;
  }
  #card8img{
    height: 400px;
  }
  #card9img{
    height: 400px;
  }
  #card10img{
    height: 400px;
  }
  #objet {
    height: 500px;
  }
  .sticky-container {
    top: 135px;
  }
  /* Style spécifique aux inputs et textarea */
  .formulaire-contact input[type="text"],
  .formulaire-contact input[type="email"],
  .formulaire-contact input[type="tel"],
  .formulaire-contact input[type="submit"],
  .formulaire-contact textarea {
    font-size: 25px;
  }
  .formulaire-contact{
    width: 70%;
    font-size: 25px;
  }
  .container {
    display: block;
    position: fixed;
    z-index: 24;
    right: 0;
    top: 0;
  }
  #navig{
    display: none;
  }
  #navbar > div:first-child {
    flex-direction: row;
  }
  .item-background {
    font-size: 25px;
  }
  #navbar {   
    height: 60px; 
    opacity: 1;
  }
}