@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=IBM+Plex+Sans:wght@400;500;600&display=swap");
/* ==========================================================================
Juice 66 — thème steampunk moderne (enfant de classic)
========================================================================== */
:root {
--j-bg: #0E0E10; --j-bg2: #161418; --j-bg3: #1F1B20; --j-ink: #EDE6D8; --j-muted: #A89C8C; --j-dim: #7E7468;
--j-brass: #C08A3E; --j-gold: #E2B86A; --j-gold2: #E8C273; --j-copper: #B87333; --j-line: #3A3128; --j-line2: #5A4A34; --j-dark: #1A1408;
--j-disp: 'Big Shoulders Display', 'Oswald', 'Arial Narrow', Impact, sans-serif;
--j-sans: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
}
html, body { background: var(--j-bg); }
body { color: var(--j-ink); font-family: var(--j-sans); -webkit-font-smoothing: antialiased; }
body#index #wrapper, #wrapper { background: var(--j-bg); box-shadow: none; padding-top: 0; }
#wrapper .container { }
a { color: var(--j-brass); } a:hover { color: var(--j-gold); }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--j-disp); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--j-ink); }
p, li, td, th, label, .text-muted { color: var(--j-ink); }
.text-muted, small, .small { color: var(--j-muted) !important; }
hr { border-color: var(--j-line); }
/* ---- pièces steampunk ---- */
.j-plaque { border: 1px solid var(--j-line2); border-radius: 6px; position: relative;
background-image: radial-gradient(circle at 9px 9px, #B08A52 2px, #4A3A26 2.6px, transparent 3.4px), radial-gradient(circle at calc(100% - 9px) 9px, #B08A52 2px, #4A3A26 2.6px, transparent 3.4px), radial-gradient(circle at 9px calc(100% - 9px), #B08A52 2px, #4A3A26 2.6px, transparent 3.4px), radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #B08A52 2px, #4A3A26 2.6px, transparent 3.4px), repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px), linear-gradient(180deg, #1F1B20 0%, #141216 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.6), 0 14px 34px rgba(0,0,0,0.55); }
.j-disp { font-family: var(--j-disp); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.j-gold { color: var(--j-gold); } .j-brass { color: var(--j-brass); } .j-muted { color: var(--j-muted); }
.j-rule { height: 1px; background: linear-gradient(90deg, transparent, #8A6A3A 20%, var(--j-brass) 50%, #8A6A3A 80%, transparent); margin: 0 0 24px; }
.j-btn, .j-btn:visited { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--j-disp); font-weight: 800; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--j-dark) !important; border-radius: 6px; border: 1px solid #E6C57E; padding: 11px 18px; cursor: pointer; text-decoration: none;
background: linear-gradient(180deg, #E8C273 0%, #C08A3E 55%, #9C6B2C 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 26px rgba(224,150,60,0.30), 0 10px 22px rgba(0,0,0,0.5); transition: transform .2s ease, box-shadow .2s ease; }
.j-btn:hover { transform: translateY(-1px); color: var(--j-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 40px rgba(224,150,60,0.5), 0 14px 26px rgba(0,0,0,0.55); }
.j-btn-ghost, .j-btn-ghost:visited { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--j-disp); font-weight: 700; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--j-gold) !important; border: 1px solid #8A6A3A; border-radius: 6px; padding: 11px 18px; background: rgba(192,138,62,0.06); text-decoration: none; transition: background .2s ease; }
.j-btn-ghost:hover { background: rgba(192,138,62,0.16); }
.j-gear { transform-origin: 50% 50%; animation: j-spin 48s linear infinite; }
.j-gear.rev { animation-direction: reverse; animation-duration: 64s; }
.j-gear.slow { animation-duration: 90s; }
.j-card { transition: transform .25s ease, box-shadow .25s ease; }
.j-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 1px #8A6A3A, 0 18px 40px rgba(0,0,0,0.65), 0 0 30px rgba(224,150,60,0.18); }
.j-card:hover .j-gear { animation-duration: 5s; }
.j-imgbox { background: #fff; border: 1px solid var(--j-line); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.j-imgbox img { transition: transform .35s ease; width: 100%; height: 100%; object-fit: cover; } .j-card:hover .j-imgbox img { transform: scale(1.04); }
.j-glow { position: absolute; border-radius: 50%; filter: blur(60px); background: radial-gradient(circle, rgba(224,150,60,0.35), rgba(224,150,60,0) 70%); pointer-events: none; }
.j-chip { font-family: var(--j-disp); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--j-gold); border: 1px solid #6A5436; border-radius: 999px; padding: 7px 14px; background: rgba(192,138,62,0.05); display: inline-block; margin: 0 8px 8px 0; }
.j-chip:hover { background: rgba(192,138,62,0.18); color: var(--j-gold2); text-decoration: none; }
@keyframes j-spin { to { transform: rotate(360deg); } }
@keyframes j-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.j-reveal { animation: j-rise .8s ease both; } .j-reveal.d1 { animation-delay: .15s; } .j-reveal.d2 { animation-delay: .3s; } .j-reveal.d3 { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .j-gear, .j-reveal { animation: none !important; } }
/* ---- barre d'avertissement + header ---- */
.j-topbar { background: #0A0A0B; color: var(--j-muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 7px 16px; border-bottom: 1px solid #2A241F; }
.header-banner { display: none; }
#header { background: transparent; color: var(--j-ink); box-shadow: none; }
#header .header-nav { background: rgba(14,14,16,0.92); border-bottom: 1px solid var(--j-line); max-height: none; }
#header .header-nav .container { padding-top: 6px; padding-bottom: 6px; }
#header .header-nav a, #header .header-nav .blockcart .cart-products-count, #header .header-nav .user-info a { color: var(--j-muted); }
#header .header-nav a:hover { color: var(--j-gold); }
#header .header-nav .blockcart { background: transparent; }
#header .header-nav .blockcart.active a:hover, #header .header-nav .blockcart.active a { color: var(--j-gold); }
#header .header-nav .material-icons { color: var(--j-brass); }
#header .header-top { background: rgba(14,14,16,0.96); border-bottom: 1px solid var(--j-line); box-shadow: 0 8px 24px rgba(0,0,0,0.5); padding-bottom: 8px; position: sticky; top: 0; z-index: 1000; }
#header .header-top .container { position: relative; }
#header .header-top .search-widget form input[type=text] { background: #131215; border: 1px solid var(--j-line2); color: var(--j-ink); border-radius: 6px; }
#header .header-top .search-widget form input[type=text]::placeholder { color: var(--j-dim); }
#header .header-top .search-widget form button[type=submit] { color: var(--j-brass); }
#header #_desktop_logo img.logo, #header #_desktop_logo img { height: 64px !important; width: auto !important; max-width: none !important; max-height: none; object-fit: contain; display: block; margin: 10px 0; filter: none; }
#header #_mobile_logo img.logo, #header #_mobile_logo img, #header .header-nav .top-logo a img { height: 46px !important; width: auto !important; max-width: none !important; max-height: none; object-fit: contain; display: block; margin: 4px auto; filter: none; }
#_desktop_logo { display: flex; align-items: center; padding-left: 0; overflow: visible; }
#_desktop_logo a, #_desktop_logo h1 { display: block; line-height: 0; overflow: visible; }
#header, #header .header-top, #header .header-top .container, #header .header-top .row, #header .header-nav .mobile, #_mobile_logo, #_mobile_logo a { overflow: visible; }
#_desktop_logo h1 { margin: 0; }
.j-hgear { display: none; }
#header .header-top .top-menu a[data-depth="0"] { font-family: var(--j-disp); font-weight: 700; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--j-ink); padding: 6px 4px; border-bottom: 2px solid transparent; }
#header .header-top .top-menu a[data-depth="0"]:hover, #header .header-top .top-menu .current a[data-depth="0"] { color: var(--j-gold); border-bottom-color: var(--j-brass); }
#header .header-top .top-menu .sub-menu { background: var(--j-bg3); border: 1px solid var(--j-line2); box-shadow: 0 18px 40px rgba(0,0,0,0.6); }
#header .header-top .top-menu .sub-menu a, #header .header-top .top-menu .sub-menu li { color: var(--j-ink); }
#header .header-top .top-menu .sub-menu a:hover { color: var(--j-gold); }
#header .header-top .top-menu .sub-menu a[data-depth="1"] { font-family: var(--j-disp); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--j-gold); }
#header .header-top .top-menu .sub-menu .collapse { color: var(--j-muted); }
#header .header-top .top-menu[data-depth="0"] > li { margin-right: 18px; }
#header .header-top .top-menu .popover { max-width: 900px; }
#header .header-top .menu, #header .header-top .top-menu { text-align: left; }
#header .header-top .search-widget { float: right; margin-top: 8px; }
#mobile_top_menu_wrapper { background: var(--j-bg2); }
#mobile_top_menu_wrapper .top-menu a[data-depth="0"] { color: var(--j-ink); font-family: var(--j-disp); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
#mobile_top_menu_wrapper .top-menu li a, #mobile_top_menu_wrapper .top-menu .collapse-icons { color: var(--j-ink); }
#mobile_top_menu_wrapper .top-menu .sub-menu { background: var(--j-bg3); }
#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"] > li { border-color: var(--j-line); }
#header .header-nav #menu-icon .material-icons { color: var(--j-brass); }
#header .header-nav #_mobile_cart .material-icons, #header .header-nav #_mobile_user_info .material-icons { color: var(--j-brass); }
.header-nav .top-logo { margin: 0; }
@media (max-width: 767px) { #header .header-nav .mobile { display: flex; align-items: center; justify-content: space-between; } #header .header-nav .mobile #menu-icon { order: 0; } #header .header-nav .mobile #_mobile_logo { order: 1; flex: 1 1 auto; text-align: center; display: flex; justify-content: center; } #header .header-nav .mobile #_mobile_logo img { margin: 0 auto; } #header .header-nav .mobile #_mobile_user_info { order: 2; } #header .header-nav .mobile #_mobile_cart { order: 3; } #header .header-nav .mobile .clearfix { display: none; } }
#header .header-nav .user-info .hidden-sm-down { color: var(--j-muted); }
#contact-link, #contact-link a { color: var(--j-muted); }
.blockcart .shopping-cart { color: var(--j-brass); }
/* ---- accueil ---- */
#index #wrapper > .container, #index #wrapper .container { }
#index #wrapper { padding-top: 0; }
#index #content-wrapper { }
.j-hero { position: relative; overflow: hidden; padding: 56px 0 48px; }
.j-hero .j-bg-gear { position: absolute; opacity: 0.06; pointer-events: none; }
.j-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; position: relative; }
.j-kicker { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--j-brass); margin-bottom: 14px; }
.j-hero h1 { font-size: 64px; line-height: 0.98; margin: 0 0 18px; color: var(--j-ink); }
.j-hero h1 span { color: var(--j-gold); }
.j-hero p.j-lead { font-size: 17px; line-height: 1.6; color: #C9BFB0; max-width: 520px; margin-bottom: 26px; }
.j-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.j-hero-visual { position: relative; display: flex; justify-content: center; }
.j-hero-frame { position: relative; width: 100%; max-width: 440px; transform: rotate(-3deg); padding: 16px; }
.j-hero-frame .j-imgbox { aspect-ratio: 1 / 1; }
.j-hero-frame .j-gear.corner { position: absolute; top: -22px; right: -22px; width: 64px; height: 64px; }
.j-hero-tag { position: absolute; left: -16px; bottom: 6px; background: linear-gradient(180deg, #E8C273, #C08A3E); color: var(--j-dark); font-family: var(--j-disp); font-weight: 800; font-size: 20px; letter-spacing: 0.06em; padding: 8px 16px; border-radius: 4px; box-shadow: 0 10px 22px rgba(0,0,0,0.5); transform: rotate(3deg); }
.j-reassure { background: #0A0A0B; border-top: 1px solid var(--j-line); border-bottom: 1px solid var(--j-line); padding: 22px 0; }
.j-reassure-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.j-reassure .j-plaque { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.j-reassure .j-plaque svg { flex: none; }
.j-reassure .t { font-family: var(--j-disp); font-weight: 800; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--j-gold); line-height: 1.05; }
.j-reassure .s { font-size: 13px; color: var(--j-muted); margin-top: 2px; }
.j-section { padding: 48px 0 24px; }
.j-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.j-section-head h2 { font-size: 40px; margin: 0; } .j-section-head h2 span { color: var(--j-gold); }
.j-section-head a.more { font-family: var(--j-disp); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 16px; color: var(--j-gold); white-space: nowrap; }
.j-ranges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 18px; }
.j-range { display: flex; flex-direction: column; gap: 10px; padding: 14px; text-decoration: none !important; }
.j-range .j-imgbox { height: 190px; }
.j-range .j-imgbox img { object-fit: contain; padding: 6px; }
.j-range .n { font-family: var(--j-disp); font-weight: 800; font-size: 26px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--j-gold); }
.j-range .s { font-size: 13.5px; color: var(--j-muted); }
.j-range .j-gear { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; opacity: 0.45; }
/* PUFF encart */
.j-puff { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: center; padding: 34px 38px; margin: 24px 0 8px; }
.j-puff h2 { font-size: 40px; margin: 0 0 10px; } .j-puff h2 span { color: #E64C9A; }
.j-puff p { color: #C9BFB0; font-size: 16px; line-height: 1.6; max-width: 520px; }
.j-puff-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.j-puff-imgs .j-imgbox { aspect-ratio: 1 / 1; border-color: var(--j-line2); }
.j-puff-imgs .j-imgbox:nth-child(2) { transform: translateY(-14px); }
.j-puff .j-btn.pink { background: linear-gradient(180deg, #FF7DC0 0%, #E64C9A 55%, #A82D6C 100%); border-color: #FFB3DA; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 26px rgba(230,76,154,0.35), 0 10px 22px rgba(0,0,0,0.5); color: #fff !important; }
/* boutiques */
.j-shops { position: relative; overflow: hidden; background: #0A0A0B; border-top: 1px solid var(--j-line); border-bottom: 1px solid var(--j-line); padding: 56px 0; margin-top: 24px; }
.j-shops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.j-shops h2 { font-size: 46px; line-height: 1; margin: 0 0 16px; } .j-shops h2 span { color: var(--j-gold); }
.j-shops p { color: #C9BFB0; font-size: 16px; line-height: 1.6; max-width: 520px; }
.j-shops-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; padding: 22px 26px; }
.j-shops-list .c { font-family: var(--j-disp); font-weight: 700; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--j-gold); display: flex; align-items: center; gap: 8px; }
.j-shops-list .c svg { flex: none; }
/* produits (miniatures classic re-stylées) */
#products .product-miniature, .featured-products .product-miniature, .product-miniature { }
.product-miniature .thumbnail-container { background: var(--j-bg3); border: 1px solid var(--j-line2); border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,0.45); transition: transform .25s ease, box-shadow .25s ease; margin-bottom: 1.5rem; }
.product-miniature .thumbnail-container:hover, .product-miniature .thumbnail-container:focus { transform: translateY(-4px); box-shadow: 0 0 0 1px #8A6A3A, 0 18px 40px rgba(0,0,0,0.65), 0 0 30px rgba(224,150,60,0.18); }
.product-miniature .thumbnail-top { background: #fff; border-radius: 6px 6px 0 0; overflow: hidden; }
.product-miniature .product-description { background: transparent; }
.product-miniature .product-title a { color: var(--j-ink) !important; font-family: var(--j-sans); font-weight: 600; font-size: 15px; text-transform: none; letter-spacing: 0; }
.product-miniature .product-title { font-family: var(--j-sans); text-transform: none; }
.product-miniature .product-price-and-shipping .price { font-family: var(--j-disp); font-weight: 800; font-size: 22px; color: var(--j-gold); }
.product-miniature .product-price-and-shipping .regular-price { color: var(--j-dim); }
.product-miniature .highlighted-informations { background: var(--j-bg3); box-shadow: none; border-top: 1px solid var(--j-line); }
.product-miniature .highlighted-informations .quick-view, .product-miniature .highlighted-informations .quick-view i { color: var(--j-gold); }
.product-flag, .product-flags .product-flag, .product-flag.new, .product-flags .product-flag.new { background: linear-gradient(180deg, #E8C273, #C08A3E); color: var(--j-dark); font-family: var(--j-disp); font-weight: 800; letter-spacing: 0.08em; }
.product-flag.discount, .product-flags .product-flag.discount { background: #B23A3A; color: #fff; }
.featured-products h2.h2, .featured-products .products-section-title, .products-section-title { font-family: var(--j-disp); font-size: 40px; font-weight: 800; letter-spacing: 0.03em; text-align: left; margin: 0 0 22px; }
.featured-products .all-product-link { color: var(--j-gold); font-family: var(--j-disp); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.featured-products .all-product-link i { color: var(--j-gold); }
.featured-products { padding: 24px 0 8px; }
.product-miniature .wishlist-button-add { background: var(--j-bg3); color: var(--j-brass); box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.product-miniature .wishlist-button-add i { color: var(--j-brass); }
/* listing / catégorie / colonne gauche */
#js-product-list-header, .block-category { background: var(--j-bg2); border: 1px solid var(--j-line2); border-radius: 6px; }
.block-category .h1, .block-category h1, #js-product-list-header h1 { color: var(--j-gold); }
.block-category #category-description, .block-category #category-description p { color: #C9BFB0; }
#search_filters, #js-active-search-filters, .block-categories, #left-column .block { background: var(--j-bg2); border: 1px solid var(--j-line2); border-radius: 6px; box-shadow: none; color: var(--j-ink); }
#search_filters .h6, .block-categories .h6, .block-categories .category-top-menu a, .block-categories .category-sub-menu a, .block-categories .collapse-icons, #search_filters .facet .facet-label a, #search_filters .facet-title, #search_filters .facet .facet-label .magnitude { color: var(--j-ink) !important; }
#search_filters .facet .facet-label a:hover, .block-categories a:hover { color: var(--j-gold) !important; }
#search_filters .facet .facet-label .custom-checkbox input[type=checkbox] + span, #search_filters .custom-checkbox input[type=checkbox] + span { border-color: var(--j-line2); background: #131215; }
#search_filters .custom-checkbox input[type=checkbox]:checked + span .checkbox-checked { color: var(--j-gold); }
.block-categories .category-sub-menu li[data-depth="1"] { border-color: var(--j-line); }
#js-product-list-top, .products-selection { background: var(--j-bg2); border: 1px solid var(--j-line2); color: var(--j-ink); border-radius: 6px; }
#js-product-list-top .total-products p, .products-selection .total-products p { color: var(--j-ink); }
.products-sort-order .select-title { background: #131215; color: var(--j-ink); border: 1px solid var(--j-line2); }
.products-sort-order .dropdown-menu { background: var(--j-bg3); border: 1px solid var(--j-line2); }
.products-sort-order .dropdown-menu a { color: var(--j-ink); } .products-sort-order .dropdown-menu a:hover { color: var(--j-gold); background: transparent; }
.pagination, #js-product-list-bottom { color: var(--j-muted); }
.pagination .page-list { background: var(--j-bg2); border: 1px solid var(--j-line2); box-shadow: none; }
.pagination a { color: var(--j-ink); } .pagination .current a { color: var(--j-gold); }
.breadcrumb { background: transparent; padding: 14px 0 6px; }
.breadcrumb li, .breadcrumb li a, .breadcrumb li::after { color: var(--j-muted); }
.breadcrumb li:last-child a { color: var(--j-gold); }
#left-column .block .text-uppercase, #left-column .h6 { color: var(--j-gold) !important; }
/* produit */
#product #content, .product-container, .product-information, .product-add-to-cart, .product-variants, .product-prices { color: var(--j-ink); }
.product-container .h1, #product h1 { color: var(--j-ink); font-size: 36px; }
.product-prices .current-price, .product-prices .current-price-value, .product-price { font-family: var(--j-disp); font-weight: 800; font-size: 34px; color: var(--j-gold); }
.product-prices .tax-shipping-delivery-label, .product-prices .product-discount .regular-price { color: var(--j-muted); }
#product .images-container { background: transparent; } .product-cover, .product-cover img, .product-cover picture { background: #fff; border-radius: 6px; }
.product-cover { border: 1px solid var(--j-line2); box-shadow: 0 14px 34px rgba(0,0,0,0.5); overflow: hidden; }
.product-images > li.thumb-container > .thumb { border: 1px solid var(--j-line2); background: #fff; }
.product-images > li.thumb-container > .thumb.selected { border-color: var(--j-gold); }
.product-variants > .product-variants-item .form-control, .product-variants select, .form-control, .input-group .form-control { background: #131215; color: var(--j-ink); border: 1px solid var(--j-line2); }
.form-control:focus { background: #131215; color: var(--j-ink); border-color: var(--j-brass); outline: none; }
.product-variants > .product-variants-item select { background-color: #131215; }
.product-variants > .product-variants-item ul li .input-color, .product-variants > .product-variants-item ul li .input-radio { }
.product-variants .radio-label { background: var(--j-bg3); color: var(--j-ink); box-shadow: none; border: 1px solid var(--j-line2); }
.input-radio:checked + span, .input-color:checked + span, .input-color:hover + span, .input-radio:hover + span { border: 2px solid var(--j-gold); }
.product-variants > .product-variants-item .control-label, .product-quantity .control-label, .form-control-label { color: var(--j-muted); }
.product-actions .add-to-cart, .btn-primary, .btn-primary:focus, .btn-primary:active, .btn-secondary, .btn-secondary:focus, button.btn-primary, .btn.btn-primary, .cart-summary .btn-primary { font-family: var(--j-disp); font-weight: 800; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--j-dark) !important; border-radius: 6px; border: 1px solid #E6C57E; background: linear-gradient(180deg, #E8C273 0%, #C08A3E 55%, #9C6B2C 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 26px rgba(224,150,60,0.3), 0 10px 22px rgba(0,0,0,0.5); }
.btn-primary:hover, .product-actions .add-to-cart:hover, .btn-secondary:hover { color: var(--j-dark) !important; background: linear-gradient(180deg, #F0CC85 0%, #C99248 55%, #A6732F 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 40px rgba(224,150,60,0.5), 0 14px 26px rgba(0,0,0,0.55); }
.btn-primary:disabled, .product-actions .add-to-cart:disabled { opacity: .45; }
.btn-secondary, .btn-secondary:hover { background: transparent; color: var(--j-gold) !important; border-color: #8A6A3A; box-shadow: none; }
.bootstrap-touchspin .btn-touchspin, .qty .bootstrap-touchspin .btn { background: var(--j-bg3); color: var(--j-ink); border-color: var(--j-line2); }
.product-quantity #quantity_wanted { background: #131215; color: var(--j-ink); border-color: var(--j-line2); }
.product-information .product-description, .product-description, .product-additional-info, .product-features { color: #C9BFB0; }
.tabs, .product-tabs { background: var(--j-bg2); border: 1px solid var(--j-line2); border-radius: 6px; box-shadow: none; }
.tabs .nav-tabs { border-bottom-color: var(--j-line); }
.tabs .nav-tabs .nav-link { color: var(--j-muted); font-family: var(--j-disp); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 16px; }
.tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link:hover { color: var(--j-gold); border-bottom-color: var(--j-brass); }
.tabs .tab-content, .tabs .tab-content p, .product-features .data-sheet .name, .product-features .data-sheet .value, .product-reference, .product-out-of-stock { color: var(--j-ink); }
.product-features > dl.data-sheet dd.value, .product-features > dl.data-sheet dt.name { background: var(--j-bg3); color: var(--j-ink); }
.product-features > dl.data-sheet dd.value:nth-of-type(even), .product-features > dl.data-sheet dt.name:nth-of-type(even) { background: #1A171C; }
.product-additional-info .social-sharing, .product-additional-info .social-sharing span { color: var(--j-muted); }
#product .badge-success, .product-availability .badge, .product-available { color: #9ED88B; }
.product-unavailable { color: #E08C6A; }
.j-nico { margin-top: 18px; padding: 14px 18px; font-size: 13px; line-height: 1.55; color: #C9BFB0; }
.j-nico strong { color: var(--j-gold); font-family: var(--j-disp); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.product-actions .control-label { color: var(--j-muted); }
.block-reassurance, #block-reassurance { background: var(--j-bg2) !important; border: 1px solid var(--j-line2); border-radius: 6px; }
#block-reassurance li, #block-reassurance li .block-reassurance-item, #block-reassurance span, .block-reassurance span { color: var(--j-ink) !important; border-color: var(--j-line) !important; }
#blockcart-modal .modal-content, .modal-content { background: var(--j-bg2); color: var(--j-ink); border: 1px solid var(--j-line2); }
#blockcart-modal .modal-header, .modal-header { background: var(--j-bg3); border-color: var(--j-line); }
#blockcart-modal .modal-title, .modal-title, #blockcart-modal .product-name, #blockcart-modal .cart-content p, #blockcart-modal .cart-products-count, #blockcart-modal .product-price { color: var(--j-ink); }
#blockcart-modal .modal-title i, #blockcart-modal .close { color: var(--j-gold); }
#blockcart-modal .divide-right { border-color: var(--j-line); }
.modal-backdrop { background: #000; }
.quickview .modal-content { background: var(--j-bg2); }
/* panier / checkout / compte / formulaires */
.cart-grid-body .card, .cart-summary, .card, .cart-grid-right .card, #checkout .card, .checkout-step, .page-my-account #content, .page-customer-account #content, .page-authentication #content, .page-addresses .address, .page-order-detail .box, .page-content.page-cms, .page-content, #order-details, .order-confirmation-table, .definition-list dl, .page-order-confirmation #content-hook_order_confirmation { background: var(--j-bg2); color: var(--j-ink); border: 1px solid var(--j-line2); border-radius: 6px; box-shadow: none; }
.page-content.page-cms { padding: 32px 36px; }
.page-content.page-cms h2 { font-size: 26px; color: var(--j-gold); margin-top: 22px; }
.page-content.page-cms p, .page-content.page-cms li { color: #C9BFB0; line-height: 1.65; }
.page-content.page-cms strong { color: var(--j-ink); }
.page-header h1, #main .page-header h1, h1.h1 { color: var(--j-ink); }
.card-block, .cart-item, .cart-summary-line, .cart-summary-line .label, .cart-summary-line .value, .cart-total .label, .cart-total .value, .product-line-info, .product-line-info .label, .product-line-grid-body .product-line-info a, .product-line-grid-right .price, .checkout-step .step-title, .checkout-step .step-title .step-number, .checkout-step .content, .checkout-step label, .checkout-step .custom-radio, .address-item, .address-item .address-body, .address-item .address-footer a, #delivery_message, .delivery-option, .delivery-option .carrier-name, .delivery-option .carrier-delay, .delivery-option .carrier-price, .payment-option label, .condition-label label, .condition-label a, .form-group label, .cart-detailed-totals, .cart-summary-products p, .cart-summary-products a, .cart-summary-line.cart-total .label, .cart-summary-line.cart-total .value, .page-footer a, .page-footer li, .links a, .account-links a .link-item, .account-links .link-item, .page-my-account #content .links a span, .page-my-account #content .links a i, .order-details, .order-details a, .orders .order, .orders .order a, table, table th, table td, .table th, .table td, .table-labeled th, .table-labeled td, .definition-list dl dt, .definition-list dl dd, .address, .address-body, .address-footer a, .customer-form label, .form-control-comment, .js-product-list-selection, .contact-form, .contact-form h3, .contact-form label, .contact-rich, .contact-rich h4, .contact-rich .block, .contact-rich .data, .contact-rich .icon i { color: var(--j-ink); }
.cart-summary-line .value, .cart-total .value, .product-line-grid-right .price, .product-price strong { color: var(--j-gold); }
.checkout-step .step-title .step-number { border-color: var(--j-line2); }
.checkout-step.-current .step-title, .checkout-step.-reachable .step-title { color: var(--j-ink); }
.checkout-step .step-title .step-edit, .checkout-step .step-title .step-edit i { color: var(--j-gold); }
.custom-radio { border-color: var(--j-line2); background: #131215; }
.custom-radio input[type=radio]:checked + span { background: var(--j-gold); }
.custom-checkbox input[type=checkbox] + span { border-color: var(--j-line2); background: #131215; }
.custom-checkbox input[type=checkbox] + span .checkbox-checked { color: var(--j-gold); }
.card .card-header, .page-my-account #content .links a, .page-my-account #content .links a:hover, .address-item, .address-item.selected { background: var(--j-bg3); border-color: var(--j-line2); }
.page-my-account #content .links a i { color: var(--j-gold); }
.page-my-account #content .links a span.link-item { background: var(--j-bg3); box-shadow: none; border: 1px solid var(--j-line2); color: var(--j-ink); }
.page-my-account #content .links a:hover span.link-item { background: var(--j-bg2); color: var(--j-gold); }
.cart-item, .cart-items .cart-item { border-color: var(--j-line); }
.cart-grid-body .card-block, .cart-grid-body .card-block h1 { border-color: var(--j-line); }
.cart-grid-body .card-block:first-child { border-bottom: 1px solid var(--j-line); }
.product-line-info .value { color: var(--j-muted); }
.remove-from-cart i, .cart-line-product-actions .remove-from-cart i { color: var(--j-muted); }
.cart-summary-line.cart-summary-subtotals .label { color: var(--j-muted); }
.block-promo .promo-code, .block-promo .promo-input { background: #131215; color: var(--j-ink); border-color: var(--j-line2); }
.block-promo .promo-discounts, .block-promo .promo-code-button { color: var(--j-gold); }
.cart-voucher .promo-name, .block-promo .cart-summary-line .label { color: var(--j-ink); }
.checkout-step .payment-options .payment-option, .payment-options .payment-option label { color: var(--j-ink); }
#conditions-to-approve label, #conditions-to-approve a { color: var(--j-ink); }
.js-payment-option-form, .payment-option .additional-information, .payment-option .additional-information section { color: #C9BFB0; }
.alert-info { background: var(--j-bg3); color: var(--j-ink); border-color: var(--j-line2); }
.alert-success { background: #1C2A1A; color: #C8E8BC; border-color: #35502F; }
.alert-danger, .alert-warning { background: #2E1A1A; color: #F0C4C4; border-color: #6B2E2E; }
.form-control-select, select.form-control { background-color: #131215; }
.input-group .input-group-btn > .btn, .input-group .input-group-btn > .btn[data-action="show-password"] { background: var(--j-bg3); color: var(--j-ink); border-color: var(--j-line2); box-shadow: none; }
.form-footer .btn { }
.page-authentication #content, .page-password #content { max-width: 720px; }
.forgot-password a, .no-account a, .forgot-password, .no-account { color: var(--j-gold); }
.login-form .form-control-label, .register-form .form-control-label { color: var(--j-muted); }
label.required::before, .form-control-label.required::before { color: var(--j-gold); }
.page-not-found, #search_widget { color: var(--j-ink); }
.dropdown-item, .dropdown-item:hover { color: var(--j-ink); background: transparent; }
.social-sharing li, .social-sharing li a { color: var(--j-muted); }
.pagination .previous, .pagination .next { color: var(--j-ink); }
.js-product-list, #js-product-list { }
#notifications ul { color: var(--j-ink); }
.contact-rich .icon i { color: var(--j-brass); }
#stores .store-item, .store-item { background: var(--j-bg2); color: var(--j-ink); border: 1px solid var(--j-line2); border-radius: 6px; }
.store-item .store-description, .store-item .store-description a, .store-item table td, .store-item .card-block { color: var(--j-ink); }
.store-item-footer { border-color: var(--j-line); }
.store-item-container { }
.page-stores .store-item-container { }
/* ---- pied de page ---- */
.footer-container { background: #0A0A0B; border-top: 1px solid var(--j-line); box-shadow: none; padding-top: 44px; margin-top: 0; position: relative; overflow: hidden; }
.footer-container .j-fgear { position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; opacity: 0.08; }
.footer-container li a, .footer-container .block-contact, .footer-container .block-contact a, .footer-container .block-contact .block-contact-title, .footer-container .links .title, .footer-container p, .footer-container .h3, .footer-container .links ul > li a { color: var(--j-muted); }
.footer-container li a:hover { color: var(--j-gold); }
.footer-container .h3, .footer-container .links .title .h3, .footer-container .block-contact-title, .footer-container .links .h3 { font-family: var(--j-disp); font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--j-gold); }
.footer-container .links .navbar-toggler, .footer-container .links .collapse-icons i { color: var(--j-gold); }
.footer-container .links ul > li { border-color: var(--j-line); background: transparent; }
.footer-container .block-contact { color: var(--j-muted); }
.footer-container .block-contact .block-contact-title { }
.j-footer-brand img { height: 56px; width: auto; margin-bottom: 12px; }
.j-footer-brand p { font-size: 14px; line-height: 1.55; color: var(--j-muted); }
.j-warn { padding: 18px 22px; font-size: 13px; line-height: 1.55; color: #C9BFB0; margin-bottom: 20px; }
.j-warn .t { font-family: var(--j-disp); font-weight: 800; font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--j-gold); margin-bottom: 6px; }
.footer-container .text-sm-center, .footer-container .text-sm-center a { color: var(--j-dim); font-size: 12px; }
.footer-container .row > div { margin-bottom: 20px; }
/* ---- fenêtre 18+ ---- */
.j-age { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6,6,7,0.94); backdrop-filter: blur(6px); }
.j-age[hidden] { display: none; }
.j-age-box { position: relative; max-width: 560px; width: 100%; padding: 36px 34px 30px; text-align: center; overflow: hidden; }
.j-age-box .j-gear.bg { position: absolute; width: 300px; height: 300px; right: -110px; top: -110px; opacity: 0.07; }
.j-age-box img { height: 84px; width: auto; margin-bottom: 14px; filter: drop-shadow(0 0 14px rgba(224,150,60,0.3)); }
.j-age-box .k { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--j-brass); margin-bottom: 8px; }
.j-age-box h2 { font-size: 40px; line-height: 1; margin: 0 0 12px; } .j-age-box h2 span { color: var(--j-gold); }
.j-age-box p { color: #C9BFB0; font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
.j-age-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.j-age-box .legal { margin-top: 18px; font-size: 12px; color: var(--j-dim); line-height: 1.5; }
body.j-age-lock { overflow: hidden; }
/* ---- responsive ---- */
@media (max-width: 991px) {
.j-hero { padding: 36px 0 32px; }
.j-hero-grid { grid-template-columns: 1fr; gap: 28px; }
.j-hero h1 { font-size: 46px; }
.j-hero-frame { max-width: 340px; margin: 0 auto; }
.j-reassure-grid { grid-template-columns: 1fr 1fr; }
.j-ranges { grid-template-columns: 1fr 1fr; }
.j-puff { grid-template-columns: 1fr; padding: 26px 22px; }
.j-shops-grid { grid-template-columns: 1fr; }
.j-section-head h2, .j-shops h2, .j-puff h2 { font-size: 32px; }
#header .header-top { position: relative; }
}
@media (max-width: 575px) {
.j-reassure-grid { grid-template-columns: 1fr; }
.j-ranges { grid-template-columns: 1fr; }
.j-range .j-imgbox { height: 160px; }
.j-hero h1 { font-size: 40px; }
.j-shops-list { grid-template-columns: 1fr; }
.j-puff-imgs .j-imgbox:nth-child(2) { transform: none; }
.j-age-box { padding: 26px 20px 22px; }
.j-age-box h2 { font-size: 32px; }
.j-topbar { font-size: 10.5px; letter-spacing: 0.05em; }
}
/* header : menu + recherche sur une ligne */
#header .header-top .header-top-right { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#header .header-top .header-top-right > .menu { flex: 1 1 auto; margin: 0; }
#header .header-top .header-top-right .search-widget { flex: 0 0 180px; float: none; margin: 0; min-width: 0; }
#header .header-top .search-widget form { width: 100%; }
#header .header-top .top-menu a[data-depth="0"] { font-size: 14.5px; letter-spacing: 0.05em; padding: 6px 2px; }
#header .header-top .top-menu[data-depth="0"] > li { margin-right: 10px; }
#header .header-top .col-md-2, #header .header-top .col-md-10 { }
@media (min-width: 992px) { #header .header-top #_desktop_logo { width: 210px; flex: none; } #header .header-top .header-top-right { width: calc(100% - 210px); } #header .header-top > .container > .row { display: flex; align-items: center; } }
@media (max-width: 991px) { #header .header-top .header-top-right { display: block; } }
/* pied de page : 4 colonnes */
/* catégorie : bloc description et sous-catégories */
.block-category { min-height: 0; padding: 22px 26px; }
.block-category .category-cover { display: none; }
#subcategories { background: transparent; border: 0; padding: 0 0 8px; }
#subcategories .subcategory-heading, #subcategories .h4 { font-family: var(--j-disp); font-size: 26px; color: var(--j-ink); margin-bottom: 14px; }
#subcategories ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#subcategories ul li { width: auto; margin: 0; }
#subcategories ul li .subcategory-image { padding: 0; }
#subcategories ul li .subcategory-image a { display: block; border: 1px solid var(--j-line2); border-radius: 6px; background: #fff; padding: 6px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
#subcategories ul li .subcategory-image a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #8A6A3A, 0 14px 30px rgba(0,0,0,0.6); }
#subcategories ul li .subcategory-image a img { width: 100%; height: auto; }
#subcategories ul li .subcategory-name { font-family: var(--j-disp); font-weight: 800; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--j-gold); margin-top: 10px; }
#subcategories ul li .cat_desc { color: var(--j-muted); }
@media (max-width: 575px) { #subcategories ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { #products .product, .featured-products .product, .products .product { width: 50%; float: left; padding: 0 6px; } .product-miniature .product-title a { font-size: 13px; } .product-miniature .product-price-and-shipping .price { font-size: 18px; } }
#category-description, #category-description p, .block-category #category-description * { color: #C9BFB0 !important; }
/* ---- header sticky condensé ---- */
#header { position: sticky; top: 0; z-index: 1000; background: var(--j-bg); }
/* en-tête fixe + réservation de hauteur constante : la condensation au défilement ne fait plus sauter la page */
html { --j-header-h: 172px; scroll-padding-top: calc(var(--j-header-h) - 60px); }
#header { position: fixed; left: 0; right: 0; top: 0; }
body { padding-top: var(--j-header-h); }
#header .header-top { position: static; transition: padding .25s ease; }
#header .header-nav { transition: max-height .25s ease, opacity .2s ease; overflow: hidden; max-height: 80px; }
.j-scrolled #header .header-nav { max-height: 0; opacity: 0; border: 0; }
.j-scrolled #header .header-top { padding-top: 4px; padding-bottom: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
.j-scrolled #header #_desktop_logo img.logo, .j-scrolled #header #_desktop_logo img { height: 48px !important; margin: 6px 0; }
#_desktop_logo img { transition: height .25s ease, margin .25s ease; }
@media (max-width: 991px) { #header .header-nav { max-height: none; } .j-scrolled #header .header-nav { max-height: none; opacity: 1; } .j-scrolled #header .header-top .search-widget { display: none; } #header .header-nav { overflow: visible; } }
/* ---- bouton + Panier sur les cartes ---- */
.j-quick-add { margin: 8px 0 2px; }
.j-add-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--j-disp); font-weight: 800; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--j-dark); border-radius: 6px; border: 1px solid #E6C57E; padding: 8px 14px; cursor: pointer; background: linear-gradient(180deg, #E8C273 0%, #C08A3E 55%, #9C6B2C 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 14px rgba(0,0,0,0.45); transition: transform .2s ease, box-shadow .2s ease; }
.j-add-btn i { font-size: 17px; }
.j-add-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 22px rgba(224,150,60,0.45), 0 8px 18px rgba(0,0,0,0.5); }
.j-add-btn:disabled { opacity: .4; cursor: default; transform: none; }
.product-miniature .product-description { padding-bottom: 12px; }
.product-miniature .product-title { min-height: 2.6em; }
.product-miniature .product-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-miniature .thumbnail-container { height: auto; }
.product-miniature .highlighted-informations { display: none; }
.product-miniature .product-flags { left: 10px; top: 10px; }
.product-flag { margin: 0 0 6px; }
/* ---- apparitions au scroll ---- */
.j-pre { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.j-pre.j-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .j-pre { opacity: 1; transform: none; transition: none; } }
/* ---- FAQ ---- */
.j-faq { padding: 16px 0 40px; }
.j-faq .j-section-head h2 { font-size: 36px; }
.j-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.j-faq details { padding: 0; }
.j-faq summary { cursor: pointer; list-style: none; padding: 16px 20px; font-family: var(--j-disp); font-weight: 700; font-size: 19px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--j-gold); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.j-faq summary::-webkit-details-marker { display: none; }
.j-faq summary::after { content: '+'; font-size: 22px; color: var(--j-brass); transition: transform .25s ease; }
.j-faq details[open] summary::after { transform: rotate(45deg); }
.j-faq .a { padding: 0 20px 18px; color: #C9BFB0; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 767px) { .j-faq-list { grid-template-columns: 1fr; } }
/* ---- newsletter ---- */
.block_newsletter { background: transparent; }
.block_newsletter, .block_newsletter p, .block_newsletter .col-md-5, .block_newsletter .col-md-7 { color: var(--j-ink); }
.j-news { padding: 26px 30px; margin: 8px 0 26px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: center; position: relative; overflow: hidden; }
.j-news .h { font-family: var(--j-disp); font-weight: 800; font-size: 30px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--j-ink); margin: 0 0 6px; }
.j-news .h span { color: var(--j-gold); }
.j-news p { color: #C9BFB0; font-size: 14.5px; margin: 0; }
.j-news form { display: flex; gap: 10px; flex-wrap: wrap; }
.j-news input[type=email] { flex: 1 1 240px; background: #131215; border: 1px solid var(--j-line2); border-radius: 6px; color: var(--j-ink); padding: 12px 14px; font-size: 15px; }
.j-news input[type=email]::placeholder { color: var(--j-dim); }
.j-news .j-btn { padding: 12px 18px; }
.j-news .legal { flex: 1 1 100%; font-size: 12px; color: var(--j-dim); }
.j-news .msg { flex: 1 1 100%; font-size: 13px; color: var(--j-gold); }
@media (max-width: 767px) { .j-news { grid-template-columns: 1fr; padding: 22px; } }
/* ---- barre de navigation basse (mobile) ---- */
.j-bottomnav { display: none; }
@media (max-width: 767px) {
body { padding-bottom: 64px; }
.j-bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: rgba(10,10,11,0.96); border-top: 1px solid var(--j-line2); box-shadow: 0 -8px 24px rgba(0,0,0,0.5); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); backdrop-filter: blur(6px); }
.j-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--j-muted); font-family: var(--j-disp); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding: 4px 0; }
.j-bottomnav a svg { width: 22px; height: 22px; }
.j-bottomnav a.on, .j-bottomnav a:hover { color: var(--j-gold); }
.j-bottomnav .cnt { position: absolute; margin-left: 26px; margin-top: -4px; background: linear-gradient(180deg, #E8C273, #C08A3E); color: var(--j-dark); font-size: 10px; border-radius: 999px; padding: 1px 6px; }
.j-age { padding-bottom: 80px; }
}
/* ---- page Nos magasins ---- */
.page-stores.j-stores { background: transparent; border: 0; padding: 0; }
.j-stores-intro { max-width: 720px; margin: 8px 0 22px; }
.j-stores-title { font-size: 44px; line-height: 1; margin: 0 0 10px; }
.j-stores-title span { color: var(--j-gold); }
.j-stores-intro p { color: #C9BFB0; font-size: 15.5px; line-height: 1.6; }
.j-stores-grid { display: grid; grid-template-columns: 400px 1fr; gap: 20px; align-items: start; }
.j-stores-list { display: flex; flex-direction: column; gap: 10px; max-height: 640px; overflow: auto; padding: 4px; scrollbar-width: thin; scrollbar-color: var(--j-line2) transparent; }
.j-store { flex: none; overflow: hidden; transition: box-shadow .25s ease; }
.j-store.on { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 1px var(--j-brass), 0 0 26px rgba(224,150,60,0.25), 0 14px 34px rgba(0,0,0,0.55); }
.j-store-head { width: 100%; display: grid; grid-template-columns: 34px 1fr 20px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; background: transparent; border: 0; padding: 14px 16px; text-align: left; cursor: pointer; color: var(--j-ink); }
.j-store-head > * { min-width: 0; }
.j-store-num { grid-column: 1; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--j-disp); font-weight: 800; font-size: 17px; color: var(--j-dark); background: linear-gradient(180deg, #E8C273, #C08A3E); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
.j-store-name { grid-column: 2; grid-row: 1; font-family: var(--j-disp); font-weight: 800; font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--j-ink); line-height: 1.1; }
.j-store.on .j-store-name { color: var(--j-gold); }
.j-store-city { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--j-muted); }
.j-store-chev { grid-column: 3; grid-row: 1 / span 2; font-size: 26px; color: var(--j-brass); transition: transform .25s ease; }
.j-store.on .j-store-chev { transform: rotate(90deg); }
.j-store-body { padding: 0 16px 16px; }
.j-store-photo { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid var(--j-line2); background: #131215; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.j-store-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.j-store-photo.is-placeholder { background: radial-gradient(circle at 30% 30%, #2A2520, #121114 70%); }
.j-store-photo.is-placeholder .j-gear { position: absolute; right: -20px; bottom: -30px; }
.j-store-ph-name { position: relative; font-family: var(--j-disp); font-weight: 800; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--j-gold); text-align: center; line-height: 1.1; padding: 10px; }
.j-store-addr { color: var(--j-ink); font-size: 14.5px; line-height: 1.55; margin-bottom: 8px; }
.j-store-tel { display: inline-flex; align-items: center; gap: 8px; color: var(--j-gold); font-family: var(--j-disp); font-weight: 700; font-size: 18px; letter-spacing: 0.05em; margin-bottom: 10px; }
.j-store-tel:hover { color: var(--j-gold2); }
.j-store-hours { width: 100%; font-size: 13.5px; border-collapse: collapse; margin-bottom: 12px; }
.j-store-hours th { text-align: left; font-weight: 500; color: var(--j-muted); padding: 3px 0; width: 38%; }
.j-store-hours td { padding: 3px 0; color: var(--j-ink); }
.j-store-hours td span { display: inline-block; margin-right: 8px; }
.j-store-hours td em { color: var(--j-dim); font-style: normal; }
.j-store-hours tr.today th, .j-store-hours tr.today td { color: var(--j-gold); font-weight: 600; }
.j-store-hours tr { border-bottom: 1px dashed rgba(90,74,52,0.5); }
.j-store-note { font-size: 12px; color: var(--j-dim); margin-bottom: 10px; }
.j-store-route { padding: 10px 16px; font-size: 15px; }
.j-stores-map-wrap { position: sticky; top: 130px; }
.j-stores-map { height: 640px; padding: 0; overflow: hidden; background: #131215; }
.j-stores-map .leaflet-container { background: #131215; font-family: var(--j-sans); }
.j-stores-legend { font-size: 12px; color: var(--j-dim); margin-top: 8px; text-align: right; }
.j-marker { background: transparent; border: 0; }
.j-marker-pin { display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6)); transition: transform .2s ease; transform-origin: 50% 100%; }
.j-marker:hover .j-marker-pin, .j-marker.on .j-marker-pin { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(224,150,60,0.6)) drop-shadow(0 4px 8px rgba(0,0,0,0.6)); }
#j66-map .leaflet-popup-content-wrapper { background: #1F1B20; color: var(--j-ink); border: 1px solid var(--j-line2); border-radius: 6px; box-shadow: 0 14px 34px rgba(0,0,0,0.6); }
#j66-map .leaflet-popup-tip { background: #1F1B20; border: 1px solid var(--j-line2); }
#j66-map .leaflet-popup-content { margin: 14px 16px; font-size: 13px; line-height: 1.45; }
#j66-map .leaflet-popup-close-button { color: var(--j-gold) !important; }
.j-pop-name { font-family: var(--j-disp); font-weight: 800; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--j-gold); margin-bottom: 4px; }
.j-pop-addr { margin-bottom: 8px; color: #C9BFB0; }
.j-pop .j-store-hours { margin-bottom: 10px; font-size: 12.5px; }
.j-pop .j-store-hours tr { border: 0; }
.j-pop-route { padding: 8px 14px; font-size: 14px; }
#j66-map .leaflet-control-zoom a { background: #1F1B20 !important; color: var(--j-gold) !important; border-color: var(--j-line2) !important; }
#j66-map .leaflet-control-attribution { background: rgba(14,14,16,0.8) !important; color: var(--j-dim) !important; font-size: 10px; }
#j66-map .leaflet-control-attribution a { color: var(--j-muted) !important; }
@media (max-width: 991px) {
.j-stores-grid { grid-template-columns: 1fr; }
.j-stores-map-wrap { position: static; order: -1; }
.j-stores-map { height: 360px; }
.j-stores-list { max-height: none; overflow: visible; }
.j-stores-title { font-size: 34px; }
}
.j-map-fallback { display:flex; align-items:center; justify-content:center; height:100%; color: var(--j-muted); padding: 20px; text-align:center; }
.j-tiles { filter: invert(1) hue-rotate(180deg) brightness(0.72) contrast(1.05) saturate(0.35) sepia(0.25); }
#header .header-nav .blockcart.active, #header .header-nav .blockcart.inactive { background: transparent; }
#header .header-nav .blockcart.active a { color: var(--j-gold); }
#j66-map .j-pop, #j66-map .j-pop .j-store-hours td { color: var(--j-ink); }
#j66-map .j-pop .j-store-hours th { color: var(--j-muted); }
#j66-map .j-pop-tel { color: var(--j-gold); font-family: var(--j-disp); font-weight: 700; font-size: 16px; letter-spacing: .04em; margin-bottom: 4px; }
#j66-map .j-pop-today { color: #C9BFB0; margin-bottom: 10px; }
/* =====================================================================
v3 — catégories : en-tête, sous-catégories, filtres, méga-menus
===================================================================== */
/* en-tête de catégorie */
#js-product-list-header { background: transparent; border: 0; border-radius: 0; }
.block-category.j-cathead { position: relative; overflow: hidden; min-height: 0; padding: 30px 34px 26px; margin-bottom: 22px; }
.j-cathead::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
background-image: radial-gradient(circle at 20% 120%, rgba(224,150,60,0.18), transparent 45%), radial-gradient(circle at 95% -20%, rgba(224,150,60,0.14), transparent 40%), repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 9px); }
.j-cathead-gear { position: absolute; right: -70px; top: -90px; pointer-events: none; line-height: 0; }
.j-cathead-gear.two { right: 150px; top: auto; bottom: -60px; }
.j-cathead-in { position: relative; max-width: 760px; }
.j-cathead .j-kicker { margin-bottom: 8px; }
.j-cathead h1, .j-cathead .h1 { font-size: 44px; line-height: 1; margin: 0 0 10px; color: var(--j-gold); }
.j-cathead #category-description, .j-cathead #category-description p { color: #C9BFB0 !important; font-size: 15.5px; line-height: 1.6; margin: 0 0 14px; }
.j-cathead-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.j-chip-s { font-family: var(--j-disp); font-weight: 700; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--j-gold); border: 1px solid #6A5436; border-radius: 999px; padding: 5px 12px; background: rgba(192,138,62,0.06); }
/* sous-catégories : cartes uniformes */
#subcategories.j-subcats { background: transparent; border: 0; padding: 0; margin-bottom: 26px; }
.j-subcats .j-section-head { margin-bottom: 16px; }
.j-subcats .j-section-head h2 { font-size: 30px; }
.j-subcats .j-count { font-family: var(--j-disp); font-size: 18px; letter-spacing: .06em; }
.j-subcats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.j-subcats-grid li { width: auto; margin: 0; min-width: 0; display: flex; }
.j-subcat { display: flex; flex-direction: column; width: 100%; padding: 12px 12px 14px; text-decoration: none !important; border-radius: 8px; }
.j-subcat-img { display: block; aspect-ratio: 1 / 1; width: 100%; border-radius: 6px; overflow: hidden; border: 1px solid var(--j-line); background: #fff; }
.j-subcat-img picture, .j-subcat-img img { display: block; width: 100%; height: 100%; }
.j-subcat-img img { object-fit: cover; transition: transform .35s ease; }
.j-subcat:hover .j-subcat-img img { transform: scale(1.04); }
.j-subcat-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: radial-gradient(circle at 50% 40%, #2A2520, #121114 75%); }
.j-subcat-name { display: block; min-height: 2.3em; margin-top: 12px; text-align: center; font-family: var(--j-disp); font-weight: 800; font-size: 22px; letter-spacing: .06em; text-transform: uppercase; color: var(--j-gold); line-height: 1.1; }
.j-subcat-desc { display: block; text-align: center; font-size: 13px; color: var(--j-muted); margin-top: 6px; line-height: 1.45; flex: 1; }
.j-subcat-cta { display: block; text-align: center; margin-top: auto; padding-top: 10px; font-family: var(--j-disp); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--j-brass); opacity: .8; transition: color .2s ease, opacity .2s ease; }
.j-subcat:hover .j-subcat-cta { color: var(--j-gold); opacity: 1; }
.j-subcat:hover .j-subcat-name { color: var(--j-gold2); }
/* panneau de filtres (ps_facetedsearch) */
#left-column.j-side { padding-right: 12px; }
#search_filters { padding: 18px 18px 8px; border-radius: 8px; background: linear-gradient(180deg, #19161B 0%, #121114 100%); }
#search_filters > .h6 { font-family: var(--j-disp); font-size: 22px; letter-spacing: .08em; color: var(--j-gold) !important; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--j-line); position: relative; }
#search_filters > .h6::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -1px; background: linear-gradient(180deg, #E8C273, #C08A3E); -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
#search_filters .facet { padding: 12px 0 8px; border-bottom: 1px dashed rgba(90,74,52,0.55); }
#search_filters .facet:last-child { border-bottom: 0; }
#search_filters .facet .facet-title, #search_filters .facet .h6 { font-family: var(--j-disp); font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--j-ink) !important; margin-bottom: 8px; }
#search_filters .facet ul { margin: 0; }
#search_filters .facet li { padding: 3px 0; }
#search_filters .facet .facet-label { display: flex; align-items: center; gap: 8px; margin: 0; }
#search_filters .facet .facet-label a { font-size: 14px; color: #C9BFB0 !important; margin: 0; }
#search_filters .facet .facet-label a:hover, #search_filters .facet .facet-label.active a { color: var(--j-gold) !important; }
#search_filters .facet .facet-label .magnitude { color: var(--j-dim); font-size: 12px; }
#search_filters .custom-checkbox input[type=checkbox] + span { width: 16px; height: 16px; border-radius: 3px; margin: 0; }
#search_filters .custom-checkbox input[type=checkbox]:checked + span { border-color: var(--j-gold); background: rgba(224,150,60,0.15); }
#search_filters .custom-checkbox input[type=checkbox] + span .checkbox-checked { font-size: 14px; margin: -2px 0 0 -1px; }
#search_filters .custom-radio { width: 16px; height: 16px; }
#search_filters .facet .faceted-slider { padding: 4px 0 8px; }
#search_filters .facet .faceted-slider p { color: var(--j-ink); font-size: 13px; }
#search_filters .ui-slider { background: #2A2520; border: 0; height: 4px; border-radius: 2px; margin: 12px 8px 4px; }
#search_filters .ui-slider .ui-slider-range { background: linear-gradient(90deg, #C08A3E, #E8C273); }
#search_filters .ui-slider .ui-slider-handle { background: var(--j-gold); border: 1px solid #F0CC85; width: 14px; height: 14px; border-radius: 50%; top: -5px; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
#search_filters .clear-all-wrapper { margin: 8px 0 4px; }
#search_filters .js-search-filters-clear-all, #js-active-search-filters .js-search-link { color: var(--j-gold); background: transparent; border: 1px solid #6A5436; border-radius: 6px; font-family: var(--j-disp); letter-spacing: .06em; text-transform: uppercase; font-size: 13px; padding: 6px 10px; }
#js-active-search-filters { padding: 12px 16px; margin-bottom: 14px; }
#js-active-search-filters .active-filter-title { color: var(--j-muted); }
#js-active-search-filters .filter-block { background: var(--j-bg3); color: var(--j-ink); border: 1px solid #6A5436; border-radius: 999px; box-shadow: none; }
#js-active-search-filters .filter-block .close { color: var(--j-gold); opacity: 1; }
#search_filter_toggler { font-family: var(--j-disp); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--j-gold) !important; border-color: #6A5436; background: rgba(192,138,62,0.06); }
#search_filters .facet .title { color: var(--j-ink); }
#search_filters .facet .title .collapse-icons i { color: var(--j-gold); }
#search_filters .facet .title .h6 { margin: 0; }
/* filtres en mode "off-canvas" mobile (classic) */
@media (max-width: 767px) {
#left-column.j-side { padding-right: 0; }
#search_filters_wrapper { background: var(--j-bg); }
.js-search-filters-wrapper #search_filters_wrapper, #search_filters_wrapper { color: var(--j-ink); }
#search_filters_wrapper #search_filter_controls { background: var(--j-bg2); border-bottom: 1px solid var(--j-line2); color: var(--j-ink); }
#search_filters_wrapper #search_filter_controls .btn { font-family: var(--j-disp); letter-spacing: .06em; text-transform: uppercase; }
#search_filters_wrapper #search_filter_controls .btn.ok { background: linear-gradient(180deg,#E8C273,#C08A3E); color: var(--j-dark) !important; border: 0; }
#search_filters_wrapper #search_filter_controls .btn.clear { color: var(--j-gold) !important; background: transparent; }
#search_filters_wrapper #search_filter_controls .btn.clear::before, #search_filters_wrapper #search_filter_controls .btn.clear::after { color: var(--j-gold); }
#search_filters .facet .title { padding: 8px 0; }
}
/* méga-menus (desktop) */
#header .header-top .top-menu .sub-menu { border-radius: 0 0 10px 10px; padding: 22px 26px 20px; margin-top: 10px; z-index: 1200 !important;
background: linear-gradient(180deg, #1F1B20 0%, #141216 100%); border: 1px solid var(--j-line2); border-top: 2px solid var(--j-brass);
box-shadow: 0 24px 50px rgba(0,0,0,0.65), 0 0 40px rgba(224,150,60,0.08);
transform: translateY(8px); transition: opacity .28s ease .08s, visibility .28s ease .08s, transform .28s ease .08s; }
#_desktop_top_menu .top-menu[data-depth="0"] > li:hover .sub-menu { transform: none; transition-delay: .12s; }
#header .header-top .top-menu .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 12px; }
#header .header-top .top-menu .sub-menu ul[data-depth="1"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 22px; margin: 0; padding: 0; }
#header .header-top .top-menu .sub-menu ul[data-depth="1"] > li { float: none; margin: 0; padding: 0; }
#header .header-top .top-menu .sub-menu a[data-depth="1"] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 16px; color: var(--j-ink); border-left: 2px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease, padding-left .18s ease; }
#header .header-top .top-menu .sub-menu a[data-depth="1"]::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F0CC85, #9C6B2C 70%); box-shadow: 0 0 6px rgba(224,150,60,0.5); opacity: .7; transition: opacity .18s ease, transform .18s ease; }
#header .header-top .top-menu .sub-menu a[data-depth="1"]:hover { color: var(--j-gold); background: rgba(192,138,62,0.09); border-left-color: var(--j-gold); padding-left: 14px; }
#header .header-top .top-menu .sub-menu a[data-depth="1"]:hover::before { opacity: 1; transform: scale(1.2); }
#header .header-top .top-menu .popover { max-width: 860px; }
#header .header-top .top-menu .sub-menu ul[data-depth="2"] { margin: 2px 0 6px 21px; }
#header .header-top .top-menu .sub-menu a[data-depth="2"] { color: var(--j-muted); font-size: 13.5px; padding: 3px 10px; display: block; }
#header .header-top .top-menu .sub-menu a[data-depth="2"]:hover { color: var(--j-gold); }
#header .header-top .top-menu[data-depth="0"] > li > a[data-depth="0"] { position: relative; }
#header .header-top .top-menu[data-depth="0"] > li:hover > a[data-depth="0"] { color: var(--j-gold); border-bottom-color: var(--j-brass); }
#_desktop_top_menu .top-menu[data-depth="0"] > li.category > a[data-depth="0"]::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 7px; vertical-align: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .2s ease; }
#_desktop_top_menu .top-menu[data-depth="0"] > li.category:hover > a[data-depth="0"]::after { transform: rotate(225deg) translate(-2px, -2px); }
#header .header-top .top-menu[data-depth="0"] > li.link > a[data-depth="0"]::after { content: none; }
#header .header-top .top-menu .sub-menu .collapse { display: block; }
/* sécurité : la colonne de gauche ne passe jamais au-dessus du menu */
#left-column, #left-column .block, #search_filters { position: relative; z-index: 1; }
#header { z-index: 1030; }
/* cohérence : listing produits */
#js-product-list-top { padding: 10px 14px; margin-bottom: 18px; }
#js-product-list-top .total-products p { font-family: var(--j-disp); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--j-muted); margin: 0; line-height: 38px; }
.products-sort-order .select-title { border-radius: 6px; font-size: 14px; }
.products-sort-order .select-title i { color: var(--j-gold); }
#js-product-list-bottom .pagination { padding-top: 6px; }
.products-sort-order .select-title { color: var(--j-ink); }
.block-category .category-cover { display: none; }
@media (max-width: 991px) {
.block-category.j-cathead { padding: 22px 20px 20px; }
.j-cathead h1, .j-cathead .h1 { font-size: 34px; }
.j-cathead-gear { right: -100px; top: -110px; }
.j-cathead-gear.two { display: none; }
.j-subcats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.j-subcat { padding: 8px 8px 12px; }
.j-subcat-name { font-size: 18px; margin-top: 8px; }
.j-subcat-desc { display: none; }
.j-subcat-cta { font-size: 12.5px; margin-top: 6px; }
.j-subcats .j-section-head h2 { font-size: 26px; }
}
@media (max-width: 575px) {
.block-category.j-cathead { padding: 18px 16px 16px; margin-bottom: 16px; }
.j-cathead h1, .j-cathead .h1 { font-size: 30px; }
.j-cathead #category-description { font-size: 14px; }
.j-chip-s { font-size: 12px; padding: 4px 10px; }
#subcategories ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#js-product-list-top { padding: 8px 10px; }
#js-product-list-top .showing { color: var(--j-muted); font-size: 12px; }
}
#js-active-search-filters:not(:has(.filter-block)) { display: none; }
.j-add-btn.ghost, .j-add-btn.ghost:visited { background: rgba(192,138,62,0.06); color: var(--j-gold); border-color: #8A6A3A; box-shadow: none; text-decoration: none; }
.j-add-btn.ghost:hover { background: rgba(192,138,62,0.16); color: var(--j-gold2); }
#header .header-top .top-menu .sub-menu { top: 100% !important; margin-top: 8px; left: 0; width: calc(100% - 30px); margin-left: 15px; }
#header .header-top .top-menu .sub-menu::before { top: -14px; height: 16px; }
@media (max-width: 767px) {
#search_filters_wrapper { margin-left: -15px !important; width: calc(100% + 30px) !important; }
#search_filters .facet .title { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
#search_filters .facet .title .float-xs-right { float: none; }
#search_filters .facet .title .h6 { margin: 0; }
#search_filters .facet ul { padding: 0 14px; }
#search_filters .facet li { border-bottom: 1px solid rgba(90,74,52,0.35); padding: 8px 0; }
#search_filters .facet li:last-child { border-bottom: 0; }
}
/* ---- cartes de gammes : image plein cadre + libellé en superposition ---- */
.j-subcat { padding: 7px; }
.j-subcat-img { position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; border: 1px solid #6A5436; background: radial-gradient(circle at 50% 35%, #2A2520, #121114 75%); }
.j-subcat-img picture, .j-subcat-img img { display: block; width: 100%; height: 100%; }
.j-subcat-img img { object-fit: cover; object-position: center; }
.j-subcat-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.j-subcat-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 14px 12px; text-align: center; background: linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,0.55) 40%, rgba(10,10,11,0.92) 100%); }
.j-subcat-name { display: block; min-height: 0; margin: 0; font-family: var(--j-disp); font-weight: 800; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; color: var(--j-gold); line-height: 1.05; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.j-subcat-cta { display: block; margin-top: 4px; padding: 0; font-family: var(--j-disp); font-weight: 700; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: #E8C273; opacity: .85; transition: opacity .2s ease, letter-spacing .2s ease; }
.j-subcat:hover .j-subcat-cta { opacity: 1; letter-spacing: .16em; }
.j-subcat:hover .j-subcat-img img { transform: scale(1.05); }
.j-subcat-desc { display: none; }
@media (max-width: 991px) { .j-subcat { padding: 5px; } .j-subcat-name { font-size: 18px; } .j-subcat-cta { font-size: 11.5px; } .j-subcat-cap { padding: 40px 8px 9px; } }
/* accueil : mêmes règles pour les vignettes de gammes */
.j-range .j-imgbox { background: radial-gradient(circle at 50% 35%, #2A2520, #121114 75%); border-color: #6A5436; }
.j-range .j-imgbox img { object-fit: cover; padding: 0; }
/* ==== MOBILE (≤767px) : sous-menus en liste, cartes gammes, titres, espacements ==== */
@media (max-width: 767px) {
/* --- en-tête fixe : le menu ouvert devient défilable s'il dépasse l'écran --- */
#header { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* --- menu ☰ : neutralise le méga-menu desktop --- */
#header .header-top #mobile_top_menu_wrapper { margin: 0 -15px; padding: 6px 0 12px; }
#header .header-top #mobile_top_menu_wrapper .top-menu[data-depth="0"] > li { margin: 0; border-bottom: 1px solid var(--j-line); }
#header .header-top #mobile_top_menu_wrapper .top-menu[data-depth="0"] > li:last-child { border-bottom: 0; }
#header .header-top #mobile_top_menu_wrapper .top-menu a[data-depth="0"] { display: block; padding: 14px 15px; font-size: 17px; line-height: 1.3; border-bottom: 0; }
#header .header-top #mobile_top_menu_wrapper .top-menu a[data-depth="0"]::after { content: none; }
#header .header-top #mobile_top_menu_wrapper .top-menu .collapse-icons { padding: 0 4px; }
#header .header-top #mobile_top_menu_wrapper .top-menu .collapse-icons .material-icons { font-size: 26px; color: var(--j-gold); }
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu,
#header .header-top #mobile_top_menu_wrapper .top-menu .popover {
position: static !important; display: none; width: 100% !important; max-width: none; margin: 0 !important; padding: 4px 0 8px !important; left: auto; top: auto !important;
background: var(--j-bg3); border: 0; border-top: 1px solid var(--j-line); border-radius: 0; box-shadow: none; transform: none !important; opacity: 1 !important; visibility: visible !important; transition: none !important; z-index: auto !important; float: none;
}
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu.in, #header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu.show,
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu.collapse.in, #header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu.collapse.show { display: block; }
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu.collapsing { display: block; height: auto !important; transition: none !important; }
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu::before { content: none; }
/* entrées de sous-menu : une seule colonne, pleine largeur, empilées */
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"] { display: block; margin: 0; padding: 0; }
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"] > li { display: block; float: none; margin: 0; padding: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"] > li:last-child { border-bottom: 0; }
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu a[data-depth="1"] {
display: block; width: 100%; padding: 12px 15px 12px 32px; margin: 0; min-height: 46px; font-size: 15.5px; line-height: 1.35; letter-spacing: 0.05em;
white-space: normal; overflow: visible; text-overflow: clip; color: var(--j-ink); background: transparent; border: 0; border-radius: 0; border-left: 0; box-shadow: none; transition: none; position: relative;
}
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu a[data-depth="1"]::before,
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu a[data-depth="1"]::after { content: none; display: none; }
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu a[data-depth="1"]::before { content: '›'; display: block; position: absolute; left: 16px; top: 11px; width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; opacity: .8; color: var(--j-brass); font-size: 18px; line-height: 1; }
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu a[data-depth="1"]:hover, #header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu a[data-depth="1"]:active { color: var(--j-gold); background: rgba(192,138,62,0.08); padding-left: 32px; }
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="2"] { display: block; margin: 0 0 4px 32px; padding: 0; }
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu a[data-depth="2"] { display: block; padding: 8px 15px; font-size: 14px; color: var(--j-muted); }
#header .header-top #mobile_top_menu_wrapper .top-menu .sub-menu .collapse { display: block; }
#header .header-top #mobile_top_menu_wrapper .js-top-menu-bottom { padding: 12px 15px 0; }
/* --- barre de recherche --- */
#header .header-top .search-widget { margin: 6px 0 4px; }
#header .header-top .search-widget form { position: relative; }
#header .header-top .search-widget form input[type=text] { height: 44px; padding: 8px 12px 8px 42px; font-size: 16px; }
#header .header-top .search-widget form button[type=submit] { top: 50%; transform: translateY(-50%); bottom: auto; }
#header .header-top .search-widget form i.material-icons.search { top: 50%; transform: translateY(-50%); bottom: auto; }
/* --- cartes « Nos gammes » : pas d'engrenage parasite, rendu identique --- */
.j-range > .j-gear, .j-hero-frame .j-gear.corner, footer .j-fgear, .j-fgear { display: none !important; }
.j-range { padding: 12px; gap: 8px; }
.j-range .j-imgbox { height: 170px; }
.j-range .n { font-size: 22px; }
/* --- titres de section : même taille, sur une ligne, même calage --- */
.j-section-head { flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; }
.j-section-head h2, .j-shops h2, .j-puff h2, .j-faq .j-section-head h2 { font-size: 24px; line-height: 1.15; letter-spacing: 0.03em; }
.j-section-head a.more { font-size: 13px; }
.featured-products h2.h2, .featured-products .products-section-title, .products-section-title { font-size: 24px; line-height: 1.15; letter-spacing: 0.03em; margin: 0 0 16px; white-space: nowrap; }
.featured-products { padding: 8px 15px 4px; }
/* --- espacements réguliers entre sections --- */
.j-ranges { gap: 14px; margin-bottom: 14px; }
.j-chip { margin: 0 6px 8px 0; }
/* --- cartes produits : hauteurs homogènes, alignement --- */
#products .product, .featured-products .product, .products .product { display: flex; }
.product-miniature { width: 100%; display: flex; flex-direction: column; }
.product-miniature .product-description { flex: 1 1 auto; display: flex; flex-direction: column; }
.product-miniature .product-title { min-height: 2.6em; }
.product-miniature .product-price-and-shipping { margin-top: auto; }
}