/* style.css */

/* Réinitialisation globale */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* @font-face {
  font-family: 'Product Sans';
  src: url('fonts/ProductSans-Regular.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
} */

body, html {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Montserrat', sans-serif; /* Applique la police Roboto à tout le corps */
  color: #333; /* Optionnel : couleur de texte par défaut */
}

h1, h2, h3, p, ul, li, button, .personal-info, .carousel-content, .console-input {
  font-family: 'Montserrat', sans-serif; /* Assure l'application de la police aux éléments spécifiques */
}

a {
  color: inherit; /* Garde la couleur du texte parent par défaut */
  text-decoration: underline;
}

/* Style de la section d'accueil */
.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* L'overlay couvre toute l'image */
  height: 100%;
  display: flex;
  justify-content: flex-start; /* Aligne le bloc de texte à gauche */
  align-items: flex-start; /* Aligne le bloc vers le haut */
  padding-top: 15%; /* Ajuste cette valeur pour contrôler la hauteur */
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 2.5rem;
}

.content-wrapper {
  display: flex;
  flex-direction: column; /* Aligne les enfants verticalement */
  width: 50%; /* Garde la largeur de 50% pour l'ensemble */
}

.text-container {
  width: 100%; /* Limite la largeur du bloc de texte à 50% de l'overlay */
  margin-left: 10px; /* Positionne le bloc à gauche */
  display: flex;
  justify-content: center; /* Centre le texte à l'intérieur du bloc */
  align-items: center; /* Centre le texte verticalement */
  text-align: center;
}

.console-container {
  width: 100%; 
}

.console-input {
  position: absolute;
  bottom: 10%;
  left: -15%;
  width: 30%; /* Prend toute la largeur du conteneur */
  background-color: #000; /* Fond noir */
  color: #fff; /* Texte blanc */
  border: none;
  padding: 10px;
  font-family: 'Courier New', Courier, monospace; /* Police de type console */
  font-size: 1rem;
  outline: none; /* Supprime le contour bleu par défaut */
  display: block; /* Assure que l'élément prend toute la largeur du parent */
  margin-left: 25%;
}

.text-container,
.console-container{
  width: 100%; /* Prend toute la largeur de l'ensemble */
}

.scroll-arrow {
  position: absolute; /* La flèche est positionnée par rapport à .hero-section */
  bottom: 30px; /* Ajuste la position verticale */
  left: 50%; /* Centre horizontalement */
  transform: translateX(-50%);
  font-size: 2rem;
  color: white;
  text-decoration: none;
  cursor: pointer;
  animation: bounce 2s infinite;
}

/* Animation pour un effet de rebond */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
      transform: translateY(0) translateX(-50%);
  }
  40% {
      transform: translateY(-3px) translateX(-50%);
  }
  60% {
      transform: translateY(-1px) translateX(-50%);
  }
  100% {
      transform: translateY(0) translateX(-50%); /* Retour à la position de départ */
  }
}

.scroll-arrow svg {
  animation-delay: 5s;
  animation: bounce 2s infinite;
  cursor: pointer;
}

.scroll-arrow:hover svg path {
  stroke: #bcb9a8; /* Change la couleur au survol */
}


















.personal-info {
  position: relative; /* Assure que les éléments positionnés absolument à l'intérieur se basent sur cette section */
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* Aligne le contenu de haut en bas */
  align-items: center;
  padding: 50px 0; /* Ajuste l'espacement vertical */
  background-color: #f4f4f4;
}

.personal-info h2 {
  font-size: 2rem;
  margin-bottom: 3%;
  color: #222;
  text-align: center; /* Centre le titre */
}

.info-container {
  display: flex;
  width: 70%; /* Limite la largeur totale à 70% */
  gap: 3%;
  justify-content: center; /* Centre les éléments horizontalement */
}

/* .photo-section {
  display: flex;
  justify-content: center;
  align-items: top;
  max-width: 100%; 
} */

.photo-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre la flèche sous la photo */
}

.profile-photo {
  width: 20vw; 
  /* height: auto; */
  max-width: 20vw;
  max-height: 60vh; 
  object-fit: cover; 
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
}

.carousel-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Assure que le contenu reste aligné au début */
}

.carousel-content {
  display: block; /* Permet à l'élément de s'adapter à son contenu */
  overflow: visible; /* Assure que le contenu s'affiche pleinement */
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  /* Retire la hauteur fixe et flex: 1 */
}

.carousel-item {
  display: none;
}

.carousel-item.active {
  display: block;
}

.carousel-buttons {
  display: flex;
  justify-content: center;
  margin: 20px 0; /* Ajoute de l'espace au-dessus et en dessous des boutons */
  margin-left: 22%;
  gap: 15px; /* Espace entre les boutons */
}

