.marques {
overflow: hidden;
position: relative;
width: 100%;
background: #fff;
padding: 30px 0;
}
.marques-track {
display: flex;
align-items: center;
gap: 60px;
width: max-content;
will-change: transform; }
.marque-logo img {
height: 60px;
width: auto;
object-fit: contain;
opacity: 0.8;
transition: filter 0.3s, opacity 0.3s, transform 0.2s ease;
padding: 10px;
border-radius: 5px;
}
.marque-logo img:hover {
filter: none;
opacity: 1;
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
cursor: pointer;
}     .realisations-slider {
overflow: hidden;
position: relative;
width: 100%;
}
.realisations-track {
display: flex;
gap: 30px; } .realisation-item {
flex: 0 0 300px;
height: 220px;
border-radius: 12px;
overflow: hidden;
position: relative;
text-decoration: none;
color: white;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.realisation-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.realisation-img {
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
transition: transform 0.8s ease;
}
.realisation-item:hover .realisation-img {
transform: scale(1.1);
}
.realisation-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
padding: 20px;
}
.realisation-overlay h3 {
font-size: 1.1rem;
margin: 0;
color: #fff;
font-weight: 600;
}
.realisation-overlay p {
margin: 4px 0 0;
color: #dcdcdc;
font-size: 0.9rem;
}
@keyframes defileRealisations {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}