/* ========================================================================== IBL Color Config - Surcharge globale du thème Retinte les éléments natifs de PrestaShop Classic avec les couleurs définies dans Modules > IBL - Couleur du thème. Variables disponibles (injectées par ce module en ) : --ibl-color-primary --ibl-color-secondary ========================================================================== */ /* --- Couleur de fond générale du site (zones générales du contenu) --- */ html, body, #wrapper, #content-wrapper, .page-content, .container, .container-fluid, .card, .js-product-miniature, .block-category { background-color: var(--ibl-color-background, #ffffff) !important; } /* --- Zones du header et footer : couleurs indépendantes --- */ .header-top { background-color: var(--ibl-color-header-top, #ffffff) !important; color: var(--ibl-color-header-top-text, #222222); border: none !important; box-shadow: none !important; } .header-top a, .header-top .search-widgets input { color: var(--ibl-color-header-top-text, #222222); } .header-nav { background-color: var(--ibl-color-header-nav, #f5f5f5) !important; color: var(--ibl-color-header-nav-text, #222222); border: none !important; box-shadow: none !important; } .header-nav a { color: var(--ibl-color-header-nav-text, #222222) !important; } /* Le conteneur Bootstrap interne (.container) ne doit pas avoir sa propre couleur ici : sinon la règle générale "Fond" (plus haut) le repeint différemment de la zone qui l'entoure et crée une fine bande visible à la jonction - même bug que celui déjà corrigé sur le méga-menu. */ .header-top .container, .header-nav .container { background: transparent !important; } /* Filet de sécurité : tout élément non identifié dans le footer devient transparent par défaut (laisse voir la couleur du footer en dessous), plutôt que de rester bloqué sur un blanc par défaut du thème. Les règles plus spécifiques ci-dessous reprennent le dessus normalement. */ #footer *, .footer-container * { background-color: transparent !important; } #footer, .footer-container { background-color: var(--ibl-color-footer, #ffffff) !important; color: var(--ibl-color-footer-text, #222222); } #footer a, .footer-container a { color: var(--ibl-color-footer-text, #222222) !important; } /* --- Bloc newsletter : couleur indépendante --- */ #block-newsletter, #block_newsletter, .block_newsletter, #footer .block_newsletter, .footer-container .block_newsletter { background-color: var(--ibl-color-footer-newsletter-bg, #ffffff) !important; color: var(--ibl-color-footer-newsletter-text, #222222) !important; } #block-newsletter input[type="email"], #block_newsletter input[type="email"], .block_newsletter input[type="email"] { background-color: var(--ibl-color-footer-newsletter-bg, #ffffff); color: var(--ibl-color-footer-newsletter-text, #222222); border: 1px solid rgba(128, 128, 128, 0.4); } /* --- Bloc liens (Produits / Notre société / Votre compte / Informations) : couleur indépendante --- */ .footer-container .links, .footer-container .col-md-3, #footer .links { background-color: var(--ibl-color-footer-links-bg, #ffffff) !important; color: var(--ibl-color-footer-links-text, #222222) !important; } .footer-container .links a, .footer-container .col-md-3 a, #footer .links a { color: var(--ibl-color-footer-links-text, #222222) !important; } /* Filet de sécurité : tout texte du footer non explicitement catégorisé suit la couleur "Bloc liens" par défaut (ex: le titre du bloc adresse "INFORMATIONS" qui n'utilise pas forcément une balise de titre standard) */ #footer *, .footer-container * { color: var(--ibl-color-footer-links-text, #222222); } /* Titres des colonnes ("PRODUITS", "NOTRE SOCIÉTÉ"...) qui peuvent avoir leur propre couleur codée en dur, différente des liens de la colonne */ .footer-container h1, .footer-container h2, .footer-container h3, .footer-container h4, .footer-container h5, .footer-container h6, .footer-container .h3, .footer-container .title, #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer .h3, #footer .title { color: var(--ibl-color-footer-links-text, #222222) !important; } /* Le titre du bloc newsletter ("Recevez nos offres spéciales") suit sa propre couleur dédiée, pas celle du bloc liens - priorité renforcée pour gagner sur la règle générale des titres ci-dessus. */ .block_newsletter h1, .block_newsletter h2, .block_newsletter h3, .block_newsletter h4, .block_newsletter .title, .block_newsletter p:first-child, .footer-container .block_newsletter h1, .footer-container .block_newsletter h2, .footer-container .block_newsletter h3, .footer-container .block_newsletter h4, .footer-container .block_newsletter .title, #block-newsletter-label, #block_newsletter h1, #block_newsletter h2, #block_newsletter h3, #block_newsletter h4, #block_newsletter .title { color: var(--ibl-color-footer-newsletter-text, #222222) !important; } /* --- Liens génériques --- */ a, .text-muted:hover { color: var(--ibl-color-primary); } a:hover, a:focus { color: var(--ibl-color-secondary); } /* --- Boutons principaux --- */ .btn-primary, #cart .cart-summary-line .btn-primary, button.btn-primary, input.btn-primary, .card-block .btn-primary { background-color: var(--ibl-color-primary) !important; border-color: var(--ibl-color-primary) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--ibl-color-secondary) !important; border-color: var(--ibl-color-secondary) !important; } .btn-outline-primary, .btn-secondary { color: var(--ibl-color-primary) !important; border-color: var(--ibl-color-primary) !important; } .btn-outline-primary:hover, .btn-secondary:hover { background-color: var(--ibl-color-primary) !important; color: #fff !important; } /* --- Prix et promotions --- */ .product-price, .current-price, .current-price-value, .product-prices .price, .product-price-and-shipping .price { color: var(--ibl-color-primary) !important; } .product-flags .discount-percentage, .product-flags .discount-product, .product-flags .on-sale, .badge.discount, span.discount { background-color: var(--ibl-color-accent, var(--ibl-color-primary)) !important; } /* --- Menu principal (survol / actif) --- */ #header .top-menu .sub-menu li a:hover, .header-top .position-static > .js-top-menu > li:hover > a, .header-nav a:hover, .js-top-menu > li.active > a { color: var(--ibl-color-primary) !important; } /* --- Panier --- */ .blockcart .cart-products-count { background-color: var(--ibl-color-primary) !important; } .cart-summary-line.text-sm-end .label, #cart .product-line-grid-right .product-line-info a { color: var(--ibl-color-primary); } /* --- Étapes du panier / checkout --- */ .checkout-step .step-number, .-current .step-number, .-complete .step-number { background-color: var(--ibl-color-primary) !important; } .checkout-step.-current .step-edit, .checkout-step .content .done { color: var(--ibl-color-primary) !important; } /* --- Formulaires (focus, radios, checkboxes) --- */ .form-control:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus { border-color: var(--ibl-color-primary) !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) !important; } .custom-radio input[type="radio"]:checked ~ span, .custom-checkbox input[type="checkbox"]:checked ~ span { background-color: var(--ibl-color-primary) !important; border-color: var(--ibl-color-primary) !important; } .radio-block .custom-radio input:checked ~ span, .delivery-option input:checked ~ .custom-radio > span { border-color: var(--ibl-color-primary) !important; } .radio-block .custom-radio input:checked ~ span::after { background-color: var(--ibl-color-primary) !important; } /* --- Avis produits (étoiles) --- */ .star_content .comment_note .icon-star, .rate .icon-star, .review-star.active { color: var(--ibl-color-primary) !important; } /* --- Pagination --- */ .page-item.active .page-link, .pagination .page-item.active .page-link { background-color: var(--ibl-color-primary) !important; border-color: var(--ibl-color-primary) !important; } .page-link { color: var(--ibl-color-primary) !important; } /* --- Fil d'ariane --- */ .breadcrumb a:hover { color: var(--ibl-color-primary) !important; } /* --- Facettes / filtres catalogue --- */ .faceted-slider .ui-slider-range, .faceted-slider .ui-slider-handle { background-color: var(--ibl-color-primary) !important; } #search_filters .custom-checkbox input[type="checkbox"]:checked ~ span { background-color: var(--ibl-color-primary) !important; } /* --- Newsletter / formulaires d'inscription --- */ #block-newsletter button, #block_newsletter button, .block_newsletter form button { background-color: var(--ibl-color-primary) !important; border-color: var(--ibl-color-primary) !important; } /* --- Compte client --- */ .account-list a:hover, #customer-form .required-message, .link-item:hover { color: var(--ibl-color-primary) !important; } /* --- Quantité produit (boutons +/-) --- */ .bootstrap-touchspin .btn, .js-touchspin .input-group-btn button { color: var(--ibl-color-primary) !important; } /* --- Vignette "Aperçu rapide" / Wishlist / Comparateur au survol --- */ .product-miniature .highlighted-informations a:hover, .wishlist-button-add:hover, .compare:hover { color: var(--ibl-color-primary) !important; } /* --- Footer : liens --- */ #footer a:hover, .footer-container a:hover { color: var(--ibl-color-primary) !important; } /* --- Bloc panier transplanté dans la zone logo (displayTop) : agrandi, recherche centrée, panier poussé à l'extrême droite --- La zone .header-top-right n'est pas flex par défaut dans Classic, on le force nous-même pour pouvoir positionner les 2 blocs. */ .header-top-right { display: flex !important; align-items: flex-start; flex-wrap: wrap; align-self: stretch !important; position: relative !important; padding-bottom: 48px; /* réserve la place pour l'encart d'annonce collé en bas */ } .header-top-right #search_widget { margin: 0 auto !important; } .header-top-right .blockcart.cart-preview { margin: 0 !important; align-self: flex-start !important; order: 99; position: relative; /* garantit le bon positionnement du panneau déroulant */ } /* --- Bouton panier : entièrement stylé par nous (icône incluse via masque CSS), le template par défaut du module n'ayant ni icône ni mise en forme --- */ .header-top-right .blockcart.cart-preview > .header > a { display: flex !important; align-items: center; gap: 10px; font-size: 18px !important; font-weight: 600; padding: 14px 26px !important; margin: 0 !important; line-height: 1; color: #222 !important; text-decoration: none !important; background: #fff; border-radius: 6px; } /* Icône panier (masque CSS coloré avec la couleur principale du site) */ .header-top-right .blockcart.cart-preview > .header > a::before { content: ''; display: inline-block; width: 26px; height: 26px; flex-shrink: 0; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; background-color: var(--ibl-color-primary, #2e7d32); } /* L'icône ci-dessus (::before) s'ajoutait par-dessus l'icône native du thème (material-icons) sans jamais la masquer, d'où les "deux paniers" visibles côte à côte dans le même bouton. On masque l'icône native, seule la nôtre reste affichée. */ .header-top-right .blockcart.cart-preview > .header > a .material-icons.shopping-cart { display: none; } /* Le panneau est masqué par défaut ; notre script JS (front-cart-preview.js) ajoute la classe ci-dessous au survol, de façon fiable, indépendamment du comportement natif du thème qui peut ne pas se déclencher quand le bloc panier est déplacé vers un autre emplacement. */ .header-top-right .blockcart.cart-preview .body { display: none !important; } .header-top-right .blockcart.cart-preview:hover .body, .header-top-right .blockcart.cart-preview.active:hover .body, .header-top-right .blockcart.cart-preview.ibl-cart-hover-open .body { display: block !important; } /* Cadre + mise en forme complète du contenu du panneau (le thème ne fournit aucun style pour ce composant avec le template par défaut du module) */ .header-top-right .blockcart.cart-preview.ibl-cart-hover-open .body, .header-top-right .blockcart.cart-preview:hover .body { position: absolute; top: 100%; right: 0; left: auto; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); width: 340px; max-width: 90vw; z-index: 200; padding: 18px; margin-top: 8px; font-size: 14px; color: #333; } .header-top-right .blockcart.cart-preview .body ul { list-style: none; margin: 0 0 12px; padding: 0; } .header-top-right .blockcart.cart-preview .body li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; } .header-top-right .blockcart.cart-preview .body li img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .header-top-right .blockcart.cart-preview .body .cart-subtotals, .header-top-right .blockcart.cart-preview .body .cart-total { display: flex; justify-content: space-between; padding: 6px 0; } .header-top-right .blockcart.cart-preview .body .cart-total { font-weight: 700; font-size: 16px; border-top: 1px solid #eee; margin-top: 6px; padding-top: 10px; color: var(--ibl-color-primary, #2e7d32); } .header-top-right .blockcart.cart-preview .cart-products-count { font-size: 15px !important; padding: 4px 10px !important; min-width: 24px; background: var(--ibl-color-primary, #2e7d32); color: #fff; border-radius: 12px; text-align: center; } .header-top-right .blockcart.cart-preview .body .ibl-cart-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .header-top-right .blockcart.cart-preview .body .ibl-cart-item-info a { color: #222; text-decoration: none; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-top-right .blockcart.cart-preview .body .ibl-cart-item-info span { color: #777; font-size: 13px; } .header-top-right .blockcart.cart-preview .body .cart-total .label { color: #333; } .header-top-right .blockcart.cart-preview .body .ibl-cart-empty { color: #777; text-align: center; padding: 16px 0; margin: 0; } .header-top-right .blockcart.cart-preview .body .ibl-cart-actions { display: flex; gap: 8px; margin-top: 14px; } .header-top-right .blockcart.cart-preview .body .ibl-cart-btn { flex: 1; text-align: center; padding: 10px; border-radius: 6px; text-decoration: none !important; font-weight: 600; font-size: 13px; border: 1px solid #ddd; color: #333 !important; } .header-top-right .blockcart.cart-preview .body .ibl-cart-btn--primary { background: var(--ibl-color-primary, #2e7d32); border-color: var(--ibl-color-primary, #2e7d32); color: #fff !important; } /* --- Encart d'annonce (barre du haut, displayNav2) --- */ .ibl-announce-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; background: var(--ibl-color-accent, #e65100); color: #fff; font-size: 13px; font-weight: 600; border-radius: 4px; /* Positionnement absolu collé au bas du conteneur (aligné avec le bas du logo) - plus fiable que margin-top:auto sur un flex qui wrap sur plusieurs lignes. */ position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; } .ibl-announce-bar__countdown { background: rgba(255, 255, 255, 0.2); padding: 3px 10px; border-radius: 12px; font-variant-numeric: tabular-nums; } .ibl-announce-bar__countdown:empty { display: none; } /* --- Logo desktop : entièrement revenu à la taille et à la position natives du thème (aucune surcharge). */ /* --- Mobile : empile tout le contenu de la barre du haut dans le bon ordre (menu/compte, logo, recherche/panier, bannière d'annonce), centré, au lieu du chevauchement dû au positionnement d'origine (bannière en position absolute, recherche/panier sur la même ligne que le bloc menu/logo). Uniquement sur mobile : le desktop garde sa mise en page native, inchangée. */ @media (max-width: 767px) { #header .header-top .row { display: flex; flex-direction: column; align-items: center; position: relative; } #header .header-top .row > * { width: 100% !important; max-width: 100% !important; flex: none !important; position: static !important; } #header .header-top .hidden-md-up.mobile { order: 1; } #header .header-top .header-top-right { order: 2; display: flex !important; flex-direction: column; align-items: center; margin-top: 64px !important; position: static !important; } #header .header-top .header-top-right #search_widget { display: block; width: 90% !important; max-width: 90% !important; margin: 0 0 8px !important; } #header .header-top .header-top-right .blockcart { display: flex; justify-content: center; width: auto !important; } #header .header-top #_mobile_logo { position: relative !important; z-index: 5; margin: 0 0 6px !important; } #header #_mobile_logo .logo { max-height: 4.5rem !important; } #header .header-top .ibl-announce-bar { order: 3; position: static !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; margin-top: 8px; } } /* --- Logo mobile (menu hamburger) --- Par défaut, le logo est mélangé sur la même ligne que le menu hamburger, le panier et le compte. On le fait passer sur sa propre ligne juste en dessous, centré, en forçant un retour à la ligne flexbox (flex-basis:100%) plutôt qu'en déplaçant le HTML. */ @media (max-width: 767px) { #header .header-nav .hidden-md-up.mobile { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; } #header #menu-icon { order: 1; position: absolute !important; left: 0 !important; top: 50%; transform: translateY(-50%); margin: 0 !important; padding: 0 !important; } #header .header-nav > .container { padding-left: 0 !important; padding-right: 0 !important; } #header .header-nav > .container > .row { margin-left: 0 !important; margin-right: 0 !important; } #header #_mobile_cart { order: 2; /* Corrige le flottement en haut de page : on force une position normale (dans le flux), quelle que soit la règle theme.css qui causait le décalage. */ position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; } #header #_mobile_cart .blockcart, #header #_mobile_cart .cart-preview { position: static !important; } #header #_mobile_user_info { order: 3; position: absolute !important; right: 0 !important; top: 50%; transform: translateY(-50%); margin: 0 !important; padding: 0 !important; } #header #_mobile_logo { order: 4; flex: 0 0 100%; max-width: 100%; width: 100%; text-align: center; margin-top: 2px; } #header #_mobile_logo h1, #header #_mobile_logo a { display: block; text-align: center; width: 100%; } #header #_mobile_logo .logo { display: inline-block !important; width: auto !important; height: auto !important; margin: 0 auto; } }