.tab-container {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    font-family: 'Sofia Sans', sans-serif;
    font-size: 20px;
    flex-wrap: wrap; /* Permet aux onglets de passer à la ligne si nécessaire */
    margin-bottom: 25px;
  }
  
  .tab {
    cursor: pointer;
    padding: 5px 20px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    color: #000;
    text-align: center;
    flex: 1 1 auto; /* Ajuste automatiquement la largeur des onglets */
  }
  
  /* Effet de dégradé animé sur l'onglet actif */
  .tab.active {
    background: linear-gradient(45deg, #ED10EB, #7304A5);
    background-size: 200% 200%;
    animation: gradientAnimation 5s ease infinite;
    color: #fff;
    font-weight: 500;
  }
  
  /* Animation pour le dégradé */
  @keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  /* Media Queries pour tablette (moins de 768px) */
  @media (max-width: 768px) {
    .tab-container {
      font-size: 18px; /* Réduction de la taille de la police pour les tablettes */
      gap: 8px; /* Réduction de l’espace entre les onglets */
    }
  
    .tab {
      padding: 5px 15px; /* Ajustement du padding pour s’adapter aux tablettes */
    }
  }
  
  /* Media Queries pour mobile (moins de 480px) */
  @media (max-width: 480px) {
    .tab-container {
      font-size: 16px; /* Taille de police plus petite pour les mobiles */
      gap: 5px; /* Moins d’espace entre les onglets sur mobile */
    }
  
    .tab {
      padding: 5px 10px; /* Moins de padding sur les mobiles */
      flex: 1 1 100%; /* Chaque onglet prend toute la largeur de l’écran */
    }
  }

  /* Grille d'images avec CSS Grid */
  .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
      gap: 25px;
      width: 100%;
  }

  .portfolio-item {
      overflow: hidden;
      border-radius: 8px;
      position: relative;
  }

  .portfolio-item-inner {
      width: 100%;
      padding-top: 100%; /* Carré par défaut */
      position: relative;
  }

  .portfolio-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
  }

  /* Responsivité pour tablettes */
  @media (max-width: 768px) {
      .portfolio-grid {
          grid-template-columns: repeat(2, 1fr); /* Deux colonnes pour les tablettes */
      }
  }
  /* Responsivité pour mobiles */
  @media (max-width: 480px) {
      .portfolio-grid {
          grid-template-columns: repeat(2, 1fr); /* Deux colonnes pour les mobiles */
      }
  }