/* ========================================================================== Fond d'écran plein écran de la boutique Image : themes/hummingbird/assets/img/background.jpg ========================================================================== */ html { /* L'image est posée sur en fixed/cover : elle reste immobile au scroll et couvre tout le viewport, quelle que soit la hauteur de page. */ background-image: url("../img/background.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; background-color: #1a1614; /* couleur de repli avant chargement de l'image */ } /* Le body ne doit pas masquer le fond : on enlève sa couleur opaque. */ body { background-color: transparent !important; } /* Voile sombre optionnel pour garder la lisibilité par-dessus l'image. Ajuste la dernière valeur (0.35) entre 0 (aucun voile) et 1 (noir total). */ body::before { content: ""; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.35); z-index: -1; pointer-events: none; } /* -------------------------------------------------------------------------- Lisibilité des textes posés DIRECTEMENT sur l'image de fond. On éclaircit (blanc + ombre portée) uniquement les éléments hors cartes : titres de section, en-têtes de page, fil d'Ariane. Le texte des cartes produit (fond blanc) n'est pas touché. -------------------------------------------------------------------------- */ .section-title, #js-product-list-header, #content-wrapper > .page-header h1, .page-home .h1, .page-home .h2, .page-home .h3 { color: #ffffff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); } /* Fil d'Ariane : la bande grise du wrapper devient transparente (image visible) */ .breadcrumb__wrapper { background: transparent !important; } .breadcrumb, .breadcrumb a, .breadcrumb-link, .breadcrumb-item, .breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before, .breadcrumb li::after { color: #f0f0f0 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } /* Bloc texte personnalisé de la home (module ps_customtext) posé sur le fond */ #custom-text, #custom-text .custom-text__content, #custom-text h1, #custom-text h2, #custom-text h3, #custom-text h4, #custom-text h5, #custom-text h6, #custom-text p, #custom-text li, #custom-text span, #custom-text a, #custom-text strong, #custom-text b, #custom-text em, #custom-text .dark { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } /* Colonne de gauche : menu catégories, "Marques", "Fournisseurs", liens */ #left-column, #left-column a, #left-column h1, #left-column h2, #left-column h3, #left-column h4, #left-column h5, #left-column h6, #left-column .h1, #left-column .h2, #left-column .h3, #left-column .h4, #left-column li, #left-column span, #left-column p, #left-column label { color: #f0f0f0 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } /* Description / sous-titre de catégorie (ex. "Clean - Élégant - Timeless") */ #category-description, #category-description p, .category-description, .category-description p { color: #f0f0f0 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } /* En-tête de liste produits : compteur, "Trier par", bouton de tri */ .total-products, .total-products p, .sort-by, .products-sort-order > .btn, .products-sort-order .select-title { color: #f0f0f0 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } /* Le menu déroulant de tri s'ouvre sur fond blanc → garder son texte foncé */ .products-sort-order .dropdown-menu, .products-sort-order .dropdown-menu a, .products-sort-order .dropdown-item { color: #232323 !important; text-shadow: none !important; } /* -------------------------------------------------------------------------- Header translucide (glassy sombre) laissant voir l'image de fond. -------------------------------------------------------------------------- */ #header, #header .header-top, #header .header-bottom, #header .header__banner, #header.js-sticky-header { background-color: transparent !important; } #header { background-color: rgba(20, 16, 14, 0.55) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Texte, liens et icônes du header en clair */ #header, #header a, #header span, #header li, #header .material-icons, #header .main-menu__tree__link, #header .header-top a { color: #f2f2f2 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.55); } #header a:hover, #header a:focus, #header .main-menu__tree__link:hover { color: #ffffff !important; } /* Champ de recherche : garder un fond clair lisible */ #header .js-search-input { color: #232323 !important; text-shadow: none !important; } /* Panneaux qui s'ouvrent sur fond blanc → conserver un texte foncé */ #header .main-menu__additionnals, #header .main-menu__additionnals a, #header .main-menu__additionnals span, #header .search-widgets__dropdown, #header .search-widgets__dropdown a, #header .dropdown-menu, #header .dropdown-menu a, #header .dropdown-menu span, #header .blockcart .dropdown-menu a { color: #232323 !important; text-shadow: none !important; } /* -------------------------------------------------------------------------- Espace client + commandes : panneaux BLANCS (lisibles quelle que soit la photo de fond). Le contenu conserve le texte foncé par défaut du thème. -------------------------------------------------------------------------- */ .page-customer-account #content, .page-my-account #content, .page-order-detail #content, .page-history #content, .page-identity #content, .page-addresses #content, .page-address #content, .page-order-slip #content, .page-order-follow #content, .page-discount #content, .page-guest-tracking #content, .page-registration #content, .page-authentication #content { background: #ffffff !important; border-radius: 14px !important; padding: 1.5rem 1.75rem !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25) !important; margin-bottom: 1.5rem; } /* Menu latéral "Mon compte" sur fond blanc + texte foncé (annule l'éclaircis- sement appliqué à #left-column sur les pages catégorie). */ .page-customer-account #left-column, .page-my-account #left-column, .page-order-detail #left-column, .page-history #left-column, .page-identity #left-column, .page-addresses #left-column, .page-address #left-column, .page-order-slip #left-column, .page-order-follow #left-column, .page-discount #left-column { background: #ffffff !important; border-radius: 14px !important; padding: 1rem 1.25rem !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25) !important; } .page-customer-account #left-column, .page-customer-account #left-column a, .page-customer-account #left-column span, .page-customer-account #left-column h1, .page-customer-account #left-column h2, .page-customer-account #left-column h3, .page-customer-account #left-column li, .page-customer-account #left-column .account-link, .page-my-account #left-column, .page-my-account #left-column a, .page-my-account #left-column span, .page-my-account #left-column li, .page-order-detail #left-column, .page-order-detail #left-column a, .page-order-detail #left-column span, .page-order-detail #left-column li, .page-history #left-column, .page-history #left-column a, .page-history #left-column span, .page-history #left-column li { color: #232323 !important; text-shadow: none !important; } /* -------------------------------------------------------------------------- Page panier : liste produits sur panneau BLANC, titre "Panier" sur le fond. Le récap de droite (.cart-summary) est déjà un encart blanc. -------------------------------------------------------------------------- */ .page-cart .cart-grid__body > h1 { color: #ffffff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } .page-cart .cart-container { background: #ffffff !important; border-radius: 14px !important; padding: 1rem 1.25rem !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25) !important; } /* -------------------------------------------------------------------------- Tunnel de commande (checkout) : textes posés sur le fond → clairs, tout en préservant le texte foncé des encarts blancs (cartes adresse, options de livraison, récap, champs de saisie). Liens (Modifier/Supprimer/CGV) intacts. -------------------------------------------------------------------------- */ .step__title-left, .step__content, .step__content > p, .step__content > span, .step__content label, .step__content h1, .step__content h2, .step__content h3, .step__content h4, .step__content h5, .step__content h6, .step__content .form-check-label, .step__content .js-terms, #conditions-to-approve, #conditions-to-approve label { color: #f1f1f1 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } /* Encarts blancs DANS le contenu → texte foncé rétabli (sauf les liens ) */ .step__content .card *:not(a), .step__content .delivery-options__list *:not(a), .step__content .bg-light *:not(a), .step__content .bg-white *:not(a), .step__content table *:not(a), .step__content .card, .step__content .delivery-options__list, .step__content .bg-light, .step__content .bg-white { color: #232323 !important; text-shadow: none !important; } /* Champs de saisie : texte foncé sur leur fond clair */ .step__content input, .step__content textarea, .step__content select, .step__content .form-control { color: #232323 !important; text-shadow: none !important; } /* -------------------------------------------------------------------------- Page produit -------------------------------------------------------------------------- */ /* Bloc Réassurance (Garanties / Livraison / Retours) : toujours posé sur le fond sombre (fiche produit + panier + tunnel de commande). Le module force la couleur en inline (style="color:#000000") → !important. */ .blockreassurance_product .block-title, .blockreassurance_product p, .blockreassurance_product span, .blockreassurance_product a, .blockreassurance .block-title, .blockreassurance p, .blockreassurance span, .blockreassurance a { color: #f0f0f0 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } .blockreassurance_product svg, .blockreassurance_product svg path, .blockreassurance svg, .blockreassurance svg path { fill: #f0f0f0 !important; } .blockreassurance_product img.svg, .blockreassurance img.svg { filter: brightness(0) invert(1); } /* En-tête produit : panneau translucide sombre (glassy) derrière titre + prix + description courte → lisible sur n'importe quelle photo (claire ou foncée). Les 3 éléments sont collés (marges à 0) pour former un seul bloc continu. */ #product .product__name, #product .prices__wrapper, #product .product__description-short { background-color: rgba(20, 16, 14, 0.55) !important; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); padding-left: 1.25rem !important; padding-right: 1.25rem !important; } #product .product__name { padding-top: 1rem !important; padding-bottom: 0.5rem !important; border-radius: 14px 14px 0 0; margin-bottom: 0 !important; } #product .prices__wrapper { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; margin-bottom: 0 !important; } #product .product__description-short { padding-top: 0.5rem !important; padding-bottom: 1rem !important; border-radius: 0 0 14px 14px; margin-bottom: 1.75rem !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } /* Texte clair sur le panneau (prix scopé pour ne pas toucher la boîte Options) */ #product .product__name, #product .product__description-short, #product .product__description-short *, #product .prices__wrapper, #product .prices__wrapper .product__current-price, #product .prices__wrapper .price-sum, #product .prices__wrapper .total-price { color: #ffffff !important; } /* Carte de personnalisation : panneau blanc flottant (zone fonctionnelle). */ #product .product-page-zones > .card { background: #ffffff !important; border: none !important; border-radius: 14px !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important; overflow: hidden; margin-bottom: 1.75rem !important; } /* Description longue + Détails (accordéon) : même panneau glassy sombre que l'en-tête, pour harmoniser. Texte clair, chevrons et séparateurs adaptés. */ #product .product__infos.accordion { background-color: rgba(20, 16, 14, 0.55) !important; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border: none !important; border-radius: 14px !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important; overflow: hidden; margin-bottom: 1.75rem !important; } #product .product__infos .accordion-item, #product .product__infos .accordion-header, #product .product__infos .accordion-button, #product .product__infos .accordion-collapse, #product .product__infos .accordion-body { background-color: transparent !important; } #product .product__infos .accordion-item { border-color: rgba(255, 255, 255, 0.12) !important; } #product .product__infos .accordion-body, #product .product__infos .accordion-body *, #product .product__infos .accordion-button { color: #f1f1f1 !important; } #product .product__infos .accordion-button { color: #ffffff !important; box-shadow: none !important; } /* Chevron du bouton accordéon : SVG sombre par défaut → on l'éclaircit */ #product .product__infos .accordion-button::after { filter: brightness(0) invert(1); } /* Séparateurs des lignes de détails */ #product .product__infos .product__details .detail { border-color: rgba(255, 255, 255, 0.12) !important; } /* Marges internes (le mode accordion-flush les avait supprimées) */ #product .product__infos .accordion-button, #product .product__infos .accordion-body { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } /* Miniatures produit : le bandeau "Aperçu rapide" (fond blanc, caché derrière en z-index:-1) débordait des côtés de la carte → visible sur le fond sombre. On clippe la carte ; le survol reste normal (le bandeau s'affiche dedans). */ .product-miniature .card { overflow: hidden; } /* Bouton "Tous les produits" : fond plein pour ressortir sur l'image */ .all-product-link.btn-outline-primary, .all-product-link { background-color: var(--bs-primary, #2f6fed) !important; border-color: var(--bs-primary, #2f6fed) !important; color: #ffffff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } .all-product-link.btn-outline-primary:hover, .all-product-link.btn-outline-primary:focus, .all-product-link:hover, .all-product-link:focus { background-color: #1c54c4 !important; border-color: #1c54c4 !important; color: #ffffff !important; }