body {
            font-family: 'Segoe UI', sans-serif;
            margin: 0;
        }

        header {
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1.5px solid black;
             box-sizing: border-box;
             position: relative;
             z-index: 1000;
        }

        .logo {
            font-size: 2rem;
            font-weight: bold;
            color:#000;
            text-decoration: none;
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 2rem;
        }

        nav ul li a {
            text-decoration: none;
            color:#000;
            font-weight: bold;
        }

        nav ul li a:hover {
            text-decoration: underline;
        }

        /* BOUTON BURGER - CACHÉ PAR DÉFAUT */
        .menu-toggle {
        display: none;
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;

        }


.container {
    max-width: 1200px;
    margin: auto;
}


/* Projects Section */
.projects {
    padding: 2rem;
}

.projects h2 {
    text-align: center;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* ✅ plusieurs colonnes */
    gap: 1rem;

}

.project {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid black;
}

.project img {
    width: 100%
}

.project h3 {
    margin: 1rem;
    text-align: center;
}

.project p {
    margin: 0 1rem 1rem;
    color: var(--gray);
}



.btn {
  display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%; 
    padding: 10px;
  background-color: black;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: bold;
  

}


.btn:hover {
    background: #1C1A1A;
    
}

/* Responsive */
@media (max-width: 768px) {

 /* on affiche le bouton */
  .menu-toggle {
    display: block;
  }

  /* le menu se cache par défaut */
  nav ul {
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    background-color: white;
    border-top: 1px solid black;
    display: none;
    text-align: center;
    padding: 1rem 0;
  }

  /* quand la classe .show est active */
  nav ul.show {
    display: flex;
  }
    
    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}