.nova-grid-track { display: flex; overflow-x: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; } /* --- STRUCTURE --- */ .nova-item { flex: 0 0 33.333%; /* 3 sur PC */ scroll-snap-align: start; box-sizing: border-box; padding: 0 5px; /* Espace minimal entre les photos */ } .nova-box img { width: 100%; height: auto; display: block; } .nova-name { color: #59b2d1; text-align: center; font-weight: bold; text-transform: uppercase; font-size: 13px; margin-top: 5px; } /* Boutons */ .nova-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.5); width: 35px; height: 35px; cursor: pointer; } .prev { left: 2px; } .next { right: 2px; } /* --- AJUSTEMENTS MOBILE (Le cœur du problème) --- */ @media (max-width: 767px) { .nova-item { flex: 0 0 100%; /* 1 image par clic */ } .nova-final-container { padding-top: 0 !important; padding-bottom: 0 !important; } /* On force le collage des deux blocs sur mobile */ .nova-final-container + .nova-final-container { margin-top: -50px !important; /* Ajuste cette valeur si c'est trop collé ou pas assez */ } .nova-badge { margin-top: 10px; font-size: 12px; } } z-index: 100; border-radius: 50%; } .prev { left: 10px; } .next { right: 10px; } /* --- RESPONSIVE MOBILE --- */ @media (max-width: 767px) { .nova-item { flex: 0 0 100%; /* 1 seule image prend toute la largeur */ } .nova-box img { height: 350px; /* Hauteur fixe pour mobile si tu veux */ object-fit: cover; } }