
.NTListingRealisations{display: flex;/* active le mode flex */gap: 20px;/* espace entre les cases */  justify-content: center; /* centre les cases horizontalement */
    align-items: flex-start; /* ou center si tu veux alignement vertical global */
    text-align: center;}
.NTListingRealisations .NTUneRealisation{flex: 1; position: relative; z-index: 1; height: 300px; overflow: hidden; transition: all 0.5s ease; border-bottom-right-radius: 50px; max-width: 600px;justify-content: center; /* centre horizontalement */
    align-items: center;     /* centre verticalement */
    flex-direction: column;  /* si tu veux empiler titre et image verticalement */}
.NTListingRealisations .NTUneRealisation a{display: block; position: relative; height: 100%; width: 100%;}
.NTListingRealisations .NTUneRealisation .NTTitreRealisation{ position:absolute; z-index: 2; bottom: 20px; left: 5px; background: #FFFFFF; padding: 5px; font: 16px/20px 'Oswald', sans-serif; text-transform: uppercase; color:#1d1d1d; transition: all 0.5s ease; }

.NTListingRealisations .NTUneRealisation:hover .NTTitreRealisation{font: 20px/26px 'Oswald', sans-serif;}
.NTListingRealisations .NTUneRealisation picture::after{position: absolute; top: 0px; left: 0px; content: ""; width: 100%; height: 100%; z-index: 1;background: linear-gradient(0deg,rgba(11, 27, 51, 1) 0%, rgba(11, 27, 51, 0) 100%); opacity:0;transition: all 0.5s ease;}
.NTListingRealisations .NTUneRealisation:hover picture::after{opacity:1;}

picture.cover img{width: 100%;  height: 100%; object-fit: cover;       /* l’image remplit la zone sans être déformée */
  object-position: center; /* centre l’image dans la zone */}


@media screen and (max-width: 900px) 
{
	.NTListingRealisations .NTUneRealisation{height: 250px;}
}
@media screen and (max-width: 540px) 
{
	.NTListingRealisations{ display: block;}
	.NTListingRealisations .NTUneRealisation{width: calc(100% - 20px); margin-bottom: 10px;}
}
