/* ============================================================ mlcoloriscat — MesLacets.fr Bloc coloris (déclinaisons couleur) sous l'intro de catégorie. Cohérent avec les vignettes home/footer (bordure #DADADA, rose marque). ============================================================ */ .ml-coloris { margin: 2.5rem 0; } .ml-coloris__title { font-family: 'Sarala', sans-serif; font-size: 27px; font-weight: 600; color: #fd0065; text-align: left; margin: 0 0 1.5rem; } .ml-coloris__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; } .ml-coloris__item { margin: 0; } .ml-coloris__link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #232323; transition: transform .15s ease; } .ml-coloris__link:hover { transform: translateY(-2px); text-decoration: none; } .ml-coloris__thumb { display: block; width: 100%; border: 1px solid #DADADA; border-radius: 4px; overflow: hidden; background: #fff; } .ml-coloris__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: opacity .2s ease; } .ml-coloris__link:hover .ml-coloris__thumb { border-color: #fd0065; } .ml-coloris__name { display: block; margin-top: .5rem; font-family: 'Sarala', sans-serif; font-size: 14px; line-height: 1.3; text-align: center; text-transform: capitalize; } /* --- Responsive : 6 / 3 / 2 colonnes (cohérent avec la home) --- */ @media (max-width: 991px) { .ml-coloris__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575px) { .ml-coloris__grid { grid-template-columns: repeat(2, 1fr); } .ml-coloris__title { font-size: 22px; } } /* ============================================================ Masquage de la liste native des sous-catégories UNIQUEMENT sur les 5 catégories mères mappées (3,5,6,7,8). Sur ces pages, PrestaShop affiche les sous-catégories dans section#products (pas de produits directs) — on le masque au profit du bloc coloris. PrestaShop ajoute la classe category-id-X sur . ============================================================ */ body.category-id-3 section#products, body.category-id-5 section#products, body.category-id-6 section#products, body.category-id-7 section#products, body.category-id-8 section#products, body.category-id-9 section#products { display: none !important; }