/* Barre de navigation */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      background-color: #ffffff;
      color: white;
      display: flex;
      align-items: center;
      padding: 0 20px;
      z-index: 1000;
      transition: top 0.3s ease;
    }



    /* Bouton flottant */
    .toggle-btn {
      position: fixed;
      top: 100px;
      right: 20px;
      padding: 18px 23px;
      background-color: #000000;
      color: white;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      z-index: 1001;
      font-size: 1.2em;
    }



    /* Drawer général */
    .drawer {
      position: fixed;
      top: 0;
      height: 100%;
      background-color: white;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
      transition: transform 0.3s ease;
      z-index: 1002;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
     -webkit-overflow-scrolling: touch; /* pour un scroll fluide sur mobile */
    }

    /* Drawer pour PC */
    .drawer.desktop {
      width: 30%;
      right: 0;
      transform: translateX(100%);
    }

    /* Drawer pour mobile */
    .drawer.mobile {
      width: 100%;
      left: 0;
      transform: translateX(-100%);
    }

    /* Drawer ouvert */
    .drawer.open.desktop {
      transform: translateX(0);
    }

    .drawer.open.mobile {
      transform: translateX(0);
    }

    /* Bouton de fermeture */
    .close-btn-drawer {
      align-self: flex-end;
      margin: 10px;
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background-color: white;
    }


    .close-btn-drawer svg {
      width: 3em;
      height: 3em;
    }


    /* Cacher drawer non utilisé selon la taille d'écran */
    @media (max-width: 1050px) {
      .drawer.desktop {
        display: none;
      }

      .toggle-btn {
        display: block !important;
      }
    }

    @media (min-width: 1050px) {
      .drawer.mobile {
        display: none;
      }
    }


.desktop-button li,
.mobile-button li {
  border: 2px solid #000;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  list-style-type: none; /* supprime les puces */
}



.mobile-button, .desktop-button, .menu ul {
  list-style-type: none;
  padding-left: 0;
}

.desktop-button a,
.mobile-button a {
  text-decoration: none;
  color: inherit; /* hérite la couleur du texte parent */
  display: block;
  color: #000
}




@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');



/* ----- Body ----- */


.overlay-haut {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff; /* couleur de fond avec une opacité de 50% */
    color: white;
    padding: 0;
    align-items: center; /* Aligner les éléments verticalement au centre */
    z-index: 20;
  }


* {
    font-family: "Open Sans", sans-serif;
    box-sizing: border-box;
  }
  
  h1{
    color: #1d1c1c;
    text-shadow: 2px 0px 1px rgb(0, 0, 0);
}

.titre {
    display: flex;
    align-items: center; /* Alignement vertical au centre */
    justify-content: center; /* Alignement horizontal au centre */
}
    /* Style pour l'image */
    .titre img {
        vertical-align: middle; /* Alignement vertical au centre par rapport au texte */
        height: 43px;
    }




  
  .menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-left: auto;
  }

  .menu li {
    margin-right: 2em;
  }
  





  
  @media (max-width: 1050px) {

    .menu {
        display: none;
    }


  }



  .top-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #FFF;
    height: 45px;
    padding: 1em;
  }

  

    .navbar a
      {
          display: inline-block;
          text-decoration: none;
          padding: 10px 105px;
          font-weight: 600;
          color: #a69db4;
          transition: 0.2s;
  
      }
  
      .navbar ul
      {
  
          margin-right: 1px;
          padding: 0px;
          overflow: hidden;
      }
  
      
      .navbar li:hover
      {
          background-color:#d7e0ff ;
          transition: 0.2s;
      }
  
      .navbar li:hover a
      {
          color: rgb(43, 180, 226);
          transition: 0.2s;
      }
  


    #présentation {
        padding: 0;
    }


    #competences {
        padding: 20px;
    }


    #projets {
        padding: 60px;
    }



    #contact {
        padding: 0;
    }



.mobile-button, .desktop-button {
    margin-left: 2em;
    margin-right: 2em;
}


.logos {
  width: 100%;
}