/* --- DEBUT DU CSS DU MODULE SCREENSHOTS --- */
    
    /* Section globale pour le fond */
    .module-screenshots-section {
      padding: 80px 0;
      background-color: #f4f7f6; /* Fond gris très léger pour faire ressortir les cartes blanches */
      font-family: 'Montserrat', sans-serif;
    }

    /* Titre de la section */
    .section-heading {
      text-align: center;
      margin-bottom: 50px;
    }
    .section-heading h2 {
      font-weight: 700;
      color: #2c3e50;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 15px;
    }
    .section-heading p {
      color: #7f8c8d;
      font-size: 1.1rem;
      max-width: 600px;
      margin: 0 auto;
    }

    /* Navigation par Onglets (Pills style moderne) */
    .nav-pills-custom {
      justify-content: center;
      margin-bottom: 40px;
      border-bottom: none;
    }
    .nav-pills-custom .nav-link {
      color: #555;
      font-weight: 600;
      background-color: #e9ecef;
      border-radius: 30px; /* Pilules arrondies */
      padding: 12px 30px;
      margin: 0 10px 10px;
      border: none;
      transition: all 0.3s ease;
    }
    .nav-pills-custom .nav-link:hover {
      background-color: #dde1e6;
    }
    /* Couleur active (le bleu de votre charte par exemple) */
    .nav-pills-custom .nav-link.active {
      background-color: #007bff; 
      color: #fff;
      box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
    }

    /* Design de la Carte Screenshot */
    .screenshot-card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden; /* Important pour l'effet de zoom de l'image */
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
      transition: all 0.4s ease;
      height: 100%; /* Pour que les cartes aient la même hauteur */
      border: 1px solid rgba(0,0,0,0.05);
    }

    /* Effet de survol sur la carte entière */
    .screenshot-card:hover {
      transform: translateY(-10px); /* La carte remonte */
      box-shadow: 0 15px 30px rgba(0,0,0,0.12);
    }

 
    /* Bloc UNIQUE pour le conteneur d'image */
    .card-img-wrapper {
  height: 350px; /* On garde la grande taille pour l'impact */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  overflow: hidden;
  position: relative;
  cursor: zoom-in; /* Indique clairement que c'est cliquable */
  border-bottom: 1px solid #eee;
}

.card-img-wrapper img {
  max-width: 90%; /* Laisse une marge pour que le screenshot respire */
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
}

/* Effet au survol pour inciter au clic */
.card-img-wrapper:hover img {
  transform: scale(1.05);
}

.card-img-wrapper::after {
  content: "Click to zoom";
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  font-size: 10px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

.card-img-wrapper:hover::after {
  opacity: 1;
}
    
    

    /* Corps de la carte (texte) */
    .card-body-custom {
      padding: 25px;
      text-align: center;
    }
    .card-body-custom h5 {
      font-weight: 700;
      color: #333;
      margin-bottom: 10px;
    }
    .card-body-custom p {
      color: #666;
      font-size: 0.95rem;
      line-height: 1.5;
      margin-bottom: 0;
    }


/* Bloc UNIQUE pour les images de screenshots */
.card-img-wrapper img {
  width: 100%;
  height: 100%;
  /* CRUCIAL : "contain" pour voir tout le formulaire sans le couper */
  object-fit: contain; 
  
  /* Amélioration de la visibilité */
  padding: 10px;
  background-color: #fff; /* Fond blanc pour bien détacher l'image */
  border: 1px solid #f0f0f0; /* Bordure fine pour délimiter l'interface */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Ombre légère pour le relief */
  
  /* Animation fluide */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effet au survol pour mieux voir les détails */
.card-img-wrapper:hover img {
  transform: scale(1.08); /* Zoom léger pour aider à la lecture */
}

/* Optionnel : ajoute un badge discret au-dessus de l'image pour plus de style */
.screenshot-card {
  position: relative;
}

.screenshot-card::before {
  content: "SDepend UI";
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 123, 255, 0.1);
  color: #007bff;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
}
    
    /* --- FIN DU CSS DU MODULE SCREENSHOTS --- */


    .glightbox-container .gslide img {
    max-width: 80vw;  /* 70% de la largeur de l'écran */
    max-height: 90vh; /* 70% de la hauteur de l'écran */
    width: auto;
    height: auto;
}