/* ==================================================================== * UltraPC - Habillage saisonnier « Black Friday » (31/10/2026). * Chargé par le module ultrapc_habillage uniquement quand l'habillage * est actif (période / vente flash en cours) ; rien d'autre à toucher * pour revenir au site normal. Après theme.css + custom.css ; les * sélecteurs préfixés par « body » passent devant upc-ux-mobile.css. * * Principe : noir + jaune « flash » (#facf19, déjà la couleur des ventes * flash du site). Les cartes produits restent blanches (validées par le * client) ; tout ce qui est autour passe en sombre. * ==================================================================== */ :root { --bf-fond: #0b0b0e; /* fond des pages */ --bf-fond2: #111115; /* en-tête, pied de page */ --bf-surface: #17171c; /* blocs, cartes sombres */ --bf-surface2: #22222a; /* survol, boutons discrets */ --bf-bordure: #2c2c35; --bf-bordure2: #3a3a45; --bf-texte: #f3f3f5; --bf-texte2: #b8b8c2; --bf-texte3: #8a8a96; --bf-jaune: #facf19; --bf-jaune2: #ffdc4d; --bf-encre: #0b0b0e; /* texte sur jaune */ } body { background: var(--bf-fond); } /* -------------------------------------------------------------------- * En-tête * -------------------------------------------------------------------- */ body #header-container { background: var(--bf-fond2); color: var(--bf-texte2); } /* Barre du haut */ body .header-nav { background: var(--bf-fond); border-bottom-color: var(--bf-bordure); } body .header-nav .header-nav-links .header-nav-link a { color: var(--bf-texte2); border-left-color: var(--bf-bordure2); } body .header-nav .header-nav-link a:hover, body .header-nav .header-nav-link a:focus, body .header-nav .header-nav-links .header-nav-link a.current { color: var(--bf-jaune); } body .header-nav .header-nav-link.link-call .upc-call { color: var(--bf-texte2); } body .header-nav .link-call .upc-call-icon { background: var(--bf-surface2); } body .header-nav .link-call .upc-call-icon i { color: var(--bf-jaune); } body .header-nav .link-call .upc-call-num { color: #fff; } body .header-nav .link-call .upc-call-hours { color: var(--bf-texte3); border-left-color: var(--bf-bordure2); } body .header-nav .link-call .upc-call:hover .upc-call-num { color: var(--bf-jaune); } /* Bandeau (module ultrapc_habillage, hook displayBanner) */ body .header-banner { background: var(--bf-fond); border-bottom: 1px solid var(--bf-bordure); } .upc-hab-bandeau { display: flex; align-items: center; gap: 10px 16px; min-height: 40px; padding: 6px 0; color: var(--bf-texte); font: 400 13.5px/1.3 "Open Sans", sans-serif; text-decoration: none !important; } .upc-hab-bandeau-titre { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 4px; background: var(--bf-jaune); color: var(--bf-encre); font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .upc-hab-bandeau-titre .upc-hab-eclair { flex: 0 0 auto; } .upc-hab-bandeau-texte { flex: 1 1 auto; min-width: 0; color: #d6d6de; } .upc-hab-bandeau-fin { flex: 0 0 auto; color: var(--bf-texte2); font-size: 12.5px; white-space: nowrap; } .upc-hab-bandeau-fin b { font-weight: 400; margin-left: 4px; } .upc-hab-bandeau-fin em { font: 700 14px/1 "Open Sans", sans-serif; font-style: normal; color: #fff; font-variant-numeric: tabular-nums; } .upc-hab-bandeau-cta { flex: 0 0 auto; color: var(--bf-jaune); font-weight: 700; white-space: nowrap; } a.upc-hab-bandeau:hover .upc-hab-bandeau-cta { color: var(--bf-jaune2); text-decoration: underline; } @media (max-width: 991px) { .upc-hab-bandeau { gap: 8px 12px; } .upc-hab-bandeau-texte { display: none; } .upc-hab-bandeau-fin { margin-left: auto; } } @media (max-width: 575px) { .upc-hab-bandeau { min-height: 36px; padding: 5px 0; } .upc-hab-bandeau-titre { font-size: 11.5px; padding: 3px 8px; } .upc-hab-bandeau-fin-lbl, .upc-hab-bandeau-cta { display: none; } } /* Logo : version blanche (celle du pied de page) */ body #header-logo img { content: url("../img/logo-ultrapc-blanc.svg"); } /* Recherche */ body #search_widget .input-group { background: var(--bf-surface); border-color: var(--bf-bordure2); } body #search_widget .input-group:focus-within { border-color: var(--bf-jaune); box-shadow: 0 0 0 3px rgba(250,207,25,.18); } body #search_widget .search_query { background: transparent; color: var(--bf-texte); } body #search_widget .search_query::placeholder { color: var(--bf-texte3); } body #search_widget .btn { background: var(--bf-jaune); color: var(--bf-encre); } body #search_widget .btn:hover, body #search_widget .btn:focus { background: var(--bf-jaune2); } /* « Nos magasins », compte, panier */ body #header-container .upc-store-toggle { background: var(--bf-surface); border-color: var(--bf-bordure2); color: var(--bf-texte); } body #header-container .upc-store-toggle:hover { border-color: var(--bf-jaune); } body #header-container .upc-store-toggle .upc-store-icon, body #header-container .upc-store-toggle i { color: var(--bf-jaune); } body #header-container .user-info, body #header-container .user-info a, body #header-container .user-info-text, body #header-container .blockcart, body #header-container .blockcart a, body #header-container .blockcart .cart-products-count, body #header-container .blockcart .header span, body #header-container .blockcart i { color: var(--bf-texte); } body #header-container .user-info a:hover, body #header-container .blockcart a:hover { color: var(--bf-jaune); } body #header-container .user-info .user-info-text > span:not(:first-child), body #header-container .blockcart .cart-products-count { color: var(--bf-texte2); } body #header-container .header-top .ctinfo a { color: var(--bf-jaune); } /* Menu principal (ligne 1) et raccourcis (ligne 2) */ body .mobile-menu::before { background: var(--bf-surface); border-color: var(--bf-bordure); } body .mobile-menu .menu-home { background: var(--bf-jaune); color: var(--bf-encre); } body .mobile-menu .menu-home i { color: var(--bf-encre); } body .mobile-menu .menu-home:hover { background: var(--bf-jaune2); } body .mobile-menu #_desktop_top_menu { background: var(--bf-surface); box-shadow: inset 0 0 0 1px var(--bf-bordure), inset 0 -3px 0 var(--bf-jaune); } body .mobile-menu .top-menu a[data-depth="0"] { color: var(--bf-texte); } body .mobile-menu .top-menu a[data-depth="0"]::after { background: var(--bf-jaune); } body .mobile-menu .top-menu > li:hover > a[data-depth="0"], body .mobile-menu .top-menu a[data-depth="0"]:focus { background-color: rgba(255,255,255,.07); } body .mobile-menu .menu-specials, body .mobile-menu .menu-news, body .mobile-menu .customMenuArrivage { color: var(--bf-texte); } body .mobile-menu .menu-specials::before, body .mobile-menu .menu-news::before, body .mobile-menu .customMenuArrivage::before { color: var(--bf-jaune); } body .mobile-menu .menu-specials:hover, body .mobile-menu .menu-news:hover, body .mobile-menu .customMenuArrivage:hover, body .mobile-menu .customMenuArrivage:active { background: var(--bf-surface2); color: #fff; } body .mobile-menu .customMenuVenteFlash { background: var(--bf-jaune); color: var(--bf-encre); } body .mobile-menu .customMenuVenteFlash::before { color: var(--bf-encre); } body .mobile-menu .customMenuVenteFlash:hover { background: var(--bf-jaune2); color: var(--bf-encre); } /* Bouton « Black Friday » de la ligne des raccourcis (gabarit ps_mainmenu, affiché par le module ultrapc_habillage) */ body .mobile-menu .customMenuHabillage { background: var(--bf-jaune); color: var(--bf-encre); box-shadow: 0 0 0 1px var(--bf-jaune2); } body .mobile-menu .customMenuHabillage::before { color: var(--bf-encre); } body .mobile-menu .customMenuHabillage:hover, body .mobile-menu .customMenuHabillage:focus { background: var(--bf-jaune2); color: var(--bf-encre); box-shadow: 0 0 0 1px #fff; } body .mobile-menu .customMenuConfigurateur, body .mobile-menu .customMenuServices { background: var(--bf-surface); border-color: var(--bf-bordure2); color: var(--bf-texte); } body .mobile-menu .customMenuConfigurateur { border-color: var(--bf-jaune); } body .mobile-menu .customMenuConfigurateur:hover, body .mobile-menu .customMenuServices:hover { background: var(--bf-surface2); border-color: var(--bf-jaune); color: #fff; } /* Menu collé en haut après défilement (classe upc-menu-fixe, fond blanc dans ps_mainmenu.tpl) */ body .mobile-menu.upc-menu-fixe { background: var(--bf-fond2); box-shadow: 0 1px 0 var(--bf-bordure), 0 10px 14px -12px rgba(0,0,0,.9); } /* Sous-menu déroulant (PC) : carte sombre au lieu de la carte blanche */ body .mobile-menu .top-menu .sub-menu { background: var(--bf-surface); border-color: var(--bf-bordure2); box-shadow: 0 12px 30px -12px rgba(0,0,0,.9); } body .mobile-menu .top-menu .sub-menu ul[data-depth="1"] > li { border-left-color: var(--bf-bordure); } body .mobile-menu .top-menu a.dropdown-submenu { color: var(--bf-texte); } body .mobile-menu .top-menu a[data-depth="2"], body .mobile-menu .top-menu a[data-depth="3"] { color: var(--bf-texte2); } body .mobile-menu .top-menu .sub-menu a:hover, body .mobile-menu .top-menu .sub-menu a:focus { color: var(--bf-jaune); } /* Mobile (≤ 991 px : upc-ux-mobile.css passe après cette feuille → mêmes sélecteurs, plus « body ») */ @media (max-width: 991px) { /* Menu déroulant « Menu » : carte sombre, sous-niveaux plus sombres */ body #mobile_top_menu_wrapper { background: var(--bf-surface); border-color: var(--bf-bordure2); box-shadow: 0 12px 30px -12px rgba(0,0,0,.9); } body #mobile_top_menu_wrapper .top-menu a[data-depth="0"] { color: var(--bf-texte); border-bottom-color: var(--bf-bordure) !important; } body #mobile_top_menu_wrapper .top-menu > li.current > a[data-depth="0"] { color: var(--bf-jaune); box-shadow: inset 3px 0 0 var(--bf-jaune); } body #mobile_top_menu_wrapper .top-menu a:active { background: var(--bf-surface2); } body #mobile_top_menu_wrapper .top-menu .navbar-toggler { background: var(--bf-surface2); color: var(--bf-jaune); } body #mobile_top_menu_wrapper .top-menu .navbar-toggler i { color: var(--bf-jaune); } body #mobile_top_menu_wrapper .top-menu .sub-menu { background: var(--bf-fond2); } body #mobile_top_menu_wrapper .top-menu .sub-menu li > a { color: var(--bf-texte); border-bottom-color: var(--bf-bordure); } body #mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="2"] li a { color: var(--bf-texte2); background: var(--bf-fond); } body #mobile_top_menu_wrapper .top-menu .sub-menu .navbar-toggler { background: var(--bf-surface); } body #header-container { background: var(--bf-fond2); } body #header-container .header-top .ctinfo a { color: var(--bf-jaune); } body .mobile-menu #menu-icon { background: var(--bf-surface); color: var(--bf-texte); box-shadow: inset 0 0 0 1px var(--bf-bordure), inset 0 -3px 0 var(--bf-jaune); } body .mobile-menu #menu-icon i, body .mobile-menu #menu-icon .menu-title { color: var(--bf-texte); } body .mobile-menu .upc-raccourcis > a { background: var(--bf-surface) !important; border-color: var(--bf-bordure2) !important; color: var(--bf-texte) !important; } body .mobile-menu .upc-raccourcis > a:active { background: var(--bf-surface2) !important; border-color: var(--bf-jaune) !important; } body .mobile-menu .upc-raccourcis > a::before { color: var(--bf-jaune) !important; } body .mobile-menu .upc-raccourcis > .customMenuConfigurateur { border-color: var(--bf-jaune) !important; } body .mobile-menu .upc-raccourcis > .customMenuVenteFlash { background: var(--bf-jaune) !important; color: var(--bf-encre) !important; border-color: var(--bf-jaune) !important; } body .mobile-menu .upc-raccourcis > .customMenuVenteFlash::before { color: var(--bf-encre) !important; } body .mobile-menu .upc-raccourcis > .customMenuHabillage { background: var(--bf-jaune) !important; color: var(--bf-encre) !important; border-color: var(--bf-jaune) !important; } body .mobile-menu .upc-raccourcis > .customMenuHabillage::before { color: var(--bf-encre) !important; } body .mobile-menu .upc-raccourcis > .customMenuCredit { background: #eafaf1 !important; color: #0b7a3b !important; border-color: #abf0c6 !important; } body .mobile-menu .upc-raccourcis > .customMenuCredit::before { color: #0b7a3b !important; } } /* -------------------------------------------------------------------- * Pages « catalogue » : fond sombre, titres clairs, blocs sombres. * Les autres pages (panier, tunnel, compte, contact…) gardent leur * contenu sur fond blanc : seul l'habillage autour change. * -------------------------------------------------------------------- */ body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container #page { background: var(--bf-fond); color: var(--bf-texte2); } /* Pages à contenu blanc : un léger arrondi pour poser la feuille sur le fond sombre. */ body:not(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container { background: #fff; } /* Fil d'Ariane, titres : seulement sur les pages à fond sombre (sur fond blanc — panier, configurateur, compte… — * les titres gardent leur couleur d'origine). */ body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .breadcrumb, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .breadcrumb-item, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .breadcrumb-item a { color: var(--bf-texte2); } body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .breadcrumb-item a:hover { color: var(--bf-jaune); } body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .breadcrumb-item.active, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .breadcrumb-item.active a, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .breadcrumb-item + .breadcrumb-item::before { color: var(--bf-texte); } body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .breadcrumb-item + .breadcrumb-item::before { color: var(--bf-texte3); } body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container h1, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .h1, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container #main > h1.h1, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .products-section-title, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .products-section-title span, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .upc-vg h2, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .upc-vg .h2, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container #alt-column h2, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container .page-heading { color: var(--bf-texte); } #page-container .products-section-title::before, #page-container .products-section-title::after { border-color: var(--bf-bordure2) !important; } /* Accueil : carrousel, vignettes boutiques */ body #theme-slider { background: transparent; } #page-container .upc-vg .upc-vg-fleche, #page-container .upc-vg button { background: var(--bf-surface); border-color: var(--bf-bordure2); color: var(--bf-texte); } #page-container .upc-vg .upc-vg-fleche:hover { border-color: var(--bf-jaune); color: var(--bf-jaune); } /* Colonne de gauche : blocs */ #page-container #columns .side-block { background: var(--bf-surface); border-color: var(--bf-bordure); color: var(--bf-texte2); } #page-container #columns .side-block .block-title, #page-container #columns .side-block .block-title a { color: var(--bf-texte); border-bottom-color: var(--bf-bordure); } #page-container #columns .side-block article:not(:first-child) { border-top-color: var(--bf-bordure); } #page-container #columns .side-block .block-product-title, #page-container #columns .side-block .block-product-title a { color: #e4e4ea; } #page-container #columns .side-block .block-product-title a:hover { color: var(--bf-jaune); } #page-container #columns .side-block .block-product-price .price { color: #fff; } #page-container #columns .side-block .block-product-price .regular-price { color: var(--bf-texte3); } #page-container #columns .side-block img { background: #fff; border-radius: 4px; } #page-container #columns .side-block .btn { background: var(--bf-surface2); color: var(--bf-texte); } #page-container #columns .side-block .btn:hover { background: var(--bf-bordure2); color: #fff; } /* Filtres (ps_facetedsearch) */ #page-container #search_filters_wrapper, #page-container #search_filters_wrapper .h6, #page-container #search_filters_wrapper .facet-title, #page-container #search_filters_wrapper .facet-label, #page-container #search_filters_wrapper .facet-label a, #page-container #search_filters_wrapper label, #page-container #search_filters_wrapper .text-muted, #page-container #search_filters_wrapper .magnitude, #page-container #search_filters_wrapper .ui-slider-handle, #page-container #search_filters .facet .collapse-icons i { color: var(--bf-texte2); } #page-container #search_filters_wrapper .facet-title { color: var(--bf-texte); } #page-container #search_filters_wrapper .facet { border-color: var(--bf-bordure); } #page-container #search_filters_wrapper .facet-label a:hover { color: var(--bf-jaune); } #page-container #search_filters_wrapper .upc-pastille, #page-container #search_filters_wrapper .facet-label .custom-checkbox + a, #page-container #search_filters_wrapper .facet .facet-label.upc-chip { background: var(--bf-fond); border-color: var(--bf-bordure2); color: var(--bf-texte); } /* Catégories : description, sous-catégories, barre de tri, pagination */ #page-container #category .block-category { border-bottom-color: var(--bf-jaune); } #page-container .block-category, #page-container .block-category p, #page-container #category-description, #page-container #category-description p, #page-container .category-description, #page-container .upc-cat-desc { color: var(--bf-texte2); } #page-container .block-category strong, #page-container #category-description strong { color: var(--bf-texte); } #page-container .block-category a, #page-container #category-description a { color: var(--bf-jaune); } #page-container #subcategories .subcategory-image, #page-container #subcategories li, #page-container #subcategories a, #page-container .subcategories a, #page-container .upc-sous-cats a { background: var(--bf-surface); border-color: var(--bf-bordure2); color: var(--bf-texte); } #page-container #subcategories a:hover, #page-container .upc-sous-cats a:hover { border-color: var(--bf-jaune); color: var(--bf-jaune); } #page-container .products-selection, #page-container #js-product-list-top { background: var(--bf-surface); border-color: var(--bf-bordure); color: var(--bf-texte2); } #page-container .products-selection .total-products, #page-container .products-selection .total-products p, #page-container .products-selection .sort-by, #page-container .products-selection .display label, #page-container .products-selection .display a { color: var(--bf-texte2); } #page-container .products-selection .display a.selected, #page-container .products-selection .display a:hover { color: var(--bf-jaune); } #page-container .products-selection .products-sort-order .select-title { background: var(--bf-fond); border-color: var(--bf-bordure2); color: var(--bf-texte); } #page-container .pagination-list .showing { color: var(--bf-texte3); } #page-container .pagination-list .page-item .page-link { background: var(--bf-surface); border-color: var(--bf-bordure2); color: var(--bf-texte); } #page-container .pagination-list .page-item a.page-link:hover { background: var(--bf-surface2); border-color: var(--bf-jaune); color: #fff; } #page-container .pagination-list .page-item.current .page-link { background: var(--bf-jaune); border-color: var(--bf-jaune); color: var(--bf-encre); } /* Cartes produits : inchangées (blanches). On remet leurs textes sombres au cas où un titre générique déborde. */ #page-container .product-miniature :is(h1, h2, h3, h4), #page-container .product-miniature .product-title a { color: #2b2f36; } /* Fiche produit */ #page-container #product h1, #page-container #product .product-reference, #page-container #product .product-reference span, #page-container #product .product-prices, #page-container #product .product-prices .current-price, #page-container #product .product-prices .current-price span, #page-container #product .product-prices .tax-shipping-delivery-label, #page-container #product .product-information, #page-container #product .product-additional-info, #page-container #product .product-variants label, #page-container #product .product-quantity label { color: var(--bf-texte); } #page-container #product .product-prices .regular-price { color: var(--bf-texte3); } #page-container #product .product-description-short, #page-container #product .product-description-short p, #page-container #product #product-description-short { background: var(--bf-surface); border-color: var(--bf-bordure); color: var(--bf-texte2); } #page-container #product .product-manufacturer img, #page-container #product .product-manufacturer a { background: #fff; border-radius: 6px; } #page-container #product .product-actions .product-add-to-cart, #page-container #product #product-availability, #page-container #product .product-add-to-cart .upc-dispo, #page-container #product .product-actions .upc-achat { background: var(--bf-surface); border-color: var(--bf-bordure); color: var(--bf-texte); } #page-container #product .product-quantity .qty .form-control, #page-container #product .product-quantity .bootstrap-touchspin .btn { background: var(--bf-fond); border-color: var(--bf-bordure2); color: var(--bf-texte); } #page-container #product .product-condition, #page-container #product .product-condition .label, #page-container #product .product-features > dl .name, #page-container #product .product-features > dl .value { color: var(--bf-texte2); } #page-container #product .product-condition { border-color: var(--bf-bordure); } /* Ruban « Black Friday » en coin des produits de la vente flash (drapeau produit « upc-hab » * ajouté par le module ultrapc_habillage ; cartes : coin haut droit, les autres pastilles descendent). */ body .product-miniature:has(.product-flag.upc-hab) .product-block { overflow: hidden; } /* Les autres pastilles (remise…) passent à gauche, comme l'éclair du bloc vente flash, pour ne pas passer sous le ruban. */ body .product-miniature .product-flags:has(.upc-hab) { left: 10px !important; right: 10px !important; width: auto !important; align-items: flex-start !important; pointer-events: none; } body .product-miniature .product-flags .product-flag.upc-hab, body .product-cover .upc-hab { position: absolute !important; z-index: 4; pointer-events: none; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; float: none !important; background: var(--bf-jaune) !important; color: var(--bf-encre) !important; text-align: center; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.35); transform: rotate(45deg); } body .product-miniature .product-flags .product-flag.upc-hab { top: 17px; right: -47px; left: auto; width: 150px !important; font: 800 10.5px/22px "Open Sans", sans-serif !important; letter-spacing: .6px; } body .product-cover .upc-hab { top: 47px; right: -48px; left: auto; width: 220px; font: 800 13px/30px "Open Sans", sans-serif; letter-spacing: .8px; } @media (max-width: 575px) { /* Cartes étroites : ruban plus petit pour ne pas couvrir la pastille de remise. */ body .product-miniature .product-flags .product-flag.upc-hab { top: 13px; right: -41px; width: 128px !important; font: 800 9px/19px "Open Sans", sans-serif !important; letter-spacing: .4px; } } /* Configurateur PC (/configurateur-pc, module ultrapc_configurator) : page sombre, cartes blanches inchangées. * Seuls les éléments posés directement sur le fond sont adaptés (variables du widget conservées pour les cartes). */ #page-container .upc-cfg { color: var(--bf-texte2); } #page-container .upc-cfg__head { border-bottom-color: var(--bf-jaune); } #page-container .upc-cfg__title { color: var(--bf-texte); } #page-container .upc-cfg__lede { color: var(--bf-texte2); } #page-container .upc-cfg__reset { border-color: var(--bf-bordure2); color: var(--bf-texte); background: var(--bf-surface); } #page-container .upc-cfg__reset:hover { border-color: var(--bf-jaune); color: var(--bf-jaune); } #page-container .upc-group { color: var(--bf-texte3); } #page-container .upc-group::after { background: var(--bf-bordure2); } #page-container .upc-cfg__loading { color: var(--bf-texte2); } #page-container .upc-cfg__promo { background: var(--bf-surface); border-color: var(--bf-bordure2); color: var(--bf-texte); } #page-container .upc-cfg__promo b { background: var(--bf-jaune); color: var(--bf-encre); } #page-container .upc-cfg__promo a { color: var(--bf-jaune); } @media (max-width: 991px) { body .upc-cfg__mobilebar { background: var(--bf-surface); border-top-color: var(--bf-bordure2); color: var(--bf-texte); box-shadow: 0 -6px 18px -12px rgba(0,0,0,.9); } } /* Ventes flash : en-tête de l'accueil et de /vente-flash, pastilles de catégories */ #page-container .abs-flash-sale-section .abs-flash-sale_header.upc-vfa, #page-container .upc-vf .upc-vf-entete { background: var(--bf-surface); border-color: var(--bf-bordure); border-left-color: var(--bf-jaune); color: var(--bf-texte); } #page-container .abs-flash-sale-section .abs-flash-sale_link:hover .upc-vfa { border-color: var(--bf-bordure2); border-left-color: var(--bf-jaune); box-shadow: 0 8px 24px -12px rgba(250,207,25,.35); } #page-container .abs-flash-sale-section .upc-vfa h2.abs-flash-sale_title, #page-container .upc-vf h1 { color: #fff; } #page-container .upc-vfa .upc-vfa-titre p, #page-container .upc-vf .upc-vf-titre p, #page-container .upc-vfa .upc-vfa-lbl, #page-container .absflashsale-block.upc-vf .abs-countdown .ttabs_ends, #page-container .absflashsale-block.upc-vf .abs-date-container-flash { color: var(--bf-texte2); } #page-container .absflashsale-block.upc-vf .abs-date-container-flash .upc-vf-d, #page-container .absflashsale-block.upc-vf .abs-date-container-flash .upc-vf-h { color: var(--bf-texte); } #page-container .upc-vfa .upc-vfa-cases b, #page-container .upc-vf .abs-countdown b { background: var(--bf-jaune); color: var(--bf-encre); } #page-container .absflashsale-block.upc-vf .abs-countdown em { color: var(--bf-encre) !important; } #page-container .upc-vfa .upc-vfa-cases i, #page-container .upc-vf .abs-countdown b i { color: rgba(11,11,14,.6); } #page-container .upc-vfa .upc-vfa-voir { background: var(--bf-jaune); color: var(--bf-encre); } #page-container .abs-flash-sale-section .abs-flash-sale_link:hover .upc-vfa-voir { background: var(--bf-jaune2); } #page-container .absflashsale-block.upc-vf, #page-container .absflashsale-cat.upc-vf-cats { color: var(--bf-texte) !important; } #page-container .upc-vf-pastilles .absradio_subcat { background: var(--bf-surface); border-color: var(--bf-bordure2); color: var(--bf-texte); } #page-container .upc-vf-pastilles .absradio_subcat:hover { border-color: var(--bf-jaune); color: var(--bf-jaune); } #page-container .upc-vf-pastilles .absradio_subcat.active, #page-container .upc-vf-pastilles .absradio_subcat.selected, #page-container .upc-vf-pastilles .absradio_subcat.abs-cat-active { background: var(--bf-jaune); border-color: var(--bf-jaune); color: var(--bf-encre); } #page-container .upc-vf .upc-vf-deux li.abs-flash-tab { border-color: var(--bf-bordure2); } #page-container .upc-vf .upc-vf-deux li.abs-flash-tab.activetab { border-color: var(--bf-jaune); background: var(--bf-surface2) !important; } #page-container .absflashsale-block.upc-vf .abs-coming-soon { color: var(--bf-jaune); } /* -------------------------------------------------------------------- * Pied de page * -------------------------------------------------------------------- */ body #footer-container { background: var(--bf-fond2); border-top: 3px solid var(--bf-jaune); } body .ultrapc-partnerbrands { background: var(--bf-fond2); } body .ultrapc-partnerbrands .products-section-title, body .ultrapc-partnerbrands .products-section-title span { color: var(--bf-texte); } body .ultrapc-partnerbrands .products-section-title::before, body .ultrapc-partnerbrands .products-section-title::after { border-color: var(--bf-bordure2) !important; } /* Logos des marques : fonds blancs → noirs, logos noirs → blancs, couleurs conservées (inversion + rotation de teinte). */ body .ultrapc-partnerbrands .partnerbrands-track img { filter: invert(1) hue-rotate(180deg); } body #footer, body #footer a { color: #e4e4ea; } body #footer a:hover { color: var(--bf-jaune); } body #footer .footer-topblock { border-color: var(--bf-bordure); } body .footer-bottomblock-container { background: var(--bf-fond); border-top: 1px solid var(--bf-bordure); } body .footer-bottomblock-container, body .footer-bottomblock-container p, body .footer-bottomblock-container span, body .footer-bottomblock-container h3, body .footer-bottomblock-container .h3, body .footer-bottomblock-container strong { color: var(--bf-texte2); } body .footer-bottomblock-container :is(h3, .h3, strong, b) { color: var(--bf-texte); } body .footer-bottomblock-container i { color: var(--bf-jaune); } body .footer-bottomblock-container .footer-bottomblock > div > div, body .footer-bottomblock-container .upc-reassurance, body .footer-bottomblock-container .reassurance-item, body .footer-bottomblock-container [class*="col-"] > div { background: var(--bf-surface); border-color: var(--bf-bordure); } body .home-seo-text { background: var(--bf-fond2); color: var(--bf-texte3); border-top: 1px solid var(--bf-bordure); } body .home-seo-text h1 { color: var(--bf-texte); } body .home-seo-text p { color: var(--bf-texte2); } body #footer-copyright { background: var(--bf-fond); border-top-color: var(--bf-bordure); color: var(--bf-texte3); } body #footer-copyright a { color: var(--bf-texte2); } /* -------------------------------------------------------------------- * Compléments (2e passe, après relevé des éléments restés clairs) * -------------------------------------------------------------------- */ /* En-tête : libellés encore bleus */ body #header-container .upc-store-toggle .upc-store-name, body #header-container .upc-store-toggle .upc-store-toggle-text, body #header-container .blockcart .shopping-cart-title, body #header-container .blockcart .shopping-cart-block, body #header-container .blockcart .shopping-cart-block span { color: var(--bf-texte); } /* Titres des listes (custom.css : #category #main > h1.h1 { color } → même poids, on tranche) */ body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container #main > h1.h1, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container #main > h1, body:is(#index, #category, #manufacturer, #supplier, #search, #prices-drop, #new-products, #best-sales, #product, #module-absflashsale-flashsale, #module-absflashsale-flashsale16, #pagenotfound, #sitemap, #stores, #module-ultrapc_configurator-configurator) #page-container #main > .page-header h1 { color: var(--bf-texte) !important; } /* Sous-catégories (cartes blanches → pastilles sombres) */ #page-container #category .subcategories .subcategory-cover, #page-container .subcategories .subcategory-cover.card { background: var(--bf-surface); border-color: var(--bf-bordure2); } #page-container #category .subcategories .subcategory-cover:hover, #page-container .subcategories .subcategory-cover.card:hover { background: var(--bf-surface2); border-color: var(--bf-jaune); } #page-container #category .subcategories .subcategory-name, #page-container .subcategories .subcategory-name { color: var(--bf-texte); } #page-container .subcategories .subcategory-cover:hover .subcategory-name { color: var(--bf-jaune); } /* Description de catégorie : textes, dégradé du mode replié, « Lire la suite » */ #page-container #category .block-category .category-description span, #page-container #category .block-category .category-description p, #page-container #category .block-category .category-description li { color: var(--bf-texte2); } #page-container #category .block-category .category-description b, #page-container #category .block-category .category-description strong, #page-container #category .block-category .category-description h2, #page-container #category .block-category .category-description h3, #page-container #category .block-category .upc-desc-texte h2, #page-container #category .block-category .upc-desc-texte h3 { color: var(--bf-texte); } #page-container #category .block-category .category-description a { color: var(--bf-jaune); } #page-container #category .block-category .upc-desc-texte.upc-repliee::after, #page-container #category .block-category .category-description:not([data-upc-repli])::after { background: linear-gradient(rgba(11,11,14,0), var(--bf-fond)); } #page-container #category .block-category .upc-lire-suite { color: var(--bf-jaune); } /* Filtres : titres des facettes repliables, libellé du prix, pastilles, panneaux déroulants */ #page-container #search_filters .facet .upc-multi-btn, #page-container #search_filters .facet .upc-multi-btn .upc-ligne-titre, #page-container #search_filters .facet .upc-multi-btn i, #page-container #search_filters .facet p[id^="facet_label"], #page-container #search_filters .facet .facet-title, #page-container #search_filters .facet .facet-label a, #page-container #search_filters .facet .facet-label .magnitude { color: var(--bf-texte); } #page-container #search_filters .facet .facet-label .magnitude { color: var(--bf-texte3); } #page-container #search_filters .facet .upc-multi-btn { background: transparent; border-color: var(--bf-bordure); } #page-container #search_filters .facet .upc-multi-btn:hover { background: var(--bf-surface2); } #page-container #search_filters_wrapper #search_filters .facet.upc-facet-pastilles .facet-label, #page-container #search_filters_wrapper #search_filters .facet:not(.upc-facet-pastilles):has(input[name="filter Disponibilité"]) .facet-label { background: var(--bf-fond); border-color: var(--bf-bordure2); color: var(--bf-texte); } #page-container #search_filters_wrapper #search_filters .facet.upc-facet-pastilles .facet-label:hover { border-color: var(--bf-jaune); } #page-container #search_filters_wrapper #search_filters .facet.upc-facet-pastilles .facet-label.active, #page-container #search_filters_wrapper #search_filters .facet.upc-facet-pastilles .facet-label:has(input:checked) { background: var(--bf-jaune); border-color: var(--bf-jaune); color: var(--bf-encre); } #page-container #search_filters_wrapper #search_filters .facet.upc-facet-pastilles .facet-label.active a, #page-container #search_filters_wrapper #search_filters .facet.upc-facet-pastilles .facet-label:has(input:checked) a, #page-container #search_filters_wrapper #search_filters .facet.upc-facet-pastilles .facet-label:has(input:checked) .magnitude { color: var(--bf-encre); } #page-container #search_filters_wrapper #search_filters .facet.upc-multi .upc-multi-panel { background: var(--bf-surface); border-color: var(--bf-bordure2); } #page-container #search_filters_wrapper #search_filters .facet.upc-multi .upc-multi-panel .facet-label:hover { background: var(--bf-surface2); } #page-container #search_filters_wrapper #search_filters .facet.upc-multi .upc-multi-panel .facet-label.active { background: var(--bf-surface2); } #page-container #search_filters_wrapper #search_filters .facet.upc-multi .upc-multi-panel .facet-label a { color: var(--bf-texte); } #page-container #search_filters_wrapper #search_filters .facet.upc-multi .upc-multi-panel .facet-label.active a { color: var(--bf-jaune); } #page-container #search_filters_wrapper #search_filters .facet.upc-multi .upc-multi-panel .custom-checkbox { background: var(--bf-fond); border-color: var(--bf-bordure2); } #page-container #search_filters_wrapper #search_filters .facet.upc-multi .upc-multi-panel .facet-label.active .custom-checkbox { background: var(--bf-jaune); border-color: var(--bf-jaune); } #page-container #search_filters .ui-slider { background: var(--bf-bordure2); } #page-container #search_filters .ui-slider .ui-slider-range { background: var(--bf-jaune); } #page-container #search_filters .ui-slider .ui-slider-handle { background: var(--bf-jaune); border-color: var(--bf-jaune); } /* Barre de tri : icônes grille/liste */ #page-container #js-product-list-top .grid-or-list a, #page-container .products-selection .grid-or-list a { background: transparent; color: var(--bf-texte2); } #page-container #js-product-list-top .grid-or-list a.selected, #page-container #js-product-list-top .grid-or-list a:hover, #page-container .products-selection .grid-or-list a.selected { background: var(--bf-surface2); color: var(--bf-jaune); } /* Fiche produit : sections, titre, prix, encadrés */ #page-container #product .product-block-primary, #page-container #product .product-block-secondary { background: transparent; } #page-container #product .product-block-info h1.product-title, #page-container #product .product-block-primary .product-prices .product-price .price, #page-container #product .product-block-primary .product-prices .product-price .current-price, #page-container #product .product-block-primary .product-prices .product-reference span, #page-container #product .product-block-primary .product-description-short strong { color: var(--bf-texte); } #page-container #product .product-block-primary .product-prices .product-reference label, #page-container #product .product-block-primary .product-prices .tax-label { color: var(--bf-texte3); } #page-container #product .product-block-primary .product-description-short { background: var(--bf-surface); border-color: var(--bf-bordure); color: var(--bf-texte2); } #page-container #product .product-block-primary .product-variants .product-variants-item { border-bottom-color: var(--bf-bordure); } #page-container #product .product-block-primary .product-variants .product-condition .control-label { color: var(--bf-texte2); } #page-container #product .product-block-primary .product-variants .product-condition .control-item { background: var(--bf-surface2); color: var(--bf-texte); } #page-container #product .product-information .product-actions .product-add-to-cart, #page-container #product .product-actions form .product-add-to-cart { background: var(--bf-surface); border-color: var(--bf-bordure); } #page-container #product .product-add-to-cart .product-quantity .qty .form-control { background: var(--bf-fond); color: var(--bf-texte); border-color: var(--bf-bordure2); } #page-container #product .product-add-to-cart .bootstrap-touchspin .btn { background: var(--bf-surface2); color: var(--bf-texte); border-color: var(--bf-bordure2); } #page-container #product #product-availability, #page-container #product .product-add-to-cart #product-availability, #page-container #product .product-add-to-cart .upc-dispo { color: var(--bf-texte); } /* Accueil : marques (ultrapc_homebrands), bloc SEO, blog, matchs en direct */ #page-container .upc-hb .upc-hb-brand { background: var(--bf-surface); border-color: var(--bf-bordure); } #page-container .upc-hb .upc-hb-head, #page-container .upc-hb .upc-hb-head h2, #page-container .upc-hb .upc-hb-head h3, #page-container .upc-hb .upc-hb-head p, #page-container .upc-hb .upc-hb-name { color: var(--bf-texte); } #page-container .upc-hb .upc-hb-head .upc-hb-all { background: var(--bf-surface2); color: var(--bf-texte); } #page-container .upc-hb .upc-hb-head .upc-hb-all:hover { background: var(--bf-bordure2); color: #fff; } #page-container .upc-hb .upc-hb-logo { background: #fff; } #page-container .upc-hb .upc-hb-nav button, #page-container .upc-hb .upc-hb-arrow { background: var(--bf-surface2); color: var(--bf-texte); border-color: var(--bf-bordure2); } /* Bloc SEO de l'accueil (_partials/upc-home-seo.tpl, style en ligne dans la page → on redéfinit ses variables) */ #page-container .upc-home-seo { --upc-band: var(--bf-surface); --upc-white: var(--bf-fond); --upc-line: var(--bf-bordure); --upc-tint: var(--bf-surface2); --upc-ink: var(--bf-texte2); --upc-muted: var(--bf-texte3); --upc-navy: var(--bf-texte); --upc-blue: var(--bf-jaune); } #page-container .upc-home-seo a { border-bottom-color: rgba(250,207,25,.35); } #page-container .upc-home-seo .upc-trust { background: var(--bf-fond); } /* Blog (ultrapc_blogfeed) et matchs en direct */ #page-container .upc-bf .upc-live, #page-container .upc-bf .upc-live__list, #page-container .upc-bf .upc-live__match, #page-container .upc-bf .upc-live__match b { color: var(--bf-texte); } #page-container .upc-bf .upc-live__match em, #page-container .upc-bf .upc-live__all { color: var(--bf-jaune); } #page-container .upc-bf .upc-live { background: var(--bf-surface); border-color: var(--bf-bordure); } #page-container .upc-bf .upc-live__match { background: var(--bf-surface2); color: var(--bf-texte); } #page-container .upc-bf .upc-live__match:hover { background: var(--bf-bordure2); color: #fff; } #page-container .upc-bf .upc-live__match time { color: var(--bf-texte2); } #page-container .upc-bf .upc-live__vs { color: var(--bf-texte3); } #page-container .upc-bf .upc-bf-all, #page-container .upc-bf .owl-nav button { background: var(--bf-surface2) !important; color: var(--bf-texte) !important; border-color: var(--bf-bordure2) !important; } #page-container .upc-bf .upc-bf-all:hover, #page-container .upc-bf .owl-nav button:hover { background: var(--bf-bordure2) !important; color: #fff !important; } #page-container .upc-hb .upc-hb-brandname { color: var(--bf-texte); } #page-container .upc-hb .upc-hb-sub { color: var(--bf-texte2); } #page-container .upc-hb .upc-hb-btn:not(.upc-hb-btn--cart) { background: var(--bf-surface2); color: var(--bf-texte); } #page-container .upc-hb .upc-hb-btn:not(.upc-hb-btn--cart):hover { background: var(--bf-bordure2); color: #fff; } #page-container .upc-bf h2, #page-container .upc-bf .products-section-title { color: var(--bf-texte); } #page-container .upc-bf .upc-bf-card .upc-bf-title { color: #2b2f36; } /* Pied de page : réassurance (#theme-footer en préfixe dans custom.css) */ body #theme-footer .footer-bottomblock-container { background: var(--bf-fond); } body #theme-footer .footer-reinsurance-block { background: var(--bf-surface); border: 1px solid var(--bf-bordure); } body #theme-footer .footer-reinsurance-block:hover { background: var(--bf-surface2); } body #theme-footer .footer-reinsurance-block a, body #theme-footer .footer-reinsurance-block-title, body #theme-footer .footer-reinsurance-block-title span { color: var(--bf-texte); } body #theme-footer .footer-reinsurance-block-content { color: var(--bf-texte2); } body #theme-footer .footer-reinsurance .footer-reinsurance-block a:before { color: var(--bf-jaune); } /* 3e passe : flèches du carrousel blog (div.owl-prev/next), bouton « Toute la TV », titre SEO du pied de page */ #page-container .upc-bf .owl-nav > div, #page-container .upc-bf .owl-nav > button { background: var(--bf-surface2) !important; color: var(--bf-texte) !important; border-color: var(--bf-bordure2) !important; } #page-container .upc-bf .owl-nav > div:hover { background: var(--bf-bordure2) !important; color: #fff !important; } #page-container .upc-tv .upc-tv-all, #page-container .upc-tv h2, #page-container .upc-tv .upc-tv-title { color: var(--bf-texte); } #page-container .upc-tv .upc-tv-all { background: var(--bf-surface2); } #page-container .upc-tv .upc-tv-all:hover { background: var(--bf-bordure2); color: #fff; } body #footer-container .home-seo-text { background: var(--bf-fond2); } body #footer-container .home-seo-text h1 { color: var(--bf-texte); } body #footer-container .home-seo-text p { color: var(--bf-texte2); }