/* * GG 3D Print N Design - PrestaShop child theme * Version 1.0.14 - Stable v1.0.13 + product hover/readability fixes * Parent: classic * Objectif: garder le style sombre GG3D sans provoquer une page noire/invisible. */ @import url('https://fonts.googleapis.com/css2?family=Acme&family=Almendra:wght@400;700&display=swap'); :root { --gg-bg: #0b0f16; --gg-bg-deep: #05070a; --gg-panel: #121a26; --gg-panel-soft: #172033; --gg-panel-light: #1d2a3a; --gg-text: #f5f8fc; --gg-text-soft: #d8e1ec; --gg-muted: #b9c6d3; --gg-blue: #00aeef; --gg-blue-dark: #0077b6; --gg-gold: #c99a2e; --gg-border: rgba(255,255,255,0.14); --gg-shadow: 0 12px 28px rgba(0,0,0,0.35); --gg-radius: 12px; } /* SÉCURITÉ: ne jamais cacher la structure principale */ html, body, #page, #wrapper, #header, #footer, #main, main, #content-wrapper { visibility: visible !important; opacity: 1 !important; } html, body { background: var(--gg-bg) !important; color: var(--gg-text) !important; font-family: Arial, Verdana, Helvetica, sans-serif !important; } #page, #wrapper { background: var(--gg-bg) !important; color: var(--gg-text) !important; } img, .logo, #header .logo { visibility: visible !important; opacity: 1 !important; max-width: 100%; } /* POLICES - proche du style utilisé sur le .ca */ h1, h2, h3, h4, .h1, .h2, .h3, .h4, .products-section-title, .featured-products h2, .block-category h1, .page-heading, #header .top-menu a, #_desktop_top_menu .top-menu a, #footer .h3, #footer .h4, #footer .block-contact-title, #footer .myaccount-title, .block_newsletter .h3, .block_newsletter h3, .block_newsletter p.h3 { font-family: 'Acme', Verdana, Arial, sans-serif !important; letter-spacing: 0.45px; } /* HEADER */ #header, #header .header-nav, #header .header-top { background: var(--gg-bg-deep) !important; color: var(--gg-text) !important; } #header { border-bottom: 1px solid var(--gg-border) !important; box-shadow: 0 4px 18px rgba(0,0,0,0.36) !important; } #header a, #header .material-icons, #header .header-nav .blockcart, #header .header-nav .cart-preview, #header .header-nav .user-info a, #header .language-selector, #header .currency-selector { color: var(--gg-text) !important; } #header a:hover, #header a:focus, #header .material-icons:hover { color: var(--gg-blue) !important; } /* BARRE DE RECHERCHE */ .search-widget form input[type="text"], #search_widget form input[type="text"] { background: #101824 !important; color: #ffffff !important; border: 1px solid var(--gg-border) !important; border-radius: 9px !important; box-shadow: none !important; } .search-widget form input[type="text"]::placeholder, #search_widget form input[type="text"]::placeholder { color: #c9d3df !important; } .search-widget form button[type="submit"], #search_widget form button[type="submit"] { color: var(--gg-blue) !important; } /* MENU PRINCIPAL */ #_desktop_top_menu, #top-menu, .top-menu { font-family: 'Acme', Verdana, Arial, sans-serif !important; } #_desktop_top_menu .top-menu[data-depth="0"] > li, .top-menu[data-depth="0"] > li { position: relative !important; } #_desktop_top_menu .top-menu[data-depth="0"] > li > a, .top-menu[data-depth="0"] > li > a, #header .top-menu a[data-depth="0"] { color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.45px !important; text-transform: uppercase !important; padding: 14px 11px !important; border-radius: 8px !important; } #_desktop_top_menu .top-menu[data-depth="0"] > li:hover > a, #_desktop_top_menu .top-menu[data-depth="0"] > li:focus-within > a, .top-menu[data-depth="0"] > li:hover > a, .top-menu[data-depth="0"] > li:focus-within > a { background: var(--gg-panel-soft) !important; color: var(--gg-blue) !important; } /* Pont invisible entre le menu et le sous-menu pour éviter la fermeture au hover */ @media (min-width: 768px) { #_desktop_top_menu .top-menu[data-depth="0"] > li::after, .top-menu[data-depth="0"] > li::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; background: transparent; pointer-events: auto; } #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu, #header .top-menu[data-depth="0"] > li > .sub-menu, .top-menu[data-depth="0"] > li > .sub-menu { top: calc(100% - 1px) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; margin-top: 0 !important; width: max-content !important; min-width: 230px !important; max-width: 420px !important; padding: 13px 12px !important; background: var(--gg-panel) !important; border: 1px solid var(--gg-border) !important; border-radius: var(--gg-radius) !important; box-shadow: var(--gg-shadow) !important; z-index: 9999 !important; } #_desktop_top_menu .top-menu[data-depth="0"] > li:hover > .sub-menu, #_desktop_top_menu .top-menu[data-depth="0"] > li:focus-within > .sub-menu, #header .top-menu[data-depth="0"] > li:hover > .sub-menu, #header .top-menu[data-depth="0"] > li:focus-within > .sub-menu, .top-menu[data-depth="0"] > li:hover > .sub-menu, .top-menu[data-depth="0"] > li:focus-within > .sub-menu { display: block !important; visibility: visible !important; opacity: 1 !important; } #_desktop_top_menu .top-menu .sub-menu ul, #header .top-menu .sub-menu ul, .top-menu .sub-menu ul { background: transparent !important; margin: 0 !important; padding: 0 !important; } #_desktop_top_menu .top-menu .sub-menu li, #header .top-menu .sub-menu li, .top-menu .sub-menu li { position: relative !important; } #_desktop_top_menu .top-menu .sub-menu a, #header .top-menu .sub-menu a, .top-menu .sub-menu a { display: block !important; width: 100% !important; color: #ffffff !important; text-align: center !important; white-space: nowrap !important; padding: 9px 16px !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.25 !important; } #_desktop_top_menu .top-menu .sub-menu a:hover, #header .top-menu .sub-menu a:hover, .top-menu .sub-menu a:hover { background: rgba(0,174,239,0.13) !important; color: var(--gg-blue) !important; } } /* Tous les hyperliens importants en blanc sur fond sombre */ #page a, #wrapper a, #footer a, .block_newsletter a, #header a { color: #ffffff !important; } #page a:hover, #wrapper a:hover, #footer a:hover, .block_newsletter a:hover, #header a:hover { color: var(--gg-blue) !important; } /* ZONES DE TEXTE / PANNEAUX - légèrement plus clairs que le fond */ #content-wrapper .page-content, #content-wrapper .block-category, #content-wrapper #custom-text, #content-wrapper .custom-text, #content-wrapper .category-top-menu, #content-wrapper .subcategories, #content-wrapper .card, #content-wrapper .box, #content-wrapper .page-cms, #content-wrapper .contact-form, #content-wrapper .product-information, #content-wrapper .product-description, #main .page-content, #main #custom-text, #products, .featured-products, .product-accessories, .product-miniature .thumbnail-container, .product-miniature .product-description { background: var(--gg-panel) !important; color: var(--gg-text-soft) !important; border-color: var(--gg-border) !important; } #content-wrapper .page-content p, #content-wrapper .block-category p, #content-wrapper #custom-text p, #content-wrapper .custom-text p, #content-wrapper .card p, #content-wrapper .page-cms p, #main .page-content p, #main #custom-text p, #products p, .featured-products p, .product-miniature .product-description, .product-miniature .product-title a { color: var(--gg-text-soft) !important; } #content-wrapper h1, #content-wrapper h2, #content-wrapper h3, #main h1, #main h2, #main h3, .product-title a, .products-section-title, .featured-products h2 { color: #ffffff !important; } .block-category, #custom-text, .custom-text, .page-content.card, .card, .box { border: 1px solid var(--gg-border) !important; border-radius: var(--gg-radius) !important; box-shadow: 0 8px 22px rgba(0,0,0,0.20) !important; } /* Boutons */ .btn-primary, button.btn-primary, a.btn-primary, input.btn-primary { background: linear-gradient(135deg, var(--gg-blue), var(--gg-blue-dark)) !important; border: none !important; color: #ffffff !important; border-radius: 10px !important; font-weight: 700 !important; } .btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover, input.btn-primary:hover { color: #ffffff !important; filter: brightness(1.08); } .price, .product-price, .product-price-and-shipping { color: var(--gg-gold) !important; font-weight: 700 !important; } /* FOOTER / NEWSLETTER - lisibilité */ .block_newsletter, #footer, #footer .footer-container { background: var(--gg-bg-deep) !important; color: var(--gg-text-soft) !important; border-top: 1px solid var(--gg-border) !important; } .block_newsletter, #footer .footer-container { padding-top: 24px !important; } .block_newsletter h3, .block_newsletter .h3, .block_newsletter p.h3, #footer .h3, #footer .h4, #footer .block-contact-title, #footer .myaccount-title, #footer .links .h3, #footer .links .h4, #footer .blockcms-title, #footer .footer-container .links .h3, #footer .footer-container .links .h4, #footer .footer-container .h3, #footer .footer-container .h4 { color: #ffffff !important; opacity: 1 !important; font-weight: 700 !important; text-transform: uppercase !important; } #footer p, #footer li, #footer span, #footer .contact-rich, #footer .block-contact, #footer .footer-container, .block_newsletter p, .block_newsletter span, .block_newsletter .conditions { color: var(--gg-text-soft) !important; opacity: 1 !important; } #footer a, #footer .links a, #footer .account-list a, #footer .block-contact a { color: #ffffff !important; opacity: 1 !important; } #footer a:hover, #footer .links a:hover, #footer .account-list a:hover, #footer .block-contact a:hover { color: var(--gg-blue) !important; } .block_newsletter input[type="email"], .block_newsletter input[type="text"] { background: #101824 !important; color: #ffffff !important; border: 1px solid var(--gg-border) !important; border-radius: 8px !important; } .block_newsletter input::placeholder { color: #c7d2de !important; } /* Formulaires généraux */ input, textarea, select, .form-control { background-color: #101824 !important; color: #ffffff !important; border-color: var(--gg-border) !important; } input::placeholder, textarea::placeholder { color: #c7d2de !important; } /* Mobile: ne pas casser le menu classique */ @media (max-width: 767px) { #header .top-menu a, .top-menu a { color: #ffffff !important; text-align: left !important; } #mobile_top_menu_wrapper, #mobile_top_menu_wrapper .top-menu, #mobile_top_menu_wrapper .top-menu .sub-menu { background: var(--gg-panel) !important; color: #ffffff !important; } } /* ========================================================= CORRECTIF v1.0.6 - MENU DÉROULANT SANS SUPERPOSITION - empêche les sous-catégories de se chevaucher - force les items du menu à se placer proprement en grille/flex - garde le texte centré - ajuste la largeur selon les textes plus longs ========================================================= */ @media (min-width: 768px) { /* Le menu principal reste au-dessus du slider et du contenu */ #header, #_desktop_top_menu, #top-menu, #header .header-top { overflow: visible !important; z-index: 10000 !important; } /* Sous-menu de premier niveau : plus large et flexible */ #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu, #header .top-menu[data-depth="0"] > li > .sub-menu, .top-menu[data-depth="0"] > li > .sub-menu { width: auto !important; min-width: max-content !important; max-width: calc(100vw - 60px) !important; padding: 14px 16px !important; overflow: visible !important; } /* Annule les colonnes/floats du thème Classic qui peuvent superposer les items */ #_desktop_top_menu .top-menu .sub-menu ul, #header .top-menu .sub-menu ul, .top-menu .sub-menu ul, #_desktop_top_menu .sub-menu .top-menu, #header .sub-menu .top-menu, .sub-menu .top-menu { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; gap: 10px 14px !important; width: auto !important; min-width: 0 !important; max-width: calc(100vw - 95px) !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: both !important; } /* Chaque sous-catégorie prend son espace, sans chevauchement */ #_desktop_top_menu .top-menu .sub-menu li, #header .top-menu .sub-menu li, .top-menu .sub-menu li { display: flex !important; float: none !important; clear: none !important; position: relative !important; width: auto !important; min-width: 150px !important; max-width: 260px !important; margin: 0 !important; padding: 0 !important; flex: 0 1 auto !important; box-sizing: border-box !important; } /* Texte centré et lisible dans chaque item */ #_desktop_top_menu .top-menu .sub-menu a, #header .top-menu .sub-menu a, .top-menu .sub-menu a, #_desktop_top_menu .top-menu .sub-menu li a, #header .top-menu .sub-menu li a, .top-menu .sub-menu li a { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; min-height: 38px !important; padding: 9px 14px !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; line-height: 1.25 !important; box-sizing: border-box !important; } /* Les sous-sous-menus restent dans le flux au lieu d'apparaître par-dessus */ #_desktop_top_menu .top-menu .sub-menu .sub-menu, #header .top-menu .sub-menu .sub-menu, .top-menu .sub-menu .sub-menu { position: static !important; display: flex !important; visibility: visible !important; opacity: 1 !important; transform: none !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 6px 0 0 0 !important; padding: 6px !important; box-shadow: none !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 8px !important; background: rgba(255,255,255,0.04) !important; } /* Pour les titres/parents avec plusieurs enfants, éviter que tout se colle */ #_desktop_top_menu .top-menu .sub-menu .category, #header .top-menu .sub-menu .category, .top-menu .sub-menu .category { gap: 6px !important; } } /* ========================================================= CORRECTIF v1.0.7 - SOUS-MENUS EN CASCADE AU HOVER Objectif: - le menu principal affiche seulement le niveau suivant; - les catégories qui ont des enfants ouvrent un panneau latéral au hover; - le menu est moins long et plus facile à naviguer; - le texte reste lisible et centré. ========================================================= */ @media (min-width: 768px) { /* Le header doit laisser sortir les panneaux latéraux */ #header, #header .header-top, #_desktop_top_menu, #_desktop_top_menu .menu, #_desktop_top_menu .top-menu, #top-menu { overflow: visible !important; } /* Sous-menu du premier niveau : panneau propre, pas trop large */ #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu, #header .top-menu[data-depth="0"] > li > .sub-menu, .top-menu[data-depth="0"] > li > .sub-menu { width: max-content !important; min-width: 280px !important; max-width: 360px !important; padding: 12px !important; overflow: visible !important; } /* Niveau 1 seulement : affichage vertical, pour ne plus tout étirer en liste géante */ #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu > ul, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu > ul.top-menu, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu ul[data-depth="1"], #header .top-menu[data-depth="0"] > li > .sub-menu > ul, #header .top-menu[data-depth="0"] > li > .sub-menu > ul.top-menu, #header .top-menu[data-depth="0"] > li > .sub-menu ul[data-depth="1"], .top-menu[data-depth="0"] > li > .sub-menu > ul, .top-menu[data-depth="0"] > li > .sub-menu > ul.top-menu, .top-menu[data-depth="0"] > li > .sub-menu ul[data-depth="1"] { display: block !important; flex-wrap: nowrap !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; float: none !important; } /* Items du premier niveau dans le dropdown */ #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu > ul > li, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu ul[data-depth="1"] > li, #header .top-menu[data-depth="0"] > li > .sub-menu > ul > li, #header .top-menu[data-depth="0"] > li > .sub-menu ul[data-depth="1"] > li, .top-menu[data-depth="0"] > li > .sub-menu > ul > li, .top-menu[data-depth="0"] > li > .sub-menu ul[data-depth="1"] > li { display: block !important; position: relative !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 0 5px 0 !important; padding: 0 !important; float: none !important; clear: both !important; } /* Liens du premier niveau: centrés et faciles à cliquer */ #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu > ul > li > a, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu ul[data-depth="1"] > li > a, #header .top-menu[data-depth="0"] > li > .sub-menu > ul > li > a, #header .top-menu[data-depth="0"] > li > .sub-menu ul[data-depth="1"] > li > a, .top-menu[data-depth="0"] > li > .sub-menu > ul > li > a, .top-menu[data-depth="0"] > li > .sub-menu ul[data-depth="1"] > li > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 38px !important; padding: 9px 34px 9px 18px !important; text-align: center !important; white-space: nowrap !important; line-height: 1.2 !important; } /* Sous-menus des sous-catégories : cachés par défaut */ #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li > .sub-menu, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li > .collapse, #header .top-menu[data-depth="0"] > li > .sub-menu li > .sub-menu, #header .top-menu[data-depth="0"] > li > .sub-menu li > .collapse, .top-menu[data-depth="0"] > li > .sub-menu li > .sub-menu, .top-menu[data-depth="0"] > li > .sub-menu li > .collapse { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; top: 0 !important; left: calc(100% + 8px) !important; right: auto !important; transform: none !important; width: max-content !important; min-width: 250px !important; max-width: 360px !important; margin: 0 !important; padding: 12px !important; background: var(--gg-panel) !important; border: 1px solid var(--gg-border) !important; border-radius: var(--gg-radius) !important; box-shadow: var(--gg-shadow) !important; z-index: 10020 !important; overflow: visible !important; } /* Afficher le panneau latéral seulement au hover/focus */ #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li:hover > .sub-menu, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li:focus-within > .sub-menu, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li:hover > .collapse, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li:focus-within > .collapse, #header .top-menu[data-depth="0"] > li > .sub-menu li:hover > .sub-menu, #header .top-menu[data-depth="0"] > li > .sub-menu li:focus-within > .sub-menu, #header .top-menu[data-depth="0"] > li > .sub-menu li:hover > .collapse, #header .top-menu[data-depth="0"] > li > .sub-menu li:focus-within > .collapse, .top-menu[data-depth="0"] > li > .sub-menu li:hover > .sub-menu, .top-menu[data-depth="0"] > li > .sub-menu li:focus-within > .sub-menu, .top-menu[data-depth="0"] > li > .sub-menu li:hover > .collapse, .top-menu[data-depth="0"] > li > .sub-menu li:focus-within > .collapse { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Listes à l'intérieur des panneaux latéraux : verticales et non superposées */ #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li > .sub-menu ul, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li > .collapse ul, #header .top-menu[data-depth="0"] > li > .sub-menu li > .sub-menu ul, #header .top-menu[data-depth="0"] > li > .sub-menu li > .collapse ul, .top-menu[data-depth="0"] > li > .sub-menu li > .sub-menu ul, .top-menu[data-depth="0"] > li > .sub-menu li > .collapse ul { display: block !important; flex-wrap: nowrap !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li > .sub-menu li, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li > .collapse li, #header .top-menu[data-depth="0"] > li > .sub-menu li > .sub-menu li, #header .top-menu[data-depth="0"] > li > .sub-menu li > .collapse li, .top-menu[data-depth="0"] > li > .sub-menu li > .sub-menu li, .top-menu[data-depth="0"] > li > .sub-menu li > .collapse li { display: block !important; position: relative !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 0 5px 0 !important; float: none !important; } #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li > .sub-menu a, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li > .collapse a, #header .top-menu[data-depth="0"] > li > .sub-menu li > .sub-menu a, #header .top-menu[data-depth="0"] > li > .sub-menu li > .collapse a, .top-menu[data-depth="0"] > li > .sub-menu li > .sub-menu a, .top-menu[data-depth="0"] > li > .sub-menu li > .collapse a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 36px !important; padding: 8px 28px 8px 14px !important; text-align: center !important; white-space: nowrap !important; } /* Petite flèche visuelle pour les catégories qui ouvrent un autre panneau */ #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li:has(> .sub-menu) > a::after, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li:has(> .collapse) > a::after, #header .top-menu[data-depth="0"] > li > .sub-menu li:has(> .sub-menu) > a::after, #header .top-menu[data-depth="0"] > li > .sub-menu li:has(> .collapse) > a::after, .top-menu[data-depth="0"] > li > .sub-menu li:has(> .sub-menu) > a::after, .top-menu[data-depth="0"] > li > .sub-menu li:has(> .collapse) > a::after { content: "›" !important; position: absolute !important; right: 13px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--gg-blue) !important; font-size: 20px !important; line-height: 1 !important; } /* Petit pont invisible entre un item et son panneau latéral pour éviter la fermeture */ #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li:has(> .sub-menu)::after, #_desktop_top_menu .top-menu[data-depth="0"] > li > .sub-menu li:has(> .collapse)::after, #header .top-menu[data-depth="0"] > li > .sub-menu li:has(> .sub-menu)::after, #header .top-menu[data-depth="0"] > li > .sub-menu li:has(> .collapse)::after, .top-menu[data-depth="0"] > li > .sub-menu li:has(> .sub-menu)::after, .top-menu[data-depth="0"] > li > .sub-menu li:has(> .collapse)::after { content: "" !important; position: absolute !important; top: 0 !important; right: -12px !important; width: 14px !important; height: 100% !important; background: transparent !important; } /* Si un menu se retrouve trop proche du bord droit, garder une marge sécuritaire */ #_desktop_top_menu .top-menu[data-depth="0"] > li:last-child > .sub-menu, #_desktop_top_menu .top-menu[data-depth="0"] > li:nth-last-child(2) > .sub-menu, #header .top-menu[data-depth="0"] > li:last-child > .sub-menu, #header .top-menu[data-depth="0"] > li:nth-last-child(2) > .sub-menu { left: auto !important; right: 0 !important; transform: none !important; } #_desktop_top_menu .top-menu[data-depth="0"] > li:last-child > .sub-menu li > .sub-menu, #_desktop_top_menu .top-menu[data-depth="0"] > li:last-child > .sub-menu li > .collapse, #_desktop_top_menu .top-menu[data-depth="0"] > li:nth-last-child(2) > .sub-menu li > .sub-menu, #_desktop_top_menu .top-menu[data-depth="0"] > li:nth-last-child(2) > .sub-menu li > .collapse, #header .top-menu[data-depth="0"] > li:last-child > .sub-menu li > .sub-menu, #header .top-menu[data-depth="0"] > li:last-child > .sub-menu li > .collapse, #header .top-menu[data-depth="0"] > li:nth-last-child(2) > .sub-menu li > .sub-menu, #header .top-menu[data-depth="0"] > li:nth-last-child(2) > .sub-menu li > .collapse { left: auto !important; right: calc(100% + 8px) !important; } } /* ========================================================= CORRECTIF v1.0.8 - LISIBILITÉ TEXTES / HOVER PRODUITS / DESCRIPTIONS Objectif: - enlever les fonds blancs/surlignages importés par les blocs HTML; - garder le texte blanc dans les zones sombres; - rendre le panneau de hover produit lisible si son fond reste blanc; - fondre le contour des descriptions produit avec le thème sombre. ========================================================= */ /* 1) Retirer les surlignages blancs dans les blocs de texte du site */ #custom-text span, #custom-text p, #custom-text strong, #custom-text em, .custom-text span, .custom-text p, .custom-text strong, .custom-text em, .page-cms span, .page-cms p, .page-cms strong, .page-cms em, .cms-page span, .cms-page p, .cms-page strong, .cms-page em, .block-category span, .block-category p, .block-category strong, .block-category em, .category-description span, .category-description p, .category-description strong, .category-description em { background: transparent !important; background-color: transparent !important; color: var(--gg-text-soft) !important; text-shadow: none !important; } #custom-text h1, #custom-text h2, #custom-text h3, .custom-text h1, .custom-text h2, .custom-text h3, .page-cms h1, .page-cms h2, .page-cms h3, .cms-page h1, .cms-page h2, .cms-page h3, .block-category h1, .block-category h2, .block-category h3, .category-description h1, .category-description h2, .category-description h3 { background: transparent !important; background-color: transparent !important; color: #ffffff !important; } #custom-text mark, .custom-text mark, .page-cms mark, .cms-page mark, .block-category mark, .category-description mark { background: transparent !important; color: #ffffff !important; } /* Protection ciblée contre les styles inline du type background-color:white dans l'éditeur */ #custom-text [style*="background"], .custom-text [style*="background"], .page-cms [style*="background"], .cms-page [style*="background"], .block-category [style*="background"], .category-description [style*="background"] { background: transparent !important; background-color: transparent !important; } /* 2) Texte principal blanc/lisible dans les panneaux sombres */ #custom-text, .custom-text, .page-cms, .cms-page, .block-category, .category-description { color: var(--gg-text-soft) !important; } #custom-text strong, .custom-text strong, .page-cms strong, .cms-page strong, .block-category strong, .category-description strong { color: #ffffff !important; font-weight: 700 !important; } /* 3) Hover des fiches produits: si le fond reste blanc, le texte devient noir */ .product-miniature .thumbnail-container .highlighted-informations, .product-miniature .thumbnail-container:hover .highlighted-informations, .product-miniature .highlighted-informations, .product-miniature .highlighted-informations .quick-view, .product-miniature .highlighted-informations .variant-links { background: #ffffff !important; background-color: #ffffff !important; color: #111827 !important; border-color: rgba(0,0,0,0.10) !important; } .product-miniature .highlighted-informations a, .product-miniature .highlighted-informations span, .product-miniature .highlighted-informations i, .product-miniature .highlighted-informations .material-icons, .product-miniature .highlighted-informations .quick-view, .product-miniature .highlighted-informations .quick-view span { color: #111827 !important; text-shadow: none !important; } .product-miniature .highlighted-informations a:hover, .product-miniature .highlighted-informations .quick-view:hover, .product-miniature .highlighted-informations .quick-view:hover span, .product-miniature .highlighted-informations a:hover i { color: var(--gg-blue-dark) !important; } .product-miniature .variant-links, .product-miniature .variant-links a, .product-miniature .variant-links span { color: #111827 !important; } /* 4) Contour et zone de description produit qui se fondent avec le fond */ body#product #main, body#product #content, body#product .page-content, body#product .product-container, body#product .product-information, body#product .tabs, body#product .tab-content, body#product .tab-pane, body#product .product-description, body#product .product-description-short, .page-product #main, .page-product #content, .page-product .page-content, .page-product .product-container, .page-product .product-information, .page-product .tabs, .page-product .tab-content, .page-product .tab-pane, .page-product .product-description, .page-product .product-description-short, .product-detail, .product-description, #description, #product-details { background: var(--gg-panel) !important; background-color: var(--gg-panel) !important; color: var(--gg-text-soft) !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: none !important; } body#product .tabs, .page-product .tabs, .product-detail, #description, #product-details { border: 1px solid rgba(255,255,255,0.08) !important; border-radius: var(--gg-radius) !important; } body#product .tabs .nav-tabs, .page-product .tabs .nav-tabs, .tabs .nav-tabs { border-bottom: 1px solid rgba(255,255,255,0.10) !important; background: transparent !important; } body#product .tabs .nav-tabs .nav-link, .page-product .tabs .nav-tabs .nav-link, .tabs .nav-tabs .nav-link { color: var(--gg-text-soft) !important; background: transparent !important; border-color: transparent !important; } body#product .tabs .nav-tabs .nav-link.active, .page-product .tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link.active { color: #ffffff !important; background: var(--gg-panel-soft) !important; border-color: rgba(255,255,255,0.12) !important; } body#product .product-description *, body#product .product-description-short *, body#product .tab-content *, .page-product .product-description *, .page-product .product-description-short *, .page-product .tab-content * { background-color: transparent !important; color: inherit !important; } body#product .product-description h1, body#product .product-description h2, body#product .product-description h3, body#product .product-description h4, body#product .product-description strong, .page-product .product-description h1, .page-product .product-description h2, .page-product .product-description h3, .page-product .product-description h4, .page-product .product-description strong { color: #ffffff !important; } body#product .product-description p, body#product .product-description li, body#product .product-description span, body#product .product-description-short p, body#product .product-description-short span, .page-product .product-description p, .page-product .product-description li, .page-product .product-description span, .page-product .product-description-short p, .page-product .product-description-short span { color: var(--gg-text-soft) !important; } /* Liens dans la description: blancs par défaut, bleu au hover */ body#product .product-description a, .page-product .product-description a, .product-description a { color: #ffffff !important; text-decoration: underline; text-underline-offset: 3px; } body#product .product-description a:hover, .page-product .product-description a:hover, .product-description a:hover { color: var(--gg-blue) !important; } /* Ne pas affecter les images ou miniatures produit */ .product-miniature img, .product-cover img, .product-images img, .js-qv-product-cover, .thumb-container img { background: transparent !important; color: inherit !important; } /* ========================================================= CORRECTIF v1.0.10 - RESTAURATION CONTENU + CORRECTIFS SÛRS Base: retour sur la version 1.0.8 qui affichait correctement le contenu. Objectif: - éviter l'écran noir sous le menu; - conserver langue/devise/panier en gris pâle; - corriger les sous-catégories blanches sans toucher aux modules d'accueil; - harmoniser le footer sans cacher les contenus. ========================================================= */ /* 0) Restauration sécurisée de tout le contenu sous le menu */ #wrapper, #main, main, #content, #content-wrapper, .page-home, .page-index, #carousel, .carousel, .carousel-inner, .carousel-item, #custom-text, .custom-text, .featured-products, #products, .products, .product-miniature, .block-category, #subcategories, .subcategories, #footer, .block_newsletter { visibility: visible !important; opacity: 1 !important; } #wrapper, #main, main, #content, #content-wrapper { display: block !important; position: relative !important; z-index: 1 !important; background: var(--gg-bg) !important; color: var(--gg-text-soft) !important; } #header { position: relative !important; z-index: 50 !important; } #_desktop_top_menu, #_desktop_top_menu .top-menu, #header .top-menu { position: relative !important; z-index: 60 !important; } #_desktop_top_menu .sub-menu, #header .top-menu .sub-menu, .top-menu .sub-menu { z-index: 1000 !important; } /* Le menu ne doit jamais créer un panneau noir pleine hauteur */ #_desktop_top_menu .sub-menu, #header .top-menu .sub-menu, .top-menu .sub-menu { height: auto !important; min-height: 0 !important; max-height: none !important; } /* Les modules de la page d'accueil doivent rester visibles */ .carousel, .carousel .carousel-inner, .carousel .carousel-item, .carousel .carousel-item.active, .carousel img, .carousel .carousel-item img, #carousel img, #custom-text, .custom-text, .featured-products, .featured-products .products, .product-miniature .thumbnail-container { display: block !important; visibility: visible !important; opacity: 1 !important; } .carousel img, #carousel img, .product-miniature img { max-width: 100% !important; height: auto !important; } /* 1) Barre du haut: langue, devise, compte et panier en gris pâle */ #header .header-nav, #header .header-nav a, #header .header-nav span, #header .header-nav button, #header .header-nav .material-icons, #header .header-nav i, #_desktop_language_selector, #_desktop_language_selector a, #_desktop_language_selector span, #_desktop_language_selector button, #_desktop_language_selector .expand-more, #_desktop_currency_selector, #_desktop_currency_selector a, #_desktop_currency_selector span, #_desktop_currency_selector button, #_desktop_currency_selector .expand-more, #_desktop_user_info, #_desktop_user_info a, #_desktop_cart, #_desktop_cart a, #_desktop_cart span, #_desktop_cart .material-icons, #_desktop_cart .cart-products-count, #_desktop_cart .shopping-cart { color: #d8e1ec !important; background: transparent !important; opacity: 1 !important; } #header .header-nav a:hover, #header .header-nav button:hover, #_desktop_language_selector a:hover, #_desktop_currency_selector a:hover, #_desktop_cart a:hover, #_desktop_user_info a:hover { color: var(--gg-blue) !important; } /* Menus déroulants langue/devise */ #header .header-nav .dropdown-menu, #_desktop_language_selector .dropdown-menu, #_desktop_currency_selector .dropdown-menu, .language-selector .dropdown-menu, .currency-selector .dropdown-menu { background: var(--gg-panel) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 8px !important; box-shadow: var(--gg-shadow) !important; } #header .header-nav .dropdown-menu a, #header .header-nav .dropdown-menu button, #header .header-nav .dropdown-menu span, #_desktop_language_selector .dropdown-menu a, #_desktop_currency_selector .dropdown-menu a, .language-selector .dropdown-menu a, .currency-selector .dropdown-menu a { color: #ffffff !important; background: transparent !important; } #header .header-nav .dropdown-menu a:hover, #header .header-nav .dropdown-menu button:hover, #_desktop_language_selector .dropdown-menu a:hover, #_desktop_currency_selector .dropdown-menu a:hover { color: var(--gg-blue) !important; background: rgba(0,174,239,0.10) !important; } /* 2) Sous-catégories et menus de catégorie dans les pages: sombre sans masquer le contenu */ #subcategories, .subcategories, .block-categories, .block-categories .category-top-menu, .block-categories .category-sub-menu, .block-categories .collapse, #left-column .block-categories, #right-column .block-categories, #left-column .card, #right-column .card { background: var(--gg-panel) !important; color: var(--gg-text-soft) !important; border-color: rgba(255,255,255,0.08) !important; } #subcategories, .subcategories { border: 1px solid rgba(255,255,255,0.08) !important; border-radius: var(--gg-radius) !important; padding: 16px !important; } #subcategories ul, .subcategories ul { background: transparent !important; } #subcategories li, .subcategories li, .category-miniature { background: var(--gg-panel-soft) !important; color: var(--gg-text-soft) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 10px !important; overflow: hidden !important; } #subcategories .subcategory-image, .subcategories .subcategory-image, .category-miniature .subcategory-image, .category-thumbnail, .category-cover { background: var(--gg-panel-soft) !important; } #subcategories a, #subcategories .subcategory-name, .subcategories a, .subcategories .subcategory-name, .block-categories a, .block-categories .category-sub-link, .block-categories .category-sub-menu a { color: #ffffff !important; background: transparent !important; } #subcategories a:hover, .subcategories a:hover, .block-categories a:hover, .block-categories .category-sub-link:hover { color: var(--gg-blue) !important; background: rgba(0,174,239,0.08) !important; } /* 3) Footer/pied de page: sombre mais lisible, sans toucher aux containers du contenu principal */ #footer, #footer .footer-container, #footer .block_newsletter, .block_newsletter { background: #05070a !important; color: var(--gg-text-soft) !important; border-top: 1px solid rgba(255,255,255,0.10) !important; } #footer h1, #footer h2, #footer h3, #footer h4, #footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .title, #footer .block-contact-title, #footer .myaccount-title, #footer .links .h3, #footer .links .h4, .block_newsletter h3, .block_newsletter .h3, .block_newsletter p.h3, .block_newsletter .title { color: #ffffff !important; background: transparent !important; opacity: 1 !important; } #footer p, #footer li, #footer span, #footer address, .block_newsletter p, .block_newsletter span, .block_newsletter .conditions { color: var(--gg-text-soft) !important; opacity: 1 !important; } #footer a, #footer .links a, #footer .account-list a, #footer .block-contact a, .block_newsletter a { color: #ffffff !important; opacity: 1 !important; background: transparent !important; } #footer a:hover, #footer .links a:hover, #footer .account-list a:hover, #footer .block-contact a:hover, .block_newsletter a:hover { color: var(--gg-blue) !important; } /* 4) Panier / résumé panier */ .cart-overview, .cart-summary, .cart-grid-body, .cart-grid-right, .cart-detailed-totals, .cart-summary-line { background: var(--gg-panel) !important; color: var(--gg-text-soft) !important; border-color: rgba(255,255,255,0.08) !important; } .cart-overview a, .cart-summary a, .cart-grid-body a, .cart-grid-right a, .cart-summary-line span, .cart-summary-line .value, .cart-summary-line .label { color: #ffffff !important; } /* ========================================================= GG3D v1.0.13 - Correctifs ciblés seulement Base stable: v1.0.10 Objectif: corriger panier, hover produit, pastilles de couleur, textes sombres, sous-catégories et footer sans cacher le contenu. ========================================================= */ /* Sécurité anti-page noire: ne jamais masquer les sections principales */ #page, #wrapper, #header, #footer, #main, main, #content, #content-wrapper, .page-home, .featured-products, .carousel, #products, .product-container, .product-information, .product-actions, .block_newsletter, .breadcrumb, .container { visibility: visible !important; opacity: 1 !important; } /* Barre du haut: langue, devise, compte et panier lisibles, sans bloc blanc */ #header .header-nav, #header .header-nav .right-nav, #header .header-nav .user-info, #header .header-nav .language-selector, #header .header-nav .currency-selector, #header .header-nav #_desktop_cart, #header .header-nav .blockcart, #header .header-nav .cart-preview, #_desktop_cart, #_desktop_cart .blockcart, #_desktop_cart .cart-preview, #_desktop_cart .cart-preview.active, #_desktop_cart .cart-preview.inactive, .blockcart, .cart-preview { background: transparent !important; background-color: transparent !important; color: #d8e1ec !important; border: 0 !important; box-shadow: none !important; } #header .header-nav a, #header .header-nav button, #header .header-nav span, #header .header-nav i, #header .header-nav .material-icons, #_desktop_cart a, #_desktop_cart span, #_desktop_cart i, #_desktop_cart .material-icons, .blockcart a, .blockcart span, .blockcart i, .blockcart .material-icons, .cart-preview a, .cart-preview span, .cart-preview i, .cart-preview .material-icons { color: #d8e1ec !important; text-shadow: none !important; } #header .header-nav a:hover, #header .header-nav button:hover, #_desktop_cart a:hover, .blockcart a:hover, .cart-preview a:hover { color: #00aeef !important; } /* Menus déroulants langue/devise: sombre et lisible */ #header .header-nav .dropdown-menu, #header .header-nav .dropdown-menu ul, #header .header-nav .dropdown-menu li, .language-selector .dropdown-menu, .currency-selector .dropdown-menu { background: #121a26 !important; color: #f5f8fc !important; border: 1px solid rgba(255,255,255,0.14) !important; } #header .header-nav .dropdown-menu a, .language-selector .dropdown-menu a, .currency-selector .dropdown-menu a { color: #f5f8fc !important; } #header .header-nav .dropdown-menu a:hover, .language-selector .dropdown-menu a:hover, .currency-selector .dropdown-menu a:hover { background: #172033 !important; color: #00aeef !important; } /* Sous-catégories / panneaux qui étaient blancs */ #subcategories, .subcategories, .block-categories, .category-sub-menu, #left-column .block, #left-column .links, #right-column .block, #right-column .links { background: #121a26 !important; border: 1px solid rgba(255,255,255,0.12) !important; color: #f5f8fc !important; box-shadow: none !important; } #subcategories ul li, #subcategories ul li .subcategory-image, #subcategories ul li .subcategory-name, .subcategories ul li, .subcategories ul li .subcategory-image, .subcategories ul li .subcategory-name, .block-categories a, .category-sub-menu a { background: #172033 !important; color: #f5f8fc !important; border-color: rgba(255,255,255,0.12) !important; } #subcategories a, .subcategories a, .block-categories a, .category-sub-menu a { color: #f5f8fc !important; } #subcategories a:hover, .subcategories a:hover, .block-categories a:hover, .category-sub-menu a:hover { color: #00aeef !important; } /* Hover produit: garder le panneau lisible. Si le thème affiche un fond blanc, le texte devient noir. */ .product-miniature .highlighted-informations, .product-miniature:hover .highlighted-informations, #products .product-miniature .highlighted-informations, .featured-products .product-miniature .highlighted-informations { background: #ffffff !important; color: #111827 !important; border-top: 1px solid rgba(0,0,0,0.12) !important; opacity: 1 !important; visibility: visible !important; } .product-miniature .highlighted-informations a, .product-miniature .highlighted-informations span, .product-miniature .highlighted-informations i, .product-miniature .highlighted-informations .material-icons, .product-miniature .highlighted-informations .quick-view, .product-miniature .highlighted-informations .quick-view i, .product-miniature .highlighted-informations .quick-view .material-icons { color: #111827 !important; text-shadow: none !important; } .product-miniature .highlighted-informations a:hover, .product-miniature .highlighted-informations .quick-view:hover, .product-miniature .highlighted-informations .quick-view:hover i, .product-miniature .highlighted-informations .quick-view:hover .material-icons { color: #0077b6 !important; } /* Pastilles/carrés de couleurs disponibles: visibles dans les cartes et fiches produit */ .product-miniature .variant-links, .product-miniature .highlighted-informations .variant-links, #products .variant-links, .featured-products .variant-links { background: transparent !important; color: inherit !important; } .product-miniature .variant-links a.color, .product-miniature .variant-links span.color, .product-miniature .variant-links .color, #products .variant-links a.color, #products .variant-links span.color, #products .variant-links .color, .featured-products .variant-links a.color, .featured-products .variant-links span.color, .featured-products .variant-links .color, .product-variants .color, .product-variants-item .color, .input-color + span.color, .input-color:checked + span.color { display: inline-block !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; padding: 0 !important; margin: 0 4px !important; border-radius: 50% !important; border: 2px solid rgba(255,255,255,0.85) !important; box-shadow: 0 1px 5px rgba(0,0,0,0.45) !important; text-indent: -9999px !important; overflow: hidden !important; vertical-align: middle !important; } .product-miniature .highlighted-informations .variant-links a.color, .product-miniature .highlighted-informations .variant-links span.color, .product-miniature .highlighted-informations .variant-links .color { border-color: rgba(17,24,39,0.55) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.95), 0 1px 5px rgba(0,0,0,0.35) !important; } /* Zones de description produit: contour fondu dans le thème sombre */ .product-information, .product-description, .product-description-short, .product-actions, .product-prices, .tabs, .tabs .tab-content, .product-tabs, #description, #product-description-short, .product-cover, .product-images, .card, .page-content.card, .page-cms, .contact-form, .contact-rich { background: #121a26 !important; color: #f5f8fc !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: none !important; } .product-information p, .product-information li, .product-information span, .product-description p, .product-description li, .product-description span, .product-description-short p, .product-description-short li, .tabs p, .tabs li, .tabs span, .page-content p, .page-content li, .page-content span { color: #d8e1ec !important; } .product-information h1, .product-information h2, .product-information h3, .product-description h1, .product-description h2, .product-description h3, .tabs h1, .tabs h2, .tabs h3 { color: #f5f8fc !important; } /* Formulaires/contact: textes trop sombres rendus lisibles */ label, .form-control-label, .col-form-label, .contact-form label, .contact-rich, .contact-rich .block, .contact-rich .block .data, .contact-rich .block .icon, .form-group, .form-group span, .form-control-comment, .help-block, .form-text, .text-muted { color: #d8e1ec !important; } .form-control, .input-group .form-control, select.form-control, textarea.form-control, input.form-control, .custom-select, .form-control-select { background: #0f1722 !important; color: #f5f8fc !important; border: 1px solid rgba(255,255,255,0.16) !important; } .form-control:focus, select.form-control:focus, textarea.form-control:focus, input.form-control:focus { border-color: #00aeef !important; box-shadow: 0 0 0 0.15rem rgba(0,174,239,0.18) !important; } /* Footer/pied de page harmonisé et lisible */ #footer, .footer-container, .footer-container .container, #footer .footer-container, .block_newsletter { background: #05070a !important; color: #d8e1ec !important; border-color: rgba(255,255,255,0.10) !important; } #footer .h3, #footer .h4, #footer h3, #footer h4, #footer .title, #footer .block-contact-title, #footer .links .h3, #footer .links .title, .block_newsletter .h3, .block_newsletter h3, .block_newsletter p:first-child { color: #f5f8fc !important; text-shadow: none !important; } #footer p, #footer li, #footer span, #footer .contact-rich, #footer .block-contact, #footer .block-contact li, #footer .block-contact span, .footer-container p, .footer-container li, .footer-container span, .block_newsletter p, .block_newsletter span { color: #d8e1ec !important; } #footer a, .footer-container a, .block_newsletter a { color: #ffffff !important; } #footer a:hover, .footer-container a:hover, .block_newsletter a:hover { color: #00aeef !important; } .block_newsletter input[type="email"], .block_newsletter .input-wrapper input { background: #121a26 !important; color: #f5f8fc !important; border: 1px solid rgba(255,255,255,0.16) !important; } /* Ne jamais transformer les blocs panier popup / modal en blanc géant */ #blockcart-modal, #blockcart-modal .modal-content, .modal-content, .popover, .dropdown-menu { color: #111827; } /* ========================================================= GG3D v1.0.14 - HOVER PRODUIT + PASTILLES DE COULEURS Objectif: - rendre le panneau qui apparaît au hover lisible; - afficher le mot "Aperçu" à côté de la loupe; - ne plus écraser les couleurs réelles des pastilles; - garder les pastilles visibles sur fond sombre ou clair. ========================================================= */ /* Panneau hover produit: sombre/translucide pour mieux s'intégrer au thème */ .product-miniature .thumbnail-container .highlighted-informations, .product-miniature .thumbnail-container:hover .highlighted-informations, .product-miniature .highlighted-informations, .product-miniature:hover .highlighted-informations, #products .product-miniature .highlighted-informations, .featured-products .product-miniature .highlighted-informations { background: rgba(18, 26, 38, 0.96) !important; background-color: rgba(18, 26, 38, 0.96) !important; color: #f5f8fc !important; border-top: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 -4px 14px rgba(0,0,0,0.22) !important; min-height: 72px !important; padding: 10px 8px !important; text-align: center !important; opacity: 1 !important; visibility: visible !important; } /* Bouton Aperçu / Quick view */ .product-miniature .highlighted-informations .quick-view, .product-miniature .highlighted-informations a.quick-view, #products .product-miniature .highlighted-informations .quick-view, .featured-products .product-miniature .highlighted-informations .quick-view { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: auto !important; min-height: 24px !important; margin: 0 auto 7px auto !important; padding: 0 !important; color: #ffffff !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important; /* cache le texte thème s'il est mal coloré; on ajoute Aperçu ci-dessous */ line-height: 1 !important; text-decoration: none !important; } .product-miniature .highlighted-informations .quick-view::after, .product-miniature .highlighted-informations a.quick-view::after, #products .product-miniature .highlighted-informations .quick-view::after, .featured-products .product-miniature .highlighted-informations .quick-view::after { content: "Aperçu" !important; display: inline-block !important; color: #ffffff !important; font-family: 'Acme', Verdana, Arial, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.3px !important; line-height: 1 !important; text-transform: uppercase !important; } .product-miniature .highlighted-informations .quick-view i, .product-miniature .highlighted-informations .quick-view .material-icons, .product-miniature .highlighted-informations a.quick-view i, .product-miniature .highlighted-informations a.quick-view .material-icons { display: inline-block !important; color: #00aeef !important; background: transparent !important; font-size: 22px !important; line-height: 1 !important; margin: 0 !important; text-indent: 0 !important; overflow: visible !important; } .product-miniature .highlighted-informations .quick-view:hover, .product-miniature .highlighted-informations a.quick-view:hover, .product-miniature .highlighted-informations .quick-view:hover::after, .product-miniature .highlighted-informations a.quick-view:hover::after { color: #00aeef !important; } /* Pastilles/carrés de couleurs: ne jamais forcer un fond blanc ou transparent sur les couleurs */ .product-miniature .highlighted-informations .variant-links, .product-miniature .variant-links, #products .product-miniature .variant-links, .featured-products .product-miniature .variant-links { display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 100% !important; min-height: 20px !important; margin: 2px auto 0 auto !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; } /* Important: on ne définit PAS background/background-color ici, pour laisser PrestaShop afficher la vraie couleur inline. */ .product-miniature .variant-links a.color, .product-miniature .variant-links span.color, .product-miniature .variant-links .color, .product-miniature .highlighted-informations .variant-links a.color, .product-miniature .highlighted-informations .variant-links span.color, .product-miniature .highlighted-informations .variant-links .color, #products .variant-links a.color, #products .variant-links span.color, #products .variant-links .color, .featured-products .variant-links a.color, .featured-products .variant-links span.color, .featured-products .variant-links .color, .product-variants .color, .product-variants-item .color, .input-color + span.color, .input-color:checked + span.color { display: inline-block !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; padding: 0 !important; margin: 0 3px !important; border-radius: 50% !important; border: 2px solid rgba(255,255,255,0.90) !important; box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.45) !important; text-indent: -9999px !important; overflow: hidden !important; vertical-align: middle !important; opacity: 1 !important; visibility: visible !important; } /* Les couleurs très pâles/blanches gardent un contour visible */ .product-miniature .variant-links .color[style*="fff"], .product-miniature .variant-links .color[style*="FFF"], .product-miniature .variant-links .color[style*="white"], .product-miniature .variant-links .color[style*="blanc"], .product-variants .color[style*="fff"], .product-variants .color[style*="FFF"], .product-variants .color[style*="white"], .product-variants .color[style*="blanc"] { border-color: #cfd8e3 !important; box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.50) !important; } /* Réparer les textes encore trop sombres dans les panneaux/formulaires sans toucher aux pastilles */ .product-miniature .highlighted-informations a:not(.color), .product-miniature .highlighted-informations span:not(.color), .product-miniature .highlighted-informations i, .product-miniature .highlighted-informations .material-icons { color: #ffffff !important; text-shadow: none !important; } .product-miniature .highlighted-informations a:not(.color):hover, .product-miniature .highlighted-informations a:not(.color):hover i, .product-miniature .highlighted-informations a:not(.color):hover .material-icons { color: #00aeef !important; } /* ========================================================= GG3D v1.0.15 - FILTRES + BANDE AVIS PRODUIT Objectif: - rendre le bloc "Filtrer par" conforme au thème sombre; - rendre les textes de filtres lisibles; - garder les pastilles/carrés de couleur visibles; - remplacer la bande blanche des avis/commentaires par un panneau sombre. Correctif ciblé uniquement: évite les règles larges qui peuvent cacher la page. ========================================================= */ /* Menu des filtres / navigation à facettes */ #left-column #search_filters, #right-column #search_filters, #search_filters, #search_filters_brands, #search_filters_suppliers, #js-active-search-filters, #left-column .facets, #right-column .facets { background: #121a26 !important; background-color: #121a26 !important; color: #d8e1ec !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 12px !important; box-shadow: 0 8px 22px rgba(0,0,0,0.18) !important; } #search_filters, #left-column #search_filters, #right-column #search_filters { padding: 18px 18px !important; } #search_filters .facet, #search_filters section, #search_filters .facet ul, #search_filters .facet li, #left-column #search_filters .facet, #right-column #search_filters .facet { background: transparent !important; color: #d8e1ec !important; } #search_filters .h6, #search_filters .facet-title, #search_filters .facet-title.hidden-sm-down, #search_filters .text-uppercase, #js-active-search-filters .h6, #js-active-search-filters .active-filter-title { color: #ffffff !important; opacity: 1 !important; font-family: 'Acme', Verdana, Arial, sans-serif !important; font-weight: 700 !important; letter-spacing: 0.4px !important; } #search_filters .facet-label, #search_filters .facet-label a, #search_filters label, #search_filters .magnitude, #search_filters .facet li, #search_filters .filter-block, #search_filters .js-search-link, #js-active-search-filters .filter-block { color: #d8e1ec !important; opacity: 1 !important; background: transparent !important; } #search_filters .facet-label a:hover, #search_filters .js-search-link:hover, #js-active-search-filters .filter-block:hover { color: #00aeef !important; } /* Cases à cocher dans les filtres */ #search_filters .custom-checkbox, #search_filters .custom-checkbox input[type="checkbox"] + span, #search_filters .custom-checkbox span, #search_filters .ps-shown-by-js, #search_filters input[type="checkbox"] { border-color: rgba(255,255,255,0.42) !important; } #search_filters .custom-checkbox input[type="checkbox"] + span, #search_filters .custom-checkbox .ps-shown-by-js, #search_filters input[type="checkbox"] { background-color: #0b0f16 !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.18) !important; } #search_filters .custom-checkbox input[type="checkbox"]:checked + span, #search_filters .custom-checkbox input[type="checkbox"]:checked + .ps-shown-by-js { background-color: #00aeef !important; border-color: #00aeef !important; } /* Sliders / fourchettes de prix et poids */ #search_filters .ui-slider, #search_filters .ui-widget-content, #search_filters .noUi-target, #search_filters .range-slider { background: #263142 !important; border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: none !important; } #search_filters .ui-slider-range, #search_filters .noUi-connect { background: #00aeef !important; } #search_filters .ui-slider-handle, #search_filters .noUi-handle { background: #d8e1ec !important; border: 2px solid #00aeef !important; box-shadow: 0 2px 8px rgba(0,0,0,0.40) !important; } #search_filters .facet .facet-label .color, #search_filters .color, #search_filters .facet-color, #search_filters span.color, #search_filters a.color, #search_filters .custom-checkbox span.color { display: inline-block !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; border-radius: 3px !important; border: 1px solid rgba(255,255,255,0.75) !important; box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.35) !important; text-indent: -9999px !important; overflow: hidden !important; vertical-align: middle !important; opacity: 1 !important; visibility: visible !important; } /* Les valeurs texte de prix/poids dans les filtres */ #search_filters .facet .search-link, #search_filters .facet .facet-label .magnitude, #search_filters .facet .facet-label .filter-name, #search_filters .ui-slider + p, #search_filters p, #search_filters small { color: #d8e1ec !important; } /* Bande blanche des avis/commentaires sous les produits */ #product-comments-list-header, #product-comments-list, #product-comments-list-footer, #empty-product-comment, .product-comments, .product-comment-list-item, .product-comments-additional-info, .product-review-links, .product-comment-form, .comments-note, #idTab5, #product-comments-modal .modal-content { background: #121a26 !important; background-color: #121a26 !important; color: #d8e1ec !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: none !important; } #product-comments-list-footer, #empty-product-comment, .product-comments-additional-info, .product-review-links { border-top: 1px solid rgba(255,255,255,0.10) !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; padding-top: 22px !important; padding-bottom: 22px !important; } #product-comments-list-header h1, #product-comments-list-header h2, #product-comments-list-header h3, #product-comments-list-header .h1, #product-comments-list-header .h2, #product-comments-list-header .h3, .product-comments h1, .product-comments h2, .product-comments h3, .product-comments .h1, .product-comments .h2, .product-comments .h3, #empty-product-comment h1, #empty-product-comment h2, #empty-product-comment h3 { color: #ffffff !important; } #product-comments-list-header p, #product-comments-list p, #product-comments-list-footer p, #empty-product-comment p, .product-comments p, .product-comments span, .product-comments a, .product-comment-list-item p, .product-review-links a, .product-comments-additional-info a { color: #d8e1ec !important; } #product-comments-list-footer a, #empty-product-comment a, .product-comments .btn, .post-product-comment, .product-comment-form .btn-primary { background: linear-gradient(135deg, #00aeef, #0077b6) !important; border: none !important; color: #ffffff !important; border-radius: 9px !important; box-shadow: 0 6px 14px rgba(0,0,0,0.25) !important; } #product-comments-list-footer a:hover, #empty-product-comment a:hover, .post-product-comment:hover { color: #ffffff !important; filter: brightness(1.08) !important; } /* Zone avis parfois générée comme un simple bloc blanc dans product page */ body#product .product-comments, body#product .product-comments > *, .page-product .product-comments, .page-product .product-comments > * { background-color: #121a26 !important; color: #d8e1ec !important; } /* Garder les boutons et champs dans la zone avis lisibles */ .product-comments input, .product-comments textarea, .product-comments select, #product-comments-modal input, #product-comments-modal textarea, #product-comments-modal select { background: #101824 !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.16) !important; } /* ========================================================= GG3D v1.0.16 — Lisibilité du texte gris pâle / PayPal Corrige les textes gris foncé sur fond sombre dans les blocs de paiement, d'informations produit et de messages PayPal. ========================================================= */ body#product .product-information, body#product .product-information p, body#product .product-information span, body#product .product-information div, body#product .product-prices, body#product .product-prices p, body#product .product-prices span, body#product .product-discounts, body#product .product-discounts p, body#product .product-discounts span, body#product .payment-options, body#product .payment-options p, body#product .payment-options span, body#product .product-additional-info, body#product .product-additional-info p, body#product .product-additional-info span, body#product .product-reference, body#product .delivery-information, body#product .tax-shipping-delivery-label, .page-product .product-information, .page-product .product-information p, .page-product .product-information span, .page-product .product-information div, .page-product .product-prices, .page-product .product-prices p, .page-product .product-prices span, .page-product .product-discounts, .page-product .product-discounts p, .page-product .product-discounts span, .page-product .payment-options, .page-product .payment-options p, .page-product .payment-options span, .page-product .product-additional-info, .page-product .product-additional-info p, .page-product .product-additional-info span, .page-product .product-reference, .page-product .delivery-information, .page-product .tax-shipping-delivery-label { color: #cfd8e3 !important; } /* Blocs PayPal / Pay Later / Paiement en plusieurs versements */ [data-pp-message], [data-pp-message] *, .paypal-message, .paypal-message *, .paypal-messages, .paypal-messages *, .paypal-installments, .paypal-installments *, .paypal-paylater-message, .paypal-paylater-message *, .ps_checkout-paypal-message, .ps_checkout-paypal-message *, .ps_checkout-pay-later, .ps_checkout-pay-later *, .ps_checkout-banner, .ps_checkout-banner *, .paypal-banner, .paypal-banner *, .pp-message, .pp-message *, .pp-paylater, .pp-paylater * { color: #cfd8e3 !important; opacity: 1 !important; } /* Liens dans les messages PayPal */ [data-pp-message] a, .paypal-message a, .paypal-messages a, .paypal-installments a, .paypal-paylater-message a, .ps_checkout-paypal-message a, .ps_checkout-pay-later a, .ps_checkout-banner a, .paypal-banner a, .pp-message a, .pp-paylater a { color: #37c8ff !important; text-decoration: underline !important; } /* Certains modules PayPal injectent un iframe externe : on ne peut pas modifier le texte interne directement, alors on éclaircit seulement le rendu du message. */ iframe[title*="PayPal"], iframe[name*="paypal"], iframe[src*="paypal"], iframe[src*="paypalobjects"] { filter: brightness(1.45) contrast(1.05) !important; opacity: 1 !important; } /* Textes secondaires encore trop foncés sur pages produit */ body#product .text-muted, body#product .text-xs-center, body#product .text-sm-center, body#product small, body#product .small, body#product label, body#product .label, body#product .form-control-label, .page-product .text-muted, .page-product .text-xs-center, .page-product .text-sm-center, .page-product small, .page-product .small, .page-product label, .page-product .label, .page-product .form-control-label { color: #cfd8e3 !important; } /* ========================================================= CORRECTIF v1.0.17 - FILTRES + TRI + HOVER PRODUITS - panneau "Filtrer par" conforme au thème sombre; - menu déroulant de tri conforme au reste du site; - suppression de la bande blanche sous les produits; - panneau hover produit lisible et pastilles visibles. ========================================================= */ /* 1) Bloc filtres / facettes */ #search_filters, #search_filters_wrapper, #js-active-search-filters, .block-categories, #left-column #search_filters, #left-column #search_filters_wrapper, #left-column .block-categories, #left-column .facet, #left-column .facet .facet-title, #left-column .facet .h6, #left-column .facet .navbar-toggler, #left-column .facet .collapse, #search_filters .facet, #search_filters .facet .facet-title, #search_filters .facet .h6, #search_filters .facet .navbar-toggler, #search_filters .facet .collapse { background: var(--gg-panel) !important; background-color: var(--gg-panel) !important; color: var(--gg-text-soft) !important; border-color: rgba(255,255,255,0.10) !important; } #search_filters, #search_filters_wrapper, .block-categories, #left-column .block-categories { border: 1px solid rgba(255,255,255,0.10) !important; border-radius: var(--gg-radius) !important; box-shadow: 0 8px 22px rgba(0,0,0,0.20) !important; padding: 14px 18px !important; } #search_filters .facet-title, #search_filters .h6, #search_filters h4, #search_filters h5, #left-column .facet-title, #left-column .h6, #left-column h4, #left-column h5, .block-categories .h6, .block-categories h4, .block-categories h5 { color: #ffffff !important; opacity: 1 !important; } #search_filters .text-uppercase, #left-column #search_filters .text-uppercase, #search_filters .facet-label a, #search_filters .facet-label, #search_filters label, #search_filters span, #search_filters p, #search_filters li, #left-column #search_filters .facet-label a, #left-column #search_filters .facet-label, #left-column #search_filters label, #left-column #search_filters span, #left-column #search_filters p, #left-column #search_filters li, .block-categories a, .block-categories li a, .block-categories span { color: var(--gg-text-soft) !important; } #search_filters .facet-label a:hover, #search_filters a:hover, .block-categories a:hover { color: var(--gg-blue) !important; } /* checkboxes and color squares in filters */ #search_filters .custom-checkbox input[type="checkbox"] + span, #search_filters .facet-label .custom-checkbox span, #search_filters .facet-label .color, #search_filters .facet-label .magnitude, #search_filters .facet-dropdown-content li a, #left-column #search_filters .custom-checkbox input[type="checkbox"] + span, #left-column #search_filters .facet-label .custom-checkbox span, #left-column #search_filters .facet-label .color, #left-column #search_filters .facet-label .magnitude { border: 1px solid rgba(255,255,255,0.40) !important; box-shadow: none !important; } #search_filters .facet-label .color, #left-column #search_filters .facet-label .color { width: 18px !important; height: 18px !important; border-radius: 3px !important; } #search_filters .ui-slider, #left-column #search_filters .ui-slider { background: rgba(255,255,255,0.20) !important; border: none !important; height: 4px !important; } #search_filters .ui-slider .ui-slider-range, #left-column #search_filters .ui-slider .ui-slider-range { background: var(--gg-blue) !important; } #search_filters .ui-slider .ui-slider-handle, #left-column #search_filters .ui-slider .ui-slider-handle { background: #ffffff !important; border: 2px solid var(--gg-blue) !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; } /* 2) Tri / dropdown sort-by */ .products-sort-order .select-title, .products-sort-order .dropdown-menu, .products-sort-order .dropdown-menu a, .products-sort-order .select-list, .products-sort-order .material-icons, select#selectProductSort, #search_filters select, .form-control-select { background: var(--gg-panel) !important; background-color: var(--gg-panel) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.14) !important; } .products-sort-order .select-title, select#selectProductSort, .form-control-select { border-radius: 8px !important; min-height: 44px !important; } .products-sort-order .dropdown-menu { border: 1px solid rgba(255,255,255,0.12) !important; box-shadow: var(--gg-shadow) !important; } .products-sort-order .dropdown-menu a:hover, .products-sort-order .select-list:hover, .products-sort-order .select-list.current { background: rgba(0,174,239,0.12) !important; color: var(--gg-blue) !important; } /* 3) Hover produit - enlever la bande blanche */ .product-miniature .highlighted-informations, .product-miniature .thumbnail-container .highlighted-informations, .product-miniature .thumbnail-container:hover .highlighted-informations, .product-miniature:hover .highlighted-informations { background: rgba(18,26,38,0.96) !important; background-color: rgba(18,26,38,0.96) !important; color: #ffffff !important; border-top: 1px solid rgba(255,255,255,0.08) !important; } .product-miniature .highlighted-informations .quick-view, .product-miniature .highlighted-informations .quick-view i, .product-miniature .highlighted-informations .quick-view .material-icons, .product-miniature .highlighted-informations .quick-view span, .product-miniature .highlighted-informations a, .product-miniature .highlighted-informations span, .product-miniature .highlighted-informations i { color: #ffffff !important; } .product-miniature .highlighted-informations .quick-view::after { content: " Aperçu" !important; font-family: Arial, Verdana, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; vertical-align: middle !important; } .product-miniature .highlighted-informations .quick-view:hover, .product-miniature .highlighted-informations .quick-view:hover::after, .product-miniature .highlighted-informations a:hover { color: var(--gg-blue) !important; } /* pastilles de couleur au hover */ .product-miniature .variant-links { background: transparent !important; } .product-miniature .variant-links .js-count { color: #ffffff !important; background: transparent !important; } .product-miniature .variant-links a, .product-miniature .variant-links .color, .product-miniature .variant-links span.color { display: inline-block !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; border-radius: 50% !important; overflow: hidden !important; border: 2px solid rgba(255,255,255,0.75) !important; box-shadow: 0 0 0 1px rgba(0,0,0,0.20) !important; text-indent: -9999px !important; } /* ne pas écraser la vraie couleur des pastilles Prestashop */ .product-miniature .variant-links a[style], .product-miniature .variant-links .color[style], .product-miniature .variant-links span.color[style] { color: transparent !important; } /* rendre les couleurs très pâles visibles */ .product-miniature .variant-links a[style*="#fff"], .product-miniature .variant-links a[style*="#FFF"], .product-miniature .variant-links a[style*="white"], .product-miniature .variant-links .color[style*="#fff"], .product-miniature .variant-links .color[style*="#FFF"], .product-miniature .variant-links .color[style*="white"], .product-miniature .variant-links span.color[style*="#fff"], .product-miniature .variant-links span.color[style*="#FFF"], .product-miniature .variant-links span.color[style*="white"] { border-color: rgba(255,255,255,0.95) !important; box-shadow: 0 0 0 1px rgba(0,0,0,0.55) !important; } /* 4) Bande claire de l'avis/commentaires */ #product-comments-list-header, #post-product-comment-form, .post-product-comment, .product-comments, .product-comment-list-item, .product-comment-list-item .comment-content, #product-comments-list { background: var(--gg-panel) !important; background-color: var(--gg-panel) !important; color: var(--gg-text-soft) !important; border-color: rgba(255,255,255,0.10) !important; } #product-comments-list-header .btn, .post-product-comment .btn { background: #6f8f9a !important; color: #ffffff !important; border: none !important; } /* 5) Textes secondaires trop foncés */ .text-muted, .help-block, .help-block a, .paypal-message, .paypal-message *, .block-category .text-muted, .product-information .text-muted, #content .text-muted, #main .text-muted, .page-content .text-muted { color: #c7d2de !important; } /* v1.0.18 - corrige les pastilles de couleurs au hover des produits */ /* ========================================================= CORRECTIF v1.0.19 - SOUS-MENUS DE LA COLONNE GAUCHE - différencier visuellement chaque niveau ouvert; - tailles de texte différentes selon la profondeur; - plus d'espace avant la bordure droite; - meilleure lisibilité des sous-menus imbriqués. ========================================================= */ /* bloc catégories / menu latéral */ #left-column .block-categories, #left-column .category-top-menu, #left-column .category-sub-menu { background: var(--gg-panel) !important; color: #ffffff !important; } #left-column .block-categories { padding: 18px 18px 20px !important; } /* niveau principal */ #left-column .category-top-menu > li, #left-column .block-categories .category-sub-menu > li { border-bottom: 1px solid rgba(255,255,255,0.08) !important; } #left-column .category-top-menu > li > a, #left-column .block-categories .category-sub-menu > li > a { display: block !important; font-size: 1.06rem !important; font-weight: 700 !important; line-height: 1.35 !important; color: #ffffff !important; padding: 8px 34px 8px 10px !important; margin-right: 12px !important; } /* niveau 2 ouvert */ #left-column .category-sub-menu .category-sub-menu { margin: 8px 12px 8px 10px !important; padding: 10px 18px 10px 14px !important; border-left: 2px solid rgba(0,174,239,0.45) !important; border-right: 1px solid rgba(255,255,255,0.10) !important; border-top: 1px solid rgba(255,255,255,0.06) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; border-radius: 0 10px 10px 0 !important; background: rgba(255,255,255,0.025) !important; } #left-column .category-sub-menu .category-sub-menu > li > a { display: block !important; font-size: 0.98rem !important; font-weight: 600 !important; line-height: 1.4 !important; color: #f4f8fc !important; padding: 6px 30px 6px 8px !important; margin-right: 14px !important; } /* niveau 3 ouvert */ #left-column .category-sub-menu .category-sub-menu .category-sub-menu { margin: 7px 14px 7px 14px !important; padding: 8px 20px 8px 16px !important; border-left: 2px solid rgba(255,255,255,0.20) !important; border-right: 1px solid rgba(255,255,255,0.08) !important; border-top: 1px dashed rgba(255,255,255,0.06) !important; border-bottom: 1px dashed rgba(255,255,255,0.06) !important; border-radius: 0 10px 10px 0 !important; background: rgba(255,255,255,0.018) !important; } #left-column .category-sub-menu .category-sub-menu .category-sub-menu > li > a { display: block !important; font-size: 0.91rem !important; font-weight: 500 !important; line-height: 1.45 !important; color: #d9e4ee !important; padding: 5px 26px 5px 10px !important; margin-right: 18px !important; } /* niveau 4 si présent */ #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu { margin: 6px 16px 6px 18px !important; padding: 6px 20px 6px 16px !important; border-left: 2px solid rgba(255,255,255,0.14) !important; border-right: 1px solid rgba(255,255,255,0.07) !important; background: rgba(255,255,255,0.012) !important; } #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu > li > a { font-size: 0.86rem !important; font-weight: 500 !important; color: #c7d2de !important; padding-right: 22px !important; margin-right: 20px !important; } /* icônes +/- ou flèches : éloignées de la bordure droite */ #left-column .category-top-menu .navbar-toggler, #left-column .block-categories .navbar-toggler, #left-column .category-top-menu .collapse-icons, #left-column .block-categories .collapse-icons { right: 12px !important; margin-right: 10px !important; } #left-column .category-top-menu .material-icons, #left-column .block-categories .material-icons { color: #ffffff !important; } /* espacement entre les items ouverts */ #left-column .category-sub-menu li { margin-bottom: 2px !important; } /* hover/focus plus clairs */ #left-column .category-top-menu a:hover, #left-column .category-sub-menu a:hover, #left-column .category-top-menu a:focus, #left-column .category-sub-menu a:focus { color: var(--gg-blue) !important; text-decoration: none !important; } /* ========================================================= CORRECTIF v1.0.20 - ENCADRÉS BLANCS ET TEXTES SUR TOUT LE SITE Objectif: - harmoniser les encadrés/blocs/cartes blancs sur toutes les pages; - rendre les textes conformes au thème sombre; - corriger particulièrement les pages compte client, adresses, historique commandes, authentification et formulaires. ========================================================= */ /* 1) Encadrés génériques / cartes / blocs */ .card, .card-block, .block, .box, .page-content.card, .page-content .card, .page-content .box, .page-customer-account #content, .page-customer-account #content .links, .page-customer-account #content .links a, .page-my-account #content .links a, .page-addresses .address, .page-address .address, .page-authentication #content .login-form, .page-authentication #content .register-form, .page-authentication #content .no-account, .page-order-detail .box, .page-order-detail .order-detail, .page-history .box, .page-history .orders, .page-identity .form-wrapper, .page-password .form-wrapper, .page-contact #content .contact-form, .page-contact #content .contact-rich, .page-contact .contact-form, .page-contact .contact-rich, .page-cms #content .card, .page-cms #content .box, .page-not-found #content, #module-blockwishlist-lists .wishlist-container, #module-blockwishlist-lists .wishlist-card, .addresses-footer, .order-confirmation-table, .customer-form, .js-address-form, .checkout-step, .cart-summary, .cart-grid-right .card, .cart-grid-body, .block-categories, #search_filters, #subcategories ul, #subcategories .subcategory-block, .page-content.page-cms, .page-content.page-cms .content { background: var(--gg-panel) !important; background-color: var(--gg-panel) !important; color: var(--gg-text-soft) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: var(--gg-radius) !important; box-shadow: 0 8px 22px rgba(0,0,0,0.20) !important; } /* 2) Tuiles du compte client */ .page-customer-account #content .links a, .page-my-account #content .links a, .page-customer-account .account-link, .page-my-account .account-link { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 118px !important; padding: 22px 18px !important; background: var(--gg-panel) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 0 !important; } .page-customer-account #content .links a i, .page-my-account #content .links a i, .page-customer-account .account-link i, .page-my-account .account-link i, .page-customer-account #content .links a .material-icons, .page-my-account #content .links a .material-icons { color: #ffffff !important; } .page-customer-account #content .links a span.link-item, .page-my-account #content .links a span.link-item, .page-customer-account #content .links a span, .page-my-account #content .links a span, .page-customer-account .account-link span, .page-my-account .account-link span { color: #d8e1ec !important; font-weight: 700 !important; } .page-customer-account #content .links a:hover, .page-my-account #content .links a:hover, .page-customer-account .account-link:hover, .page-my-account .account-link:hover { background: var(--gg-panel-soft) !important; border-color: rgba(0,174,239,0.35) !important; } .page-customer-account #content .links a:hover span, .page-my-account #content .links a:hover span, .page-customer-account .account-link:hover span, .page-my-account .account-link:hover span, .page-customer-account #content .links a:hover i, .page-my-account #content .links a:hover i { color: var(--gg-blue) !important; } /* 3) Titres / textes / paragraphes */ .card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .box h1, .box h2, .box h3, .box h4, .box h5, .box h6, .block h1, .block h2, .block h3, .block h4, .block h5, .block h6, .page-content h1, .page-content h2, .page-content h3, .page-content h4, .customer-form h1, .customer-form h2, .customer-form h3, .contact-form h1, .contact-form h2, .contact-form h3, .address h4, .address h5, .wishlist-card h4 { color: #ffffff !important; } .card p, .box p, .block p, .card li, .box li, .block li, .card span, .box span, .block span, .page-content p, .page-content li, .page-content span, .customer-form p, .customer-form label, .customer-form span, .contact-form p, .contact-form label, .contact-form span, .address p, .address span, .table td, .table th, .definition-list dl, .definition-list dt, .definition-list dd { color: var(--gg-text-soft) !important; } /* 4) Liens dans les encadrés */ .card a, .box a, .block a, .page-content a, .customer-form a, .contact-form a, .address a, .table a { color: #ffffff !important; } .card a:hover, .box a:hover, .block a:hover, .page-content a:hover, .customer-form a:hover, .contact-form a:hover, .address a:hover, .table a:hover { color: var(--gg-blue) !important; } /* 5) Formulaires / selects / champs */ input, textarea, select, .form-control, .input-group, .custom-select, .form-control-select, .bootstrap-touchspin, .bootstrap-touchspin input, .page-content .form-control, .customer-form .form-control, .contact-form .form-control { background: var(--gg-panel-soft) !important; background-color: var(--gg-panel-soft) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.14) !important; } input::placeholder, textarea::placeholder, .form-control::placeholder { color: #a9b7c6 !important; opacity: 1 !important; } /* 6) Tableaux et en-têtes */ .table, .table thead, .table tbody, .table-responsive, .table-striped tbody tr:nth-of-type(odd), .table-striped tbody tr:nth-of-type(even) { background: transparent !important; color: var(--gg-text-soft) !important; } .table thead th, .table th, .table td { border-color: rgba(255,255,255,0.10) !important; } .table thead th { color: #ffffff !important; background: rgba(255,255,255,0.03) !important; } /* 7) Sous-catégories et blocs clairs encore restants */ #subcategories .subcategory-block, #subcategories .subcategory-block a, #subcategories .subcategory-block h5, #subcategories .subcategory-name { background: var(--gg-panel) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.10) !important; } /* 8) Boutons secondaires clairs */ .btn-secondary, .btn-tertiary, .btn-outline-primary, .btn-unstyle { background: var(--gg-panel-soft) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.14) !important; } .btn-secondary:hover, .btn-tertiary:hover, .btn-outline-primary:hover, .btn-unstyle:hover { color: var(--gg-blue) !important; border-color: rgba(0,174,239,0.35) !important; } /* ========================================================= CORRECTIF v1.0.21 - BLOCS BLANCS RESTANTS (COMPTE + RGPD) Objectif: - supprimer les rectangles blancs restants dans les tuiles du compte; - harmoniser les blocs internes des pages RGPD / données personnelles; - rendre les textes conformes au thème sombre. ========================================================= */ /* 1) Tuiles du compte : retirer le carré blanc interne */ .page-customer-account #content .links a .link-item, .page-my-account #content .links a .link-item, .page-customer-account .account-link .link-item, .page-my-account .account-link .link-item, #content .links a .link-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 118px !important; padding: 18px 16px !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; color: #d8e1ec !important; } .page-customer-account #content .links a .link-item i, .page-my-account #content .links a .link-item i, .page-customer-account #content .links a .link-item .material-icons, .page-my-account #content .links a .link-item .material-icons, #content .links a .link-item i, #content .links a .link-item .material-icons { color: #ffffff !important; background: transparent !important; } .page-customer-account #content .links a .link-item span, .page-my-account #content .links a .link-item span, #content .links a .link-item span { color: #d8e1ec !important; background: transparent !important; } /* 2) Pages RGPD / données personnelles / blocs internes encore blancs */ .page-customer-account .page-content > div, .page-customer-account .page-content > section, .page-customer-account .page-content > article, .page-customer-account .page-content .row > div > div, .page-customer-account .page-content .row > div > section, .page-customer-account .page-content .row > div > article, .page-customer-account .page-content .wrapper, .page-customer-account .page-content .panel, .page-customer-account .page-content .content, .page-customer-account .page-content .well, .page-customer-account .page-content .alert, .page-customer-account .page-content .card-block, .page-customer-account .page-content .data-block, .page-customer-account .page-content .export-data, .page-customer-account .page-content .delete-data, .page-customer-account .page-content .rectification, .page-customer-account .page-content .gdpr, .page-customer-account .page-content .psgdpr, .page-customer-account .page-content .psgdprinfo, .page-customer-account .page-content .psgdpr-module, .page-customer-account .page-content .personal-data, .page-customer-account .page-content .personal-data-request, .page-customer-account .page-content .personal-data-export, .page-customer-account .page-content .request-wrapper { background: var(--gg-panel) !important; background-color: var(--gg-panel) !important; color: var(--gg-text-soft) !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: none !important; } /* 3) Textes et titres dans ces blocs */ .page-customer-account .page-content > div h1, .page-customer-account .page-content > div h2, .page-customer-account .page-content > div h3, .page-customer-account .page-content > div h4, .page-customer-account .page-content > section h1, .page-customer-account .page-content > section h2, .page-customer-account .page-content > section h3, .page-customer-account .page-content > article h1, .page-customer-account .page-content > article h2, .page-customer-account .page-content > article h3, .page-customer-account .page-content .gdpr h1, .page-customer-account .page-content .gdpr h2, .page-customer-account .page-content .gdpr h3, .page-customer-account .page-content .psgdpr h1, .page-customer-account .page-content .psgdpr h2, .page-customer-account .page-content .psgdpr h3 { color: #ffffff !important; background: transparent !important; } .page-customer-account .page-content > div p, .page-customer-account .page-content > div li, .page-customer-account .page-content > div span, .page-customer-account .page-content > section p, .page-customer-account .page-content > section li, .page-customer-account .page-content > section span, .page-customer-account .page-content > article p, .page-customer-account .page-content > article li, .page-customer-account .page-content > article span, .page-customer-account .page-content .gdpr p, .page-customer-account .page-content .gdpr li, .page-customer-account .page-content .gdpr span, .page-customer-account .page-content .psgdpr p, .page-customer-account .page-content .psgdpr li, .page-customer-account .page-content .psgdpr span { color: var(--gg-text-soft) !important; background: transparent !important; } /* 4) Boutons et liens RGPD */ .page-customer-account .page-content .btn, .page-customer-account .page-content button, .page-customer-account .page-content input[type="submit"] { background: linear-gradient(135deg, var(--gg-blue), #018fcb) !important; color: #ffffff !important; border: none !important; } .page-customer-account .page-content a { color: #ffffff !important; } .page-customer-account .page-content a:hover { color: var(--gg-blue) !important; } /* 5) éléments de retour / navigation en bas des pages modules */ .page-customer-account .page-footer, .page-customer-account .page-footer > div, .page-customer-account .page-footer a, .page-customer-account .account-links, .page-customer-account .account-links > div { background: var(--gg-panel) !important; background-color: var(--gg-panel) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.10) !important; } /* ========================================================= CORRECTIF v1.0.22 - BLOCS BLANCS INTERNES RGPD Les deux rectangles blancs internes de la page GDPR / Personal data sont forcés au thème sombre, ainsi que leurs textes. ========================================================= */ /* cible large mais limitée aux pages compte/GDPR */ .page-customer-account .page-content .psgdpr > div, .page-customer-account .page-content .psgdpr > section, .page-customer-account .page-content .psgdpr > article, .page-customer-account .page-content .gdpr > div, .page-customer-account .page-content .gdpr > section, .page-customer-account .page-content .gdpr > article, .page-customer-account .page-content .personal-data > div, .page-customer-account .page-content .personal-data > section, .page-customer-account .page-content .personal-data > article, .page-customer-account .page-content [class*="gdpr"] > div, .page-customer-account .page-content [class*="gdpr"] > section, .page-customer-account .page-content [class*="personal-data"] > div, .page-customer-account .page-content [class*="personal-data"] > section, .page-customer-account .page-content [class*="export"] > div, .page-customer-account .page-content [class*="request"] > div, .page-customer-account .page-content .card-block > div, .page-customer-account .page-content .card-block > section, .page-customer-account .page-content .card-block > article, .page-customer-account .page-content .page-content-card > div, .page-customer-account .page-content .page-content-card > section { background: var(--gg-panel) !important; background-color: var(--gg-panel) !important; border: 1px solid rgba(255,255,255,0.10) !important; color: var(--gg-text-soft) !important; box-shadow: none !important; } /* encore plus ciblé: premier et second blocs blancs visibles dans le panneau */ .page-customer-account .page-content > .card > div > div, .page-customer-account .page-content > .card > div > section, .page-customer-account .page-content > .card > section > div, .page-customer-account .page-content > div.card > div > div, .page-customer-account .page-content > div.card > div > section, .page-customer-account .page-content > div.card > section > div { background: var(--gg-panel) !important; background-color: var(--gg-panel) !important; border-color: rgba(255,255,255,0.10) !important; color: var(--gg-text-soft) !important; } /* textes à l'intérieur des blocs RGPD */ .page-customer-account .page-content [class*="gdpr"] h1, .page-customer-account .page-content [class*="gdpr"] h2, .page-customer-account .page-content [class*="gdpr"] h3, .page-customer-account .page-content [class*="gdpr"] h4, .page-customer-account .page-content [class*="personal-data"] h1, .page-customer-account .page-content [class*="personal-data"] h2, .page-customer-account .page-content [class*="personal-data"] h3, .page-customer-account .page-content [class*="personal-data"] h4, .page-customer-account .page-content [class*="gdpr"] strong, .page-customer-account .page-content [class*="personal-data"] strong { color: #ffffff !important; background: transparent !important; } .page-customer-account .page-content [class*="gdpr"] p, .page-customer-account .page-content [class*="gdpr"] li, .page-customer-account .page-content [class*="gdpr"] span, .page-customer-account .page-content [class*="gdpr"] div, .page-customer-account .page-content [class*="personal-data"] p, .page-customer-account .page-content [class*="personal-data"] li, .page-customer-account .page-content [class*="personal-data"] span, .page-customer-account .page-content [class*="personal-data"] div { color: var(--gg-text-soft) !important; background: transparent !important; } /* ne pas casser les boutons bleus */ .page-customer-account .page-content [class*="gdpr"] .btn, .page-customer-account .page-content [class*="personal-data"] .btn, .page-customer-account .page-content [class*="gdpr"] button, .page-customer-account .page-content [class*="personal-data"] button { background: linear-gradient(135deg, var(--gg-blue), #018fcb) !important; color: #ffffff !important; border: none !important; } /* ========================================================= CORRECTIF v1.0.23 - SUPPRESSION AGRESSIVE DES BLOCS BLANCS RGPD Le module GDPR génère encore des blocs blancs internes. On force ici le fond sombre sur tous les conteneurs du contenu client, puis on rétablit explicitement les boutons/champs si nécessaire. ========================================================= */ /* pages client : fonds internes */ .page-customer-account #content .page-content, .page-customer-account #content .page-content > *, .page-customer-account #content .page-content > * > *, .page-customer-account #content .page-content > * > * > *, .page-customer-account #content .page-content > * > * > * > *, .page-customer-account #content .page-content article, .page-customer-account #content .page-content section, .page-customer-account #content .page-content div:not(.btn):not(.btn-primary):not(.btn-secondary):not(.material-icons), .page-customer-account #content .page-content .card-block, .page-customer-account #content .page-content .panel, .page-customer-account #content .page-content .well, .page-customer-account #content .page-content .content, .page-customer-account #content .page-content .wrapper { background: var(--gg-panel) !important; background-color: var(--gg-panel) !important; color: var(--gg-text-soft) !important; border-color: rgba(255,255,255,0.10) !important; } /* textes des blocs RGPD / compte */ .page-customer-account #content .page-content h1, .page-customer-account #content .page-content h2, .page-customer-account #content .page-content h3, .page-customer-account #content .page-content h4, .page-customer-account #content .page-content h5, .page-customer-account #content .page-content strong, .page-customer-account #content .page-content b, .page-customer-account #content .page-content label, .page-customer-account #content .page-content legend { color: #ffffff !important; background: transparent !important; } .page-customer-account #content .page-content p, .page-customer-account #content .page-content span, .page-customer-account #content .page-content li, .page-customer-account #content .page-content small, .page-customer-account #content .page-content em, .page-customer-account #content .page-content div { color: var(--gg-text-soft) !important; } /* garder boutons bleus et champs cohérents */ .page-customer-account #content .page-content .btn, .page-customer-account #content .page-content button, .page-customer-account #content .page-content input[type="submit"], .page-customer-account #content .page-content .btn-primary { background: linear-gradient(135deg, var(--gg-blue), #018fcb) !important; color: #ffffff !important; border: none !important; } .page-customer-account #content .page-content input, .page-customer-account #content .page-content textarea, .page-customer-account #content .page-content select, .page-customer-account #content .page-content .form-control { background: var(--gg-panel-soft) !important; background-color: var(--gg-panel-soft) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.14) !important; } /* liens */ .page-customer-account #content .page-content a { color: #ffffff !important; } .page-customer-account #content .page-content a:hover { color: var(--gg-blue) !important; } /* ========================================================= CORRECTIF v1.0.33 - RESTAURATION MENU LATÉRAL STABLE Cette version revient à la dernière base où les menus étaient ouvrables. Elle supprime les essais de pseudo-icônes qui faisaient disparaître les + / - et laisse PrestaShop gérer l'ouverture native. ========================================================= */ /* Restaurer les vrais boutons PrestaShop */ #left-column .block-categories .collapse-icons, #left-column .block-categories .navbar-toggler, #left-column .category-top-menu .collapse-icons, #left-column .category-top-menu .navbar-toggler, #left-column .category-sub-menu .collapse-icons, #left-column .category-sub-menu .navbar-toggler { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; width: 24px !important; height: 24px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; cursor: pointer !important; pointer-events: auto !important; z-index: 50 !important; } /* Annuler les icônes CSS artificielles des versions 1.0.24 à 1.0.32 */ #left-column .block-categories .collapse-icons::before, #left-column .block-categories .collapse-icons::after, #left-column .block-categories .navbar-toggler::before, #left-column .block-categories .navbar-toggler::after, #left-column .category-top-menu .collapse-icons::before, #left-column .category-top-menu .collapse-icons::after, #left-column .category-top-menu .navbar-toggler::before, #left-column .category-top-menu .navbar-toggler::after, #left-column .category-sub-menu .collapse-icons::before, #left-column .category-sub-menu .collapse-icons::after, #left-column .category-sub-menu .navbar-toggler::before, #left-column .category-sub-menu .navbar-toggler::after, #left-column .category-top-menu li > a::after, #left-column .category-sub-menu li > a::after { content: none !important; display: none !important; } /* Réafficher les icônes natives add/remove */ #left-column .block-categories .collapse-icons .add, #left-column .block-categories .collapse-icons .remove, #left-column .block-categories .navbar-toggler .add, #left-column .block-categories .navbar-toggler .remove, #left-column .category-top-menu .collapse-icons .add, #left-column .category-top-menu .collapse-icons .remove, #left-column .category-top-menu .navbar-toggler .add, #left-column .category-top-menu .navbar-toggler .remove, #left-column .category-sub-menu .collapse-icons .add, #left-column .category-sub-menu .collapse-icons .remove, #left-column .category-sub-menu .navbar-toggler .add, #left-column .category-sub-menu .navbar-toggler .remove { font-family: "Material Icons", Arial, sans-serif !important; color: #ffffff !important; font-size: 22px !important; line-height: 24px !important; width: 24px !important; height: 24px !important; text-align: center !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } /* Fermé: afficher add */ #left-column .block-categories .collapse-icons .add, #left-column .block-categories .navbar-toggler .add, #left-column .category-top-menu .collapse-icons .add, #left-column .category-top-menu .navbar-toggler .add, #left-column .category-sub-menu .collapse-icons .add, #left-column .category-sub-menu .navbar-toggler .add { display: inline-block !important; } /* Fermé: cacher remove */ #left-column .block-categories .collapse-icons .remove, #left-column .block-categories .navbar-toggler .remove, #left-column .category-top-menu .collapse-icons .remove, #left-column .category-top-menu .navbar-toggler .remove, #left-column .category-sub-menu .collapse-icons .remove, #left-column .category-sub-menu .navbar-toggler .remove { display: none !important; } /* Ouvert: cacher add */ #left-column .block-categories .collapse-icons[aria-expanded="true"] .add, #left-column .block-categories .navbar-toggler[aria-expanded="true"] .add, #left-column .category-top-menu .collapse-icons[aria-expanded="true"] .add, #left-column .category-top-menu .navbar-toggler[aria-expanded="true"] .add, #left-column .category-sub-menu .collapse-icons[aria-expanded="true"] .add, #left-column .category-sub-menu .navbar-toggler[aria-expanded="true"] .add { display: none !important; } /* Ouvert: afficher remove au même endroit */ #left-column .block-categories .collapse-icons[aria-expanded="true"] .remove, #left-column .block-categories .navbar-toggler[aria-expanded="true"] .remove, #left-column .category-top-menu .collapse-icons[aria-expanded="true"] .remove, #left-column .category-top-menu .navbar-toggler[aria-expanded="true"] .remove, #left-column .category-sub-menu .collapse-icons[aria-expanded="true"] .remove, #left-column .category-sub-menu .navbar-toggler[aria-expanded="true"] .remove { display: inline-block !important; } /* Espace à droite pour ne pas chevaucher le texte */ #left-column .category-top-menu li, #left-column .category-sub-menu li { position: relative !important; } #left-column .category-top-menu li > a, #left-column .category-sub-menu li > a { padding-right: 42px !important; } /* ========================================================= CORRECTIF v1.0.34 - MENU CATÉGORIES PLUS PROPRE ET LISIBLE - garde les + / - fonctionnels; - enlève l'effet "iframe imbriqué" trop chargé; - élargit automatiquement le menu selon les sous-catégories; - améliore la lisibilité et l'espacement. ========================================================= */ /* Le bloc catégories peut s'élargir selon le contenu */ #left-column, #left-column .block-categories, #left-column .block-categories .h6, #left-column .block-categories .title { overflow: visible !important; } #left-column .block-categories { width: fit-content !important; min-width: 290px !important; max-width: none !important; } #left-column .block-categories .block_content, #left-column .block-categories > ul, #left-column .category-top-menu, #left-column .category-sub-menu { width: fit-content !important; min-width: 260px !important; max-width: none !important; } /* conteneur principal plus propre */ #left-column .block-categories { background: linear-gradient(180deg, rgba(17,29,48,0.96) 0%, rgba(14,24,40,0.96) 100%) !important; border: 1px solid rgba(84, 117, 153, 0.35) !important; border-radius: 14px !important; padding: 16px 16px 18px !important; box-shadow: 0 8px 20px rgba(0,0,0,0.16) !important; } #left-column .block-categories .h6, #left-column .block-categories .title { display: block !important; background: rgba(31, 49, 82, 0.72) !important; color: #ffffff !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; padding: 10px 14px !important; margin: 0 0 12px 0 !important; border-radius: 0 !important; } /* liste principale */ #left-column .category-top-menu, #left-column .category-sub-menu { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* lignes principales */ #left-column .category-top-menu > li, #left-column > .block-categories .category-sub-menu > li { position: relative !important; border-bottom: 1px solid rgba(120, 145, 175, 0.14) !important; min-height: 48px !important; } #left-column .category-top-menu > li > a, #left-column > .block-categories .category-sub-menu > li > a { display: block !important; color: #ffffff !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.3 !important; padding: 13px 42px 13px 10px !important; white-space: nowrap !important; text-decoration: none !important; } #left-column .category-top-menu > li > a:hover, #left-column > .block-categories .category-sub-menu > li > a:hover { color: #22b8ff !important; } /* sous-niveaux : fini les gros cadres imbriqués, place à un style léger */ #left-column .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu { display: block !important; width: fit-content !important; min-width: 220px !important; max-width: none !important; margin: 8px 0 8px 12px !important; padding: 6px 0 6px 10px !important; background: rgba(255,255,255,0.03) !important; border: none !important; border-left: 2px solid #00b8ff !important; border-radius: 0 10px 10px 0 !important; box-shadow: none !important; } /* retirer l'effet boîte sur chaque item imbriqué */ #left-column .category-sub-menu .category-sub-menu > li, #left-column .category-sub-menu .category-sub-menu .category-sub-menu > li, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu > li { position: relative !important; border: none !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; } #left-column .category-sub-menu .category-sub-menu > li + li, #left-column .category-sub-menu .category-sub-menu .category-sub-menu > li + li, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu > li + li { border-top: 1px solid rgba(120,145,175,0.12) !important; } /* texte des sous-menus plus lisible */ #left-column .category-sub-menu .category-sub-menu > li > a, #left-column .category-sub-menu .category-sub-menu .category-sub-menu > li > a, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu > li > a { display: block !important; color: #f5fbff !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; white-space: nowrap !important; text-align: left !important; text-decoration: none !important; padding: 10px 34px 10px 12px !important; } #left-column .category-sub-menu .category-sub-menu > li > a:hover, #left-column .category-sub-menu .category-sub-menu .category-sub-menu > li > a:hover, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu > li > a:hover { color: #22b8ff !important; } /* les + / - restent alignés au même endroit */ #left-column .block-categories .collapse-icons, #left-column .block-categories .navbar-toggler, #left-column .category-top-menu .collapse-icons, #left-column .category-top-menu .navbar-toggler, #left-column .category-sub-menu .collapse-icons, #left-column .category-sub-menu .navbar-toggler { right: 8px !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; top: 50% !important; transform: translateY(-50%) !important; } #left-column .block-categories .collapse-icons .add, #left-column .block-categories .collapse-icons .remove, #left-column .block-categories .navbar-toggler .add, #left-column .block-categories .navbar-toggler .remove, #left-column .category-top-menu .collapse-icons .add, #left-column .category-top-menu .collapse-icons .remove, #left-column .category-top-menu .navbar-toggler .add, #left-column .category-top-menu .navbar-toggler .remove, #left-column .category-sub-menu .collapse-icons .add, #left-column .category-sub-menu .collapse-icons .remove, #left-column .category-sub-menu .navbar-toggler .add, #left-column .category-sub-menu .navbar-toggler .remove { color: #ffffff !important; font-size: 22px !important; line-height: 24px !important; text-align: center !important; } #left-column .category-sub-menu .category-sub-menu .collapse-icons .add, #left-column .category-sub-menu .category-sub-menu .collapse-icons .remove, #left-column .category-sub-menu .category-sub-menu .navbar-toggler .add, #left-column .category-sub-menu .category-sub-menu .navbar-toggler .remove { font-size: 18px !important; } /* petit espace vertical entre sections ouvertes */ #left-column .category-sub-menu .category-sub-menu + li, #left-column .category-sub-menu .collapse.show { margin-top: 4px !important; } /* ========================================================= CORRECTIF v1.0.35 - MENU CATÉGORIES AU PREMIER PLAN Objectif: - le menu de gauche reste au-dessus des produits; - quand le menu s'élargit, la zone produit se déplace vers la droite; - quand le menu se referme, la zone produit revient naturellement. ========================================================= */ /* permettre au menu latéral de dépasser sans être coupé */ #wrapper, #wrapper .container, #wrapper .row, #main, #content-wrapper, #left-column, #left-column .block-categories, #left-column .category-top-menu, #left-column .category-sub-menu, #left-column .collapse, #left-column .collapsing { overflow: visible !important; } /* sur les pages avec colonne gauche + produits, garder le layout flexible */ #wrapper .row:has(#left-column):has(#content-wrapper) { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 22px !important; } /* la colonne du menu devient aussi large que nécessaire */ #wrapper .row:has(#left-column):has(#content-wrapper) > #left-column { position: relative !important; z-index: 5000 !important; flex: 0 0 auto !important; width: max-content !important; min-width: 290px !important; max-width: none !important; } /* le contenu produit se décale et reste sous le menu en priorité */ #wrapper .row:has(#left-column):has(#content-wrapper) > #content-wrapper { position: relative !important; z-index: 1 !important; flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; } /* le bloc de catégories doit toujours passer devant les produits */ #left-column .block-categories { position: relative !important; z-index: 6000 !important; width: fit-content !important; min-width: 290px !important; max-width: none !important; } /* les sous-catégories ouvertes peuvent élargir le menu */ #left-column .category-sub-menu, #left-column .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu { position: relative !important; z-index: 6500 !important; width: fit-content !important; max-width: none !important; } /* empêcher les fiches produits de passer par-dessus le menu */ #products, #js-product-list, #js-product-list .products, .product-miniature, .product-miniature .thumbnail-container, .featured-products, .product-accessories { position: relative !important; z-index: 1 !important; } /* sécurité si :has() n'est pas appliqué par le navigateur */ #left-column { position: relative !important; z-index: 5000 !important; } #content-wrapper { position: relative !important; z-index: 1 !important; } /* ========================================================= CORRECTIF v1.0.36 - ENCADRÉ LISTE PRODUITS + CATÉGORIES EXPANSIBLES - ajoute un encadré autour du bloc produits / tri; - harmonise le menu "Trier par"; - force la visibilité des boutons d'expansion présents dans le menu de gauche; - conserve le + fermé / - ouvert. ========================================================= */ /* 1) Encadré autour de la zone produits */ #content-wrapper #main, #content-wrapper #products, #content-wrapper #js-product-list, #content-wrapper .products, #content-wrapper .featured-products, #products, #js-product-list { background: var(--gg-panel) !important; border-color: rgba(255,255,255,0.10) !important; } #content-wrapper #products, #content-wrapper #js-product-list, #products { border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 14px !important; padding: 18px 20px 24px !important; box-shadow: 0 8px 22px rgba(0,0,0,0.20) !important; } /* éviter les doubles bordures trop visibles à l'intérieur */ #content-wrapper #js-product-list .products, #content-wrapper #products .products, #js-product-list .products, #products .products { border: none !important; box-shadow: none !important; padding: 0 !important; } /* titre + compteur produits */ #products .products-section-title, #products h1, #products h2, #js-product-list-top, #js-product-list-top p, #js-product-list-top span, #js-product-list .total-products, #products .total-products, #products .products-selection, #products .products-sort-order { color: #ffffff !important; } /* 2) Menu Trier par mieux encadré */ .products-selection, #js-product-list-top { background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 10px !important; padding: 10px 12px !important; margin-bottom: 18px !important; } .products-sort-order .select-title, .products-sort-order .dropdown-menu, .products-sort-order .select-list { background: var(--gg-panel-soft) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.14) !important; } .products-sort-order .select-title { border-radius: 8px !important; } .products-sort-order .dropdown-menu { border-radius: 8px !important; box-shadow: 0 8px 22px rgba(0,0,0,0.28) !important; } .products-sort-order .select-list:hover, .products-sort-order .select-list.current { background: rgba(0,174,239,0.14) !important; color: var(--gg-blue) !important; } /* 3) Rendre expansibles tous les boutons présents dans le menu de gauche */ #left-column .block-categories li { position: relative !important; } #left-column .block-categories li > .collapse-icons, #left-column .block-categories li > .navbar-toggler, #left-column .category-top-menu li > .collapse-icons, #left-column .category-top-menu li > .navbar-toggler, #left-column .category-sub-menu li > .collapse-icons, #left-column .category-sub-menu li > .navbar-toggler { display: flex !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 50% !important; right: 10px !important; left: auto !important; transform: translateY(-50%) !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; pointer-events: auto !important; cursor: pointer !important; z-index: 80 !important; } /* + / - natif, sans doublon */ #left-column .block-categories li > .collapse-icons::before, #left-column .block-categories li > .collapse-icons::after, #left-column .block-categories li > .navbar-toggler::before, #left-column .block-categories li > .navbar-toggler::after, #left-column .category-sub-menu li > a::after, #left-column .category-top-menu li > a::after { content: none !important; display: none !important; } #left-column .block-categories li > .collapse-icons .add, #left-column .block-categories li > .collapse-icons .remove, #left-column .block-categories li > .navbar-toggler .add, #left-column .block-categories li > .navbar-toggler .remove, #left-column .category-top-menu li > .collapse-icons .add, #left-column .category-top-menu li > .collapse-icons .remove, #left-column .category-top-menu li > .navbar-toggler .add, #left-column .category-top-menu li > .navbar-toggler .remove, #left-column .category-sub-menu li > .collapse-icons .add, #left-column .category-sub-menu li > .collapse-icons .remove, #left-column .category-sub-menu li > .navbar-toggler .add, #left-column .category-sub-menu li > .navbar-toggler .remove { display: inline-block !important; color: #ffffff !important; font-family: "Material Icons", Arial, sans-serif !important; font-size: 21px !important; line-height: 24px !important; width: 24px !important; height: 24px !important; text-align: center !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } /* fermé = + */ #left-column .block-categories li > .collapse-icons .add, #left-column .block-categories li > .navbar-toggler .add, #left-column .category-top-menu li > .collapse-icons .add, #left-column .category-top-menu li > .navbar-toggler .add, #left-column .category-sub-menu li > .collapse-icons .add, #left-column .category-sub-menu li > .navbar-toggler .add { display: inline-block !important; } #left-column .block-categories li > .collapse-icons .remove, #left-column .block-categories li > .navbar-toggler .remove, #left-column .category-top-menu li > .collapse-icons .remove, #left-column .category-top-menu li > .navbar-toggler .remove, #left-column .category-sub-menu li > .collapse-icons .remove, #left-column .category-sub-menu li > .navbar-toggler .remove { display: none !important; } /* ouvert = - */ #left-column .block-categories li > .collapse-icons[aria-expanded="true"] .add, #left-column .block-categories li > .navbar-toggler[aria-expanded="true"] .add, #left-column .category-top-menu li > .collapse-icons[aria-expanded="true"] .add, #left-column .category-top-menu li > .navbar-toggler[aria-expanded="true"] .add, #left-column .category-sub-menu li > .collapse-icons[aria-expanded="true"] .add, #left-column .category-sub-menu li > .navbar-toggler[aria-expanded="true"] .add { display: none !important; } #left-column .block-categories li > .collapse-icons[aria-expanded="true"] .remove, #left-column .block-categories li > .navbar-toggler[aria-expanded="true"] .remove, #left-column .category-top-menu li > .collapse-icons[aria-expanded="true"] .remove, #left-column .category-top-menu li > .navbar-toggler[aria-expanded="true"] .remove, #left-column .category-sub-menu li > .collapse-icons[aria-expanded="true"] .remove, #left-column .category-sub-menu li > .navbar-toggler[aria-expanded="true"] .remove { display: inline-block !important; } /* 4) Si un sous-menu est généré par PrestaShop, il doit pouvoir s'afficher correctement */ #left-column .category-sub-menu .collapse, #left-column .category-sub-menu .collapsing, #left-column .category-sub-menu .category-sub-menu { overflow: visible !important; } /* garder le texte lisible quand les menus s'élargissent */ #left-column .category-sub-menu .category-sub-menu > li > a, #left-column .category-sub-menu .category-sub-menu .category-sub-menu > li > a, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu > li > a { white-space: nowrap !important; text-align: left !important; padding-right: 38px !important; } /* ========================================================= CORRECTIF v1.0.37 - ENCADRÉ MENU GAUCHE +5px ET COINS ARRONDIS - augmente l'espace intérieur de l'encadré du menu de gauche de 5px; - arrondit davantage les coins du menu et des sous-blocs; - conserve le style sombre GG3D. ========================================================= */ #left-column .block-categories { padding: 21px 21px 23px !important; /* +5px par rapport au correctif précédent */ border-radius: 19px !important; } #left-column .block-categories .h6, #left-column .block-categories .title { border-radius: 10px !important; } #left-column .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu { border-radius: 0 15px 15px 0 !important; } /* ========================================================= CORRECTIF v1.0.38 - ALIGNEMENT DES + / - ET DES TEXTES - aligne les + / - verticalement au centre de chaque ligne; - garde les + / - à droite de chaque sous-menu; - évite que le symbole se retrouve séparé du texte; - stabilise la largeur des boîtes imbriquées pour une meilleure lecture. ========================================================= */ /* Boîtes de sous-menu : largeur stable pour éviter les décalages */ #left-column .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu { width: 260px !important; min-width: 260px !important; max-width: 260px !important; box-sizing: border-box !important; padding: 6px 10px 6px 12px !important; } /* Chaque ligne devient une ligne complète et stable */ #left-column .category-sub-menu li, #left-column .category-sub-menu .category-sub-menu li, #left-column .category-sub-menu .category-sub-menu .category-sub-menu li, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu li { position: relative !important; display: block !important; width: 100% !important; min-height: 40px !important; box-sizing: border-box !important; } /* Texte aligné proprement dans la ligne, avec espace réservé pour le symbole */ #left-column .category-sub-menu .category-sub-menu > li > a, #left-column .category-sub-menu .category-sub-menu .category-sub-menu > li > a, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu > li > a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 40px !important; box-sizing: border-box !important; padding: 8px 36px 8px 14px !important; margin: 0 !important; text-align: center !important; line-height: 1.25 !important; } /* Boutons + / - : même emplacement, alignés verticalement avec le texte */ #left-column .category-sub-menu li > .collapse-icons, #left-column .category-sub-menu li > .navbar-toggler, #left-column .category-sub-menu .category-sub-menu li > .collapse-icons, #left-column .category-sub-menu .category-sub-menu li > .navbar-toggler, #left-column .category-sub-menu .category-sub-menu .category-sub-menu li > .collapse-icons, #left-column .category-sub-menu .category-sub-menu .category-sub-menu li > .navbar-toggler { position: absolute !important; top: 50% !important; right: 8px !important; left: auto !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; padding: 0 !important; margin: 0 !important; z-index: 90 !important; } /* Symboles + / - centrés dans leur propre bouton */ #left-column .category-sub-menu li > .collapse-icons .add, #left-column .category-sub-menu li > .collapse-icons .remove, #left-column .category-sub-menu li > .navbar-toggler .add, #left-column .category-sub-menu li > .navbar-toggler .remove, #left-column .category-sub-menu .category-sub-menu li > .collapse-icons .add, #left-column .category-sub-menu .category-sub-menu li > .collapse-icons .remove, #left-column .category-sub-menu .category-sub-menu li > .navbar-toggler .add, #left-column .category-sub-menu .category-sub-menu li > .navbar-toggler .remove { width: 24px !important; height: 24px !important; line-height: 24px !important; text-align: center !important; margin: 0 !important; padding: 0 !important; font-size: 18px !important; } /* Niveaux très profonds : un peu plus petits, mais toujours centrés */ #left-column .category-sub-menu .category-sub-menu .category-sub-menu li > .collapse-icons .add, #left-column .category-sub-menu .category-sub-menu .category-sub-menu li > .collapse-icons .remove, #left-column .category-sub-menu .category-sub-menu .category-sub-menu li > .navbar-toggler .add, #left-column .category-sub-menu .category-sub-menu .category-sub-menu li > .navbar-toggler .remove { font-size: 16px !important; } /* Le menu complet reste au-dessus du contenu produit */ #left-column, #left-column .block-categories, #left-column .category-sub-menu, #left-column .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu { z-index: 7000 !important; overflow: visible !important; } /* ========================================================= CORRECTIF v1.0.40 - RESTAURATION OUVRIR / FERMER DU MENU Base restaurée avant la v1.0.39. - Les sous-menus ne sont plus forcés ouverts. - PrestaShop reprend le contrôle de l'ouverture/fermeture. - Le style reste plus propre et lisible. ========================================================= */ /* IMPORTANT : ne pas forcer les .collapse fermés à s'afficher */ #left-column .category-sub-menu .collapse:not(.show), #left-column .category-sub-menu .collapse:not(.in) { display: none !important; height: 0 !important; visibility: hidden !important; opacity: 0 !important; } /* Les sous-menus ouverts restent visibles */ #left-column .category-sub-menu .collapse.show, #left-column .category-sub-menu .collapse.in, #left-column .category-sub-menu .collapsing { display: block !important; height: auto !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } /* Menu de gauche au-dessus du contenu produit */ #left-column, #left-column .block-categories, #left-column .category-top-menu, #left-column .category-sub-menu, #left-column .collapse, #left-column .collapsing { overflow: visible !important; z-index: 8000 !important; } /* Style propre des sous-menus, sans forcer l'ouverture */ #left-column .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu { background: rgba(255,255,255,0.025) !important; border: none !important; border-left: 2px solid #00b8ff !important; border-radius: 0 14px 14px 0 !important; box-shadow: none !important; margin: 8px 0 8px 12px !important; padding: 8px 10px 8px 12px !important; width: max-content !important; min-width: 250px !important; max-width: none !important; } /* lignes propres */ #left-column .category-sub-menu li { position: relative !important; min-height: 40px !important; overflow: visible !important; } /* texte des sous-menus */ #left-column .category-sub-menu .category-sub-menu > li > a, #left-column .category-sub-menu .category-sub-menu .category-sub-menu > li > a, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu > li > a { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 40px !important; padding: 8px 38px 8px 14px !important; color: #ffffff !important; text-align: center !important; white-space: nowrap !important; line-height: 1.25 !important; } /* boutons + / - visibles et cliquables quand PrestaShop les génère */ #left-column .block-categories li > .collapse-icons, #left-column .block-categories li > .navbar-toggler, #left-column .category-top-menu li > .collapse-icons, #left-column .category-top-menu li > .navbar-toggler, #left-column .category-sub-menu li > .collapse-icons, #left-column .category-sub-menu li > .navbar-toggler { display: flex !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; top: 50% !important; right: 8px !important; left: auto !important; transform: translateY(-50%) !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; pointer-events: auto !important; cursor: pointer !important; z-index: 100 !important; } /* éviter les doublons de symboles */ #left-column .block-categories li > .collapse-icons::before, #left-column .block-categories li > .collapse-icons::after, #left-column .block-categories li > .navbar-toggler::before, #left-column .block-categories li > .navbar-toggler::after, #left-column .category-sub-menu li > a::after, #left-column .category-top-menu li > a::after { content: none !important; display: none !important; } /* icônes natives */ #left-column .block-categories li > .collapse-icons .add, #left-column .block-categories li > .collapse-icons .remove, #left-column .block-categories li > .navbar-toggler .add, #left-column .block-categories li > .navbar-toggler .remove, #left-column .category-top-menu li > .collapse-icons .add, #left-column .category-top-menu li > .collapse-icons .remove, #left-column .category-top-menu li > .navbar-toggler .add, #left-column .category-top-menu li > .navbar-toggler .remove, #left-column .category-sub-menu li > .collapse-icons .add, #left-column .category-sub-menu li > .collapse-icons .remove, #left-column .category-sub-menu li > .navbar-toggler .add, #left-column .category-sub-menu li > .navbar-toggler .remove { color: #ffffff !important; font-family: "Material Icons", Arial, sans-serif !important; font-size: 20px !important; line-height: 24px !important; width: 24px !important; height: 24px !important; text-align: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* fermé = + */ #left-column .block-categories li > .collapse-icons .add, #left-column .block-categories li > .navbar-toggler .add, #left-column .category-top-menu li > .collapse-icons .add, #left-column .category-top-menu li > .navbar-toggler .add, #left-column .category-sub-menu li > .collapse-icons .add, #left-column .category-sub-menu li > .navbar-toggler .add { display: inline-block !important; } #left-column .block-categories li > .collapse-icons .remove, #left-column .block-categories li > .navbar-toggler .remove, #left-column .category-top-menu li > .collapse-icons .remove, #left-column .category-top-menu li > .navbar-toggler .remove, #left-column .category-sub-menu li > .collapse-icons .remove, #left-column .category-sub-menu li > .navbar-toggler .remove { display: none !important; } /* ouvert = - */ #left-column .block-categories li > .collapse-icons[aria-expanded="true"] .add, #left-column .block-categories li > .navbar-toggler[aria-expanded="true"] .add, #left-column .category-top-menu li > .collapse-icons[aria-expanded="true"] .add, #left-column .category-top-menu li > .navbar-toggler[aria-expanded="true"] .add, #left-column .category-sub-menu li > .collapse-icons[aria-expanded="true"] .add, #left-column .category-sub-menu li > .navbar-toggler[aria-expanded="true"] .add { display: none !important; } #left-column .block-categories li > .collapse-icons[aria-expanded="true"] .remove, #left-column .block-categories li > .navbar-toggler[aria-expanded="true"] .remove, #left-column .category-top-menu li > .collapse-icons[aria-expanded="true"] .remove, #left-column .category-top-menu li > .navbar-toggler[aria-expanded="true"] .remove, #left-column .category-sub-menu li > .collapse-icons[aria-expanded="true"] .remove, #left-column .category-sub-menu li > .navbar-toggler[aria-expanded="true"] .remove { display: inline-block !important; } /* la zone produits reste derrière */ #content-wrapper, #products, #js-product-list, .product-miniature, .product-miniature .thumbnail-container { position: relative !important; z-index: 1 !important; } /* ========================================================= CORRECTIF v1.0.41 - TITRE DE LISTE PRODUITS DANS L'ENCADRÉ - déplace le titre (ex. NOUVEAUX PRODUITS) à l'intérieur de l'encadré principal de la liste produits. ========================================================= */ /* Encadré principal de la page liste */ #products, #js-product-list, #content-wrapper #products, #content-wrapper #js-product-list { position: relative !important; padding-top: 54px !important; } /* Titre de page/liste placé dans l'encadré */ #main h1, #main .h1, #js-product-list-header h1, #js-product-list-header .h1, #products-section-title, .products-section-title { position: relative !important; z-index: 20 !important; display: inline-block !important; margin: 0 0 -18px 18px !important; padding: 0 14px !important; background: var(--gg-panel) !important; color: #ffffff !important; line-height: 1.2 !important; } /* Si le header de liste existe, on le remonte dans l'encadré */ #js-product-list-header { position: relative !important; z-index: 15 !important; margin: 0 0 -6px 0 !important; } /* Le bloc de tri et total produits reste bien sous le titre */ .products-selection, #js-product-list-top { margin-top: 0 !important; } /* ========================================================= CORRECTIF v1.0.42 - PLUS D'AIR AU-DESSUS DU TITRE PRODUITS - ajoute ~3px d'air au-dessus du titre "Nouveaux produits" - évite l'effet de coupe trop direct contre la bordure ========================================================= */ #products, #js-product-list, #content-wrapper #products, #content-wrapper #js-product-list { padding-top: 57px !important; } #main h1, #main .h1, #js-product-list-header h1, #js-product-list-header .h1, #products-section-title, .products-section-title { margin: 3px 0 -18px 18px !important; padding: 3px 14px 2px 14px !important; line-height: 1.15 !important; } /* ========================================================= CORRECTIF v1.0.43 - RÉDUCTION DE LA HAUTEUR DE L'ENCADRÉ - réduit l'espace vide en haut de l'encadré produits; - vise environ 5px entre l'encadré principal et l'encadré suivant. ========================================================= */ #products, #js-product-list, #content-wrapper #products, #content-wrapper #js-product-list { padding-top: 32px !important; } #main h1, #main .h1, #js-product-list-header h1, #js-product-list-header .h1, #products-section-title, .products-section-title { margin: 3px 0 -8px 18px !important; padding: 3px 14px 2px 14px !important; } .products-selection, #js-product-list-top { margin-top: 5px !important; } /* ========================================================= CORRECTIF v1.0.44 - RÉDUCTION SUPPLÉMENTAIRE DE L'ESPACE - réduit encore l'espace de l'encadré produits d'environ 3/4; - garde le titre visible sans couper trop brusquement. ========================================================= */ #products, #js-product-list, #content-wrapper #products, #content-wrapper #js-product-list { padding-top: 8px !important; } #main h1, #main .h1, #js-product-list-header h1, #js-product-list-header .h1, #products-section-title, .products-section-title { margin: 2px 0 -4px 18px !important; padding: 2px 12px 1px 12px !important; } .products-selection, #js-product-list-top { margin-top: 2px !important; } /* ========================================================= VERSION 1.0.45 Nom affiché nettoyé dans PrestaShop: display_name: GG3dPrintnDesign version: 1.0.45 ========================================================= */ /* ========================================================= VERSION 1.0.46 - CORRECTIF MOBILE GLOBAL Objectif: - rendre la version mobile lisible et agréable; - éviter les débordements horizontaux; - remettre les colonnes en pleine largeur; - rendre les menus, filtres, produits, compte et formulaires propres. ========================================================= */ @media (max-width: 767.98px) { html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } body { font-size: 15px !important; line-height: 1.45 !important; } #page, #wrapper, #main, #content, #content-wrapper, .container, .container-fluid { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; box-sizing: border-box !important; } .container, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; } #wrapper .row, .row { display: block !important; margin-left: 0 !important; margin-right: 0 !important; } #left-column, #right-column, #content-wrapper, .col-xs-12, .col-sm-12, .col-md-9, .col-md-3, .col-lg-9, .col-lg-3 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important; flex: none !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* HEADER MOBILE */ #header, #header .header-nav, #header .header-top { min-height: auto !important; padding: 8px 0 !important; } #header .header-nav .container, #header .header-top .container { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } #header .logo, #header img.logo, #_desktop_logo img, #_mobile_logo img { max-width: 150px !important; height: auto !important; margin: 8px auto !important; display: block !important; } #_desktop_language_selector, #_desktop_currency_selector, #_desktop_user_info, #_desktop_cart, .language-selector, .currency-selector, .user-info, .blockcart { font-size: 13px !important; line-height: 1.2 !important; margin: 2px 4px !important; } /* Recherche pleine largeur */ #search_widget, .search-widget { width: 100% !important; max-width: 100% !important; margin: 10px 0 !important; padding: 0 !important; } #search_widget form, .search-widget form { width: 100% !important; } #search_widget form input[type="text"], .search-widget form input[type="text"] { width: 100% !important; height: 42px !important; font-size: 15px !important; border-radius: 10px !important; } /* Menu mobile */ #mobile_top_menu_wrapper, #mobile_top_menu_wrapper .top-menu, #mobile_top_menu_wrapper .top-menu .sub-menu, #_mobile_top_menu, .mobile-menu { background: var(--gg-panel) !important; color: #ffffff !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 8px 22px rgba(0,0,0,0.24) !important; } #mobile_top_menu_wrapper a, #mobile_top_menu_wrapper .top-menu a, #_mobile_top_menu a { color: #ffffff !important; font-size: 15px !important; line-height: 1.35 !important; padding: 11px 12px !important; text-align: left !important; white-space: normal !important; } #mobile_top_menu_wrapper a:hover, #mobile_top_menu_wrapper .top-menu a:hover { color: var(--gg-blue) !important; } /* BLOCS / PANNEAUX MOBILE */ .card, .box, .block, .page-content, .block-category, #custom-text, .custom-text, #products, #js-product-list, .featured-products, .product-information, .tabs, .tab-content, #left-column .block-categories, #search_filters, #search_filters_wrapper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 14px !important; overflow: hidden !important; } .block-category, #custom-text, .custom-text, .page-content, #products, #js-product-list, .featured-products, #left-column .block-categories, #search_filters { padding: 14px !important; } h1, .h1 { font-size: 24px !important; line-height: 1.15 !important; } h2, .h2 { font-size: 21px !important; line-height: 1.2 !important; } h3, .h3 { font-size: 18px !important; line-height: 1.25 !important; } /* MENU CATÉGORIES GAUCHE EN MOBILE */ #left-column { margin-bottom: 18px !important; position: relative !important; z-index: 2 !important; } #left-column .block-categories { width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 16px !important; } #left-column .category-top-menu, #left-column .category-sub-menu, #left-column .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } #left-column .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu { margin-top: 6px !important; margin-bottom: 6px !important; padding: 6px 8px 6px 12px !important; border-left: 2px solid var(--gg-blue) !important; border-radius: 0 10px 10px 0 !important; } #left-column .category-top-menu li > a, #left-column .category-sub-menu li > a, #left-column .category-sub-menu .category-sub-menu > li > a, #left-column .category-sub-menu .category-sub-menu .category-sub-menu > li > a { white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; text-align: left !important; justify-content: flex-start !important; font-size: 15px !important; min-height: 38px !important; padding: 9px 38px 9px 10px !important; } #left-column .block-categories li > .collapse-icons, #left-column .block-categories li > .navbar-toggler, #left-column .category-top-menu li > .collapse-icons, #left-column .category-top-menu li > .navbar-toggler, #left-column .category-sub-menu li > .collapse-icons, #left-column .category-sub-menu li > .navbar-toggler { right: 8px !important; top: 19px !important; transform: none !important; } /* FILTRES / TRI */ #search_filters, #search_filters_wrapper { margin-bottom: 18px !important; } .products-selection, #js-product-list-top { display: block !important; width: 100% !important; padding: 12px !important; margin: 10px 0 14px 0 !important; } .products-sort-order, .products-sort-order .select-title, .products-sort-order .dropdown-menu, select#selectProductSort { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .products-sort-order .select-title { min-height: 44px !important; padding: 10px 14px !important; } /* LISTE PRODUITS MOBILE */ #products, #js-product-list { padding: 12px !important; } #products .products, #js-product-list .products, .featured-products .products { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; width: 100% !important; margin: 0 !important; } .product-miniature, #products .product-miniature, .featured-products .product-miniature { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; padding: 0 !important; } .product-miniature .thumbnail-container { width: 100% !important; max-width: 360px !important; margin: 0 auto !important; border-radius: 12px !important; overflow: hidden !important; } .product-miniature img, .product-miniature .product-thumbnail img { width: 100% !important; height: auto !important; object-fit: cover !important; } .product-miniature .product-title, .product-miniature .product-title a { font-size: 15px !important; line-height: 1.25 !important; white-space: normal !important; } .product-miniature .product-price-and-shipping, .product-miniature .price { font-size: 17px !important; } .product-miniature .highlighted-informations { width: 100% !important; } /* Fiche produit mobile */ .product-container, .product-cover, .product-images, .product-information, .product-actions, .product-prices, .product-add-to-cart, .tabs, .tab-content { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .product-cover img, .js-qv-product-cover { width: 100% !important; height: auto !important; } .product-actions .control-label, .product-variants .control-label { color: #ffffff !important; } .product-add-to-cart .btn, .product-add-to-cart button, .add-to-cart { width: 100% !important; min-height: 46px !important; font-size: 16px !important; } /* Compte client / formulaires mobile */ .page-customer-account #content .links, .page-my-account #content .links { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } .page-customer-account #content .links a, .page-my-account #content .links a { width: 100% !important; min-height: 92px !important; } form, .form-group, .form-control, input, textarea, select, .input-group { max-width: 100% !important; box-sizing: border-box !important; } input, textarea, select, .form-control { font-size: 16px !important; } .btn, button, input[type="submit"] { max-width: 100% !important; white-space: normal !important; } /* Footer mobile */ #footer, #footer .footer-container, .block_newsletter { text-align: left !important; } .block_newsletter .row, #footer .row { display: block !important; } .block_newsletter input[type="email"], .block_newsletter input[type="text"], .block_newsletter .btn { width: 100% !important; margin: 6px 0 !important; } #footer .links, #footer .block-contact { margin-bottom: 18px !important; } } @media (min-width: 576px) and (max-width: 767.98px) { #products .products, #js-product-list .products, .featured-products .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ========================================================= VERSION 1.0.47 - MOBILE: PRODUITS AU CENTRE + MENUS PROPRES Objectif: - cacher le menu du haut par défaut sur mobile; - afficher le menu du haut seulement lorsque PrestaShop l'ouvre via le bouton hamburger; - cacher le menu de gauche par défaut sur mobile pour laisser voir les produits; - centrer les produits et supprimer le débordement horizontal; - prévoir un affichage en premier plan si un module ouvre la colonne gauche. ========================================================= */ @media (max-width: 991.98px) { html, body, #page, #wrapper, #main, #content, #content-wrapper, .container, .container-fluid { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; box-sizing: border-box !important; } .container, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; } #wrapper .row, .row, #wrapper .row:has(#left-column):has(#content-wrapper) { display: block !important; flex-wrap: nowrap !important; margin-left: 0 !important; margin-right: 0 !important; gap: 0 !important; } /* Le contenu produits prend toute la largeur mobile */ #content-wrapper, #wrapper .row:has(#left-column):has(#content-wrapper) > #content-wrapper { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important; flex: none !important; margin: 0 auto !important; padding: 0 !important; position: relative !important; z-index: 1 !important; } /* Menu de gauche caché par défaut sur mobile */ #left-column, #wrapper .row:has(#left-column):has(#content-wrapper) > #left-column { display: none !important; width: 0 !important; max-width: 0 !important; min-width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Si PrestaShop ou un module ouvre la colonne gauche, elle devient un panneau en premier plan */ body.facets-open #left-column, body.filters-open #left-column, body.left-column-open #left-column, #left-column.show, #left-column.in, #left-column.open, #left-column.is-open, #left-column[aria-hidden="false"] { display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 92vw !important; max-width: 380px !important; min-width: 280px !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 99999 !important; background: var(--gg-bg) !important; padding: 14px !important; box-shadow: 0 0 0 9999px rgba(0,0,0,0.62), 12px 0 28px rgba(0,0,0,0.35) !important; } body.facets-open #left-column .block-categories, body.filters-open #left-column .block-categories, body.left-column-open #left-column .block-categories, #left-column.show .block-categories, #left-column.in .block-categories, #left-column.open .block-categories, #left-column.is-open .block-categories, #left-column[aria-hidden="false"] .block-categories { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Header mobile compact */ #header .header-nav, #header .header-top { padding-top: 8px !important; padding-bottom: 8px !important; } #header .header-top .container, #header .header-nav .container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 10px !important; } #_mobile_logo img, #header .logo, #header img.logo { max-width: 72px !important; height: auto !important; } #menu-icon, #_mobile_top_menu, .menu-icon { color: #ffffff !important; } /* Recherche mobile lisible */ #search_widget, .search-widget { width: min(100%, 480px) !important; margin: 10px auto !important; } #search_widget form input[type="text"], .search-widget form input[type="text"] { width: 100% !important; height: 44px !important; border-radius: 12px !important; font-size: 16px !important; } /* Menu du haut mobile: caché par défaut */ #mobile_top_menu_wrapper { display: none !important; width: min(100%, 520px) !important; max-width: 100% !important; margin: 10px auto 18px auto !important; padding: 12px !important; background: var(--gg-panel) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important; } /* Menu du haut visible seulement quand PrestaShop l'ouvre */ #mobile_top_menu_wrapper.show, #mobile_top_menu_wrapper.in, #mobile_top_menu_wrapper.open, #mobile_top_menu_wrapper.is-open, #mobile_top_menu_wrapper[aria-hidden="false"], body.mobile-menu-open #mobile_top_menu_wrapper, body.menu-open #mobile_top_menu_wrapper { display: block !important; } /* Support du cas où PrestaShop ajoute display:block en inline */ #mobile_top_menu_wrapper[style*="display: block"] { display: block !important; } #mobile_top_menu_wrapper .top-menu, #mobile_top_menu_wrapper .top-menu .sub-menu { width: 100% !important; max-width: 100% !important; min-width: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; overflow: hidden !important; } #mobile_top_menu_wrapper .top-menu > li, #mobile_top_menu_wrapper li { width: 100% !important; max-width: 100% !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; } #mobile_top_menu_wrapper a, #mobile_top_menu_wrapper .top-menu a { display: block !important; width: 100% !important; color: #ffffff !important; font-size: 16px !important; line-height: 1.3 !important; text-align: left !important; white-space: normal !important; padding: 12px 14px !important; } #mobile_top_menu_wrapper a:hover { color: var(--gg-blue) !important; } /* Zone produits centrée */ #products, #js-product-list, #content-wrapper #products, #content-wrapper #js-product-list { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto 18px auto !important; padding: 12px !important; box-sizing: border-box !important; overflow: hidden !important; } #products .products, #js-product-list .products, .featured-products .products { display: grid !important; grid-template-columns: 1fr !important; justify-items: center !important; gap: 18px !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } .product-miniature, #products .product-miniature, .featured-products .product-miniature { width: 100% !important; max-width: 360px !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; float: none !important; } .product-miniature .thumbnail-container, #products .product-miniature .thumbnail-container { width: 100% !important; max-width: 360px !important; margin: 0 auto !important; border-radius: 14px !important; overflow: hidden !important; } .product-miniature img, .product-thumbnail img { width: 100% !important; height: auto !important; } .product-miniature .product-title, .product-miniature .product-title a { white-space: normal !important; overflow-wrap: anywhere !important; line-height: 1.25 !important; } /* Tri et total produits */ .products-selection, #js-product-list-top { width: 100% !important; max-width: 100% !important; margin: 10px auto 16px auto !important; padding: 12px !important; box-sizing: border-box !important; } .products-sort-order, .products-sort-order .select-title { width: 100% !important; max-width: 100% !important; } /* Titres et fil d'Ariane */ .breadcrumb, nav.breadcrumb { width: 100% !important; max-width: 100% !important; padding: 8px 0 !important; font-size: 15px !important; overflow-wrap: anywhere !important; } h1, .h1, #main h1, #main .h1 { font-size: 23px !important; line-height: 1.15 !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* Footer mobile */ #footer, #footer .footer-container, .block_newsletter { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } } @media (min-width: 576px) and (max-width: 991.98px) { #products .products, #js-product-list .products, .featured-products .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ========================================================= VERSION 1.0.48 - FILTRES MOBILE + PAGINATION - le bouton FILTRER ouvre maintenant les filtres sur mobile; - le panneau filtre est en premier plan; - la pagination blanche est harmonisée au thème sombre; - correction générale desktop + mobile pour pagination. ========================================================= */ /* PAGINATION - correction globale */ .pagination, .pagination .page-list, .pagination ul, nav.pagination, #pagination, #js-product-list .pagination, #products .pagination, #content-wrapper .pagination { background: var(--gg-panel) !important; background-color: var(--gg-panel) !important; color: var(--gg-text-soft) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 14px !important; box-shadow: 0 8px 22px rgba(0,0,0,0.20) !important; } .pagination, nav.pagination, #js-product-list .pagination, #products .pagination { padding: 12px 14px !important; margin: 18px auto !important; width: fit-content !important; max-width: 100% !important; } .pagination .page-list, .pagination ul { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; border: none !important; box-shadow: none !important; } .pagination li, .pagination .page-item { background: transparent !important; border: none !important; margin: 0 !important; } .pagination a, .pagination span, .pagination .page-link, .pagination .current, .pagination .disabled, .pagination .previous, .pagination .next { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 40px !important; min-height: 40px !important; padding: 8px 12px !important; border-radius: 10px !important; background: var(--gg-panel-soft) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.12) !important; text-decoration: none !important; line-height: 1.2 !important; } .pagination a:hover, .pagination .page-link:hover { background: rgba(0,174,239,0.14) !important; color: var(--gg-blue) !important; border-color: rgba(0,174,239,0.35) !important; } .pagination .current, .pagination .active a, .pagination .active .page-link, .pagination .page-item.active .page-link { background: linear-gradient(135deg, var(--gg-blue), #018fcb) !important; color: #ffffff !important; border-color: transparent !important; } .pagination .disabled, .pagination .page-item.disabled .page-link { opacity: 0.45 !important; color: #c7d2de !important; } /* MOBILE FILTER OVERLAY */ @media (max-width: 991.98px) { /* Le filtre reste caché par défaut, mais peut être ouvert par JS / PrestaShop */ #left-column, #wrapper .row:has(#left-column):has(#content-wrapper) > #left-column { display: none !important; } body.gg-mobile-filters-open { overflow: hidden !important; } body.gg-mobile-filters-open #left-column, #left-column.gg-mobile-filter-panel-open, body.facets-open #left-column, body.filters-open #left-column, #left-column.show, #left-column.in, #left-column.open, #left-column.is-open, #left-column[aria-hidden="false"] { display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 92vw !important; max-width: 390px !important; min-width: 280px !important; height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 999999 !important; background: var(--gg-bg) !important; padding: 16px !important; box-sizing: border-box !important; box-shadow: 0 0 0 9999px rgba(0,0,0,0.68), 12px 0 28px rgba(0,0,0,0.40) !important; } body.gg-mobile-filters-open #search_filters_wrapper, #search_filters_wrapper.gg-mobile-search-filters-open, body.facets-open #search_filters_wrapper, body.filters-open #search_filters_wrapper, #search_filters_wrapper.show, #search_filters_wrapper.in, #search_filters_wrapper.open, #search_filters_wrapper.is-open, #search_filters_wrapper[style*="display: block"] { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; background: var(--gg-panel) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 16px !important; padding: 16px !important; margin: 0 !important; box-sizing: border-box !important; } body.gg-mobile-filters-open #search_filters, #search_filters_wrapper.gg-mobile-search-filters-open #search_filters { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 100% !important; background: var(--gg-panel) !important; color: #ffffff !important; } .gg-mobile-filter-close { display: block !important; width: 100% !important; min-height: 44px !important; margin: 0 0 14px 0 !important; padding: 10px 14px !important; border: none !important; border-radius: 12px !important; background: linear-gradient(135deg, var(--gg-blue), #018fcb) !important; color: #ffffff !important; font-weight: 700 !important; text-align: center !important; cursor: pointer !important; } /* Le bouton FILTRER reste visible et propre */ #search_filter_toggler, .filter-button button, .btn-secondary.filter-button, button#search_filter_toggler { width: auto !important; min-height: 44px !important; padding: 10px 16px !important; border-radius: 10px !important; background: var(--gg-panel-soft) !important; color: var(--gg-blue) !important; border: 1px solid rgba(255,255,255,0.16) !important; font-weight: 700 !important; } #search_filter_toggler:hover, .filter-button button:hover { background: rgba(0,174,239,0.14) !important; border-color: rgba(0,174,239,0.35) !important; color: #ffffff !important; } /* Pagination mobile pleine largeur et sans rectangle blanc */ .pagination, nav.pagination, #js-product-list .pagination, #products .pagination { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 12px !important; margin: 18px auto !important; } .pagination .page-list, .pagination ul { width: 100% !important; } .pagination a, .pagination span, .pagination .page-link { min-width: 38px !important; min-height: 38px !important; padding: 8px 10px !important; } } /* ========================================================= VERSION 1.0.49 - GALERIE PRODUIT MOBILE - miniatures de produit défilables horizontalement au doigt; - miniature sélectionnée centrée automatiquement par JS; - flèches plus propres et non bloquantes; - image principale centrée et adaptée à l'écran mobile. ========================================================= */ @media (max-width: 991.98px) { .images-container, .product-cover, .product-images, .js-qv-mask, .js-qv-product-images { max-width: 100% !important; box-sizing: border-box !important; } .product-cover, .product-cover img, .js-qv-product-cover { width: 100% !important; max-width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; } .js-qv-mask, .product-images, .js-qv-product-images, .images-container .product-images { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x proximity !important; scroll-behavior: smooth !important; padding: 10px 46px !important; margin: 10px auto 18px auto !important; box-sizing: border-box !important; } .js-qv-mask::-webkit-scrollbar, .product-images::-webkit-scrollbar, .js-qv-product-images::-webkit-scrollbar { height: 6px !important; } .js-qv-mask::-webkit-scrollbar-track, .product-images::-webkit-scrollbar-track, .js-qv-product-images::-webkit-scrollbar-track { background: rgba(255,255,255,0.06) !important; border-radius: 20px !important; } .js-qv-mask::-webkit-scrollbar-thumb, .product-images::-webkit-scrollbar-thumb, .js-qv-product-images::-webkit-scrollbar-thumb { background: rgba(0,174,239,0.55) !important; border-radius: 20px !important; } .product-images > li, .js-qv-product-images > li, .thumb-container { flex: 0 0 auto !important; width: 86px !important; max-width: 86px !important; scroll-snap-align: center !important; margin: 0 !important; } .product-images img, .js-qv-product-images img, .thumb-container img, .js-thumb { width: 86px !important; height: 86px !important; object-fit: cover !important; border-radius: 8px !important; border: 2px solid transparent !important; opacity: 0.78 !important; transition: border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease !important; } .product-images img.selected, .product-images .selected img, .js-thumb.selected, .js-thumb.js-thumb-selected, .thumb.selected { border-color: var(--gg-blue) !important; opacity: 1 !important; transform: scale(1.03) !important; } /* Flèches de galerie: restent utilisables mais ne bloquent pas le swipe */ .scroll-box-arrows, .js-qv-mask .scroll-box-arrows, .images-container .scroll-box-arrows { pointer-events: none !important; } .scroll-box-arrows i, .scroll-box-arrows .material-icons, .js-qv-mask .material-icons, .images-container .scroll-box-arrows .material-icons { pointer-events: auto !important; color: #ffffff !important; background: rgba(10,16,26,0.65) !important; border-radius: 50% !important; padding: 6px !important; } .scroll-box-arrows i:hover, .scroll-box-arrows .material-icons:hover { color: var(--gg-blue) !important; } /* Sur fiche produit, éviter les découpes latérales dans le bloc images */ .product-cover, .images-container { overflow: hidden !important; border-radius: 14px !important; } } /* ========================================================= VERSION 1.0.50 - CORRECTIF FILTRER MOBILE ROBUSTE - le bouton FILTRER ouvre le panneau de filtres; - la colonne gauche ne pousse plus les produits sur mobile; - le panneau filtres apparaît en overlay par-dessus les produits; - la pagination reste harmonisée au thème. ========================================================= */ /* Pagination sombre globale - sécurité supplémentaire */ .pagination, .pagination .page-list, .pagination ul, nav.pagination, #pagination, #js-product-list .pagination, #products .pagination, #content-wrapper .pagination { background: var(--gg-panel) !important; background-color: var(--gg-panel) !important; color: var(--gg-text-soft) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 14px !important; box-shadow: 0 8px 22px rgba(0,0,0,0.20) !important; } .pagination, nav.pagination, #js-product-list .pagination, #products .pagination { padding: 12px 14px !important; margin: 18px auto !important; max-width: 100% !important; } .pagination .page-list, .pagination ul { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; border: none !important; box-shadow: none !important; } .pagination a, .pagination span, .pagination .page-link, .pagination .current, .pagination .previous, .pagination .next { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 40px !important; min-height: 40px !important; padding: 8px 12px !important; border-radius: 10px !important; background: var(--gg-panel-soft) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.12) !important; text-decoration: none !important; } .pagination a:hover, .pagination .page-link:hover { background: rgba(0,174,239,0.14) !important; color: var(--gg-blue) !important; border-color: rgba(0,174,239,0.35) !important; } .pagination .current, .pagination .active a, .pagination .active .page-link, .pagination .page-item.active .page-link { background: linear-gradient(135deg, var(--gg-blue), #018fcb) !important; color: #ffffff !important; border-color: transparent !important; } /* Mobile filters */ @media (max-width: 991.98px) { /* Ne pas laisser la colonne gauche pousser les produits */ #left-column, #wrapper .row:has(#left-column):has(#content-wrapper) > #left-column { display: block !important; position: static !important; width: 0 !important; max-width: 0 !important; min-width: 0 !important; height: 0 !important; min-height: 0 !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; } /* Cacher le menu catégories gauche par défaut sur mobile */ #left-column .block-categories { display: none !important; } /* Filtres cachés par défaut */ #search_filters_wrapper, #search_filters { display: none !important; } body.gg-mobile-filters-open { overflow: hidden !important; } /* Quand FILTRER est ouvert: panneau plein écran latéral */ body.gg-mobile-filters-open #search_filters_wrapper, body.gg-mobile-filters-open #search_filters, #search_filters_wrapper.gg-mobile-search-filters-open, #search_filters.gg-mobile-search-filters-open, #search_filters_wrapper.show, #search_filters_wrapper.in, #search_filters_wrapper.open, #search_filters_wrapper.is-open, #search_filters_wrapper[aria-hidden="false"], #search_filters_wrapper[style*="display: block"] { display: block !important; visibility: visible !important; opacity: 1 !important; } body.gg-mobile-filters-open #search_filters_wrapper, #search_filters_wrapper.gg-mobile-search-filters-open, #search_filters_wrapper.show, #search_filters_wrapper.in, #search_filters_wrapper.open, #search_filters_wrapper.is-open, #search_filters_wrapper[aria-hidden="false"], #search_filters_wrapper[style*="display: block"] { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 92vw !important; max-width: 390px !important; min-width: 280px !important; height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 999999 !important; background: var(--gg-bg) !important; color: #ffffff !important; padding: 16px !important; box-sizing: border-box !important; box-shadow: 0 0 0 9999px rgba(0,0,0,0.68), 12px 0 28px rgba(0,0,0,0.40) !important; } body.gg-mobile-filters-open #search_filters, #search_filters_wrapper.gg-mobile-search-filters-open #search_filters, #search_filters.gg-mobile-search-filters-open { width: 100% !important; max-width: 100% !important; background: var(--gg-panel) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 16px !important; padding: 16px !important; margin: 0 !important; box-sizing: border-box !important; } .gg-mobile-filter-close { display: block !important; width: 100% !important; min-height: 44px !important; margin: 0 0 14px 0 !important; padding: 10px 14px !important; border: none !important; border-radius: 12px !important; background: linear-gradient(135deg, var(--gg-blue), #018fcb) !important; color: #ffffff !important; font-weight: 700 !important; text-align: center !important; cursor: pointer !important; } /* bouton FILTRER visible/propre */ #search_filter_toggler, .filter-button, .filter-button button, button#search_filter_toggler { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; padding: 10px 16px !important; border-radius: 10px !important; background: var(--gg-panel-soft) !important; color: var(--gg-blue) !important; border: 1px solid rgba(255,255,255,0.16) !important; font-weight: 700 !important; text-transform: uppercase !important; } #search_filter_toggler:hover, .filter-button button:hover { background: rgba(0,174,239,0.14) !important; border-color: rgba(0,174,239,0.35) !important; color: #ffffff !important; } /* Pagination mobile */ .pagination, nav.pagination, #js-product-list .pagination, #products .pagination { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 12px !important; } } /* ========================================================= VERSION 1.0.51 - MOBILE FILTER ACCORDION + MENU LOCK FIX - les filtres sont fermés par défaut; - chaque groupe de filtres peut être ouvert/fermé; - corrige le blocage après filtre + hamburger; - conserve le panneau filtre par-dessus les produits. ========================================================= */ @media (max-width: 991.98px) { /* Overlay filtre prioritaire */ body.gg-mobile-filters-open { overflow: hidden !important; } body.gg-mobile-filters-open #search_filters_wrapper, #search_filters_wrapper.gg-mobile-search-filters-open, body.gg-mobile-filters-open #search_filters, #search_filters.gg-mobile-search-filters-open { display: block !important; visibility: visible !important; opacity: 1 !important; } body.gg-mobile-filters-open #search_filters_wrapper, #search_filters_wrapper.gg-mobile-search-filters-open { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 92vw !important; max-width: 390px !important; min-width: 280px !important; height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 999999 !important; background: var(--gg-bg) !important; color: #ffffff !important; padding: 16px !important; box-sizing: border-box !important; box-shadow: 0 0 0 9999px rgba(0,0,0,0.68), 12px 0 28px rgba(0,0,0,0.40) !important; } body.gg-mobile-filters-open #search_filters, #search_filters.gg-mobile-search-filters-open, #search_filters_wrapper.gg-mobile-search-filters-open #search_filters { width: 100% !important; max-width: 100% !important; background: var(--gg-panel) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 16px !important; padding: 16px !important; margin: 0 !important; box-sizing: border-box !important; } .gg-mobile-filter-close { display: block !important; width: 100% !important; min-height: 44px !important; margin: 0 0 14px 0 !important; padding: 10px 14px !important; border: none !important; border-radius: 12px !important; background: linear-gradient(135deg, var(--gg-blue), #018fcb) !important; color: #ffffff !important; font-weight: 700 !important; text-align: center !important; cursor: pointer !important; } /* Accordéon filtres mobile */ #search_filters .gg-mobile-facet-ready { background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 12px !important; margin: 10px 0 !important; padding: 0 !important; overflow: hidden !important; } #search_filters .gg-mobile-facet-toggle { display: flex !important; width: 100% !important; min-height: 48px !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 12px 14px !important; background: var(--gg-panel-soft) !important; border: none !important; color: #ffffff !important; font-weight: 700 !important; text-align: left !important; cursor: pointer !important; } #search_filters .gg-mobile-facet-title { color: #ffffff !important; font-size: 17px !important; line-height: 1.25 !important; } #search_filters .gg-mobile-facet-symbol { color: #ffffff !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1 !important; } /* Cacher les anciens titres afin de ne garder que le nouveau bouton propre */ #search_filters .gg-mobile-facet-ready > .title, #search_filters .gg-mobile-facet-ready > .facet-title, #search_filters .gg-mobile-facet-ready > p.h6, #search_filters .gg-mobile-facet-ready > .h6:not(.gg-mobile-facet-toggle) { display: none !important; } #search_filters .gg-mobile-facet-closed > .gg-mobile-facet-content { display: none !important; } #search_filters .gg-mobile-facet-open > .gg-mobile-facet-content { display: block !important; padding: 12px 14px !important; } /* Empêcher les doubles flèches natives dans les facets */ #search_filters .gg-mobile-facet-ready .collapse-icons, #search_filters .gg-mobile-facet-ready .navbar-toggler { display: none !important; } #search_filters .facet-label, #search_filters .custom-checkbox, #search_filters .facet li, #search_filters .facet a, #search_filters .facet span { color: var(--gg-text-soft) !important; } #search_filters input[type="checkbox"], #search_filters input[type="radio"] { width: 22px !important; height: 22px !important; margin-right: 10px !important; } /* Le menu hamburger ne doit plus laisser un panneau vide bloquant */ body:not(.gg-mobile-filters-open) #search_filters_wrapper.gg-mobile-search-filters-open, body:not(.gg-mobile-filters-open) #search_filters.gg-mobile-search-filters-open { display: none !important; } } /* ========================================================= VERSION 1.0.52 - COULEUR TEXTE GLOBALE PAR DÉFAUT Objectif: - les nouvelles pages, nouveaux blocs et contenus ajoutés héritent du blanc / gris clair par défaut; - éviter les textes noirs ou gris foncé sur fond sombre; - conserver les champs, menus déroulants, boutons et éléments nécessitant un contraste spécifique. ========================================================= */ /* Texte global du site */ html, body, #page, #wrapper, #main, #content, #content-wrapper, .page-content, .page-cms, .cms-page, .block, .card, .box, .modal-content, .product-description, .product-information, .category-description, .block-category, .custom-text, #custom-text, .tabs, .tab-content, .footer-container { color: #ffffff !important; } /* Texte courant: paragraphes, listes, petites descriptions */ p, li, span, small, em, strong, label, legend, td, th, section, article, aside, main, header, footer, address, blockquote { color: inherit; } /* Contenu éditorial ajouté dans PrestaShop */ .page-content p, .page-content li, .page-content span, .page-content div, .page-cms p, .page-cms li, .page-cms span, .page-cms div, .cms-page p, .cms-page li, .cms-page span, .cms-page div, .custom-text p, .custom-text li, .custom-text span, .custom-text div, #custom-text p, #custom-text li, #custom-text span, #custom-text div, .category-description p, .category-description li, .category-description span, .category-description div, .product-description p, .product-description li, .product-description span, .product-description div, .product-information p, .product-information li, .product-information span, .product-information div { color: var(--gg-text-soft) !important; } /* Titres par défaut */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .page-title, .section-title, .products-section-title, .product-title, .card-title, .block-title { color: #ffffff !important; } /* Liens par défaut */ a, .page-content a, .page-cms a, .cms-page a, .custom-text a, #custom-text a, .category-description a, .product-description a, .footer-container a { color: #ffffff !important; } a:hover, .page-content a:hover, .page-cms a:hover, .cms-page a:hover, .custom-text a:hover, #custom-text a:hover, .category-description a:hover, .product-description a:hover, .footer-container a:hover { color: var(--gg-blue) !important; } /* Tableaux et blocs informatifs */ table, .table, .table-bordered, .table-striped, .table th, .table td, .alert, .notice, .definition-list, dl, dt, dd { color: var(--gg-text-soft) !important; background-color: transparent !important; border-color: rgba(255,255,255,0.12) !important; } /* Blocs blancs génériques nouvellement ajoutés */ .card, .box, .panel, .well, .page-content, .block, .block-categories, .block-category, .page-cms, .cms-page, .custom-text, #custom-text, .contact-rich, .contact-form, .form-fields, .tabs, .tab-content { background-color: var(--gg-panel) !important; color: var(--gg-text-soft) !important; border-color: rgba(255,255,255,0.10) !important; } /* Ne pas rendre les champs illisibles */ input, textarea, select, .form-control, .input-group, select option { background-color: var(--gg-panel-soft) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.16) !important; } /* Placeholders */ input::placeholder, textarea::placeholder, .form-control::placeholder { color: #aeb8c6 !important; opacity: 1 !important; } /* Menus déroulants et options */ .dropdown-menu, .dropdown-item, .select-list, .dropdown-menu a, .dropdown-menu button { background-color: var(--gg-panel-soft) !important; color: #ffffff !important; } .dropdown-item:hover, .select-list:hover, .dropdown-menu a:hover, .dropdown-menu button:hover { background-color: rgba(0,174,239,0.14) !important; color: var(--gg-blue) !important; } /* Boutons: garder texte blanc sur boutons colorés */ .btn, button, input[type="submit"], .btn-primary, .btn-secondary, .btn-tertiary { color: #ffffff !important; } /* Prix et informations importantes */ .price, .product-price, .current-price, .product-price-and-shipping, .has-discount, .discount, .regular-price, .tax-shipping-delivery-label { color: #ffffff !important; } /* Texte secondaire: plus pâle, mais lisible */ .text-muted, .help-block, .form-control-comment, .product-reference, .product-quantities, #product-details, .product-features, .product-features p, .product-features span, .product-features li, .product-condition, .tabs .nav-tabs .nav-link { color: var(--gg-text-soft) !important; } /* Breadcrumb */ .breadcrumb, .breadcrumb a, .breadcrumb li, .breadcrumb span { color: #ffffff !important; } .breadcrumb .current, .breadcrumb li:last-child, .breadcrumb li:last-child span { color: #aeb8c6 !important; } /* Footer global */ #footer, #footer p, #footer li, #footer span, #footer div, #footer .links a, .footer-container, .footer-container p, .footer-container li, .footer-container span, .footer-container div { color: #ffffff !important; } /* Exceptions utiles: badges et labels colorés gardent leurs couleurs */ .product-flag, .badge, .label, .discount-percentage, .on-sale, .new { color: #ffffff !important; } /* Éviter le texte blanc sur fond blanc si un module externe force réellement un fond clair */ [style*="background:#fff"], [style*="background: #fff"], [style*="background-color:#fff"], [style*="background-color: #fff"], [style*="background:white"], [style*="background: white"], [style*="background-color:white"], [style*="background-color: white"] { background-color: var(--gg-panel) !important; color: var(--gg-text-soft) !important; } /* ========================================================= VERSION 1.0.53 - ICÔNES RÉSEAUX SOCIAUX + STYLE GLOBAL COHÉRENT Objectif: - rendre Facebook / Instagram visibles dans le pied de page; - uniformiser les icônes sociales avec le thème sombre GG3D; - ajouter des styles par défaut pour limiter les petits correctifs futurs. ========================================================= */ /* Bloc réseaux sociaux */ #footer .block-social, .footer-container .block-social, .block-social, .social-icons, .social-sharing { background: transparent !important; color: #ffffff !important; } #footer .block-social ul, .footer-container .block-social ul, .block-social ul, .social-icons ul, .social-sharing ul { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; margin: 12px 0 !important; padding: 0 !important; list-style: none !important; } #footer .block-social li, .footer-container .block-social li, .block-social li, .social-icons li, .social-sharing li { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* Icônes sociales: fond sombre, bordure bleutée, icône blanche */ #footer .block-social li a, .footer-container .block-social li a, .block-social li a, .social-icons a, .social-sharing a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; border-radius: 12px !important; background-color: var(--gg-panel-soft) !important; background-image: none !important; border: 1px solid rgba(0,174,239,0.35) !important; box-shadow: 0 6px 16px rgba(0,0,0,0.22) !important; color: #ffffff !important; text-decoration: none !important; text-indent: 0 !important; overflow: hidden !important; transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important; } /* Certains thèmes/modules cachent le texte avec font-size ou text-indent */ #footer .block-social li a *, .footer-container .block-social li a *, .block-social li a *, .social-icons a *, .social-sharing a * { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; text-indent: 0 !important; } /* Fallback visuel pour les réseaux les plus courants */ #footer .block-social li a::before, .footer-container .block-social li a::before, .block-social li a::before, .social-icons a::before, .social-sharing a::before { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; color: #ffffff !important; font-family: Arial, Verdana, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; text-indent: 0 !important; } /* Facebook */ #footer .block-social li.facebook a::before, .footer-container .block-social li.facebook a::before, .block-social li.facebook a::before, .social-icons a.facebook::before, .social-sharing a.facebook::before, a[href*="facebook.com"]::before { content: "f" !important; } /* Instagram */ #footer .block-social li.instagram a::before, .footer-container .block-social li.instagram a::before, .block-social li.instagram a::before, .social-icons a.instagram::before, .social-sharing a.instagram::before, a[href*="instagram.com"]::before { content: "◎" !important; font-size: 24px !important; } /* TikTok */ #footer .block-social li.tiktok a::before, .footer-container .block-social li.tiktok a::before, .block-social li.tiktok a::before, .social-icons a.tiktok::before, .social-sharing a.tiktok::before, a[href*="tiktok.com"]::before { content: "♪" !important; } /* YouTube */ #footer .block-social li.youtube a::before, .footer-container .block-social li.youtube a::before, .block-social li.youtube a::before, .social-icons a.youtube::before, .social-sharing a.youtube::before, a[href*="youtube.com"]::before { content: "▶" !important; font-size: 18px !important; } /* X / Twitter */ #footer .block-social li.twitter a::before, .footer-container .block-social li.twitter a::before, .block-social li.twitter a::before, .social-icons a.twitter::before, .social-sharing a.twitter::before, a[href*="twitter.com"]::before, a[href*="x.com"]::before { content: "X" !important; font-size: 19px !important; } #footer .block-social li a:hover, .footer-container .block-social li a:hover, .block-social li a:hover, .social-icons a:hover, .social-sharing a:hover { background-color: rgba(0,174,239,0.18) !important; border-color: var(--gg-blue) !important; color: #ffffff !important; transform: translateY(-1px) !important; } /* Correction générale pour les petites icônes claires sur fond clair */ .icon, .material-icons, i, svg, svg path, svg circle, svg rect, svg polygon { color: inherit; } /* Boutons / carrés icônes génériques pour modules futurs */ a[class*="social"], button[class*="social"], [class*="social"] a, [class*="share"] a, [class*="follow"] a { color: #ffffff !important; } /* Modules futurs avec blocs blancs: harmonisation de base */ #footer [class*="social"], .footer-container [class*="social"], #footer [class*="share"], .footer-container [class*="share"] { background-color: transparent !important; color: #ffffff !important; } /* Mobile: centrer les réseaux sociaux dans le footer */ @media (max-width: 767.98px) { #footer .block-social ul, .footer-container .block-social ul, .block-social ul, .social-icons ul, .social-sharing ul { justify-content: center !important; } #footer .block-social, .footer-container .block-social, .block-social { text-align: center !important; } } /* ========================================================= VERSION 1.0.54 - RÉSEAUX SOCIAUX: CONSERVER LES ICÔNES/IMAGES PAR DÉFAUT - retire le remplacement par texte - garde le style du thème - masque le texte brut du lien s'il existe ========================================================= */ /* Annuler le pseudo-texte ajouté en v1.0.53 */ #footer .block-social li a::before, .footer-container .block-social li a::before, .block-social li a::before, .social-icons a::before, .social-sharing a::before, a[href*="facebook.com"]::before, a[href*="instagram.com"]::before, a[href*="tiktok.com"]::before, a[href*="youtube.com"]::before, a[href*="twitter.com"]::before, a[href*="x.com"]::before { content: none !important; display: none !important; } /* Conserver le look du thème, mais laisser l'icône/image native s'afficher */ #footer .block-social li a, .footer-container .block-social li a, .block-social li a, .social-icons a, .social-sharing a { background-color: var(--gg-panel-soft) !important; border: 1px solid rgba(0,174,239,0.35) !important; border-radius: 12px !important; box-shadow: 0 6px 16px rgba(0,0,0,0.22) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 20px 20px !important; min-width: 42px !important; min-height: 42px !important; width: 42px !important; height: 42px !important; overflow: hidden !important; text-indent: -9999px !important; white-space: nowrap !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; } /* Si le module utilise une image, un svg ou une police d'icône, les laisser visibles */ #footer .block-social li a img, .footer-container .block-social li a img, .block-social li a img, .social-icons a img, .social-sharing a img, #footer .block-social li a svg, .footer-container .block-social li a svg, .block-social li a svg, .social-icons a svg, .social-sharing a svg, #footer .block-social li a i, .footer-container .block-social li a i, .block-social li a i, .social-icons a i, .social-sharing a i, #footer .block-social li a .icon, .footer-container .block-social li a .icon, .block-social li a .icon, .social-icons a .icon, .social-sharing a .icon { display: inline-block !important; width: 20px !important; height: 20px !important; line-height: 20px !important; font-size: 20px !important; text-indent: 0 !important; color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; filter: brightness(0) invert(1) !important; vertical-align: middle !important; } /* Masquer seulement le texte brut, pas les vraies icônes */ #footer .block-social li a span:not([class]):not([class*="icon"]):not([class*="fa"]), .footer-container .block-social li a span:not([class]):not([class*="icon"]):not([class*="fa"]), .block-social li a span:not([class]):not([class*="icon"]):not([class*="fa"]), .social-icons a span:not([class]):not([class*="icon"]):not([class*="fa"]), .social-sharing a span:not([class]):not([class*="icon"]):not([class*="fa"]) { display: none !important; } #footer .block-social li a:hover, .footer-container .block-social li a:hover, .block-social li a:hover, .social-icons a:hover, .social-sharing a:hover { background-color: rgba(0,174,239,0.18) !important; border-color: var(--gg-blue) !important; } /* ========================================================= VERSION 1.0.55 - RÉSEAUX SOCIAUX EN ICÔNES SVG Objectif: - ne plus afficher de texte coupé; - afficher des vraies icônes blanches sur le thème sombre; - garder le style cohérent même si le module ne fournit pas d'image. ========================================================= */ /* Retirer tout texte/pseudo-texte précédent */ #footer .block-social li a::before, .footer-container .block-social li a::before, .block-social li a::before, .social-icons a::before, .social-sharing a::before, a[href*="facebook.com"]::before, a[href*="instagram.com"]::before, a[href*="tiktok.com"]::before, a[href*="youtube.com"]::before, a[href*="twitter.com"]::before, a[href*="x.com"]::before { content: none !important; display: none !important; } /* Base des boutons sociaux */ #footer .block-social li a, .footer-container .block-social li a, .block-social li a, .social-icons a, .social-sharing a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; border-radius: 12px !important; background-color: var(--gg-panel-soft) !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 22px 22px !important; border: 1px solid rgba(0,174,239,0.35) !important; box-shadow: 0 6px 16px rgba(0,0,0,0.22) !important; overflow: hidden !important; text-indent: -9999px !important; white-space: nowrap !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; } /* Icônes SVG de secours, mais visuelles comme des images */ #footer .block-social li.facebook a, .footer-container .block-social li.facebook a, .block-social li.facebook a, .social-icons a.facebook, .social-sharing a.facebook, a[href*="facebook.com"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22white%22 d=%22M14.5 8H17V4h-3c-3.3 0-5 2-5 5v2H6v4h3v9h4v-9h3.3l.7-4h-4V9c0-.7.3-1 1.5-1z%22/%3E%3C/svg%3E") !important; } #footer .block-social li.instagram a, .footer-container .block-social li.instagram a, .block-social li.instagram a, .social-icons a.instagram, .social-sharing a.instagram, a[href*="instagram.com"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22white%22 d=%22M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9a5.5 5.5 0 0 1-5.5 5.5h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2zm0 2A3.5 3.5 0 0 0 4 7.5v9A3.5 3.5 0 0 0 7.5 20h9a3.5 3.5 0 0 0 3.5-3.5v-9A3.5 3.5 0 0 0 16.5 4h-9z%22/%3E%3Cpath fill=%22white%22 d=%22M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z%22/%3E%3Ccircle fill=%22white%22 cx=%2217.4%22 cy=%226.6%22 r=%221.2%22/%3E%3C/svg%3E") !important; } #footer .block-social li.tiktok a, .footer-container .block-social li.tiktok a, .block-social li.tiktok a, .social-icons a.tiktok, .social-sharing a.tiktok, a[href*="tiktok.com"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22white%22 d=%22M15 3c.3 2.4 1.7 3.9 4 4.2V11c-1.5 0-2.8-.4-4-1.2v6.3c0 3-2.3 5.4-5.4 5.4S4 19.2 4 16.2s2.5-5.4 5.6-5.4c.4 0 .8 0 1.1.1v3.9c-.4-.1-.7-.2-1.1-.2-1 0-1.8.7-1.8 1.7S8.6 18 9.6 18s1.7-.7 1.7-1.8V3h3.7z%22/%3E%3C/svg%3E") !important; } #footer .block-social li.youtube a, .footer-container .block-social li.youtube a, .block-social li.youtube a, .social-icons a.youtube, .social-sharing a.youtube, a[href*="youtube.com"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22white%22 d=%22M21.6 7.2s-.2-1.7-.9-2.4c-.9-.9-1.9-.9-2.3-1C15.2 3.5 12 3.5 12 3.5h0s-3.2 0-6.4.3c-.5.1-1.5.1-2.3 1-.7.7-.9 2.4-.9 2.4S2 9.1 2 11v1.9c0 1.9.4 3.8.4 3.8s.2 1.7.9 2.4c.9.9 2.1.9 2.6 1 1.9.2 6.1.3 6.1.3s3.2 0 6.4-.3c.5-.1 1.5-.1 2.3-1 .7-.7.9-2.4.9-2.4s.4-1.9.4-3.8V11c0-1.9-.4-3.8-.4-3.8zM10 15.2V8.7l5.8 3.3-5.8 3.2z%22/%3E%3C/svg%3E") !important; } #footer .block-social li.twitter a, .footer-container .block-social li.twitter a, .block-social li.twitter a, .social-icons a.twitter, .social-sharing a.twitter, a[href*="twitter.com"], a[href*="x.com"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22white%22 d=%22M13.8 10.2 21 2h-3.1l-5.5 6.3L8 2H2l7.5 10.7L2 22h3.1l5.9-7.1 5 7.1h6l-8.2-11.8zM6.4 4.2h1.9l9.3 15.6h-1.9L6.4 4.2z%22/%3E%3C/svg%3E") !important; } /* Si le module fournit une vraie image/SVG, elle peut s'afficher au-dessus */ #footer .block-social li a img, .footer-container .block-social li a img, .block-social li a img, .social-icons a img, .social-sharing a img, #footer .block-social li a svg, .footer-container .block-social li a svg, .block-social li a svg, .social-icons a svg, .social-sharing a svg { display: block !important; width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; object-fit: contain !important; text-indent: 0 !important; filter: brightness(0) invert(1) !important; position: relative !important; z-index: 2 !important; } #footer .block-social li a:hover, .footer-container .block-social li a:hover, .block-social li a:hover, .social-icons a:hover, .social-sharing a:hover { background-color: rgba(0,174,239,0.18) !important; border-color: var(--gg-blue) !important; transform: translateY(-1px) !important; } /* ========================================================= VERSION 1.0.56 - COUNT PRODUITS SUR UNE LIGNE + BORDURES TRANSPARENTES - force "Affichage 1-3 de 3 article(s)" sur une seule ligne; - évite les petites boîtes étroites qui cassent le texte; - rend les contours blancs/gris des menus/panneaux transparents. ========================================================= */ /* Nombre de produits / pagination-summary sur une seule ligne */ #js-product-list .pagination, #products .pagination, #content-wrapper .pagination, .pagination { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #js-product-list .pagination .col-md-4, #products .pagination .col-md-4, #content-wrapper .pagination .col-md-4, .pagination .col-md-4, #js-product-list .pagination .showing, #products .pagination .showing, .pagination .showing, #js-product-list .pagination-summary, #products .pagination-summary, .pagination-summary, #js-product-list .page-list + div, #products .page-list + div { width: auto !important; min-width: max-content !important; max-width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; line-height: 1.35 !important; padding: 0 !important; margin: 0 !important; color: #ffffff !important; } /* Si PrestaShop place le texte dans plusieurs éléments, tout reste sur la même ligne */ #js-product-list .pagination .col-md-4 *, #products .pagination .col-md-4 *, #content-wrapper .pagination .col-md-4 *, .pagination .col-md-4 *, .pagination-summary * { display: inline !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; } /* Le bloc de pagination reste propre sans encadré étroit */ #js-product-list .pagination, #products .pagination, #content-wrapper .pagination, .pagination, nav.pagination { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; } /* Contours des menus/panneaux: transparents au lieu de gris/blanc */ #mobile_top_menu_wrapper, #mobile_top_menu_wrapper .top-menu, #mobile_top_menu_wrapper .top-menu .sub-menu, #_mobile_top_menu, .mobile-menu, #left-column .block-categories, #left-column .category-sub-menu .category-sub-menu, #search_filters, #search_filters_wrapper, .products-selection, #js-product-list-top, .products-sort-order .select-title, .products-sort-order .dropdown-menu, .pagination, nav.pagination, #js-product-list .pagination, #products .pagination { border-color: transparent !important; } /* Garder les fonds sombres et cohérents */ #mobile_top_menu_wrapper, #left-column .block-categories, #search_filters, #search_filters_wrapper, .products-selection, #js-product-list-top, .pagination, nav.pagination { background-color: var(--gg-panel) !important; } /* Mobile: count produits sur une ligne et centré/respirable */ @media (max-width: 991.98px) { #js-product-list .pagination, #products .pagination, #content-wrapper .pagination, .pagination, nav.pagination { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; gap: 12px !important; width: 100% !important; padding: 14px !important; } #js-product-list .pagination .col-md-4, #products .pagination .col-md-4, #content-wrapper .pagination .col-md-4, .pagination .col-md-4, #js-product-list .pagination-summary, #products .pagination-summary, .pagination-summary, #js-product-list .pagination .showing, #products .pagination .showing, .pagination .showing { width: 100% !important; min-width: 0 !important; display: block !important; text-align: center !important; white-space: nowrap !important; font-size: 15px !important; padding: 0 !important; } #js-product-list .pagination .col-md-4 *, #products .pagination .col-md-4 *, .pagination .col-md-4 *, .pagination-summary * { display: inline !important; white-space: nowrap !important; } } /* ========================================================= VERSION 1.0.57 - LIGNES INTERNES AUSSI TRANSPARENTES - rend aussi transparentes les lignes internes restantes - retire les séparateurs gris/blanc dans blocs, menus, filtres et pagination ========================================================= */ /* Séparateurs internes dans catégories / sous-catégories */ .block-categories .category-top-menu > li, .block-categories .category-sub-menu > li, #left-column .category-top-menu > li, #left-column .block-categories .category-sub-menu > li, #left-column .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu > li, #left-column .category-sub-menu .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu > li, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu, #left-column .category-sub-menu .category-sub-menu .category-sub-menu .category-sub-menu > li, #left-column .block-categories .arrows, #left-column .block-categories hr, .block-categories hr, .block-categories li, .block-categories ul { border-color: transparent !important; border-top-color: transparent !important; border-bottom-color: transparent !important; } /* Séparateurs dans blocs produits, pagination, filtres */ #search_filters, #search_filters .facet, #search_filters .facet-title, #search_filters .facet .title, #search_filters .facet .h6, #search_filters .facet ul, #search_filters .facet li, #search_filters_wrapper, .products-selection, #js-product-list-top, #js-product-list .pagination, #products .pagination, .pagination, nav.pagination, .page-content, .page-content.card, .card, .card-block, .product-information, .product-description, .product-features, .block-category, .block_newsletter, .footer-container .links, .footer-container .links ul, .footer-container .links li, hr { border-color: transparent !important; border-top-color: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; } /* Si certains thèmes utilisent pseudo-éléments pour dessiner les lignes */ #left-column .block-categories li::before, #left-column .block-categories li::after, .block-categories li::before, .block-categories li::after, .products-selection::before, .products-selection::after, #js-product-list-top::before, #js-product-list-top::after, .pagination::before, .pagination::after, nav.pagination::before, nav.pagination::after { border-color: transparent !important; background: transparent !important; box-shadow: none !important; } /* ========================================================= VERSION 1.0.58 - TRANSPARENCE AUTOMATISÉE DES BORDURES SECONDAIRES Objectif: - automatiser la suppression des petites lignes gris/blanc; - rendre transparents les contours internes des menus, blocs, catégories, filtres, pagination et panneaux futurs; - conserver les champs de formulaire, boutons principaux et icônes sociales lisibles/utilisables. ========================================================= */ /* Variables globales: toutes les bordures secondaires deviennent transparentes */ :root { --gg-border: transparent !important; --gg-border-soft: transparent !important; --gg-panel-border: transparent !important; } /* Bordures automatiques des blocs/panneaux principaux et futurs */ body :where( .block, .card, .box, .panel, .well, .page-content, .page-cms, .cms-page, .custom-text, #custom-text, .block-category, .block-categories, .category-top-menu, .category-sub-menu, .sub-menu, .top-menu, #mobile_top_menu_wrapper, #_mobile_top_menu, .mobile-menu, #search_filters, #search_filters_wrapper, .facet, .products-selection, #js-product-list-top, #products, #js-product-list, .pagination, nav.pagination, .product-miniature, .thumbnail-container, .product-information, .product-description, .product-features, .tabs, .tab-content, .footer-container, .block_newsletter, .contact-form, .contact-rich ) { border-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; outline-color: transparent !important; } /* Retirer les séparateurs internes générés par PrestaShop/modules */ body :where( .block, .card, .box, .panel, .page-content, .block-category, .block-categories, .category-top-menu, .category-sub-menu, .sub-menu, .top-menu, #mobile_top_menu_wrapper, #search_filters, #search_filters_wrapper, .facet, .products-selection, #js-product-list-top, .pagination, nav.pagination, .footer-container, .block_newsletter ) :where( li, ul, ol, div, section, article, header, footer, p, span, a, hr ) { border-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; outline-color: transparent !important; } /* Cas précis des menus catégories: aucune ligne interne restante */ #left-column .block-categories, #left-column .block-categories *, #left-column .category-top-menu, #left-column .category-top-menu *, #left-column .category-sub-menu, #left-column .category-sub-menu *, .block-categories, .block-categories *, .category-top-menu, .category-top-menu *, .category-sub-menu, .category-sub-menu * { border-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; outline-color: transparent !important; } /* Pseudo-éléments utilisés parfois pour dessiner des lignes */ body :where( .block, .card, .box, .panel, .page-content, .block-category, .block-categories, .category-top-menu, .category-sub-menu, .sub-menu, .top-menu, #mobile_top_menu_wrapper, #search_filters, #search_filters_wrapper, .facet, .products-selection, #js-product-list-top, .pagination, nav.pagination, .footer-container, .block_newsletter )::before, body :where( .block, .card, .box, .panel, .page-content, .block-category, .block-categories, .category-top-menu, .category-sub-menu, .sub-menu, .top-menu, #mobile_top_menu_wrapper, #search_filters, #search_filters_wrapper, .facet, .products-selection, #js-product-list-top, .pagination, nav.pagination, .footer-container, .block_newsletter )::after, body :where( .block, .card, .box, .panel, .page-content, .block-category, .block-categories, .category-top-menu, .category-sub-menu, .sub-menu, .top-menu, #mobile_top_menu_wrapper, #search_filters, #search_filters_wrapper, .facet, .products-selection, #js-product-list-top, .pagination, nav.pagination, .footer-container, .block_newsletter ) *::before, body :where( .block, .card, .box, .panel, .page-content, .block-category, .block-categories, .category-top-menu, .category-sub-menu, .sub-menu, .top-menu, #mobile_top_menu_wrapper, #search_filters, #search_filters_wrapper, .facet, .products-selection, #js-product-list-top, .pagination, nav.pagination, .footer-container, .block_newsletter ) *::after { border-color: transparent !important; border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; border-left-color: transparent !important; outline-color: transparent !important; box-shadow: none !important; } /* Les lignes horizontales deviennent invisibles par défaut */ hr, .hr, .separator, .divider, .dropdown-divider { border-color: transparent !important; background: transparent !important; color: transparent !important; box-shadow: none !important; } /* Garder les contrôles de formulaire visibles et utilisables */ input, textarea, select, .form-control, .input-group, .custom-checkbox input, .custom-radio input, input[type="checkbox"], input[type="radio"], input[type="range"] { border-color: rgba(255,255,255,0.18) !important; outline-color: rgba(0,174,239,0.35) !important; } /* Garder les boutons visibles */ .btn, button, input[type="submit"], .btn-primary, .btn-secondary, .btn-tertiary, #search_filter_toggler, .filter-button, .filter-button button { border-color: rgba(0,174,239,0.35) !important; } /* Garder les icônes sociales visibles */ .block-social li a, .social-icons a, .social-sharing a, #footer .block-social li a, .footer-container .block-social li a { border-color: rgba(0,174,239,0.35) !important; } /* Focus clavier/accessibilité: visible mais cohérent */ a:focus, button:focus, input:focus, textarea:focus, select:focus, .form-control:focus { outline: 2px solid rgba(0,174,239,0.45) !important; outline-offset: 2px !important; } /* ========================================================= VERSION 1.0.59 - LARGEUR DE MISE EN PAGE ORDINATEUR Objectif: - réduire les grands espaces vides à gauche et à droite sur ordinateur; - élargir la zone utile du site; - conserver une bonne marge de respiration; - ne pas impacter la version mobile/tablette. ========================================================= */ @media (min-width: 1200px) { html, body { overflow-x: hidden !important; } /* largeur générale du site sur ordinateur */ .container, .container-fluid, #wrapper .container, #header .container, #header .header-nav .container, #header .header-top .container, #footer .container, #footer .footer-container .container, .footer-container .container, #main .container, .page-home .container, .featured-products .container, .products-section-title + .products, .products, #products, #js-product-list, #js-product-list-top, #js-product-list-bottom, .category-cover, .block-category, .page-content, .page-cms .page-content, .contact-form, .contact-rich, .product-container, .tabs, .breadcrumb, .block_newsletter { width: min(96vw, 1680px) !important; max-width: min(96vw, 1680px) !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* un peu moins de padding pour gagner de l'espace utile */ .container, .container-fluid, #wrapper .container, #header .container, #header .header-nav .container, #header .header-top .container, #footer .container, #footer .footer-container .container, .footer-container .container, #main .container, .page-home .container { padding-left: 16px !important; padding-right: 16px !important; } /* pages catalogue: laisser plus de place au contenu et aux produits */ #wrapper .row, #content-wrapper, #left-column, #right-column { box-sizing: border-box !important; } /* si pas de colonne latérale, le contenu prend bien la largeur */ body:not(.layout-left-column):not(.layout-right-column) #content-wrapper, body:not(.layout-left-column):not(.layout-right-column) .page-content, body:not(.layout-left-column):not(.layout-right-column) #main { width: 100% !important; max-width: 100% !important; } /* home banner / carrousels / visuels larges */ .carousel, .carousel .carousel-inner, .carousel .carousel-item, .banner, .home-banner, .custom-text, #custom-text { max-width: min(96vw, 1680px) !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================= VERSION 1.0.60 - RECHERCHE ORDINATEUR PLUS COURTE Objectif: - réduire la largeur de la barre de recherche desktop; - permettre à la recherche de rester au même niveau visuel que le menu principal quand l'espace le permet; - conserver le comportement mobile actuel. ========================================================= */ @media (min-width: 1200px) { #header .header-top .container > .row, #header .header-top .row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; } #_desktop_logo, .header-top #_desktop_logo, .header-top .col-md-2:has(.logo) { flex: 0 0 250px !important; max-width: 250px !important; } #_desktop_top_menu, .header-top .col-md-7:has(#_desktop_top_menu), .header-top .col-md-8:has(#_desktop_top_menu), .header-top .col-lg-7:has(#_desktop_top_menu), .header-top .col-lg-8:has(#_desktop_top_menu) { flex: 1 1 auto !important; max-width: none !important; min-width: 0 !important; padding-right: 12px !important; } #_desktop_search_widget, .header-top .col-md-3:has(#search_widget), .header-top .col-lg-3:has(#search_widget), .header-top .col-md-4:has(#search_widget), .header-top .col-lg-4:has(#search_widget) { flex: 0 0 270px !important; max-width: 270px !important; min-width: 270px !important; margin-left: auto !important; } #search_widget, .search-widget { width: 270px !important; max-width: 270px !important; margin-left: auto !important; } #search_widget form, .search-widget form { width: 100% !important; } #search_widget form input[type="text"], .search-widget form input[type="text"] { width: 100% !important; min-width: 0 !important; } } /* ========================================================= VERSION 1.0.61 - ADAPTATION AUTOMATIQUE SELON LA RÉSOLUTION Objectif: - empêcher les pages de s'étirer hors écran; - adapter automatiquement catégories + produits selon la résolution; - garder une mise en page large sur ordinateur sans couper les produits; - corriger les pages avec menu de gauche + contenu. ========================================================= */ /* Sécurité générale contre les débordements horizontaux */ html, body, #page, #wrapper, #main, #content, #content-wrapper { max-width: 100vw !important; box-sizing: border-box !important; } img, picture, video, iframe, embed, object { max-width: 100% !important; height: auto; } /* Les longs textes/fil d'Ariane ne doivent jamais pousser la page */ .breadcrumb, .breadcrumb ol, .breadcrumb ul, .breadcrumb li, .breadcrumb span, .breadcrumb a, .block-category, .category-description, #category-description, .page-content, .product-description { max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; box-sizing: border-box !important; } /* Ordinateur et tablettes larges */ @media (min-width: 992px) { /* Largeur principale dynamique: large, mais toujours dans l'écran */ .container, .container-fluid, #wrapper .container, #header .container, #header .header-nav .container, #header .header-top .container, #footer .container, #footer .footer-container .container, .footer-container .container, #main .container, .page-home .container { width: min(96vw, 1680px) !important; max-width: min(96vw, 1680px) !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(10px, 1vw, 18px) !important; padding-right: clamp(10px, 1vw, 18px) !important; box-sizing: border-box !important; } /* IMPORTANT: layout avec menu gauche + produits. On donne une vraie grille: le menu prend sa place, le contenu prend le reste. */ #wrapper .row:has(#left-column):has(#content-wrapper) { display: grid !important; grid-template-columns: clamp(250px, 18vw, 320px) minmax(0, 1fr) !important; column-gap: clamp(18px, 2vw, 34px) !important; align-items: start !important; width: min(96vw, 1680px) !important; max-width: min(96vw, 1680px) !important; margin-left: auto !important; margin-right: auto !important; overflow: visible !important; box-sizing: border-box !important; } #wrapper .row:has(#left-column):has(#content-wrapper) > #left-column { grid-column: 1 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; float: none !important; position: relative !important; z-index: 50 !important; box-sizing: border-box !important; } #wrapper .row:has(#left-column):has(#content-wrapper) > #content-wrapper { grid-column: 2 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; float: none !important; position: relative !important; z-index: 1 !important; overflow: hidden !important; box-sizing: border-box !important; } /* Annule les anciennes largeurs 96vw à l'intérieur du contenu avec colonne gauche */ #wrapper .row:has(#left-column):has(#content-wrapper) > #content-wrapper #products, #wrapper .row:has(#left-column):has(#content-wrapper) > #content-wrapper #js-product-list, #wrapper .row:has(#left-column):has(#content-wrapper) > #content-wrapper #js-product-list-top, #wrapper .row:has(#left-column):has(#content-wrapper) > #content-wrapper #js-product-list-bottom, #wrapper .row:has(#left-column):has(#content-wrapper) > #content-wrapper .products, #wrapper .row:has(#left-column):has(#content-wrapper) > #content-wrapper .block-category, #wrapper .row:has(#left-column):has(#content-wrapper) > #content-wrapper .page-content, #wrapper .row:has(#left-column):has(#content-wrapper) > #content-wrapper .pagination, #wrapper .row:has(#left-column):has(#content-wrapper) > #content-wrapper nav.pagination { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Blocs catégories / descriptions: pas de ligne infinie */ .block-category, .category-description, #category-description, #js-product-list-header { overflow: hidden !important; } .block-category p, .category-description p, #category-description p, #js-product-list-header p { max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* Zone tri: s'adapte sans pousser hors page */ .products-selection, #js-product-list-top { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; box-sizing: border-box !important; } .products-sort-order, .products-sort-order .select-title, select#selectProductSort { width: clamp(220px, 22vw, 340px) !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Grille produit automatique selon la largeur disponible */ #products .products, #js-product-list .products, .featured-products .products, .product-accessories .products { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(clamp(190px, 16vw, 250px), 1fr)) !important; gap: clamp(18px, 2vw, 34px) !important; align-items: start !important; justify-items: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; overflow: visible !important; box-sizing: border-box !important; } #products .product-miniature, #js-product-list .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature { width: 100% !important; max-width: clamp(210px, 16vw, 270px) !important; min-width: 0 !important; float: none !important; flex: none !important; margin: 0 auto !important; box-sizing: border-box !important; } #products .product-miniature .thumbnail-container, #js-product-list .product-miniature .thumbnail-container, .featured-products .product-miniature .thumbnail-container, .product-accessories .product-miniature .thumbnail-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; box-sizing: border-box !important; } #products .product-miniature img, #js-product-list .product-miniature img, .featured-products .product-miniature img, .product-accessories .product-miniature img { width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: cover !important; } /* Pagination / nombre de produits: jamais hors écran */ #js-product-list .pagination, #products .pagination, nav.pagination, .pagination { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; box-sizing: border-box !important; } } /* Ordinateur moyen: menu gauche plus compact, produits plus serrés */ @media (min-width: 992px) and (max-width: 1399.98px) { #wrapper .row:has(#left-column):has(#content-wrapper) { grid-template-columns: 250px minmax(0, 1fr) !important; column-gap: 18px !important; } #products .products, #js-product-list .products, .featured-products .products { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; gap: 20px !important; } #products .product-miniature, #js-product-list .product-miniature, .featured-products .product-miniature { max-width: 230px !important; } } /* Très grand écran: large, mais contrôlé */ @media (min-width: 1700px) { #wrapper .row:has(#left-column):has(#content-wrapper), .container, .container-fluid, #wrapper .container, #header .container, #header .header-nav .container, #header .header-top .container, #footer .container, #main .container, .page-home .container { width: min(94vw, 1760px) !important; max-width: min(94vw, 1760px) !important; } } /* ========================================================= VERSION 1.0.62 - CARTES PRODUITS VISIBLES SUR DESKTOP Objectif: - corriger les articles devenus trop petits après l'adaptation responsive; - garder l'adaptation automatique selon la résolution; - empêcher les cartes produits/images de se compresser trop fortement. ========================================================= */ @media (min-width: 992px) { /* Le bloc produits reste dans la largeur disponible */ #products, #js-product-list, #products .products, #js-product-list .products, .featured-products .products, .product-accessories .products { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* Grille produit: moins de colonnes minuscules, cartes plus lisibles */ #products .products, #js-product-list .products, .featured-products .products, .product-accessories .products { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: clamp(22px, 2.2vw, 38px) !important; justify-items: center !important; align-items: start !important; } /* Annule les anciennes largeurs Bootstrap/miniatures qui compressaient les articles */ #products .product-miniature, #js-product-list .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, #products article.product-miniature, #js-product-list article.product-miniature, .featured-products article.product-miniature { width: 100% !important; min-width: 220px !important; max-width: 300px !important; flex: none !important; float: none !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } /* Image + zone produit lisibles */ #products .product-miniature .thumbnail-container, #js-product-list .product-miniature .thumbnail-container, .featured-products .product-miniature .thumbnail-container, .product-accessories .product-miniature .thumbnail-container { width: 100% !important; min-width: 220px !important; max-width: 300px !important; min-height: auto !important; margin: 0 auto !important; box-sizing: border-box !important; overflow: hidden !important; } #products .product-miniature .product-thumbnail, #js-product-list .product-miniature .product-thumbnail, .featured-products .product-miniature .product-thumbnail, .product-accessories .product-miniature .product-thumbnail { display: block !important; width: 100% !important; max-width: 300px !important; min-width: 220px !important; margin: 0 auto !important; box-sizing: border-box !important; } #products .product-miniature img, #js-product-list .product-miniature img, .featured-products .product-miniature img, .product-accessories .product-miniature img, #products .product-miniature .product-thumbnail img, #js-product-list .product-miniature .product-thumbnail img, .featured-products .product-miniature .product-thumbnail img { display: block !important; width: 100% !important; min-width: 220px !important; max-width: 300px !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; margin: 0 auto !important; } /* Le titre/prix sous l'image reste centré et lisible */ #products .product-miniature .product-description, #js-product-list .product-miniature .product-description, .featured-products .product-miniature .product-description, .product-accessories .product-miniature .product-description { width: 100% !important; min-width: 220px !important; max-width: 300px !important; margin: 0 auto !important; padding: 10px 8px 0 8px !important; text-align: center !important; box-sizing: border-box !important; } #products .product-miniature .product-title, #products .product-miniature .product-title a, #js-product-list .product-miniature .product-title, #js-product-list .product-miniature .product-title a, .featured-products .product-miniature .product-title, .featured-products .product-miniature .product-title a { width: 100% !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; line-height: 1.25 !important; } } /* Écrans moyens: 3 colonnes lisibles plutôt que plusieurs miniatures minuscules */ @media (min-width: 992px) and (max-width: 1299.98px) { #products .products, #js-product-list .products, .featured-products .products, .product-accessories .products { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 22px !important; } #products .product-miniature, #js-product-list .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, #products .product-miniature .thumbnail-container, #js-product-list .product-miniature .thumbnail-container, .featured-products .product-miniature .thumbnail-container, #products .product-miniature .product-thumbnail, #js-product-list .product-miniature .product-thumbnail, .featured-products .product-miniature .product-thumbnail, #products .product-miniature img, #js-product-list .product-miniature img, .featured-products .product-miniature img { min-width: 210px !important; max-width: 270px !important; } } /* Très grand écran: cartes plus grandes, mais sans dépasser */ @media (min-width: 1600px) { #products .products, #js-product-list .products, .featured-products .products, .product-accessories .products { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; } #products .product-miniature, #js-product-list .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, #products .product-miniature .thumbnail-container, #js-product-list .product-miniature .thumbnail-container, .featured-products .product-miniature .thumbnail-container, #products .product-miniature .product-thumbnail, #js-product-list .product-miniature .product-thumbnail, .featured-products .product-miniature .product-thumbnail, #products .product-miniature img, #js-product-list .product-miniature img, .featured-products .product-miniature img { min-width: 240px !important; max-width: 320px !important; } } /* ========================================================= VERSION 1.0.63 - CENTRAGE ET ANTI-DÉBORDEMENT DES CARTES - centre visuellement la grille produit; - empêche les cartes de dépasser à droite; - garde une taille lisible des images/cartes. ========================================================= */ @media (min-width: 992px) { /* Sécurise les conteneurs produits */ #products, #js-product-list, .products-selection, .products, .featured-products, .product-accessories, .product-list, .block-category, .category-top-menu, .category-cover, .page-content { box-sizing: border-box !important; } #products, #js-product-list, .page-content.page-cms, .page-content { overflow-x: hidden !important; } /* Grille centrée avec colonnes fixes/flexibles sans débordement */ #products .products, #js-product-list .products, .featured-products .products, .product-accessories .products { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 280px)) !important; justify-content: center !important; justify-items: center !important; align-items: start !important; gap: clamp(20px, 2vw, 30px) !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding-left: 14px !important; padding-right: 14px !important; box-sizing: border-box !important; overflow: visible !important; } /* Les cartes restent dans leur grille et ne débordent plus */ #products .product-miniature, #js-product-list .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, #products article.product-miniature, #js-product-list article.product-miniature, .featured-products article.product-miniature, .product-accessories article.product-miniature { width: min(100%, 280px) !important; max-width: 280px !important; min-width: 0 !important; margin: 0 auto !important; justify-self: center !important; box-sizing: border-box !important; overflow: hidden !important; } #products .product-miniature .thumbnail-container, #js-product-list .product-miniature .thumbnail-container, .featured-products .product-miniature .thumbnail-container, .product-accessories .product-miniature .thumbnail-container { width: 100% !important; max-width: 280px !important; min-width: 0 !important; margin: 0 auto !important; box-sizing: border-box !important; overflow: hidden !important; } #products .product-miniature .product-thumbnail, #js-product-list .product-miniature .product-thumbnail, .featured-products .product-miniature .product-thumbnail, .product-accessories .product-miniature .product-thumbnail, #products .product-miniature img, #js-product-list .product-miniature img, .featured-products .product-miniature img, .product-accessories .product-miniature img, #products .product-miniature .product-thumbnail img, #js-product-list .product-miniature .product-thumbnail img, .featured-products .product-miniature .product-thumbnail img, .product-accessories .product-miniature .product-thumbnail img { width: 100% !important; max-width: 280px !important; min-width: 0 !important; margin: 0 auto !important; display: block !important; box-sizing: border-box !important; } #products .product-miniature .product-description, #js-product-list .product-miniature .product-description, .featured-products .product-miniature .product-description, .product-accessories .product-miniature .product-description { width: 100% !important; max-width: 280px !important; min-width: 0 !important; margin: 0 auto !important; box-sizing: border-box !important; text-align: center !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { #products .products, #js-product-list .products, .featured-products .products, .product-accessories .products { grid-template-columns: repeat(auto-fit, minmax(220px, 250px)) !important; } #products .product-miniature, #js-product-list .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, #products .product-miniature .thumbnail-container, #js-product-list .product-miniature .thumbnail-container, .featured-products .product-miniature .thumbnail-container, .product-accessories .product-miniature .thumbnail-container, #products .product-miniature img, #js-product-list .product-miniature img, .featured-products .product-miniature img, .product-accessories .product-miniature img { max-width: 250px !important; } } @media (min-width: 1600px) { #products .products, #js-product-list .products, .featured-products .products, .product-accessories .products { grid-template-columns: repeat(auto-fit, minmax(250px, 300px)) !important; } #products .product-miniature, #js-product-list .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, #products .product-miniature .thumbnail-container, #js-product-list .product-miniature .thumbnail-container, .featured-products .product-miniature .thumbnail-container, .product-accessories .product-miniature .thumbnail-container, #products .product-miniature img, #js-product-list .product-miniature img, .featured-products .product-miniature img, .product-accessories .product-miniature img { max-width: 300px !important; } } /* ========================================================= VERSION 1.0.64 - DESCRIPTION PRODUIT MIEUX CENTRÉE - force le bloc onglets/description à passer sous les colonnes produit; - centre visuellement le contenu de description; - garde une largeur de lecture confortable sur desktop. ========================================================= */ @media (min-width: 992px) { body#product .tabs, .page-product .tabs, body#product #description, .page-product #description, body#product #product-details, .page-product #product-details, body#product .product-description, .page-product .product-description { clear: both !important; } body#product .tabs, .page-product .tabs { width: 100% !important; max-width: 100% !important; margin: 28px 0 0 0 !important; display: block !important; position: relative !important; left: auto !important; right: auto !important; box-sizing: border-box !important; } body#product .tabs .tab-content, .page-product .tabs .tab-content { padding: 26px 34px !important; box-sizing: border-box !important; } body#product .tabs .tab-pane, .page-product .tabs .tab-pane, body#product .product-description, .page-product .product-description, body#product #description, .page-product #description { width: 100% !important; max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } body#product .product-description, .page-product .product-description, body#product .tabs .tab-pane, .page-product .tabs .tab-pane { text-align: center !important; } body#product .product-description > *, .page-product .product-description > *, body#product .tabs .tab-pane > *, .page-product .tabs .tab-pane > * { margin-left: auto !important; margin-right: auto !important; } body#product .product-description p, .page-product .product-description p, body#product .product-description div, .page-product .product-description div, body#product .product-description blockquote, .page-product .product-description blockquote, body#product .tabs .tab-pane p, .page-product .tabs .tab-pane p, body#product .tabs .tab-pane div, .page-product .tabs .tab-pane div, body#product .tabs .tab-pane blockquote, .page-product .tabs .tab-pane blockquote { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } body#product .product-description ul, .page-product .product-description ul, body#product .product-description ol, .page-product .product-description ol, body#product .tabs .tab-pane ul, .page-product .tabs .tab-pane ul, body#product .tabs .tab-pane ol, .page-product .tabs .tab-pane ol { display: inline-block !important; max-width: 980px !important; margin: 0 auto 1rem auto !important; padding-left: 1.25rem !important; text-align: left !important; } body#product .product-description table, .page-product .product-description table, body#product .tabs .tab-pane table, .page-product .tabs .tab-pane table { width: auto !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================= VERSION 1.0.65 - RESTAURATION DES CARTES PRODUIT VISIBLES Objectif: - corriger les photos redevenues minuscules sur desktop; - garder le centrage de la grille; - empêcher tout débordement à droite. ========================================================= */ @media (min-width: 992px) { /* conteneur liste produits: flex robuste et centré */ #products .products, #js-product-list .products, .featured-products .products, .product-accessories .products, .product-list, .category-products .products, .products.row { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: flex-start !important; gap: clamp(20px, 1.8vw, 28px) !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; overflow: visible !important; } /* cartes: largeur explicite, stable et lisible */ #products .products > article.product-miniature, #js-product-list .products > article.product-miniature, .featured-products .products > article.product-miniature, .product-accessories .products > article.product-miniature, .product-list > article.product-miniature, .category-products .products > article.product-miniature, .products.row > article.product-miniature, #products .products > .product-miniature, #js-product-list .products > .product-miniature, .featured-products .products > .product-miniature, .product-accessories .products > .product-miniature, .product-list > .product-miniature, .category-products .products > .product-miniature, .products.row > .product-miniature { flex: 0 0 clamp(220px, 17vw, 280px) !important; width: clamp(220px, 17vw, 280px) !important; max-width: clamp(220px, 17vw, 280px) !important; min-width: 220px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; float: none !important; } /* structure interne de la carte */ #products .product-miniature .thumbnail-container, #js-product-list .product-miniature .thumbnail-container, .featured-products .product-miniature .thumbnail-container, .product-accessories .product-miniature .thumbnail-container, .category-products .product-miniature .thumbnail-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; overflow: hidden !important; box-sizing: border-box !important; } #products .product-miniature .product-thumbnail, #js-product-list .product-miniature .product-thumbnail, .featured-products .product-miniature .product-thumbnail, .product-accessories .product-miniature .product-thumbnail, .category-products .product-miniature .product-thumbnail { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; box-sizing: border-box !important; overflow: hidden !important; } #products .product-miniature img, #js-product-list .product-miniature img, .featured-products .product-miniature img, .product-accessories .product-miniature img, .category-products .product-miniature img, #products .product-miniature .product-thumbnail img, #js-product-list .product-miniature .product-thumbnail img, .featured-products .product-miniature .product-thumbnail img, .product-accessories .product-miniature .product-thumbnail img, .category-products .product-miniature .product-thumbnail img { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 auto !important; object-fit: contain !important; box-sizing: border-box !important; } #products .product-miniature .product-description, #js-product-list .product-miniature .product-description, .featured-products .product-miniature .product-description, .product-accessories .product-miniature .product-description, .category-products .product-miniature .product-description { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; text-align: center !important; box-sizing: border-box !important; } /* le conteneur extérieur ne doit pas couper ou pousser à droite */ #products, #js-product-list, .featured-products, .product-accessories, .category-products { overflow-x: hidden !important; } } /* ========================================================= VERSION 1.0.66 - FOOTER / PIED DE PAGE ALIGNÉ Objectif: - mettre les colonnes du pied de page au même niveau; - empêcher une section comme CAPSULE de tomber sous PRODUITS sur desktop; - garder le tout lisible et responsive. ========================================================= */ @media (min-width: 768px) { #footer .footer-container, .footer-container { padding-left: 0 !important; padding-right: 0 !important; } #footer .footer-container .container, .footer-container .container { width: min(96vw, 1680px) !important; max-width: min(96vw, 1680px) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Grille principale du pied de page */ #footer .footer-container .row, .footer-container .row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 28px 48px !important; align-items: start !important; justify-items: start !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Si PrestaShop place plusieurs blocs dans .links > .row */ #footer .footer-container .links, .footer-container .links { width: 100% !important; max-width: none !important; flex: none !important; float: none !important; grid-column: 1 / -1 !important; } #footer .footer-container .links > .row, .footer-container .links > .row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 28px 48px !important; align-items: start !important; justify-items: start !important; width: 100% !important; margin: 0 !important; } /* Chaque bloc footer devient une vraie colonne alignée */ #footer .footer-container .wrapper, #footer .footer-container .links .wrapper, #footer .footer-container .block-contact, #footer .footer-container .myaccount-title, #footer .footer-container [class*="col-"], .footer-container .wrapper, .footer-container .links .wrapper, .footer-container .block-contact, .footer-container [class*="col-"] { width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important; float: none !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Lisibilité et espacement */ #footer .footer-container .h3, #footer .footer-container .h4, #footer .footer-container .title, #footer .footer-container .block-contact-title, #footer .footer-container .myaccount-title, #footer .footer-container .links .h3, #footer .footer-container .links .h4, .footer-container .h3, .footer-container .h4, .footer-container .title, .footer-container .links .h3, .footer-container .links .h4 { display: block !important; margin: 0 0 12px 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 18px !important; line-height: 1.25 !important; text-align: left !important; white-space: normal !important; } #footer .footer-container ul, #footer .footer-container li, .footer-container ul, .footer-container li { margin-left: 0 !important; padding-left: 0 !important; list-style: none !important; } #footer .footer-container li, .footer-container li { margin-bottom: 7px !important; line-height: 1.35 !important; } #footer .footer-container a, #footer .footer-container p, #footer .footer-container span, #footer .footer-container div, .footer-container a, .footer-container p, .footer-container span, .footer-container div { text-align: left !important; } } /* Desktop très large: colonnes plus stables et bien espacées */ @media (min-width: 1200px) { #footer .footer-container .links > .row, .footer-container .links > .row, #footer .footer-container .row, .footer-container .row { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; } } /* Mobile: rester vertical, propre et lisible */ @media (max-width: 767.98px) { #footer .footer-container .row, .footer-container .row, #footer .footer-container .links > .row, .footer-container .links > .row { display: block !important; } #footer .footer-container .wrapper, #footer .footer-container .links .wrapper, .footer-container .wrapper, .footer-container .links .wrapper { margin-bottom: 18px !important; } } /* ========================================================= VERSION 1.0.67 - FOOTER HORIZONTAL FIX Objectif: - remettre les sections du footer sur l'horizontale sur desktop; - masquer les doublons de titres / flèches mobiles sur desktop; - garder le comportement mobile normal. ========================================================= */ @media (min-width: 768px) { /* conteneur footer plus propre */ #footer .footer-container .container, .footer-container .container { width: min(96vw, 1680px) !important; max-width: min(96vw, 1680px) !important; margin-left: auto !important; margin-right: auto !important; } /* la zone des liens du footer doit rester sur une seule rangée souple */ #footer .footer-container .links > .row, .footer-container .links > .row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: flex-start !important; gap: 28px 42px !important; width: 100% !important; margin: 0 !important; } /* les blocs deviennent de vraies colonnes horizontales */ #footer .footer-container .links > .row > [class*="col-"], #footer .footer-container .links > .row > .wrapper, #footer .footer-container .links > .row > section, .footer-container .links > .row > [class*="col-"], .footer-container .links > .row > .wrapper, .footer-container .links > .row > section { flex: 1 1 220px !important; min-width: 220px !important; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; box-sizing: border-box !important; } /* cacher les titres / toggles prévus pour mobile afin d'éviter les doublons */ #footer .footer-container .links .hidden-md-up, #footer .footer-container .links .navbar-toggler, #footer .footer-container .links .collapse-icons, .footer-container .links .hidden-md-up, .footer-container .links .navbar-toggler, .footer-container .links .collapse-icons { display: none !important; visibility: hidden !important; } /* garder les titres desktop visibles */ #footer .footer-container .links .hidden-sm-down, .footer-container .links .hidden-sm-down { display: block !important; visibility: visible !important; } /* sur desktop, contenu toujours ouvert */ #footer .footer-container .links .collapse, .footer-container .links .collapse { display: block !important; height: auto !important; visibility: visible !important; } #footer .footer-container .links .collapse:not(.show), .footer-container .links .collapse:not(.show) { display: block !important; } /* mise en forme lisible des titres */ #footer .footer-container .links .h3, #footer .footer-container .links .h4, #footer .footer-container .links .title, #footer .footer-container .block-contact-title, #footer .footer-container .myaccount-title, .footer-container .links .h3, .footer-container .links .h4, .footer-container .links .title, .footer-container .block-contact-title, .footer-container .myaccount-title { margin: 0 0 14px 0 !important; font-size: 18px !important; line-height: 1.25 !important; text-align: left !important; white-space: normal !important; } #footer .footer-container li, .footer-container li { margin-bottom: 8px !important; line-height: 1.35 !important; } #footer .footer-container a, #footer .footer-container p, #footer .footer-container li, #footer .footer-container span, .footer-container a, .footer-container p, .footer-container li, .footer-container span { text-align: left !important; } } @media (max-width: 767.98px) { /* réactiver l'affichage mobile standard */ #footer .footer-container .links .hidden-md-up, .footer-container .links .hidden-md-up { display: block !important; visibility: visible !important; } } /* ========================================================= VERSION 1.0.68 - FOOTER ON ONE LINE (DESKTOP) Objectif: - mettre les 5 blocs du footer sur une seule ligne sur desktop; - garder un rendu lisible sans retour à la ligne vertical entre colonnes. ========================================================= */ @media (min-width: 992px) { #footer .footer-container .links > .row, .footer-container .links > .row { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 22px !important; width: 100% !important; } #footer .footer-container .links > .row > [class*="col-"], #footer .footer-container .links > .row > .wrapper, #footer .footer-container .links > .row > section, .footer-container .links > .row > [class*="col-"], .footer-container .links > .row > .wrapper, .footer-container .links > .row > section { flex: 0 0 calc((100% - 88px) / 5) !important; width: calc((100% - 88px) / 5) !important; max-width: calc((100% - 88px) / 5) !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } #footer .footer-container .links .h3, #footer .footer-container .links .h4, #footer .footer-container .links .title, #footer .footer-container .block-contact-title, #footer .footer-container .myaccount-title, .footer-container .links .h3, .footer-container .links .h4, .footer-container .links .title, .footer-container .block-contact-title, .footer-container .myaccount-title { font-size: 17px !important; margin-bottom: 12px !important; } #footer .footer-container li, .footer-container li { margin-bottom: 7px !important; } #footer .footer-container a, #footer .footer-container p, #footer .footer-container span, #footer .footer-container li, .footer-container a, .footer-container p, .footer-container span, .footer-container li { overflow-wrap: anywhere !important; word-break: normal !important; } } /* ========================================================= VERSION 1.0.69 - FOOTER 5 COLONNES SUR UNE SEULE LIGNE Objectif: - placer les 5 blocs du footer sur une seule ligne horizontale; - suivre automatiquement la largeur disponible du site; - garder le rendu lisible sur desktop large. ========================================================= */ @media (min-width: 1200px) { /* conteneur footer aligné avec le reste de la page */ #footer .footer-container .container, .footer-container .container { width: min(96vw, 1680px) !important; max-width: min(96vw, 1680px) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* on aplatit la structure intermédiaire des liens pour pouvoir tout mettre sur une ligne */ #footer .footer-container .links, .footer-container .links, #footer .footer-container .links > .row, .footer-container .links > .row { display: contents !important; } /* rangée principale du footer : 5 colonnes responsives sur une seule ligne */ #footer .footer-container > .container > .row, .footer-container > .container > .row { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 26px !important; align-items: start !important; justify-items: start !important; width: 100% !important; margin: 0 !important; } /* tous les blocs deviennent des colonnes de même niveau */ #footer .footer-container > .container > .row > *, .footer-container > .container > .row > *, #footer .footer-container .links > .row > *, .footer-container .links > .row > * { width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; flex: none !important; box-sizing: border-box !important; } /* masquer les toggles mobiles / doublons sur desktop */ #footer .footer-container .hidden-md-up, #footer .footer-container .navbar-toggler, #footer .footer-container .collapse-icons, .footer-container .hidden-md-up, .footer-container .navbar-toggler, .footer-container .collapse-icons { display: none !important; visibility: hidden !important; } /* garder les titres et contenus ouverts */ #footer .footer-container .hidden-sm-down, .footer-container .hidden-sm-down, #footer .footer-container .collapse, .footer-container .collapse, #footer .footer-container .collapse:not(.show), .footer-container .collapse:not(.show) { display: block !important; visibility: visible !important; height: auto !important; } /* style des titres */ #footer .footer-container .h3, #footer .footer-container .h4, #footer .footer-container .title, #footer .footer-container .block-contact-title, #footer .footer-container .myaccount-title, .footer-container .h3, .footer-container .h4, .footer-container .title, .footer-container .block-contact-title, .footer-container .myaccount-title { display: block !important; margin: 0 0 12px 0 !important; font-size: clamp(14px, 0.95vw, 18px) !important; line-height: 1.2 !important; text-align: left !important; white-space: normal !important; } /* style des éléments */ #footer .footer-container li, .footer-container li { margin-bottom: 8px !important; line-height: 1.35 !important; } #footer .footer-container a, #footer .footer-container p, #footer .footer-container span, #footer .footer-container li, .footer-container a, .footer-container p, .footer-container span, .footer-container li { font-size: clamp(12px, 0.85vw, 16px) !important; overflow-wrap: anywhere !important; word-break: normal !important; } } /* écran desktop intermédiaire : 3 puis 2 lignes si vraiment nécessaire */ @media (min-width: 992px) and (max-width: 1199.98px) { #footer .footer-container > .container > .row, .footer-container > .container > .row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 24px !important; } } /* ========================================================= VERSION 1.0.70 - FOOTER RETOUR STYLE SIMPLE + MENU REMONTÉ Objectif: - revenir à un comportement proche du footer par défaut; - garder le bloc INFORMATIONS sur la même ligne que les autres; - réduire la taille de police du footer d'environ 3 px. ========================================================= */ @media (min-width: 992px) { /* rangée principale du footer : une seule ligne souple */ #footer .footer-container > .container > .row, .footer-container > .container > .row { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: space-between !important; gap: 24px !important; } /* zone de liens principale */ #footer .footer-container .links, .footer-container .links { display: block !important; flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* bloc Informations/contact remonté sur la même ligne */ #footer .footer-container .block-contact, .footer-container .block-contact { display: block !important; flex: 0 0 19% !important; width: 19% !important; max-width: 19% !important; min-width: 190px !important; margin: 0 !important; padding: 0 !important; float: none !important; align-self: flex-start !important; } /* les 4 autres menus restent sur une ligne dans leur zone */ #footer .footer-container .links > .row, .footer-container .links > .row { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: space-between !important; gap: 20px !important; width: 100% !important; margin: 0 !important; } #footer .footer-container .links > .row > *, .footer-container .links > .row > * { flex: 1 1 0 !important; width: 0 !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; box-sizing: border-box !important; } /* titres desktop seulement, sans doublons mobiles */ #footer .footer-container .hidden-md-up, #footer .footer-container .navbar-toggler, #footer .footer-container .collapse-icons, .footer-container .hidden-md-up, .footer-container .navbar-toggler, .footer-container .collapse-icons { display: none !important; visibility: hidden !important; } #footer .footer-container .hidden-sm-down, .footer-container .hidden-sm-down, #footer .footer-container .collapse, .footer-container .collapse, #footer .footer-container .collapse:not(.show), .footer-container .collapse:not(.show) { display: block !important; visibility: visible !important; height: auto !important; } /* réduction générale de police du footer */ #footer .footer-container .h3, #footer .footer-container .h4, #footer .footer-container .title, #footer .footer-container .block-contact-title, #footer .footer-container .myaccount-title, .footer-container .h3, .footer-container .h4, .footer-container .title, .footer-container .block-contact-title, .footer-container .myaccount-title { font-size: 14px !important; line-height: 1.2 !important; margin: 0 0 10px 0 !important; white-space: normal !important; } #footer .footer-container a, #footer .footer-container p, #footer .footer-container span, #footer .footer-container li, .footer-container a, .footer-container p, .footer-container span, .footer-container li { font-size: 13px !important; line-height: 1.35 !important; overflow-wrap: anywhere !important; word-break: normal !important; } #footer .footer-container ul, .footer-container ul { margin: 0 !important; padding: 0 !important; } #footer .footer-container li, .footer-container li { margin-bottom: 7px !important; } } /* ========================================================= VERSION 1.0.72 - ALIGNEMENT TRI + NOMBRE DE PRODUITS Objectif: - aligner "Il y a X produits" et "Trier par" sur la même ligne; - garder le menu déroulant au même niveau que le texte; - conserver l'affichage mobile propre. ========================================================= */ @media (min-width: 768px) { #js-product-list-top, #products .products-selection, .products-selection { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; width: 100% !important; max-width: 100% !important; min-height: 58px !important; box-sizing: border-box !important; } #js-product-list-top .total-products, #products .products-selection .total-products, .products-selection .total-products { display: flex !important; align-items: center !important; justify-content: flex-start !important; height: 46px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; white-space: nowrap !important; flex: 1 1 auto !important; min-width: 0 !important; } #js-product-list-top .total-products p, #products .products-selection .total-products p, .products-selection .total-products p, #js-product-list-top .total-products span, #products .products-selection .total-products span, .products-selection .total-products span { margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; white-space: nowrap !important; } #js-product-list-top .sort-by-row, #products .products-selection .sort-by-row, .products-selection .sort-by-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; height: 46px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; white-space: nowrap !important; } #js-product-list-top .sort-by, #products .products-selection .sort-by, .products-selection .sort-by { display: inline-flex !important; align-items: center !important; height: 46px !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; white-space: nowrap !important; } #js-product-list-top .products-sort-order, #products .products-selection .products-sort-order, .products-selection .products-sort-order { display: inline-flex !important; align-items: center !important; height: 46px !important; margin: 0 !important; padding: 0 !important; width: clamp(230px, 24vw, 380px) !important; max-width: 380px !important; min-width: 230px !important; } #js-product-list-top .products-sort-order .select-title, #products .products-selection .products-sort-order .select-title, .products-selection .products-sort-order .select-title { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 46px !important; min-height: 46px !important; width: 100% !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; line-height: 1.2 !important; } } /* Mobile: garder le tri au-dessus et lisible, sans forcer une seule ligne */ @media (max-width: 767.98px) { #js-product-list-top, #products .products-selection, .products-selection { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } #js-product-list-top .total-products, #products .products-selection .total-products, .products-selection .total-products, #js-product-list-top .sort-by-row, #products .products-selection .sort-by-row, .products-selection .sort-by-row { width: 100% !important; height: auto !important; } #js-product-list-top .sort-by-row, #products .products-selection .sort-by-row, .products-selection .sort-by-row { justify-content: flex-start !important; } } /* ========================================================= VERSION 1.0.74 - ROLLBACK SÉCURISÉ QUICKVIEW Base: retour à la version stable 1.0.72. Objectif: - retirer l'effet page entièrement noire causé par v1.0.73; - ne PAS modifier globalement .modal-backdrop; - corriger seulement l'aperçu produit de façon ciblée et sécuritaire. ========================================================= */ /* Sécurité: ne jamais forcer un voile noir global permanent */ .modal-backdrop, .modal-backdrop.show { pointer-events: none; } /* Aperçu produit seulement: style sombre ciblé */ #quickview-modal .modal-content, .quickview .modal-content { background-color: var(--gg-panel, #111a24) !important; color: #ffffff !important; border: 1px solid rgba(0,174,239,0.25) !important; border-radius: 12px !important; box-shadow: 0 18px 48px rgba(0,0,0,0.50) !important; } #quickview-modal .modal-header, #quickview-modal .modal-body, #quickview-modal .modal-footer, .quickview .modal-header, .quickview .modal-body, .quickview .modal-footer { background-color: var(--gg-panel, #111a24) !important; color: #ffffff !important; border-color: rgba(0,174,239,0.18) !important; } #quickview-modal .modal-body, .quickview .modal-body { padding: 22px !important; } /* Texte lisible dans l'aperçu, sans toucher au reste du site */ #quickview-modal h1, #quickview-modal h2, #quickview-modal h3, #quickview-modal h4, #quickview-modal p, #quickview-modal span, #quickview-modal label, #quickview-modal li, #quickview-modal .product-title, #quickview-modal .current-price, #quickview-modal .price, .quickview h1, .quickview h2, .quickview h3, .quickview h4, .quickview p, .quickview span, .quickview label, .quickview li, .quickview .product-title, .quickview .current-price, .quickview .price { color: #ffffff !important; } /* Zones internes de l'aperçu */ #quickview-modal .product-information, #quickview-modal .product-actions, #quickview-modal .product-variants, #quickview-modal .product-add-to-cart, .quickview .product-information, .quickview .product-actions, .quickview .product-variants, .quickview .product-add-to-cart { background-color: var(--gg-panel-soft, #162232) !important; color: #ffffff !important; border-radius: 8px !important; } /* Images: éviter les fonds blancs dans la fenêtre aperçu */ #quickview-modal .product-cover, #quickview-modal .images-container, #quickview-modal .product-images, #quickview-modal .thumb-container, .quickview .product-cover, .quickview .images-container, .quickview .product-images, .quickview .thumb-container { background-color: var(--gg-panel, #111a24) !important; } /* Champs et quantité */ #quickview-modal input, #quickview-modal select, #quickview-modal textarea, #quickview-modal .form-control, .quickview input, .quickview select, .quickview textarea, .quickview .form-control { background-color: var(--gg-panel-soft, #162232) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.20) !important; } /* Bouton fermer visible */ #quickview-modal .close, .quickview .close { color: #ffffff !important; opacity: 1 !important; text-shadow: none !important; } /* Mobile */ @media (max-width: 767.98px) { #quickview-modal .modal-dialog, .quickview .modal-dialog { width: 96vw !important; max-width: 96vw !important; margin: 10px auto !important; } #quickview-modal .modal-content, .quickview .modal-content { max-height: 92vh !important; overflow-y: auto !important; } } /* ========================================================= VERSION 1.0.75 - FILTER MENU CLEANUP - enlève les fonds blancs dans le menu de filtres - enlève les petits carrés autour des quantités ========================================================= */ /* Titres / toggles du menu de filtres: plus de petits fonds blancs */ #search_filters .facet-title, #search_filters .title, #search_filters .h6, #search_filters .navbar-toggler, #search_filters .collapse, #search_filters .collapse-icons, #search_filters .gg-mobile-facet-title, #search_filters .gg-mobile-facet-toggle, #left-column #search_filters .facet-title, #left-column #search_filters .title, #left-column #search_filters .h6, #left-column #search_filters .navbar-toggler, #left-column #search_filters .gg-mobile-facet-title, #left-column #search_filters .gg-mobile-facet-toggle { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Garder le bloc global lisible, sans mini rectangle blanc */ #search_filters .facet, #left-column #search_filters .facet { background: transparent !important; background-color: transparent !important; } /* Quantités: enlever les petits carrés visibles autour des nombres */ #search_filters .magnitude, #search_filters .facet-label .magnitude, #search_filters .facet-dropdown-content .magnitude, #left-column #search_filters .magnitude, #left-column #search_filters .facet-label .magnitude, #left-column #search_filters .facet-dropdown-content .magnitude { border: none !important; outline: none !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; padding: 0 !important; margin-left: 2px !important; color: #d8e1ec !important; } /* Si le thème PrestaShop ajoute des puces/cadres additionnels, on les neutralise */ #search_filters .facet-label > a, #search_filters .js-search-link, #left-column #search_filters .facet-label > a, #left-column #search_filters .js-search-link { background: transparent !important; box-shadow: none !important; } /* Cases / labels des filtres: cohérence visuelle */ #search_filters .facet-label, #search_filters label, #search_filters li, #left-column #search_filters .facet-label, #left-column #search_filters label, #left-column #search_filters li { background: transparent !important; } /* Mobile: garder le bouton d'accordéon propre et foncé */ @media (max-width: 991.98px) { #search_filters .gg-mobile-facet-toggle, #left-column #search_filters .gg-mobile-facet-toggle { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 8px !important; } #search_filters .gg-mobile-facet-title, #left-column #search_filters .gg-mobile-facet-title { background: transparent !important; } } /* ========================================================= VERSION 1.0.76 - HARMONISATION COMPLÈTE DU MENU FILTRE Objectif: - harmoniser tous les libellés, checkbox, couleurs, sliders et quantités; - garder le style sombre GG3D; - éviter les fonds blancs et les encadrés parasites; - préparer les futurs filtres automatiquement. ========================================================= */ /* Panneau filtre global */ #search_filters, #search_filters_wrapper, #left-column #search_filters, #left-column #search_filters_wrapper { background: var(--gg-panel, #111a24) !important; background-color: var(--gg-panel, #111a24) !important; color: #ffffff !important; border: 1px solid rgba(0,174,239,0.18) !important; border-radius: 14px !important; box-shadow: 0 10px 26px rgba(0,0,0,0.22) !important; } /* Titre principal FILTRER PAR */ #search_filters .text-uppercase, #search_filters .h6, #search_filters h4, #search_filters h5, #left-column #search_filters .text-uppercase, #left-column #search_filters .h6, #left-column #search_filters h4, #left-column #search_filters h5 { color: #ffffff !important; background: transparent !important; text-shadow: 0 1px 2px rgba(0,0,0,0.65) !important; font-family: 'Acme', Verdana, Arial, sans-serif !important; letter-spacing: 0.4px !important; } /* Sections/facettes */ #search_filters .facet, #search_filters .facet ul, #search_filters .facet li, #search_filters section, #left-column #search_filters .facet, #left-column #search_filters .facet ul, #left-column #search_filters .facet li, #left-column #search_filters section { background: transparent !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } /* Titres de facettes: Prix, Couleur, Marque, Poids, etc. */ #search_filters .facet-title, #search_filters .title, #search_filters .facet .title, #search_filters .facet .h6, #search_filters .facet p.h6, #search_filters .gg-mobile-facet-title, #left-column #search_filters .facet-title, #left-column #search_filters .title, #left-column #search_filters .facet .title, #left-column #search_filters .facet .h6, #left-column #search_filters .facet p.h6, #left-column #search_filters .gg-mobile-facet-title { display: block !important; color: #ffffff !important; background: transparent !important; background-color: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; padding: 0 !important; margin: 16px 0 8px 0 !important; font-size: 16px !important; line-height: 1.25 !important; font-weight: 700 !important; font-family: 'Acme', Verdana, Arial, sans-serif !important; } /* Boutons accordéons mobile des facettes */ #search_filters .gg-mobile-facet-toggle, #left-column #search_filters .gg-mobile-facet-toggle { background: rgba(255,255,255,0.035) !important; background-color: rgba(255,255,255,0.035) !important; border: 1px solid rgba(0,174,239,0.16) !important; border-radius: 9px !important; box-shadow: none !important; color: #ffffff !important; } /* Tous les textes de filtre */ #search_filters label, #search_filters .facet-label, #search_filters .facet-label a, #search_filters .js-search-link, #search_filters .filter-name, #search_filters .facet li, #search_filters p, #search_filters span, #left-column #search_filters label, #left-column #search_filters .facet-label, #left-column #search_filters .facet-label a, #left-column #search_filters .js-search-link, #left-column #search_filters .filter-name, #left-column #search_filters .facet li, #left-column #search_filters p, #left-column #search_filters span { color: #d8e1ec !important; background: transparent !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; text-shadow: none !important; } /* Quantités: (4), (3), etc. sans encadré */ #search_filters .magnitude, #search_filters .facet-label .magnitude, #search_filters .facet-dropdown-content .magnitude, #search_filters .filter-count, #search_filters .count, #left-column #search_filters .magnitude, #left-column #search_filters .facet-label .magnitude, #left-column #search_filters .facet-dropdown-content .magnitude, #left-column #search_filters .filter-count, #left-column #search_filters .count { color: #d8e1ec !important; background: transparent !important; background-color: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 0 !important; margin-left: 2px !important; font-size: inherit !important; line-height: inherit !important; } /* Hover */ #search_filters .facet-label a:hover, #search_filters .js-search-link:hover, #search_filters label:hover, #left-column #search_filters .facet-label a:hover, #left-column #search_filters .js-search-link:hover, #left-column #search_filters label:hover { color: var(--gg-blue, #00aeef) !important; } /* Checkboxes: style uniforme */ #search_filters input[type="checkbox"], #search_filters input[type="radio"], #left-column #search_filters input[type="checkbox"], #left-column #search_filters input[type="radio"] { appearance: none !important; -webkit-appearance: none !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; background: #0b0f16 !important; background-color: #0b0f16 !important; border: 1px solid rgba(216,225,236,0.55) !important; border-radius: 3px !important; box-shadow: none !important; margin: 0 8px 0 0 !important; vertical-align: middle !important; position: relative !important; cursor: pointer !important; } /* Faux span PrestaShop de checkbox */ #search_filters .custom-checkbox input[type="checkbox"] + span, #search_filters .custom-checkbox .ps-shown-by-js, #search_filters .facet-label .custom-checkbox span, #left-column #search_filters .custom-checkbox input[type="checkbox"] + span, #left-column #search_filters .custom-checkbox .ps-shown-by-js, #left-column #search_filters .facet-label .custom-checkbox span { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; background: #0b0f16 !important; background-color: #0b0f16 !important; border: 1px solid rgba(216,225,236,0.55) !important; border-radius: 3px !important; box-shadow: none !important; margin-right: 8px !important; } /* Checkboxes cochées */ #search_filters input[type="checkbox"]:checked, #search_filters input[type="radio"]:checked, #left-column #search_filters input[type="checkbox"]:checked, #left-column #search_filters input[type="radio"]:checked, #search_filters .custom-checkbox input[type="checkbox"]:checked + span, #search_filters .custom-checkbox input[type="checkbox"]:checked + .ps-shown-by-js, #left-column #search_filters .custom-checkbox input[type="checkbox"]:checked + span, #left-column #search_filters .custom-checkbox input[type="checkbox"]:checked + .ps-shown-by-js { background: var(--gg-blue, #00aeef) !important; background-color: var(--gg-blue, #00aeef) !important; border-color: var(--gg-blue, #00aeef) !important; } /* Petit crochet blanc dans les cases cochées natives */ #search_filters input[type="checkbox"]:checked::after, #left-column #search_filters input[type="checkbox"]:checked::after { content: "✓" !important; display: block !important; color: #ffffff !important; font-size: 14px !important; line-height: 16px !important; text-align: center !important; font-weight: 700 !important; } /* Couleurs / pastilles */ #search_filters .color, #search_filters .facet-color, #search_filters span.color, #search_filters a.color, #search_filters .facet-label .color, #search_filters .custom-checkbox span.color, #left-column #search_filters .color, #left-column #search_filters .facet-color, #left-column #search_filters span.color, #left-column #search_filters a.color, #left-column #search_filters .facet-label .color, #left-column #search_filters .custom-checkbox span.color { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; border-radius: 4px !important; border: 1px solid rgba(216,225,236,0.55) !important; box-shadow: 0 0 0 1px rgba(0,0,0,0.22) !important; padding: 0 !important; margin-right: 8px !important; } /* Sliders Prix / Poids */ #search_filters .ui-slider, #search_filters .ui-widget-content, #search_filters .noUi-target, #search_filters .range-slider, #left-column #search_filters .ui-slider, #left-column #search_filters .ui-widget-content, #left-column #search_filters .noUi-target, #left-column #search_filters .range-slider { background: rgba(255,255,255,0.18) !important; border: none !important; border-radius: 999px !important; height: 5px !important; box-shadow: none !important; } #search_filters .ui-slider-range, #search_filters .noUi-connect, #left-column #search_filters .ui-slider-range, #left-column #search_filters .noUi-connect { background: var(--gg-blue, #00aeef) !important; border-radius: 999px !important; box-shadow: none !important; } #search_filters .ui-slider-handle, #search_filters .noUi-handle, #left-column #search_filters .ui-slider-handle, #left-column #search_filters .noUi-handle { width: 16px !important; height: 16px !important; border-radius: 50% !important; background: #ffffff !important; border: 2px solid var(--gg-blue, #00aeef) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.45) !important; cursor: pointer !important; } /* Supprimer petits cadres générés par liens / spans autour des filtres */ #search_filters .facet-label a *, #search_filters .js-search-link *, #left-column #search_filters .facet-label a *, #left-column #search_filters .js-search-link * { background-color: transparent !important; } /* Dropdowns dans les filtres */ #search_filters select, #search_filters .form-control, #left-column #search_filters select, #left-column #search_filters .form-control { background: var(--gg-panel-soft, #162232) !important; background-color: var(--gg-panel-soft, #162232) !important; color: #ffffff !important; border: 1px solid rgba(0,174,239,0.24) !important; border-radius: 8px !important; } /* Filtres actifs */ #js-active-search-filters, #js-active-search-filters .filter-block { background: var(--gg-panel-soft, #162232) !important; color: #ffffff !important; border-color: rgba(0,174,239,0.22) !important; border-radius: 8px !important; } #js-active-search-filters .filter-block:hover { color: var(--gg-blue, #00aeef) !important; } /* ========================================================= VERSION 1.0.77 - FILTRES : MASQUER LES EXPANDABLES NON FONCTIONNELS Objectif: - cacher les petits boutons/titres "Prix+", "Couleur+", "Prix−", etc.; - conserver le vrai titre de filtre visible: Prix, Couleur, Marque, Poids; - supprimer les bordures bleues autour de ces toggles; - garder le menu de filtre propre et lisible. ========================================================= */ /* Desktop/tablette: les toggles de facettes ne servent pas, on les cache complètement */ @media (min-width: 768px) { #search_filters .gg-mobile-facet-toggle, #search_filters .navbar-toggler, #search_filters .collapse-icons, #search_filters .facet .navbar-toggler, #search_filters .facet .collapse-icons, #left-column #search_filters .gg-mobile-facet-toggle, #left-column #search_filters .navbar-toggler, #left-column #search_filters .collapse-icons, #left-column #search_filters .facet .navbar-toggler, #left-column #search_filters .facet .collapse-icons { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: hidden !important; pointer-events: none !important; } /* S'assurer que les vrais contenus des facettes restent ouverts et visibles */ #search_filters .facet .collapse, #left-column #search_filters .facet .collapse, #search_filters .gg-mobile-facet-content, #left-column #search_filters .gg-mobile-facet-content { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; max-height: none !important; } } /* Sécurité globale: si un toggle non fonctionnel reste généré, il devient invisible */ #search_filters .gg-mobile-facet-toggle:not(.gg-mobile-active-toggle), #left-column #search_filters .gg-mobile-facet-toggle:not(.gg-mobile-active-toggle) { background: transparent !important; background-color: transparent !important; background-image: none !important; border-color: transparent !important; outline: 0 !important; box-shadow: none !important; } /* Retirer toute bordure résiduelle autour des libellés de facettes */ #search_filters .facet-title, #search_filters .title, #search_filters .facet .title, #search_filters .facet p.h6, #search_filters .facet .h6, #left-column #search_filters .facet-title, #left-column #search_filters .title, #left-column #search_filters .facet .title, #left-column #search_filters .facet p.h6, #left-column #search_filters .facet .h6 { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; background-color: transparent !important; } /* Mobile: le filtre reste utilisable, mais les boutons ne doivent pas créer de doubles titres carrés */ @media (max-width: 767.98px) { #search_filters .facet-title, #search_filters .title, #search_filters .facet .title, #search_filters .facet p.h6, #search_filters .facet .h6, #left-column #search_filters .facet-title, #left-column #search_filters .title, #left-column #search_filters .facet .title, #left-column #search_filters .facet p.h6, #left-column #search_filters .facet .h6 { border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; } #search_filters .gg-mobile-facet-toggle, #left-column #search_filters .gg-mobile-facet-toggle { border-color: rgba(0,174,239,0.16) !important; box-shadow: none !important; } }