.carousel-buttons button {
  padding: 10px 20px; /* Ajuste la taille des boutons */
  font-size: 1rem; /* Taille de la police */
  border: none;
  background-color: #ddd; /* Couleur de fond */
  /*color: #fff;  Couleur du texte */
  border-radius: 5px; /* Coins arrondis */
  cursor: pointer;
  transition: background-color 0.3s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.carousel-buttons button:hover {
  background-color: #bbb;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


.panel-content-education,
.panel-content-experience {
  width: 95%; /* Uniformisez la largeur des panels */
  margin: 0 auto; /* Centre le contenu */
  display: flex;
  flex-direction: column;
  gap: 20px; /* Espace entre les éléments */
}
.panel-content-me {
  width: 75%;
  margin: 0 auto; /* Centre le contenu */
  display: flex;
  flex-direction: column;
  gap: 20px; /* Espace entre les éléments */
}

.panel-content-me h3 {
  margin-top: 20px;
  margin-bottom: 20px; 
}

.panel-content-me p {
  margin-bottom: 15px; 
}

.panel-content-me .links {
  display: flex;
  justify-content: center; /* Centre les liens horizontalement */
  margin-top: 10px; /* Ajoute un espace au-dessus des liens */
  gap: 15px; /* Espace entre les liens */
  flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
}

.panel-content-me .links a,
.panel-content-me a{
  color: inherit; /* Couleur des liens */
  text-decoration: underline; /* Souligne les liens */
  font-size: 1rem; /* Taille de la police */
  transition: color 0.3s; /* Transition pour l'effet de survol */
}

.panel-content-me .links a:hover,
.panel-content-me a:hover {
  color: #2e6d3a; /* Couleur au survol */
  text-decoration: none;
}

.education-entry {
  display: flex;
  align-items: center;
  gap: 15px; /* Espace entre l'image et la description */
}

.education-logo {
  width: 90px; /* Ajuste la taille de l'image */
  height: 90px;
  border-radius: 50%; /* Rend l'image circulaire */
  object-fit: cover;
}

.education-description {
  flex: 1; /* La description prend le reste de l'espace disponible */
  font-size: 1rem;
}

.experience-entry {
  display: flex;
  align-items: center;
  gap: 15px; /* Espace entre l'image et la description */
}

.experience-logo {
  width: 90px; /* Ajuste la taille de l'image */
  height: 90px;
  border-radius: 50%; /* Rend l'image circulaire */
  object-fit: cover;
}

.experience-description {
  flex: 1; /* La description prend le reste de l'espace disponible */
  font-size: 1rem;
}

.panel-content-education h3,
.panel-content-experience h3 {
  margin-top: 20px;
  margin-bottom: 20px; 
}

.next-page-arrow {
  /* position: absolute; 
  bottom: 30px; */
  margin-left: 10%;  
  margin-top: 15%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: rgb(49, 48, 48);
  text-decoration: none;
  cursor: pointer;
  animation: bounce 2s infinite;
}



.next-page-arrow svg {
  animation-delay: 0s; /* Démarre l'animation immédiatement */
}

.next-page-arrow:hover svg path {
  stroke: #2e6d3a; /* Change la couleur au survol */
}

















.projects {
  padding: 50px 0; /* Ajoute de l'espace autour de la section */
  background-color: #f9f9f9;
  text-align: center;
}

.projects h2 {
  font-size: 2rem;
  margin-bottom: 5%;
  color: #222;
  text-align: center; /* Centre le titre */
}

.project-container {
  max-width: 70%; /* Ajustez cette valeur selon vos besoins */
  margin: 0 auto; /* Centre le conteneur sur la page */
  padding: 0 20px; /* Optionnel : ajoute un padding pour les petits écrans */
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Affiche un maximum de 3 tuiles par ligne */
  gap: 50px; /* Espace entre les tuiles */
  justify-items: center; /* Centre les tuiles horizontalement */
}

/* .project-tile {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
} */

.project-tile {
  position: relative;
  width: 100%; /* La largeur s'adapte à la grille */
  padding-top: 60%; /* Définit la hauteur comme 60 % de la largeur */
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.project-tile img,
.project-hover-description,
.project-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* L'image et le contenu remplissent la tuile */
  object-fit: cover; /* Maintient les proportions de l'image */
  border-radius: 10px;
  transition: transform 0.3s ease;
}


.project-title {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto; /* Empêche le titre de s'étendre sur toute la largeur */
  color: white;
  font-size: 1.2rem; /* Taille de la police */
  background-color: var(--project-color, rgba(0, 0, 0, 0.5)); /* Utilise la couleur de projet */
  padding: 5px 10px; /* Ajuste le padding pour contrôler la hauteur */
  line-height: 1.2; /* Ajuste la hauteur de ligne pour un meilleur contrôle */
  border-radius: 5px;
  z-index: 2;
  width: auto; /* Permet au titre de s'ajuster à sa taille naturelle */
  height: auto; /* Assure que la hauteur s'ajuste automatiquement */
  display: inline-block; /* Permet au titre de prendre seulement la place nécessaire */
}

.project-title {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  font-size: 1.2rem;
  background-color: var(--project-color, rgba(0, 0, 0, 0.5)); /* Utilise la même couleur que le hover */
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 2;
}

.project-hover-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--project-color, rgba(0, 0, 0, 0.6)); /* Utilise la même couleur que le titre */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}

