:root{--font-family-body: "Poppins", "Helvetica", "Arial", "sans-serif";--font-family-label: "Poppins", "Helvetica", "Arial", "sans-serif";--font-family-semi: "Poppins", "Helvetica", "Arial", "sans-serif";--font-family-title: "Poppins", "Helvetica", "Arial", "sans-serif";--ax-form-bi-width: 1px;--ax-form-btn-width: 1px;}@media (max-width: 767px){#box-product-grid .archive-wrapper-items{margin-left: calc(-10px/2);margin-right: calc(-10px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(10px/2);padding-right: calc(10px/2);margin-bottom: 10px;}}@media (min-width: 768px) and (max-width: 1024px){#box-product-grid .archive-wrapper-items{margin-left: calc(-20px/2);margin-right: calc(-20px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(20px/2);padding-right: calc(20px/2);margin-bottom: 20px;}}@media (min-width: 1025px) and (max-width: 1199px){#box-product-grid .archive-wrapper-items{margin-left: calc(-30px/2);margin-right: calc(-30px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(30px/2);padding-right: calc(30px/2);margin-bottom: 30px;}}@media (min-width: 1200px){#box-product-grid .archive-wrapper-items{margin-left: calc(-30px/2);margin-right: calc(-30px/2);}#box-product-grid .archive-wrapper-items > .item{padding-left: calc(30px/2);padding-right: calc(30px/2);margin-bottom: 30px;}}@media (max-width: 767px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/2); flex: 0 0 calc(100%/2); max-width: calc(100%/2);}}@media (min-width: 768px) and (max-width: 1024px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/2); flex: 0 0 calc(100%/2); max-width: calc(100%/2);}}@media (min-width: 1025px) and (max-width: 1199px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/3); flex: 0 0 calc(100%/3); max-width: calc(100%/3);}}@media (min-width: 1200px){#box-product-grid .archive-wrapper-items > .item{-ms-flex: 0 0 calc(100%/3); flex: 0 0 calc(100%/3); max-width: calc(100%/3);}}header.is-sticked.is-scroll-up #header-sticky, header.is-sticked.is-scroll-down #header-sticky{-webkit-transform: none; transform: none; visibility: visible; opacity: 1; pointer-events: all;}/* ===== PAR ÂGE : Boutons sous-catégories colorés ===== */ a.wrapp-category { display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; padding: 22px 15px !important; font-weight: 700 !important; color: #ffffff !important; text-decoration: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; min-height: 80px !important; margin-bottom: 15px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } a.wrapp-category:hover { transform: translateY(-4px) scale(1.03) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important; } a.wrapp-category span.category-title { color: #ffffff !important; font-size: 1rem !important; font-weight: 700 !important; text-align: center !important; text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; } /* De 0 à 12 mois - Cyan */ a[href*="58-de-0-a-12-mois"] { background-color: #00BCD4 !important; } /* De 1 à 3 ans - Jaune */ a[href*="59-de-1-a-3-ans"] { background-color: #F5E020 !important; } a[href*="59-de-1-a-3-ans"] span.category-title { color: #333333 !important; text-shadow: none !important; } /* Dès 3 ans - Vert */ a[href*="60-des-3-ans"] { background-color: #2DB84B !important; } /* Dès 6 ans - Bleu */ a[href*="61-des-6-ans"] { background-color: #1A4FC4 !important; } /* Dès 9 ans - Orange */ a[href*="62-des-9-ans"] { background-color: #F5831F !important; } /* Dès 12 ans - Rouge */ a[href*="63-des-12-ans"] { background-color: #E8231A !important; } /* Ados/Adultes - Magenta */ a[href*="64-ados-adultes"] { background-color: #E91E8C !important; } /* ========================================================================== K'ADO MINO — Colonne de filtres des rayons jeux (styles) ========================================================================== */ #search_filters{ display:flex !important; flex-direction:column !important; } /* --- Ordre : Âge · Joueurs · Durée · Sous-rayons · Niveau · Prix --------- */ #search_filters .kdm-age { order:1 !important; } #search_filters .kdm-j1 { order:2 !important; } #search_filters .kdm-j2 { order:3 !important; } #search_filters .kdm-j3 { order:4 !important; } #search_filters .kdm-j4 { order:5 !important; } #search_filters .kdm-j5 { order:6 !important; } #search_filters .kdm-j6 { order:7 !important; } #search_filters .kdm-j7 { order:8 !important; } #search_filters .kdm-j8 { order:9 !important; } #search_filters .kdm-duree { order:10 !important; } #search_filters .kdm-cat { order:11 !important; } #search_filters .kdm-niveau{ order:12 !important; } #search_filters .kdm-prix { order:13 !important; } /* --- Les huit blocs joueurs forment un seul groupe ----------------------- */ #search_filters .kdm-joueurs{ margin:0 !important; padding:0 !important; border:0 !important; } #search_filters .kdm-joueurs .widget-title{ display:none !important; } #search_filters .kdm-joueurs .widget-content{ padding:0 !important; } #search_filters .kdm-joueurs .facet-wrapper-content{ max-height:none !important; overflow:visible !important; } #search_filters .kdm-joueurs ul.facet-type-checkbox{ margin:0 !important; padding:0 !important; } #search_filters .kdm-duree{ margin-top:30px !important; padding-top:30px !important; border-top:1px solid #e6e6e6 !important; } /* --- Titre unique du groupe, porté par le premier bloc ------------------- */ #search_filters .kdm-first{ position:relative !important; padding-top:44px !important; } #search_filters .kdm-first::before{ content:"Nombre de joueurs"; position:absolute; top:0; left:0; font-size:20px; font-weight:700; color:#282828; line-height:1.2; } /* ========================================================================== K'ADO MINO — Mégamenu : couleur du rayon à l'intérieur du panneau Une teinte par onglet, reprise du bouton correspondant. À coller à la suite du champ CSS personnalisé (Axon Theme Customizer). ========================================================================== */ .nrt_mega_12 .menu_sub{ --kdm:#12B5CB; } /* Bébé & Éveil */ .nrt_mega_13 .menu_sub{ --kdm:#E5188F; } /* Jeux de société */ .nrt_mega_14 .menu_sub{ --kdm:#2FA84F; } /* Cartes à collectionner */ .nrt_mega_15 .menu_sub{ --kdm:#1A54C4; } /* Jouets */ .nrt_mega_16 .menu_sub{ --kdm:#F28C1E; } /* Créatif & Culture */ .nrt_mega_17 .menu_sub{ --kdm:#E8281C; } /* Plein air */ .nrt_mega_18 .menu_sub{ --kdm:#7A3FB0; } /* Maison & Cadeaux */ .nrt_mega_19 .menu_sub{ --kdm:#546E7A; } /* Actualités */ /* Liseré haut du panneau */ .menu_sub.style_wide{ border-top:4px solid var(--kdm,#E5188F) !important; } /* Chapeaux de colonne */ .menu_sub .element_a_depth_1{ display:inline-block !important; color:var(--kdm,#E5188F) !important; font-weight:700 !important; font-size:15px !important; letter-spacing:.4px !important; } .menu_sub .element_li_depth_1 > .element_a_depth_1{ margin-bottom:4px !important; } .menu_sub .element_a_depth_1::after{ content:""; display:block; width:30px; height:3px; margin-top:8px; background:var(--kdm,#E5188F); border-radius:2px; } /* Liens de rayon */ .menu_sub .element_a_depth_2{ color:#3f3f3f !important; transition:color .15s ease, padding-left .15s ease; } .menu_sub .element_a_depth_2:hover{ color:var(--kdm,#E5188F) !important; padding-left:6px !important; } /* ========================================================================== K'ADO MINO — LA PIÈCE TCG, TOUTE LA BRANCHE À coller dans le CSS GLOBAL : Axon Theme Customizer → CUSTOM CODES → CSS personnalisé, à la suite de ce qui s'y trouve déjà. Une seule pose pour tout le TCG. La portée est donnée par les classes que le thème met sur : category-id-XXX et category-id-parent-XXX. Toute nouvelle sous-catégorie d'un des parents listés hérite du style automatiquement — rien à refaire. Si un jour tu crées un NIVEAU parent inédit dans le TCG, ajoute son identifiant aux deux listes ci-dessous. C'est la seule maintenance. Le principe de tri reste le même qu'avant : catégorie AVEC image → tuile à logo catégorie SANS image → tuile « carte » (niveaux profonds) → cartouche de service (uniquement sur la 493) ========================================================================== */ /* ========================================================================== 1. ZONE SOMBRE — sur toute la branche ========================================================================== */ :is( body.category-id-493, body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) .product-list-subcategories{ background:linear-gradient(180deg,#15171C 0%,#1B1E25 100%) !important; margin:0 calc(50% - 50vw) 34px !important; padding:44px calc(50vw - 50%) 48px !important; position:relative !important; } :is( body.category-id-493, body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) .product-list-subcategories .row{ display:flex !important; flex-wrap:wrap !important; align-items:stretch !important; } /* ========================================================================== 2. BANDEAU DE TITRE — graphite partout dans la branche ========================================================================== */ :is( body.category-id-493, body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) .page-title{ background:#15171C !important; background-image:none !important; } :is( body.category-id-493, body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) .page-title h1, :is( body.category-id-493, body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) .page-title .h1{ color:#F2F3F5 !important; text-shadow:none !important; } /* ========================================================================== 3. TUILES À LOGO — catégories qui ont une image ========================================================================== */ .product-list-subcategories a.wrapp-category:has(.category-image){ display:flex !important; flex-direction:column !important; height:auto !important; background:#20242C !important; border:1px solid rgba(255,255,255,.09) !important; border-radius:10px !important; padding:13px 13px 15px !important; box-shadow:none !important; transition:border-color .16s ease, transform .16s ease, background .16s ease; } .product-list-subcategories a.wrapp-category:has(.category-image):hover{ background:#252A33 !important; border-color:rgba(255,255,255,.20) !important; transform:translateY(-3px); } .product-list-subcategories .category-image{ width:100% !important; height:auto !important; aspect-ratio:16/10 !important; background:#0E1014 !important; border-radius:7px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:12px !important; overflow:hidden !important; } .product-list-subcategories .category-image img{ width:100% !important; height:100% !important; object-fit:contain !important; max-width:none !important; max-height:none !important; } .product-list-subcategories a.wrapp-category:has(.category-image) .category-title{ position:static !important; height:auto !important; width:auto !important; margin:11px 0 0 !important; padding:0 !important; background:none !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:.6px !important; line-height:1.25 !important; text-transform:uppercase !important; color:#F2F3F5 !important; text-align:center !important; } /* ========================================================================== 4. TUILES « CARTE » — catégories sans image, niveaux profonds Une silhouette de carte en liseré parchemin, traversée d'un reflet oblique. ========================================================================== */ :is( body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) .product-list-subcategories a.wrapp-category:not(:has(.category-image)){ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; height:auto !important; min-height:0 !important; aspect-ratio:16/10 !important; padding:16px !important; border-radius:10px !important; box-shadow:none !important; overflow:hidden !important; background: linear-gradient(115deg, transparent 28%, rgba(201,188,168,.13) 44%, rgba(201,188,168,.04) 52%, transparent 66%), linear-gradient(160deg,#232833 0%,#191D25 100%) !important; border:1px solid rgba(255,255,255,.09) !important; transition:border-color .16s ease, transform .16s ease; } /* la silhouette de carte, en retrait */ :is( body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) .product-list-subcategories a.wrapp-category:not(:has(.category-image))::before{ content:"" !important; position:absolute !important; top:10px !important; bottom:10px !important; left:50% !important; transform:translateX(-50%) !important; width:44% !important; min-width:74px !important; border:1px solid rgba(201,188,168,.34) !important; border-radius:6px !important; pointer-events:none !important; } :is( body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) .product-list-subcategories a.wrapp-category:not(:has(.category-image)):hover{ border-color:rgba(201,188,168,.55) !important; transform:translateY(-3px); } /* le libellé, par-dessus la silhouette */ :is( body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) .product-list-subcategories a.wrapp-category:not(:has(.category-image)) .category-title{ position:relative !important; z-index:2 !important; margin:0 !important; padding:0 10px !important; width:auto !important; height:auto !important; background:none !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:.7px !important; line-height:1.3 !important; text-transform:uppercase !important; color:#F2F3F5 !important; text-align:center !important; text-shadow:0 1px 6px rgba(0,0,0,.65) !important; } /* ========================================================================== 5. CARTOUCHES DE SERVICE — uniquement sur la page 493 ========================================================================== */ body.category-id-493 .product-list-subcategories a.wrapp-category:not(:has(.category-image)){ aspect-ratio:auto !important; justify-content:flex-start !important; background:transparent !important; border:1px solid rgba(255,255,255,.09) !important; border-left:3px solid #C9BCA8 !important; border-radius:8px !important; padding:18px 20px !important; } body.category-id-493 .product-list-subcategories a.wrapp-category:not(:has(.category-image))::before{ display:none !important; } body.category-id-493 .product-list-subcategories a.wrapp-category:not(:has(.category-image)):hover{ background:#232830 !important; border-color:rgba(255,255,255,.20) !important; border-left-color:#C9BCA8 !important; transform:none !important; } body.category-id-493 .product-list-subcategories a.wrapp-category:not(:has(.category-image)) .category-title{ text-align:left !important; font-size:13px !important; text-shadow:none !important; } body.category-id-493 .product-list-subcategories .row > div:has(a[href*="426-accessoires"]), body.category-id-493 .product-list-subcategories .row > div:has(a[href*="451-precommandes"]){ flex:0 0 33.333% !important; max-width:33.333% !important; margin-top:16px !important; } /* ========================================================================== 6. MOBILE ========================================================================== */ @media (max-width: 767px){ .product-list-subcategories{ padding-top:30px !important; padding-bottom:32px !important; } body.category-id-493 .product-list-subcategories .row > div:has(a[href*="426-accessoires"]), body.category-id-493 .product-list-subcategories .row > div:has(a[href*="451-precommandes"]){ flex:0 0 100% !important; max-width:100% !important; margin-top:10px !important; } } /* --- Fil d'Ariane du TCG : plus lisible ---------------------------------- */ :is( body.category-id-493, body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) :is(.axps-breadcrumb, .breadcrumb){ font-size:13.5px !important; letter-spacing:.2px !important; } :is( body.category-id-493, body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) :is(.axps-breadcrumb, .breadcrumb) a{ color:#C4CAD4 !important; text-decoration:none !important; } :is( body.category-id-493, body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) :is(.axps-breadcrumb, .breadcrumb) a:hover{ color:#FFFFFF !important; } :is( body.category-id-493, body[class*="category-id-parent-323"], body[class*="category-id-parent-324"], body[class*="category-id-parent-325"], body[class*="category-id-parent-334"], body[class*="category-id-parent-346"], body[class*="category-id-parent-425"], body[class*="category-id-parent-426"], body[class*="category-id-parent-444"], body[class*="category-id-parent-455"], body[class*="category-id-parent-457"], body[class*="category-id-parent-493"], body[class*="category-id-parent-500"] ) :is(.axps-breadcrumb, .breadcrumb) span{ color:#C9BCA8 !important; }