/* Réinitialisation de base et styles globaux */
body,
p,
ul,
li,
a {
  margin: 0;
  padding: 0;
  font-family: "Arial", sans-serif;
}

h1,
h2,
h3 {
  font-family: "Abril Fatface", cursive;
}
p,
a {
  font-family: "Poppins", sans-serif;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: black;
}

html {
  scroll-behavior: smooth;
}
html,
body {
  margin: 0;
  padding: 0;
  font-size: 100%; /* base pour REM */
}

/* Conteneur principal du menu */
.container {
  display: flex; /* Utilisation de Flexbox pour la mise en page */
}

/* Styles pour .nav-gauche et autres éléments */

.nav-gauche {
  display: flex; /* Établit un conteneur Flexbox pour permettre un alignement flexible des éléments enfants */
  flex-direction: column; /* Organise les éléments enfants verticalement (en colonne) */
  align-items: center; /* Centre les éléments enfants horizontalement dans le conteneur Flexbox */
  position: fixed; /* Fixe la position du menu de navigation, le rendant toujours visible à l'écran */
  top: 0; /* Place le menu en haut de la page */
  left: 0; /* Place le menu à gauche de la page */
  width: 275px; /* Définit la largeur du menu de navigation */
  height: 100%; /* Définit la hauteur du menu de navigation pour occuper toute la hauteur de la fenêtre de visualisation */
  background-color: #f9f9f9; /* Définit la couleur de fond du menu de navigation */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Ajoute une ombre pour donner de la profondeur (ombre légère vers la droite) */
  z-index: 1000; /* S'assure que le menu de navigation reste au-dessus des autres éléments de la page */
  overflow-y: auto; /* Permet le défilement vertical si le contenu du menu est plus long que l'écran */
  padding-top: 20px; /* Ajoute un espace au-dessus du premier élément dans le menu de navigation */
}

.profil-pic {
  width: 150px; /* Taille de la photo de profil ajustée */
  height: 150px; /* Taille de la photo de profil ajustée */
  border-radius: 50%; /* Photo de profil circulaire */
  margin-bottom: 175px; /* Espace en dessous de la photo de profil */
}

.profil-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%; /* Photo de profil circulaire */
  border: 3px solid #fff; /* Bordure blanche pour la photo */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre pour la mise en valeur */
}

.nom-profil {
  color: #333; /* Couleur du texte */
  font-size: 2em; /* Taille du texte ajustée */
  font-weight: bold; /* Rend le texte en gras */
  max-width: 230px; /* Assure que le conteneur du nom ne dépasse pas la largeur de l'image */
  text-align: center;
}

.nav-gauche ul {
  width: 100%;
  list-style: none; /* Enlève les puces de la liste */
  padding: 0; /* Enlève le padding par défaut de la liste */
  margin: 0; /* Enlève la marge par défaut de la liste */
  display: flex;
  flex-direction: column;
  height: calc(
    72% - 75px
  ); /* Ajustez la hauteur pour l'espace de la photo de profil */
  justify-content: space-around; /* Répartit les éléments de la liste uniformément */
}

.menu-item {
  width: 100%;
  margin: 5px 0;
  flex-grow: 1; /* Nouveau - permet à l'élément de grandir et de remplir l'espace disponible */
  display: flex; /* Utilisez flexbox pour aligner le texte à l'intérieur */
  align-items: center; /* Centre le texte verticalement */
  justify-content: center; /* Centre le texte horizontalement */
}

.menu-item a {
  display: block;
  background-color: transparent; /* Assurez-vous que le fond ne change pas */
  padding: 8px 16px;
}

.menu-item a:hover {
  color: #007bff;
  transform: none;
  background-color: transparent;
}

/* Styles pour le contenu de la page */
.content {
  margin-left: 330px; /* Ajustez selon la largeur de votre menu */
  margin-right: 75px;
}

/* Styles des sections */
section {
  padding: 20px;
  margin: 20px 0;
}

section h1,
section h2 {
  margin-bottom: 10px;
  color: #333;
}

/* Styles spécifiques pour les sections */
#apropos {
  background-color: #e7e7e7;
}
#apropos {
  font-family: "Poppins", sans-serif;
  color: #333;
  padding: 20px;
  line-height: 1.6; /* Augmente l'espacement entre les lignes */
}

#apropos h1 {
  font-size: 2em;
  margin-bottom: 15px;
}

#apropos p {
  margin-bottom: 15px; /* Ajoute de l'espace en dessous de chaque paragraphe */
  text-align: justify; /* Justifie le texte pour une meilleure lisibilité */
}

/* Style pour les liens dans la section À propos */
#apropos a {
  color: #007bff;
  text-decoration: none;
}

#apropos a:hover {
  text-decoration: underline;
}

