@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');


body {
  margin: 0;
  padding: 0;
  overflow: visible; /* Assurez-vous que les éléments peuvent dépasser */
    scroll-behavior: auto; /* Pour désactiver un défilement fluide automatique */
  touch-action: pan-y; /* Désactive le défilement horizontal, autorise le vertical */

}


* {
  box-sizing: border-box; /* Assure que les bordures et marges sont incluses dans la largeur totale */
}

/* carte */
.card,
.card2,
.cardnav {
    z-index: 10; /* Donnez une priorité inférieure au menu */
}


.groupecard {
  display: flex;
  flex-direction: column; /* Chaque groupe affiche le service au-dessus de l'image */
}
.card {
  position: absolute;
  margin-bottom: 20px;
  
  z-index: 10;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  width: 600px;
  padding: 48px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: 0 4px 90px rgba(0,0,0,0.1);
  overflow: hidden;
  &:before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 34%, rgba(255,255,255,1) 89%, rgba(255,255,255,0) 100%);
    opacity: 0.3;
    filter: blur(.5px);
    mix-blend-mode: hard-light;
  }


  .noise {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.1;
  }

  .content {
    position: relative;
    align-items: center;
    z-index: 2;
    text-shadow: -3px 0px 2px rgba(0,0,0,0.1);
  }

  .indexbienvenu{
    color: #ffffff;
  }
}

.card2 {
  position: absolute;
  margin-top: 20px;
  z-index: 10;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  max-width: 600px;
  padding: 10px;
  border-radius: 8px;
  overflow: hidden;


  .noise {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.1;
  }

  .content {
    position: relative;
    z-index: 2;
    text-shadow: -3px 0px 2px rgba(0,0,0,0.1);
  }
}
.bienvenue {
  margin-bottom: 40px;
}

.cardnav {
  position: absolute;
  margin-top: 20px;
  z-index: 10;
  top: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  width: 100vw;  /* 100% de la largeur de la fenêtre */
  height: auto;
  overflow: hidden;


  .noise {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.1;
  }

  .content {
    position: relative;
    z-index: 2;
    text-shadow: -3px 0px 2px rgba(0,0,0,0.1);
  }
}
.cardfleche {
  position: absolute;
  margin-top: 20px;
  z-index: 10;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  width: 100vw;  /* 100% de la largeur de la fenêtre */
  border-radius: 8px;
  overflow: hidden;


  .noise {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.1;
  }

}


/* Download Section */
.download-section {
  
  padding: 60px 20px;
  text-align: center;
}
.download-link {
  background-color: rgba(255, 255, 255, 0.888);
  color: #203a43;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  transition: background-color 0.3s ease;
  box-shadow: 0px 0px 30px 0 #fff,10px 10px 30px 0 #1d0dca17;
  display: inline-block; /* Ensure the link doesn't overlap */
  margin-top: 10px; /* Add margin on top to avoid overlap */
  width: fit-content;
}


.download-link:hover {
  background-color: white;
}

/* images projets */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
  max-width: 1200px;
  margin: auto;
}

.project-card {
  background-color: var(--card); /* Couleur de fond sombre */
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
  text-align: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3), 0px 10px 20px rgba(0, 0, 0, 0.2);
  position: relative; /* Relatif pour permettre au badge de s'ancrer */
  padding: 10px; /* Ajout d'espace autour du contenu interne */
}

.project-card:hover {
  transform: scale(1.05); /* Effet de zoom au survol */
}

.project-image {
  width: calc(100% - 20px); /* Réduction pour inclure un espace égal autour */
  height: auto;
  display: block; /* Assure qu'il n'y a pas d'espace blanc */
  border-radius: 5px; /* Ajout d'un espace autour de l'image */
  margin: 10px auto; /* Espace égal en haut, en bas et centré horizontalement */
}


.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #9B93FF;
  color: #E8FEFF;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Images */
.image {
  width: auto;
  height: 100px;
  border: 2px solid #ddd;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 5px;
  display: block; /* Ajout pour résoudre l'espace blanc */
}

.icone {
  width: 50px;
  height: auto;
}

.icone:hover {
  transform: translateY(2px);
}


@media (max-width: 768px) {

  .menu li {
    display: block; /* Empile les éléments verticalement */
    padding: 0; /* Réduit l'espace interne */
    margin: 0; /* Supprime l'espace entre les éléments */
  }

  .cardnav nav ul.menu>li>a , .lang-btn{

    font-size: 2.5vw; /* Ajustez la taille selon vos besoins */
    padding: 0px 0px; /* Ajuste l'espacement autour du texte */
    text-align: center; /* Centre le texte si nécessaire */
  }

  nav ul.menu {
    padding: 0;
    margin: 0;
  }

  .cardnav {
    position: absolute;
    left: 47%;
  }
  
  

.card { 

  width: 80vw;

}

.card h1{
  font-size: 10vw;
}
.card2{

  top: 70%;

}
.cardnav{

width : 100vw;

}


.download-link{

font-size: 3vw;
}


}
@media (max-width: 815px) {
  .logo-container img {
    display: none;
}
}

nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

nav ul.menu>li{
  position: relative;
  margin: 0px 15px;
}

nav ul.menuindex>li>a {
  display: block;
  padding: 15px 20px;
  color: #ffffff;
  font-weight: 600;
  transition: color 0.3s ease, transform 0.3s ease;
}

nav ul.menuindex>li>a:hover, .lang-btnindex:hover {
  color: #d07fffce;
  transform: scale(1.05);
}

.lang-btnindex{
  color: #ffffff;
  padding-left: 10px;
  font-weight: 600;
  transition: color 0.3s ease, transform 0.3s ease;
}

.changeThemeindex{
  color: #ffffff;
  padding-left: 20px;
  
  transition: color 0.3s ease, transform 0.3s ease;
}


.changeThemeindex:hover {
  transform: scale(1.05);
}
.logo-container , .lang-btncontaineindex{
  display: flex;
  align-items: center;
}

.logo , .lang-btncontaineindex{
  height: 45px;
  margin-right: 20px;
 }