.project-tile:hover img {
  transform: scale(1.05);
}

.project-tile:hover .project-hover-description {
  opacity: 1;
}


.page-blur {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

.modal {
  display: none; /* Masqué par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  z-index: 1000;
  padding: 20px;
  overflow: auto; /* Permet le défilement si le contenu est trop grand */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px; /* Increased padding for overall spacing */
  font-family: 'Montserrat', sans-serif;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Spacing between sections */
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/* .modal-content h2 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
  color: inherit; 
} */
.modal-content h3 {
    margin-bottom: 15px; /* Space below headings */
    text-align: center;
    color: inherit;
}

.modal-content h2 {
  font-size: 2.2rem; /* Increased font size */
  font-weight: bold;
  margin-bottom: 20px; /* Added extra spacing below */
  text-align: center;
  color: inherit; /* Keep the text color consistent */
}

.modal-content p {
  font-size: 1rem;
  line-height: 1.8; /* Increased line height for better readability */
  color: #666;
  margin-bottom: 15px; /* Space below paragraphs */
  text-align: justify; /* Align text for cleaner edges */
}

.modal-content ul {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 20px;
  text-align: justify;
  padding-left: 20px; /* Ajoute un léger retrait pour les puces */
}

.modal-content ul li {
  margin-bottom: 10px; /* Ajoute un espace entre les éléments de liste */
  list-style-type: disc; /* Définit le type de puce (disque plein) */
  list-style-position: inside; /* Place les puces à l'intérieur du conteneur */
}

/* .modal-content img {
  width: 60%; 
  max-width: 300px; 
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  margin: 20px auto; 
  display: block; 
} */
.modal-content img,
.modal-content iframe {
    margin: 20px auto; /* Space above and below media */
    display: block; /* Center media */
    border-radius: 10px;
    max-width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for focus */
}

.modal-content::-webkit-scrollbar {
  width: 10px; /* Slightly wider scrollbar for better visibility */
}

.modal-content::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color of the scrollbar track */
  border-radius: 20px; /* Fully round track edges */
}

.modal-content::-webkit-scrollbar-thumb {
  background: #888; /* Color of the scrollbar thumb */
  border-radius: 20px; /* Fully round thumb edges */
  border: 3px solid #f1f1f1; /* Padding effect for the thumb */
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: #555; /* Darker color on hover for better visibility */
}

.media-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  color: #444;
}

/* Style for technologies list */
.technologies-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Space between badges */
  justify-content: center;
  margin: 20px 0; /* Spacing around the list */
  padding: 0;
  list-style: none; /* Remove bullets */
}

.technologies-list li {
  display: inline-block;
  background-color: #f1f1f1;
  padding: 8px 15px; /* Add padding for better readability */
  border-radius: 15px;
  font-size: 0.9rem;
  font-weight: bold;
  color: #333;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.project-links {
  list-style: none; /* Remove default bullet points */
  padding: 0;
  margin: 20px 0;
  display: flex; /* Arrange links horizontally */
  gap: 15px; /* Add space between links */
  justify-content: center; /* Center the links */
}

.project-links li {
  display: inline-block;
}

.project-links a {
  text-decoration: none; /* Remove underline */
  color: #555; /* Default text color (blue) */
  font-size: 1rem;
  font-weight: bold;
  transition: color 0.3s, text-decoration 0.3s;
}

.project-links a:hover {
  color: #333; /* Darker blue on hover */
  text-decoration: underline; /* Add underline on hover */
}

.project-year {
  font-size: 1.1rem;
  font-weight: bold;
  color: #555;
  text-align: center;
  margin-bottom: 10px; /* Espacement en dessous de l'année */
}

.close-button {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #888;
  transition: color 0.3s;
}

.close-button:hover {
  color: #333;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.project-tag {
  padding: 5px 10px;
  border-radius: 12px;
  color: white;
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: capitalize;
  display: inline-block;
}

@keyframes modalZoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}











.page-footer {
  background-color: #333; /* Dark background color */
  color: #fff; /* White text */
  text-align: center; /* Center the text */
  padding: 20px 0; /* Add some padding for spacing */
  font-size: 0.9rem; /* Slightly smaller font size */
  margin-top: 50px; /* Add space above the footer */
}