/* Styles de base */
body {
    background: #0d1e34;
    color: #fff;
    font-family: 'Roboto', sans-serif;
  }
  
  main.mt-custom{
    margin-top: 100px;
    padding-top: 10px;
  }

  /* Header avec background dégradé */
  header {
    background: black;
    color: #fff;
  }
  
  /* Carte projet avec effet hover pour une touche cyber */
  .project-card {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    transition: transform 0.3s;
  }
  
  .project-card:hover {
    transform: scale(1.02);
  }
  
  /* Personnalisation des liens dans la navbar */
  .navbar-dark .navbar-nav .nav-link {
    transition: color 0.3s;
  }
  
  .navbar-dark .navbar-nav .nav-link:hover {
    color: rgb(255, 255, 255);
  }
  
  /* Styles personnalisés pour la section Contact */
  #contact a {
    color: #f0f;
    text-decoration: underline;
  }
  
  #contact a:hover {
    color: #00f;
  }
  



/* Pour les écrans larges (largeur ≥ 992px) : on restaure la taille initiale */
@media (max-width: 1000px) {
  .logo {
      width: 10px;
  }

  header{
    position: relative !important;
  }
  
  main.mt-custom{
    margin-top: 0px;
    padding-top: 0px;
  }
}
/* Transition pour l'icône de flèche */
.toggle-btn .arrow-icon {
  transition: transform 0.3s ease;
}

/* Lorsque le bouton est étendu, l'attribut aria-expanded passe à "true" 
   et on fait pivoter l'icône de 180° */
.toggle-btn[aria-expanded="true"] .arrow-icon {
  transform: rotate(180deg);
}