/* Ajouter Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

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


/* Header Styling */
#header {
  background: linear-gradient(90deg, #141414, #1f1f1f); /* Dark gradient for contrast */
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000; /* Ensures header is above other elements */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
  padding: 10px 0;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.logo-link {
  display: flex;
  align-items: center;
}

.logo {
  height: 50px; /* Consistent logo size */
}

.logo:hover {
  transform: scale(1.1); /* Subtle hover effect on logo */
}

#nav {
  display: flex;
  align-items: center;
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  color: #e0e0e0; /* Light gray text */
  text-decoration: none;
  font-size: 1em;
  padding: 10px;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #ff4081; /* Magenta on hover */
}

.cta-button {
  background-color: #ff4081; /* Magenta background for CTA */
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #e10098; /* Darker magenta on hover */
}

/* Styles de Base */
body {
  background: linear-gradient(135deg, #0d0d0d 40%, #1a1a1a 100%);
  font-family: 'Roboto', sans-serif;
  color: #e0e0e0;
  line-height: 1.65em;
  font-size: 16px;
  scroll-behavior: smooth;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Exo', sans-serif;
  color: #ff4081;
  text-transform: uppercase;
  margin-bottom: 0.5em;
  letter-spacing: 0.15em;
}

/* Paragraphes */
p {
  margin-bottom: 1.5em;
  font-size: 1.1em;
  color: #a9a9a9;
  line-height: 1.75em;
}

/* Liens */
a {
  color: #ff4081;
  text-decoration: none;
  border-bottom: 1px dotted #ff4081;
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

a:hover {
  color: #ff80ab;
  border-bottom-color: transparent;
}

/* Contact Info Styling */
.contact-info {
  display: none; /* Caché par défaut */
  background-color: #1f1f1f; /* Couleur de fond sombre */
  padding: 20px; /* Padding pour espacer le contenu */
  border-radius: 15px; /* Coins arrondis */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Ombre plus prononcée */
  position: absolute;
  bottom: 80px; /* Augmenté pour plus d'espace */
  right: 20px; /* Aligné à droite avec plus d'espace */
  z-index: 1000; /* Assure qu'il est au-dessus des autres éléments */
  width: 400px; /* Largeur fixe pour le popup */
  max-height: 300px; /* Hauteur maximale pour éviter les débordements */
}

/* Contenu des éléments de contact */
.contact-info .contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px; /* Espacement entre les éléments */
}

.contact-info .contact-item:last-child {
  margin-bottom: 0; /* Retire l'espacement en bas du dernier élément */
}

.contact-info .contact-link {
  color: #e0e0e0;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.contact-info .contact-link:hover .contact-text {
  color: #ff4081; /* Couleur de survol du texte */
}

.contact-info .contact-icon {
  height: 30px; /* Augmenter la taille des icônes */
  margin-right: 15px; /* Plus d'espace entre l'icône et le texte */
}

.contact-info .contact-text {
  font-size: 1.2em; /* Augmenter légèrement la taille du texte */
  font-weight: 500; /* Mettre en gras le texte pour plus de lisibilité */
}

/* Style pour afficher la section de contact */
.contact-info.show {
  display: block;
}



/* Sections */
section {
  padding: 1.5em 0;
  color: #e0e0e0;
  text-align: center;
  border-radius: 15px;
  margin-bottom: 1.5em;
}

/* Profil Container */
.profile-container {
  display: flex;
  justify-content: center; /* Centrer le contenu horizontalement */
  align-items: center; /* Centrer le contenu verticalement */
  padding: 2em; /* Ajuster le padding pour une meilleure séparation */
  gap: 2em; /* Ajouter un espacement entre les éléments */
  width: 80%; /* Réduire la largeur du conteneur pour laisser de l'espace autour */
  margin: 0 auto; /* Centrer le conteneur sur la page */
  border-radius: 15px;
}

/* Styles pour le texte de profil */
.profile-container .content {
  flex: 1; /* Prend de l'espace disponible, mais reste flexible */
  max-width: 600px; /* Limite la largeur maximale pour la lisibilité */
  padding: 1.5em; /* Ajouter du padding pour une meilleure séparation du texte */
  background: #141414;
  border-radius: 10px;
}

/* Styles pour la carte stylisée */
.profile-container .card {
  flex: 1; /* Prend de l'espace disponible, mais reste flexible */
  max-width: 350px; /* Assurez-vous que la carte ne soit pas trop large */
  padding: 1.5em; /* Ajuster le padding pour une présentation plus compacte */
  background: none;
  border-radius: 10px;
  box-shadow: none;
}



/* Section Three (Experience) */
#three {
  background: #141414; /* Dark gray */
  padding: 3em 0;
  color: #e0e0e0;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 2em;
}

