.navbar {
  background-color: #13406e;
  color: #df304e; 
  padding: 20px;
  height: 200px; /* taille de la bande bleu */
  display: flex;
  flex-direction: column;
  align-items: center ;
  justify-content: center;
  margin-bottom: 20px;
}



.navbar .menu-toggle ul{
  display: flex;
  }

.navbar .menu-toggle ul li{
  margin:  0 20px;
  font-size: 1.5rem;
 }

 


.navbar .menu-toggle ul li.active a{
  color: #df304e;
  font-weight: 600;
 }

.navbar .menu-hambergur{
  display: none;
  font-size: 40px;
  position: absolute;
  right: 50px;
}


/* pour le menu toggle */
@media screen and (max-width: 900px) {      
  .navbar{
    padding: 0;
  }

  .navbar .menu-hambergur{
    z-index: 11;
    display: block;
  }

  .menu-toggle{
    z-index: 10;
    top: 0;
    left: 0;
    position: absolute;
    background-color: #ffffff9d;
    backdrop-filter: blur(7px);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -100%;
    transition: all 0.5s ease;
  }

  
  .menu-toggle.mobile-menu{
    margin-left: 0;
  }

  .menu-toggle ul {
    display: flex;
    flex-direction: column;
  }

  .navbar .menu-toggle ul li{
    font-size: 1.5rem;
    margin: 20px 0;
  }

 }



.titre {
  font-size: 48px;   /* taille du titre Portfolio*/
}

.logo {
  width: 8rem; /* Change la largeur selon tes besoins */
  height: auto;   /* pertmet de garder l'image proportionnelle */
  margin-top: 15px;  /* Descend l'image verticalement */
}

.logo_entier {
  display: flex;
  justify-content: center;  /* centre le contenu à l’horizontale */
  align-items: center;      /* centre le contenu à la verticale */
  height: 100vh;            /* prend toute la hauteur de la page */
  flex-direction: row;      /* ou column selon le placement souhaité */
}