.projet-grid {
    display: grid;
	justify-items:center;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.projet-item {
    border: none;
    padding: 0px;
    text-align: center;
/*  	width: 250px; */
    height: auto;
}
.projet-image {
	display: block;
    position: relative;
    overflow: hidden;
	height: 250px;
}
.elementor-shortcode .projet-image img.attachment-large {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}
.projet-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.projet-image:hover::after,.projet-image:hover .projet-hover-text {
    opacity: 1;
}

.projet-hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--e-global-color-accent);
    padding: 10px 15px;
    border-radius: 10px;
    color: var(--e-global-color-primary);
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}
.elementor-shortcode .projet-image img.attachment-large {
    object-fit: cover; 
    border-radius: 10px;
    border: 4px solid var(--e-global-color-accent);
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}
.elementor-shortcode .projet-image:hover img.attachment-large {
    filter: grayscale(0%);
	border-color : var(--e-global-color-text);
}

.filter-buttons {
    display: flex;
 	flex-wrap: wrap;
	justify-content: center; 
    gap: 10px;
    margin-bottom: 20px;
}

.filter-button {
    padding: 10px 20px;
    background: var(--e-global-color-accent);
	color :var(--e-global-color-text); 
    border: none;
    border-radius: 10px;
    cursor: pointer;
}
.filter-button:hover {
    background: var(--e-global-color-text);
	color :var(--e-global-color-primary); 
}

.filter-button.active {
    background: var(--e-global-color-text); 
    color:  var(--e-global-color-primary);
    border: none;
}
.empty-message{
	width : 100%;
}