/* Tablette */
@media screen and (max-width: 1024px) {
}

/* Smartphone */
@media screen and (max-width: 767px) {
}

.gsapImg{
   --after-transform: scaleX(1); 
}

.gsapImg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   transform-origin: left;
  background:white;
  transform: scaleX(1); /* Valeur par défaut */
  transform: var(--after-transform); /* Animé par GSAP */
  transition: transform 0.3s ease-out; /* Fallback */
  z-index: 1;
  pointer-events: none;
}

.gsapImg2::after{
     transform-origin: right;
}



.hovering {
    opacity: 0.5;
}


text {
    user-select: none;      /* Chrome, Safari, Opera */
    -webkit-user-select: none;
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none;  /* IE/Edge */
    pointer-events: none;   /* optionnel, pour que les textes ne bloquent pas les clics sur la carte */
}


.flex_equipe {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes */
    gap: 40px 30px; /* 40px entre les rangées, 30px entre les colonnes */
    padding: 20px; /* un peu d'espace autour */
}

.fiche-employe {
    background: #ffffff; /* fond blanc */
    padding: 20px;
    text-align: center;
    border-radius: 12px; /* coins arrondis de la carte */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* ombre légère mais stylée */
    transition: transform 0.3s, box-shadow 0.3s; /* pour effet hover */
        display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.fiche-employe:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.fiche-employe .photo {
    margin: 0 auto 15px; /* centrer et espacer du texte */
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: 50%; /* cercle parfait */
    border: 3px solid #eee; /* optionnel : contour léger */
    align-self: center;
}

.fiche-employe .nom {
    display: block;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.fiche-employe .poste {
    display: block;
    color: #7b7b7b;
    margin-bottom: 10px;
    font-style: italic;
}

.fiche-employe .phone,
.fiche-employe .mail {
    display: block;
    color: #7b7b7b;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

/* Responsive */
@media screen and (max-width: 1024px) {
    .flex_equipe {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }
}

@media screen and (max-width: 600px) {
    .flex_equipe {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


.categories_produits-faiteuils-releveurs #bonDeCommande{
    display: none;
}