#three h2 {
  color: #ff4081; /* Magenta */
  font-size: 2.5em;
  margin-bottom: 1em;
}

.experience-grid {
  display: flex;
  flex-wrap: wrap; /* Permet aux cartes de passer à la ligne suivante si nécessaire */
  justify-content: center; /* Centre les cartes horizontalement */
  gap: 30px; /* Espace entre les cartes */
}

.experience-row {
  display: flex;
  justify-content: center; /* Centre les éléments enfants */
  flex-wrap: wrap; /* Permet aux cartes de s'adapter */
  gap: 30px; /* Espace entre les cartes */
  width: 100%;
  max-width: 1200px; /* Limite la largeur maximale pour un meilleur contrôle */
}

.experience-card {
  background-color: #232323;
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: calc(33.33% - 40px); /* Assure que les cartes occupent un tiers de la largeur, ajusté pour les marges */
  min-width: 300px; /* Largeur minimale pour chaque carte */
  box-sizing: border-box; /* Inclut les padding dans la largeur totale */
}

.experience-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.experience-icon {
  margin-bottom: 15px;
}

.experience-icon img {
  width: 50px;
  height: 50px;
}

.experience-content h3 {
  color: #ff4081; /* Magenta */
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.experience-content p,
.experience-content ul {
  color: #c0c0c0;
  font-size: 1em;
  line-height: 1.6em;
  text-align: left;
}

.experience-content ul {
  list-style-type: disc;
  margin-left: 20px;
}

/* Partie de la gallery */

:root {
  --m: 4rem;
  
  --red: #FF6565;
  --pink: #FF64F9;
  --purple: #6B5FFF;
  --blue: #4D8AFF;
  --green: #5BFF89;
  --yellow: #FFEE55;
  --orange: #FF6D1B;
  
  --gallery-bg: #121213;
}
.custom-gallery-article {
  width: 90%; /* Ajuste la largeur pour centrer */
  max-width: 1500px; /* Limite la largeur maximale */
  margin: 40px auto; /* Centrage horizontal */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre les éléments enfants horizontalement */
  background: #141414;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}


.custom-gallery-title {
  padding: 0 0 10px 0;
  margin: 20px auto; /* Centre le titre horizontalement */
  border-bottom: 1px solid #333;
  text-align: center; /* Centre le texte du titre */
  max-width: 600px; /* Limite la largeur du titre */
}

.custom-gallery-figure {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center; /* Aligne les éléments au centre */
  justify-content: center; /* Centre les éléments horizontalement */
  margin: 0 0 30px 0;
}

.custom-gallery-figcaption {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre les éléments horizontalement */
  justify-content: center; /* Centre les éléments verticalement */
  text-align: center; /* Centre le texte à l'intérieur de l'élément */
}

.custom-gallery-description {
  color: #bbb;
  padding: 10px 20px; /* Réduit le padding pour éviter trop d'espace */
  margin: 0;
  border-left: 10px solid;
  border-image: repeating-linear-gradient(
      43deg,
      white,
      white 4px,
      transparent 5px,
      transparent 9px,
      white 10px
    )
    10;
  text-align: center; /* Centre le texte à l'intérieur de l'élément */
}

.custom-gallery-button {
  border: calc(0.08 * var(--m)) solid transparent;
  position: relative; /* Position relative pour les ajustements */
  color: #F3F3F3;
  font-family: 'Roboto', sans-serif;
  font-size: 1.2em;
  border-radius: calc(0.7 * var(--m));
  padding: calc(0.5 * var(--m)) calc(1.5 * var(--m));
  display: block;
  margin: 20px auto; /* Centre le bouton horizontalement */
  cursor: pointer;
  text-align: center;
  background: linear-gradient(#121213, #121213), linear-gradient(#121213 50%, rgba(18, 18, 19, 0.6) 80%, rgba(18, 18, 19, 0)), linear-gradient(90deg, var(--orange), var(--yellow), var(--green), var(--blue), var(--purple), var(--pink), var(--red));
  background-origin: border-box;
  background-clip: padding-box, border-box, border-box;
  background-size: 200%;
  animation: animate 2s infinite linear;
}

.custom-gallery-button::before {
  content: '';
  background: linear-gradient(90deg, var(--orange), var(--yellow), var(--green), var(--blue), var(--purple), var(--pink), var(--red));
  height: 30%;
  width: 60%;
  position: absolute;
  bottom: -20%;
  z-index: -5;
  background-size: 200%;
  animation: animate 2s infinite linear;
  filter: blur(calc(0.8 * var(--m)));
}

.custom-gallery-button:hover, .custom-gallery-button:hover::before {
  animation: animate 0.5s infinite linear;
}

@keyframes animate {
  0% { background-position: 0 }
  100% { background-position: 200% }
}

.custom-gallery-button input {
  display: none;
}

.custom-gallery-button label {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e0e0e0; /* Assure que la couleur du texte est visible */
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2em; /* Ajuste la taille du texte dans le label pour correspondre au bouton */
}

.custom-gallery-button:hover label {
  color: #ff4081; /* Change la couleur du texte au survol */
}

.custom-gallery-button label span {
  display: inline;
}

.custom-gallery-section {
  width: 100%;
  height: 0; /* Initialement caché */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  border-right: 1px solid transparent; /* Bordure invisible par défaut */
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  transition: height 0.5s ease, border-color 0.5s ease; /* Ajoutez transition pour border-color */
  position: relative;
}

.custom-gallery-section::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background-image: linear-gradient(
    90deg,
    #ff00bb,
    #ff00b6,
    #ff00a8,
    #ff0b93,
    #ff347a,
    #ff585f,
    #ff7a44,
    #ff9829,
    #ffb20c,
    #ffc500,
    #ffd100,
    #ffd500
  );
  content: "";
  z-index: 2;
  transition: width 1.2s ease;
}

.custom-gallery-item {
  flex-grow: 1;
  opacity: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: 1 1 calc(25% - 20px); /* Ajuste la largeur des éléments avec un écart */
  max-width: calc(25% - 20px);
  background-attachment: scroll;
  height: 220px; /* Hauteur fixe pour les éléments */
  border-radius: 10px; /* Coins arrondis */
  position: relative; /* Nécessaire pour la superposition du texte */
  overflow: hidden; /* Assure que rien ne dépasse de l'image */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.custom-gallery-item::before {
  content: attr(data-title); /* Affiche le texte du titre depuis l'attribut data-title */
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* Centre le texte horizontalement */
  width: 100%;
  background: rgba(0, 0, 0, 0.7); /* Fond semi-transparent pour le titre */
  color: #ff4081;
  text-align: center;
  padding: 10px;
  opacity: 0; /* Masque le texte par défaut */
  transition: opacity 0.3s; /* Transition pour l'apparition du texte */
  font-size: 1.2em;
  box-sizing: border-box; /* Inclut padding dans la largeur totale */
  border-bottom-left-radius: 10px; /* Assure que le texte ne dépasse pas les coins arrondis */
  border-bottom-right-radius: 10px;
}

/* Modifier les images de la galerie */
.custom-gallery-section .custom-gallery-item:nth-of-type(1) {
  background-image: url("/images/dappsNFT.png");
}

.custom-gallery-section .custom-gallery-item:nth-of-type(2) {
  background-image: url("/images/dappdavos.PNG");
}

.custom-gallery-section .custom-gallery-item:nth-of-type(3) {
  background-image: url("/images/LPbnb.jpg");
}

.custom-gallery-section .custom-gallery-item:nth-of-type(4) {
  background-image: url("/images/Smart_Contrat.png");
}

.custom-gallery-section .custom-gallery-item:nth-of-type(5) {
  background-image: url("/images/coming.png");
}

.custom-gallery-section .custom-gallery-item:nth-of-type(6) {
  background-image: url("/images/htb.PNG");
}

.custom-gallery-section .custom-gallery-item:nth-of-type(7) {
  background-image: url("/images/dapps2.png");
}

.custom-gallery-section .custom-gallery-item:nth-of-type(8) {
  background-image: url("/images/ultimatebot.jpg");
}

.custom-gallery-item:hover {
  transform: scale(1.15); /* Agrandit l'image */
  z-index: 1; /* Assure que l'image est au-dessus des autres éléments */
}
.custom-gallery-item:hover::before {
  opacity: 1; /* Affiche le texte au survol */
}

/* Border color change on open */
.custom-gallery-section.open {
  height: 220px; /* Hauteur fixe pour l'état ouvert */
}

.custom-gallery-section.open .custom-gallery-item {
  opacity: 1;
}

/* Skills Section */
#skills {
    background: #141414; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#skills h2 {
    color: #ff4081;
    margin-bottom: 2em;
}

.skills-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.skill-card {
    background: #1f1f1f; /* Légèrement plus clair */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    padding: 25px;
    width: 340px; /* Augmenter la largeur des boîtes */
    margin: 1em;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.skill-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
}

.skill-card img {
    width: 60px; 
    height: 60px;
    margin-bottom: 15px;
}

.skill-card span {
    display: none;
    font-size: 1.1em;
    color: #ff80ab;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    padding: 7px 12px;
    border-radius: 5px;
    z-index: 10;
}

.skill-card:hover span {
    display: block;
}

/* Self-Taught Journey Section */
#journey {
    background: #141414; /* Un peu plus clair pour contraste */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#journey h2 {
    color: #ff4081;
}

/* Footer */
footer {
  padding: 2em 0;
  background: #121212; /* Noir plus sombre pour le pied de page */
  color: #e0e0e0;
  text-align: center;
}

footer p {
  margin: 0;
}

footer a {
  color: #ff4081; /* Magenta */
  text-decoration: none;
  transition: color 0.3s ease;
}

footer a:hover {
  color: #ff80ab; /* Magenta plus clair au survol */
}

/* Global Variables */
html {
    --zoom: 100;
    --green: #37996b;
    --neon: #3ecf8e;
}

:root {
    --unit: 1vmin;
    --available-screen-min: 665;
    --px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
    --bg: #060809;
    --logopng: url(https://res.cloudinary.com/dpphcu4gm/image/upload/v1712993492/supabase-outline-logo_u83xos.png);
    --ticket: url(https://assets.codepen.io/13471/ticket-shape.svg);
    --ar: 10/30;
    --gutter: 8%;
  }
  
  body {
    background-color: var(--bg);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  #app {
    perspective: 1200px;
    --o: 0;
    --p: 100%;
    --h: 50%;
    --r: 0;
    transform: translate3d(0, 0, 0.1px);
  }
  
  .ticket {
    --scale: 0.6;
    transform: translate3d(0, 0, 0.1px) scale(var(--scale)) rotateY(var(--r));
    transform-style: preserve-3d;
    pointer-events: auto;
    display: grid;
    grid-area: 1/1;
    width: calc(300 * var(--px));
    height: calc(400 * var(--px));
    overflow: visible;
  }
  
  .front,
  .back {
    grid-area: 1/1;
    background-color: #6e6176;
    background-image: radial-gradient(
      circle at var(--p) 50%,
      #111 10%,
      transparent 100%
    );
    background-size: 100% 220vh;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    display: grid;
    backface-visibility: visible;
    transform: translateZ(1px);
    transform-style: preserve-3d;
    mask-image: var(--ticket);
    mask-size: cover;
    mask-repeat: no-repeat;
    height: calc(420 * var(--px));
  }
  
    .front::after,
    .back::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
    -70deg,
    transparent 40%,
    rgba(255, 255, 255, 0.5) 40.5%,
    transparent
    );
    background-size: 200% 200%;
    background-position: var(--p) var(--p);
    z-index: 5;
    opacity: calc(var(--o) + 0.5);
    pointer-events: none;
    }
  
    .front {
    transform: rotateY(180deg) translateZ(1px);
    }
    .back {
    padding: calc(20 * var(--px));
    }
  
    .holo {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 15px;
    }
  
    .holo {
        --space: 5%;
        --red: hsl(0, 100%, 50%);
        --orange: hsl(30, 100%, 50%);
        --yellow: hsl(60, 100%, 50%);
        --green: hsl(120, 100%, 50%);
        --cyan: hsl(180, 100%, 50%);
        --blue: hsl(222, 100%, 50%);
        --purple: hsl(258, 100%, 50%);
        --magenta: hsl(300, 100%, 50%);
        background-image: repeating-linear-gradient(
          -45deg,
          var(--red) 0%,
          var(--orange) calc(var(--space) * 1),
          var(--yellow) calc(var(--space) * 2),
          var(--green) calc(var(--space) * 3),
          var(--cyan) calc(var(--space) * 4),
          var(--blue) calc(var(--space) * 5),
          var(--purple) calc(var(--space) * 6),
          var(--magenta) calc(var(--space) * 7),
          var(--red) calc(var(--space) * 8)
        );
        background-size: 150vw 150vh;
        background-position: calc(var(--h)) calc(var(--h));
        background-repeat: no-repeat;
        mask-image: var(--logopng);
        mask-size: 80% 80%;
        mask-repeat: no-repeat;
        mask-position: 150% 180%;
        mix-blend-mode: plus-lighter;
        filter: brightness(0.9) contrast(0.7) saturate(2);
        opacity: var(--o);
      }

  
  .logo {
    width: 90%;
    place-self: center;

  }
  
  .divider {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: start;
    bottom: 2%;
    left: 0;
    right: 0;
    height: 18%;
    padding: 0 var(--gutter);
    text-transform: uppercase;
  
    background-image: repeating-linear-gradient(
        90deg,
        #fff0 0px,
        #fff0 8px,
        var(--green) 8px,
        var(--green) 16px
      ),
      radial-gradient(ellipse at center center, #fff0 10%, transparent 50%);
    background-size: 100% 1.5px, 250% 1.5px;
    background-repeat: no-repeat;
    background-position: -4px top, var(--h) top;
    background-blend-mode: overlay;
  
    font-size: 16px;
    font-weight: 400;
    z-index: 2;
  
    div {
      display: flex;
      align-items: center;
      justify-content: left;
    }
  }
  
  .divider > div > img {
    margin-right: 10px;
    height: 40px;
  }
  
  .ticket {
    display: grid;
    grid-area: 1/1;
    width: calc(300 * var(--px));
    height: calc(400 * var(--px));
  }
  
  #id_number {
    position: absolute;
    margin: calc(40 * var(--px)) calc(20 * var(--px));
  }
  
  .data {
    position: absolute;
    top: calc(70 * var(--px));
    margin: calc(20 * var(--px));
  }
  .name {
    font-size: calc(30 * var(--px));
  }
  .githubid {
    font-size: calc(20 * var(--px));
  }
  h3 {
    font-size: calc(15 * var(--px));
  }



  /* Responsive Navigation */
@media (max-width: 768px) {
  #nav {
      display: none; /* Hide the nav links on smaller screens */
  }

  .header-container {
      justify-content: space-between;
  }

  #header.active #nav {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 60px;
      right: 0;
      background: #1a1a1a;
      width: 100%;
      text-align: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .nav-links {
      flex-direction: column;
      gap: 10px;
  }
}