/** * Thème AdM — personnalisation des couleurs * * Surcharge les variables Bootstrap 5.3 (--bs-*) générées par Hummingbird. * Chargé via templates/_partials/stylesheets.tpl (PS9 n'auto-charge pas custom.css). * * Couleur de marque : #bc5228 (terracotta AdM) */ :root { /* Couleur principale (boutons, liens, éléments actifs, prix) */ --bs-primary: #bc5228; --bs-primary-rgb: 188, 82, 40; /* Emphase / texte primary (titres de section, liens au survol) */ --bs-primary-text-emphasis: #9e4421; /* Déclinaisons utilisées par les composants Bootstrap */ --bs-link-color: #bc5228; --bs-link-color-rgb: 188, 82, 40; --bs-link-hover-color: #9e4421; --bs-link-hover-color-rgb: 158, 68, 33; } /* Boutons primaires : couleur de fond + survol assombri */ .btn-primary { --bs-btn-bg: #bc5228; --bs-btn-border-color: #bc5228; --bs-btn-hover-bg: #9e4421; --bs-btn-hover-border-color: #92401f; --bs-btn-active-bg: #92401f; --bs-btn-active-border-color: #863b1d; --bs-btn-disabled-bg: #bc5228; --bs-btn-disabled-border-color: #bc5228; } /* Boutons "outline" primary (panier, filtres) */ .btn-outline-primary { --bs-btn-color: #bc5228; --bs-btn-border-color: #bc5228; --bs-btn-hover-bg: #bc5228; --bs-btn-hover-border-color: #bc5228; --bs-btn-active-bg: #bc5228; --bs-btn-active-border-color: #bc5228; } /* Page d'accueil : respiration entre le header et le premier bloc. Scopé à .page-index → n'affecte PAS les pages catégorie/produit/cms (qui portent .page-category, .page-product, etc. sur le ). */ .page-index #content.page-content--home { padding-top: 4rem; } /* ===== Couleurs du header ===== */ /* Barre du haut (langue, compte, panier) : fond brun foncé, texte blanc. On retire la bordure grise par défaut pour souder les deux zones. */ .header-top { background-color: #3e1b0b; color: #fff; border-bottom: none; } /* Zone basse (logo, recherche, menu) : fond couleur de marque, texte blanc */ .header-bottom { background-color: #bc5228; color: #fff; } /* Texte / liens / icônes directement dans les barres → blanc. (états normal + survol + le titre de compte, qui est un ) */ .header-top, .header-top a, .header-top a:hover, .header-top a:focus, .header-top .material-icons, .header-top .header-block__title, .header-bottom .ps-mainmenu__desktop a, .header-bottom .ps-mainmenu__desktop a:hover, .header-bottom .ps-mainmenu__desktop a:focus, .header-bottom .ps-mainmenu__desktop .material-icons, .header-bottom > .header-bottom__container a, .header-bottom > .header-bottom__container .material-icons { color: #fff; } /* Badge panier (desktop dans .header-top, mobile dans .header-bottom) : rouge bordeaux pour le faire ressortir sur le brun / l'orange. */ .header-top .header-block__badge, .header-bottom .header-block__badge { background-color: #8b1a2b; color: #fff; } /* Sous-menus déroulants : ils s'affichent sur un panneau blanc. On NE force PAS le blanc dedans → on rétablit une couleur lisible (sinon : blanc sur blanc). */ .header-bottom .ps-mainmenu__desktop .js-sub-menu a, .header-bottom .ps-mainmenu__desktop .submenu a { color: #212529; } .header-bottom .ps-mainmenu__desktop .js-sub-menu a:hover, .header-bottom .ps-mainmenu__desktop .submenu a:hover { color: #bc5228; } /* Dropdown « Mon compte » : panneau blanc → liens lisibles (même problème de blanc sur blanc que les sous-menus). Le dropdown est en .header-top sur desktop, mais en .header-bottom sur mobile → on cible les deux. */ .header-top .dropdown-menu a, .header-bottom .dropdown-menu a { color: #212529; } .header-top .dropdown-menu a:hover, .header-top .dropdown-menu a:focus, .header-bottom .dropdown-menu a:hover, .header-bottom .dropdown-menu a:focus { color: #bc5228; } /* Icônes du dropdown compte (Adresses, Commandes, …) : forcées en blanc par la règle .material-icons → on les remet en foncé (desktop + mobile). Sélecteur avec .material-icons pour battre la spécificité de la règle blanche. */ .header-top .dropdown-menu a .material-icons, .header-bottom .dropdown-menu a .material-icons { color: #212529; } .header-top .dropdown-menu a:hover .material-icons, .header-top .dropdown-menu a:focus .material-icons, .header-bottom .dropdown-menu a:hover .material-icons, .header-bottom .dropdown-menu a:focus .material-icons { color: #bc5228; } /* Loupe de la barre de recherche : icône posée dans le champ blanc. Forcée en couleur de marque (était blanche → invisible). Sélecteur volontairement spécifique (.material-icons inclus) pour l'emporter sur la règle générale .material-icons blanche du header. */ .header-bottom .ps-searchbar .ps-searchbar__magnifier.material-icons { color: #bc5228; } /* Menu mobile (panneau off-canvas) : rendu DANS .header-bottom donc ses liens héritent du blanc de la barre → blanc sur blanc sur le panneau blanc. On rétablit du texte foncé pour les liens ET les icônes. */ .header-bottom .ps-mainmenu--mobile a, .header-bottom .ps-mainmenu__mobile a { color: #212529; } .header-bottom .ps-mainmenu--mobile a:hover, .header-bottom .ps-mainmenu--mobile a:focus, .header-bottom .ps-mainmenu__mobile a:hover, .header-bottom .ps-mainmenu__mobile a:focus { color: #bc5228; } .header-bottom .ps-mainmenu--mobile a .material-icons, .header-bottom .ps-mainmenu__mobile a .material-icons { color: #212529; } /* Recherche mobile (off-canvas, fond blanc) : loupe en couleur de marque. */ .header-bottom .ps-searchbar__offcanvas .ps-searchbar__magnifier.material-icons { color: #bc5228; } /** * Bannière cookies (informative — cookies strictement nécessaires uniquement). * Injectée par assets/js/custom.js, fixée en bas de l'écran. */ .adm-cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1080; max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; background: #ffffff; color: #333333; border: 1px solid rgba(188, 82, 40, 0.35); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); font-size: 0.9rem; line-height: 1.4; } .adm-cookie-banner__text { margin: 0; flex: 1 1 auto; } .adm-cookie-banner__btn { flex: 0 0 auto; white-space: nowrap; } @media (max-width: 575.98px) { .adm-cookie-banner { flex-direction: column; align-items: stretch; text-align: center; } .adm-cookie-banner__btn { width: 100%; } }