#formation,
#experience,
#projets,
#divers,
#cv,
#contact {
  background-color: #f9f9f9;
}
#formation {
  background-color: #e7e7e7; /* Couleur de fond comme dans l'exemple */
  padding: 20px; /* Espacement intérieur */
  font-family: "Arial", sans-serif; /* Police de caractère */
}

#formation h2 {
  color: #333; /* Couleur du titre */
  margin-bottom: 15px; /* Espacement sous le titre */
}

.formation-block {
  display: flex; /* Utilisation de Flexbox pour aligner les éléments */
  align-items: center; /* Aligne verticalement au centre */
  margin-bottom: 15px; /* Espacement entre les blocs */
}

.formation-logo {
  flex-shrink: 0; /* Empêche l'image de rétrécir */
  width: 100px; /* Largeur fixe pour les logos */
  height: auto; /* Hauteur automatique pour conserver les proportions */
  margin-right: 15px; /* Espacement entre l'image et le texte */
}

.formation-block h3 {
  font-size: 1.1em; /* Taille de la police pour les titres de formation */
  color: #007bff; /* Couleur du titre de formation */
  margin-bottom: 5px; /* Espacement sous le titre de formation */
}

.formation-block ul {
  margin: 0;
  padding: 0;
  list-style: none; /* Supprime les puces de la liste */
}

.formation-block ul li {
  font-size: 0.95em; /* Taille de la police pour les détails de formation */
  color: #555; /* Couleur du texte pour les détails */
  line-height: 1.4; /* Hauteur de ligne pour améliorer la lisibilité */
}

/* Style global pour les compétences */
#competences {
  padding: 20px;
  font-family: "Arial", sans-serif;
}

.competence {
  margin-bottom: 30px; /* Ajout d'une marge pour espacer les compétences */
  padding: 15px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.jauge {
  position: relative;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  height: 20px;
  margin-bottom: 5px;
}

.jauge::before {
  content: "";
  display: block;
  height: 100%;
  background: #4caf50; /* Couleur de la jauge, change selon le niveau */
  width: var(--niveau);
  transition: width 0.5s ease;
}

.jauge[data-niveau="75%"]::before {
  width: 75%;
}
.jauge[data-niveau="60%"]::before {
  width: 60%;
}
.jauge[data-niveau="80%"]::before {
  width: 80%;
}
.jauge[data-niveau="70%"]::before {
  width: 70%;
}
.jauge[data-niveau="75%"]::before {
  width: 75%;
}

.pourcentage {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  color: #fff;
}

.texte-sous-jauge {
  font-size: 0.9em;
  color: #666;
}

.btn-details {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn-details:hover {
  background-color: #0056b3;
}

.details-competence {
  margin-top: 10px;
  padding-left: 20px;
  border-left: 3px solid #007bff;
}

.bloc-qualites {
  margin-top: 20px;
}

.bloc-qualites h3 {
  margin-bottom: 10px;
}

.bloc-qualites ul {
  list-style: none;
  padding: 0;
}

.bloc-qualites li {
  margin-bottom: 10px;
}

.bloc-qualites li strong {
  color: #333;
}

.competence h3 {
  margin-bottom: 5px;
  font-size: 1.2em;
  color: #333;
  display: flex;
  align-items: center;
}

.competence h3 i {
  margin-left: 10px;
  color: #4caf50;
}

@media (max-width: 768px) {
  .competence {
    padding: 10px;
  }

  .btn-details {
    padding: 8px 16px;
  }

  .competence h3 {
    font-size: 1em;
  }
}

#projets {
  padding: 20px;
}

.liste-projets {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Ajout de cet élément pour une meilleure répartition */
  gap: 20px;
}

.projet {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  flex: calc(33.333% - 20px);
  margin: 10px;
}

#projet5 {
  max-width: calc(33.333% - 20px);
}

.projet img {
  width: 100%;
  height: auto;
}

.projet-contenu {
  padding: 15px;
}

.projet h3 {
  font-size: 1.2em;
  margin: 0 0 10px;
}

.projet p {
  font-size: 1em;
  margin: 0 0 10px;
}

.projet a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.projet a:hover {
  text-decoration: underline;
}

#divers {
  background-color: #f9f9f9; /* Couleur de fond claire */
  padding: 20px;
  border-radius: 10px; /* Bords arrondis pour un look moderne */
  margin: 20px 0; /* Espacement autour de la section */
}

#divers h2 {
  color: #333; /* Couleur de titre pour attirer l'attention */
  margin-bottom: 15px;
}

#divers ul {
  list-style-type: none; /* Enlève les puces de liste */
  padding: 0;
}

#divers li {
  margin-bottom: 10px; /* Espacement entre les éléments de liste */
  font-size: 1em; /* Taille de police appropriée */
  line-height: 1.6; /* Espacement des lignes pour une meilleure lisibilité */
}

