* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
}

/* Typographie */
h1, #portfolio-title {
    font-weight: 700; /* Bold */
    line-height: 1.4; /* Interlignage augmenté pour le titre */
}

p, td, th {
    font-weight: 400; /* Normal */
    font-size: 0.9em; /* 90% de la taille parente */
    line-height: 1.6; /* Interlignage augmenté pour les paragraphes */
}

/* Bouton générique */
.btn {
    font-weight: 700;
    display: inline-block;
    padding: 8px 15px;
    background-color: #0077b5;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

.btn:hover {
    background-color: #005582;
}

/* Layout principal */
.container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.sidebar {
    width: 30%;
    background-color: #f0f0f0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.content {
    width: 70%;
    background-color: #ffffff;
    padding: 20px;
}

/* Éléments de la sidebar */
.avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

.portfolio-header {
    display: flex;
    align-items: baseline; /* Aligne sur la ligne de base */
    justify-content: space-between; /* Espace entre titre et lien */
    gap: 10px;
}

#portfolio-title {
    font-size: 1.5em;
    margin: 0;
}

.follow-btn {
    display: flex;
    align-items: center; /* Centre l’icône avec le texte */
    text-decoration: none;
    color: #0077b5; /* Couleur LinkedIn */
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.4; /* Interlignage cohérent avec le titre */
}

.follow-btn:hover {
    color: #005582;
}

.linkedin-icon {
    width: 20px; /* Augmentation légère de 16px à 20px */
    height: 20px;
    margin-left: 8px; /* Légère augmentation de la marge pour équilibrer */
}

#description {
    margin: 0;
    line-height: 1.6; /* Interlignage augmenté pour la description */
}

/* Tableaux */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th, .projet-title {
    font-weight: 700 !important; /* Bold */
}

/* blocage de la couleur de fond de l'entête du tableau */
th, th:hover {
  background-color: #fff;
  color: #000;
}

/* effet de transition de la ligne */
tr {
  transition: background-color 0.3s ease; /* Animation fluide */
  color: #333;
}

/* Surbrillance au survol de la ligne */
tr:hover {
  background-color: #f5f5f5; /* Couleur de fond gris clair */
  color: #000;
}

/* Style pour les images dans le tableau */
.preview {
  width: 100px; /* Largeur fixe pour les thumbnails */
  height: 100px; /* Hauteur fixe pour uniformité */
  object-fit: cover; /* Coupe l'image si elle ne rentre pas */
  border: 2px solid #ccc; /* Bordure légère */
  border-radius: 5px; /* Coins arrondis */
  transition: transform 0.3s; /* Animation au survol */
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    .sidebar, .content {
        width: 100%;
    }

    th:nth-child(3), td:nth-child(3) {
        display: none;
    }
    
    .avatar {
        margin: 0 auto;
    }
    
    .portfolio-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .follow-btn {
        margin-top: 10px;
    }

    .preview {
      width: 150px; /* Largeur fixe pour les thumbnails */
    }

}