body, .tmg-gallery, .tmg-member-card, .tmg-member-name, .tmg-member-post, .tmg-member-modal-content, .tmg-close-modal, .tmg-nav-prev, .tmg-nav-next {
    font-family: 'Kanit', sans-serif;
}

.tmg-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 5 colonnes */
    gap: 20px;
    margin: 20px 0;
}

.tmg-member-card {
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #fff;
    transition: transform 0.3s ease;
}

.tmg-member-card:hover {
    transform: scale(1.05); /* Effet de survol */
}

.tmg-member-post{
	color: var( --e-global-color-primary );
	font-size:15px;
}

.tmg-member-name{
	
font-size: 20px;
  text-transform: uppercase;
  line-height: 30px;
  color: var( --e-global-color-text );
	margin:0 !important;
}

.tmg-member-image img {
    width: 100%;
    height: auto;
    border-radius: 15px !important;
}

@media (max-width: 1200px) {
    .tmg-gallery {
        grid-template-columns: repeat(4, 1fr); /* 4 colonnes */
    }
}

@media (max-width: 1000px) {
    .tmg-gallery {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    }
}

@media (max-width: 768px) {
    .tmg-gallery {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    }
}

@media (max-width: 480px) {
    .tmg-gallery {
        grid-template-columns: 1fr; /* 1 colonne sur les petits écrans */
    }
}


/* Modal */
.tmg-member-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex; /* Centrer le modal avec flexbox */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.tmg-modal-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    max-width: 700px;
    width: 80%;
    position: relative;
    overflow-y: auto; 
    max-height: 90vh; 
	margin: 5% auto;
}

.tmg-modal-content .poste{
color:#E10714;
  font-family: "Kanit", Sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 22px;
}

/* Image du membre dans le modal */
.tmg-member-modal-image img {
    width: 60%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 15px !important;
}

/* Bouton de fermeture */
.tmg-close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
   background-color:#E10714;
    padding: auto;
    border-radius: 0% !important;
    color: #fff;
	font-size: 20px;
    cursor: pointer;
	border:1px solid #E10714;
}

/* Boutons de navigation (précédent / suivant) */
.tmg-nav-prev,
.tmg-nav-next {
    position: absolute;
    top: 20%;
    transform: translateY(-50%);
    font-size: 20px;
    background-color:#fff;
    color: #E10714;
    border: 1px solid #E10714;
    padding: auto;
    cursor: pointer;
	border-radius:50%;
    
}

.tmg-nav-prev {
    left: 5%;
}

.tmg-nav-next {
    right: 5%;
}

/* Responsivité du modal */
@media (max-width: 768px) {
    .tmg-modal-content {
        width: 90%; /* Utiliser 90% de la largeur sur les tablettes et mobiles */
        padding: 15px;
    }

    .tmg-nav-prev,
    .tmg-nav-next {
        font-size: 25px; /* Réduire la taille des flèches sur les petits écrans */
    }
}

@media (max-width: 480px) {
    .tmg-modal-content {
        width: 95%; /* Utiliser 95% de la largeur sur les très petits écrans */
    }
	.tmg-member-modal-image img{
		width:70% !important;
	}

    .tmg-nav-prev,
    .tmg-nav-next {
        font-size: 20px; /* Encore plus petit pour les très petits écrans */
		padding: 10px 18px;
    }
}