#divers li strong {
  color: #333; /* Couleur pour les titres des intérêts */
  font-weight: bold;
}

#experience {
  margin: 20px 0;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.experience-detail {
  display: flex;
  align-items: center;
  gap: 20px;
}

.experience-image {
  width: 150px; /* Ajustez selon la taille souhaitée */
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
}

.experience-description {
  flex-grow: 1;
}

.experience-description h3 {
  color: #0056b3;
  margin-bottom: 10px;
}

.experience-description p,
.experience-description ul {
  margin-bottom: 10px;
}

.experience-description li {
  list-style-type: disc;
  margin-left: 20px;
}

/* Style du footer */
footer {
  text-align: center;
  padding: 10px;
  background-color: #f2f2f2;
  position: relative;
  bottom: 0;
  width: 100%;
}
a[href*="linkedin.com"]:hover {
  opacity: 0.8;
}

.student-info {
  text-align: center;
  margin-top: 15px; /* Adjust margin as needed */
  color: #007bff; /* Couleur du texte */
  font-size: 1em; /* Taille du texte ajustée */
  font-weight: bold; /* Rend le texte en gras */
  max-width: 230px; /* Assure que le conteneur du nom ne dépasse pas la largeur de l'image */
}

/* New Color Palette */
:root {
  --primary-color: #005792; /* Dark Blue */
  --secondary-color: #e8f1f2; /* Light Blue */
  --accent-color: #f76c6c; /* Accent Color */
  --text-color: #333; /* Dark Grey for Text */
  --background-color: #fff; /* White Background */
}

/* Applying the new color palette */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

.nav-gauche {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.menu-item a {
  color: var(--secondary-color);
}

.menu-item a:hover {
  background-color: var(--secondary-color);
  padding: 5px;
  border-radius: 5px;
}

/* Typography Enhancements */
h1,
h2,
h3 {
  font-family: "Roboto", sans-serif;
  color: var(--primary-color);
}

p,
a,
li {
  font-family: "Open Sans", sans-serif;
}

/* Additional Styles for Interactivity */
a:hover,
.btn:hover {
  transform: none; /* Enlève l'effet de grossissement */
  color: #007bff; /* Changez cette valeur à la couleur souhaitée au lieu d'orange */
}

/* Improved Accessibility */
img {
  max-width: 100%;
  height: auto;
}

/* Enhance visibility and styling of the name and title */
.profil-pic .nom-profil {
  font-size: 22px; /* Appropriate font size */
  font-weight: bold; /* Bold for emphasis */
  text-align: center; /* Center alignment */
  color: #ffffff; /* White color for contrast */
  margin-bottom: 4px; /* Space between name and title */
}

.profil-pic .student-info {
  font-size: 16px; /* Smaller font size for the title */
  font-weight: normal; /* Normal font weight for subtlety */
  text-align: center; /* Center alignment */
  color: #ffffff; /* White color for contrast */
  margin-bottom: 20px; /* Space between title and menu items */
}

/* Adjust padding at the bottom of the menu */
.nav-gauche ul {
  padding-bottom: 30px; /* Increased padding at the bottom */
}

/* Ensure LinkedIn link stays at the bottom */
.nav-gauche ul li:last-child {
  margin-top: auto; /* Push LinkedIn to the bottom */
}

/* Add text shadow for better readability */
.profil-pic .nom-profil,
.profil-pic .student-info {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Add box shadow to the profile picture for depth */
.profil-pic img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Enhance visibility of LinkedIn link with additional styling */
.nav-gauche ul li:last-child a {
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Certification */
.certifications-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  align-items: stretch;
}

.certification-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  flex: 1;
}

.certification-item img {
  margin-bottom: 10px;
}

.certification-item a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

/* Styles pour la fenêtre modale */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto; /* Ajustez cette valeur pour déplacer la fenêtre modale vers le bas */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  height: 80%;
  max-width: 1000px;
  max-height: 800px;
  box-sizing: border-box; /* Ajouté pour éviter le débordement */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

iframe {
  width: 100%;
  height: calc(100% - 40px); /* Ajuster pour éviter le débordement */
}

/* Styles pour le bouton */
.btncv {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btncv:hover {
  background-color: #0056b3;
}

/* Pour le diagramme : on l'agrandit un peu */
.diagram-img {
  display: block; /* Pour centrer éventuellement */
  margin: 0 auto; /* Centre l'image horizontalement */
  max-width: 800px; /* Largeur maximum */
  width: 90%; /* Largeur en pourcentage sur écrans plus petits */
}

/* Pour la capture du chat : on la réduit un peu */
.chat-img {
  display: block;
  margin: 0 auto;
  max-width: 300px; /* Largeur maximum */
  width: 80%;
}