body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    margin: 0;
    padding: 0;
    
}
.img1 {
    width: 94px;
    border-radius: 50%;
    height: 96px;
}
aside {
    background-color: #e0e0e0;
    padding: 20px;
    width: 250px;
    height: 100vh;
    position: fixed;
    text-align: left;
    top: 0;
    left: 0;
}
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.proj-box {
    width: 100%; /* S'adapte à la grille */
    margin: 0;
    box-sizing: border-box;
}
.tech-stack {
    font-size: 0.85em !important;
    color: #007bff !important;
    font-weight: 600;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
aside a {
    text-decoration: none;
}

header {
    background-color: #007bff;
    color: white;
    padding: 15px;
    margin-left: 250px;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
nav li {
    margin-left: 5px;
    background-color:#007bff ;
    padding: 8px;
    border-radius: 5px;
    color: white;
    display: inline-block;
}
nav a {
    color: white;
    text-decoration: none;
    margin: 10px;
}
main {
    margin-left: 290px;
    padding: 20px;
}
section {
    background-color: white;
    padding: 20px;
    margin-top: 20px ;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);

}
.exp-box {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
}
/* NOUVEAU CODE POUR LES COMPÉTENCES */
.skills-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Force les éléments à passer à la ligne sur petit écran (Mobile) */
    justify-content: center; /* Centre les blocs comme sur votre image */
    gap: 10px; /* Crée un espace propre et régulier entre chaque bloc */
}

.skills-list li {
    background-color: #007bff;
    color: white;
    padding: 10px 15px; /* Légèrement agrandi pour être plus cliquable/lisible sur mobile */
    border-radius: 5px;
}
.proj-box {
    width: 90%;
    margin: 20px auto;
    background-color: #f8f8f8;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.proj-box img  {
width: 100px;
border-radius: 5px;
}

/* =========================================
   NOUVELLES REGLES : CORRECTION DES LIENS 
   ========================================= */
#projects a, 
#projects a:visited, 
#projects a:hover, 
#projects a:active {
    text-decoration: none;
    color: inherit; /* Empêche le lien de devenir violet */
}

.proj-box h4 {
    color: #0056b3; /* Titre en bleu professionnel */
    margin-bottom: 10px;
    margin-top: 10px;
}

.proj-box p {
    color: #444444; /* Texte de description gris foncé neutre */
    line-height: 1.5;
}
/* ========================================= */

form {
    width: 80%;
    margin: 0 auto;
}
input, textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    width: 100%;
}
footer {
    background-color: #333;
    color: white;
    padding: 10px;
    margin-left: 250px;
    text-align: center;
}
section a {
    text-decoration: none;
}
.btn-download {
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 25px;
  background-color: #2ecc71; /* Un vert vif et équilibré */
  color: white;
  text-decoration: none;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 600;
  border-radius: 50px; /* Bords très arrondis */
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
  transition: all 0.3s ease;
  border: 2px solid transparent;
  width: 150px;
  margin-left: 21px;
}

/* Effet au survol */
.btn-download:hover {
  background-color: #27ae60; /* Vert un peu plus foncé */
  transform: translateY(-3px); /* Le bouton monte légèrement */
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
}

/* Effet au clic */
.btn-download:active {
  transform: translateY(0);
}

.icon {
  font-size: 1.2rem;
}
/* =========================================
   STYLES RESPONSIVE (MOBILES ET TABLETTES)
   ========================================= */
@media (max-width: 768px) {
    /* 1. On transforme la barre latérale fixe en un bloc classique en haut de page */
    aside {
        position: relative;
        width: 90%;
        height: auto;
        text-align: center;
        padding-bottom: 30px;
    }

    /* On centre le bouton de téléchargement du CV */
    .btn-download {
        margin: 0 auto;
    }

    /* 2. On retire toutes les marges gauches qui poussaient le contenu hors de l'écran */
    header, main, footer {
        margin-left: 0;
    }

    main {
        padding: 15px;
    }

    /* 3. On empile les liens de navigation pour éviter qu'ils ne se chevauchent */
    nav li {
        display: block;
        margin: 8px 10px;
    }

    /* 4. On ajuste les boîtes de projets et le formulaire pour qu'ils prennent toute la largeur */
    .proj-box, form {
        width: 100%;
        box-sizing: border-box; /* Empêche le padding d'élargir l'élément au-delà de l'écran */
    }
    
    input, textarea {
        box-sizing: border-box;
    }
}