.product_list.list .ajax_block_product .pro_first_box{max-width: 430px;}.product_list.list .ajax_block_product .pro_second_box{margin-left: 450px;}.is_rtl .product_list.list .ajax_block_product .pro_second_box{margin-left:0;margin-right: 450px;}.products_sldier_swiper .ajax_block_product .pro_outer_box.cart_default, .product_list.grid .ajax_block_product .pro_outer_box.cart_default{max-width: 100px;}.products_sldier_swiper .ajax_block_product .pro_outer_box.home_default, .product_list.grid .ajax_block_product .pro_outer_box.home_default{max-width: 430px;}.products_sldier_swiper .ajax_block_product .pro_outer_box.large_default, .product_list.grid .ajax_block_product .pro_outer_box.large_default{max-width: 850px;}.products_sldier_swiper .ajax_block_product .pro_outer_box.medium_default, .product_list.grid .ajax_block_product .pro_outer_box.medium_default{max-width: 700px;}.images-container, .images-container .pro_gallery_thumbs_horizontal{margin-left: auto;margin-right:auto;}.images-container.pro_number_1, .images-container.pro_number_1 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_2, .images-container.pro_number_2 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_3, .images-container.pro_number_3 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_4, .images-container.pro_number_4 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_5, .images-container.pro_number_5 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_6, .images-container.pro_number_6 .pro_gallery_thumbs_horizontal{max-width: 700px;}.products_sldier_swiper .ajax_block_product .pro_outer_box.small_default, .product_list.grid .ajax_block_product .pro_outer_box.small_default{max-width: 140px;}.products_sldier_swiper .ajax_block_product .pro_outer_box.superlarge_default, .product_list.grid .ajax_block_product .pro_outer_box.superlarge_default{max-width: 1000px;}.st_image_scrolling_item{margin-bottom:20px;}.st_image_scrolling_wrap .st_image_scrolling_item {padding-left:10px;padding-right:10px;}.st_image_scrolling_wrap .row{margin-left:-10px;margin-right:-10px;}.featured_categories_item .pro_outer_box.category_default{max-width: 36px;}.featured_categories_item .pro_outer_box.home_default{max-width: 430px;}.featured_categories_item .pro_outer_box.medium_default{max-width: 700px;}body{font-family:Comfortaa, Tahoma, sans-serif, Arial;font-weight:400;}.price,#our_price_display,.old_price,.sale_percentage{font-family:"Comfortaa", Tahoma, sans-serif, Arial;font-weight:400;}.btn.ajax_add_to_cart_button, .btn.add-to-cart, .btn.view_button{font-family:"Comfortaa", Tahoma, sans-serif, Arial;font-weight:400;}.style_wide .ma_level_1{font-weight:700;}#st_mega_menu_wrap .ma_level_0, .menu_item{height: 58px;line-height: 58px;}.title_block .title_block_inner, .page_heading, .product_info_tabs .nav-tabs .nav-link, .pc_slider_block_container .nav-tabs .nav-link, .heading_font{font-weight:700;text-transform: none;}.st-menu-title{font-weight:700;text-transform: none;}.title_block .title_block_inner, .page_heading {}.st_mega_menu .ma_level_0, .mobile_bar_tri_text, #st_mega_menu_column_mobile .mo_advanced_ma_level_0{text-transform: none;font-weight:700;}#st_mobile_menu .mo_ma_level_0{text-transform: none;}.style_wide .ma_level_1{text-transform: none;}.style_wide .ma_level_1{}.style_wide .mu_level_2 a.ma_item, .stmenu_multi_level a.ma_item,.mo_sub_a{}.mv_item{}#st_mega_menu_column_desktop .ma_level_0{}.product_name_wrap .product_name{}#footer .title_block .title_block_inner{font-size: 16px;}.title_block .title_block_inner,.page_heading, .table-bordered thead th, .heading_color, .card-header{color: #000000;}.title_style_0,.title_style_0 .title_block_inner{border-bottom-width:0px;}.title_style_0 .title_block_inner{margin-bottom:-0px;}body,a.text_color{color: #000000;}a,.link_color, a:focus, .additional-information a.link_color .dropdown_tri, .checkout-step .sttab_2_1 .nav-tabs .nav-link, .add_to_love, .add_to_love:hover, .add_to_wishlit, .add_to_wishlit:hover .stcompare_add, .stcompare_add:hover{color: #000000;}a:hover, a.link_color:hover, button.link_color:hover, .additional-information a.link_color:hover, .theme_color, a.theme_color, a.theme_color:hover, .st_added, .add_to_love.st_added, .add_to_love.st_added:hover, .add_to_wishlit.st_added, .add_to_wishlit.st_added:hover, .stcompare_add.st_added, .stcompare_add.st_added:hover, .dropdown_wrap.open .dropdown_tri, .ajax_block_product .s_title_block a:hover, .block_blog .s_title_block a:hover, .btn-link:hover{color: #51C073;}a.text_color:hover{color: #51C073;}.title_block a.title_block_inner:hover{color: #51C073;}#st_mega_menu_wrap .ml_level_0.current .ma_level_0,#st_mega_menu_wrap .ma_level_0:hover{border-bottom-color:#51C073;}.checkout-step .sttab_2_1 .nav-tabs .nav-link.active, .checkout-step .sttab_2_1 .nav-tabs .nav-link:hover, .checkout-step .sttab_2_1 .nav-tabs .nav-link:focus{color:#51C073;}.btn-default{color: #ffffff;border-color:#666666;background-color: #666666;}.btn-default:hover,.btn-default:focus{-webkit-box-shadow: none; box-shadow: none;border-color: #00a161;background-color: #00a161;}.btn-white:hover,.btn-white:focus{border-color:#ffffff;-webkit-box-shadow: none; box-shadow: none;background-color: #ffffff;color:#444444;}.btn.ajax_add_to_cart_button, .btn.add-to-cart{color: #ffffff;background-color: #51C073;border-color:#51C073;}.btn.ajax_add_to_cart_button:hover, .btn.add-to-cart:hover{color: #ffffff;background-color: #5766F2;border-color: #5766F2;}#top_bar .top_bar_item .header_item{color:#000000;}#top_bar .top_bar_item .header_item:hover,#top_bar .dropdown_wrap.open .dropdown_tri{color:#51C073;}#top_bar{background-color:#faf9fa;}.nav_bar .header_item{height:38px;line-height:38px;}.nav_bar.horizontal-s-fullheight .top_bar_item:before{height:38px;}#st_mega_menu_wrap .stmenu_sub{border-top-width:0px;}#st_mega_menu_wrap .ma_level_0{margin-bottom:-0px;border-bottom-width:0px;}#top_extra .st_mega_menu_container{border-bottom-width:0px;}#header_primary #st_mega_menu_wrap{border-bottom-width:0px;}#st_mega_menu_wrap .stmenu_sub{border-top-color:#444444;}.st_mega_menu_container, .boxed_megamenu #st_mega_menu_wrap,#header_primary #st_mega_menu_wrap{border-bottom-color:#444444;}#st_mega_menu_wrap .ml_level_0.current .ma_level_0,#st_mega_menu_wrap .ma_level_0:hover{border-bottom-color:#E54D26;}#st_ma_0{ text-align: left; }#footer-bottom,#footer-bottom a{color:#000000;}#footer-bottom a{color:#06a161;}#left_column.sidebar_opened,#right_column.sidebar_opened{background-color:#fff;}.st_mega_menu_container.stuck, #st_header.stuck, .steasym_main.stuck{background: #ffffff;background:rgba(255,255,255,0.95);}#st_header.stuck, #top_extra .st_mega_menu_container.stuck, .steasym_main.stuck{-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.1); -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.1); box-shadow: 0px 1px 4px rgba(0,0,0,0.1); }#footer-secondary{background-color:#faf9fa;}#footer-bottom{background-color:#ffffff;}.header-container.has_sticky{padding-bottom:58px;}.fto-glyph.icon_btn:before{ content: "\e73d"; }.fto-star.icon_btn:before{ content: "\e8e0"; }.fto-ajust.icon_btn:before{ content: "\e81e"; }.quick-view .fto-search-1.icon_btn:before{ content: "\e80b"; }.fto-eye-2.icon_btn:before{ content: "\e818"; }.fto-user.icon_btn:before{ content: "\e850"; }.fto-history.icon_btn:before{ content: "\e87a"; }.product_info_tabs.sttab_block .nav-tabs .nav-link, .pro_more_info .mobile_tab .mobile_tab_name{ color: #000000; }.product_info_tabs.sttab_block .nav-tabs .nav-link.active, .product_info_tabs.sttab_block .nav-tabs .nav-link:hover, .product_info_tabs.sttab_block .nav-tabs .nav-link:focus, .pro_more_info .mobile_tab .st_open .mobile_tab_name{ color: #ffffff; }.product_info_tabs.sttab_block .nav-tabs .nav-link, .pro_more_info .mobile_tab .mobile_tab_title{ background-color: #FFFFFF; }.pro_more_info .mobile_tab .mobile_tab_name{ padding-left: 8px; }.product_info_tabs.sttab_block.sttab_2_2 .nav-tabs .nav-link.active, .product_info_tabs.sttab_block.sttab_2_2 .nav-tabs .nav-link:hover, .product_info_tabs.sttab_block.sttab_2_2 .nav-tabs .nav-link:focus{ border-top-color: transparent; }.product_info_tabs.sttab_block.sttab_2_3 .nav-tabs .nav-link.active, .product_info_tabs.sttab_block.sttab_2_3 .nav-tabs .nav-link:hover, .product_info_tabs.sttab_block.sttab_2_3 .nav-tabs .nav-link:focus{ border-bottom-color: transparent; }.product_info_tabs.sttab_block.sttab_3_2 .nav-tabs .nav-link.active, .product_info_tabs.sttab_block.sttab_3_2 .nav-tabs .nav-link:hover, .product_info_tabs.sttab_block.sttab_3_2 .nav-tabs .nav-link:focus{ border-left-color: transparent; }.product_info_tabs.sttab_block.sttab_2_2 .nav-tabs{ border-bottom-color: #FFFFFF; }.product_info_tabs.sttab_block.sttab_2_3 .nav-tabs{ border-bottom-color: #FFFFFF; }.product_info_tabs.sttab_block.sttab_2_3 .nav-tabs .nav-link{ border-bottom-color: #FFFFFF; }.accordion_more_info .mobile_tab .tab-pane{ border-bottom-color: #FFFFFF; }.product_info_tabs.sttab_block .nav-tabs .nav-link.active, .product_info_tabs.sttab_block .nav-tabs .nav-link:hover, .product_info_tabs.sttab_block .nav-tabs .nav-link:focus, .accordion_more_info .mobile_tab .st_open .mobile_tab_title{ background-color: #5766F2; }.product_info_tabs .tab-pane-body{ background-color: #ffffff; }.product_info_tabs .tab-pane-body{ padding-left:0.75rem; padding-right:0.75rem; }body#index .header-container{ margin-bottom: 0px; }.products_sldier_swiper .pro_outer_box:hover .pro_second_box,.product_list.grid .pro_outer_box:hover .pro_second_box{ background-color: #FAFAFA; }.products_slider .swiper-button-tr .swiper-button{ color: #ffffff; }.products_slider .swiper-button-tr .swiper-button{ background-color: #999999; }.products_slider .swiper-button-tr .swiper-button:hover{ background-color: #555555; }.products_slider .swiper-button-tr .swiper-button.swiper-button-disabled, .products_slider .swiper-button-tr .swiper-button.swiper-button-disabled:hover{background-color:#cccccc;}.pro_gallery_top_container .swiper-button-lr .swiper-button{color:#ffffff;}.pro_gallery_top_container .swiper-button-lr .swiper-button:hover{color:#ffffff;}.pro_gallery_top_container .swiper-button-lr .swiper-button.swiper-button-disabled, .pro_gallery_top_container .swiper-button-lr .swiper-button.swiper-button-disabled:hover{color:#ffffff;}.pro_gallery_top_container .swiper-button-lr .swiper-button{background-color:#5766F2;}.pro_gallery_top_container .swiper-button-lr .swiper-button:hover{background-color:#51C073;}.pro_gallery_top_container .swiper-button-lr .swiper-button.swiper-button-disabled, .pro_gallery_top_container .swiper-button-lr .swiper-button.swiper-button-disabled:hover{background-color:#7985F5;}.boxed_page_wrapper{-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.1); box-shadow: 0px 0px 3px rgba(0,0,0,0.1); }#mobile_bar_top{ height: 50px;}#st_header .shop_logo{width: 170px;}#mobile_bar .mobile_logo{width: 140px;}.pro_gallery_thumbs_vertical .swiper-slide{height: 102px;}.ajax_block_product .s_title_block a,.pro_column_right .s_title_block a{}.ajax_block_product .s_title_block a,.pro_column_right .s_title_block a{font-weight:700;}#js-product-list .products.product_list.grid .product_list_item{padding-left:8px;padding-right:7px;}#js-product-list .products.product_list.grid{margin-left:-8px;margin-right:-7px;}body#authentication .columns-container{padding-top: 38px;}body#authentication .columns-container{padding-bottom: 38px;}.checkout-step .sttab_2_1 .nav-tabs .nav-link.active, .checkout-step .sttab_2_1 .nav-tabs .nav-link:hover, .checkout-step .sttab_2_1 .nav-tabs .nav-link:focus{border-bottom-color: #ffffff;}#st_mega_menu_wrap .ma_level_0{padding-left:12px;padding-right:12px;}@media only screen and (min-width:1200px){#st_mega_menu_wrap .ma_level_0{padding-left:20px;padding-right:20px;}}.btn-default, .go, .add-to-cart.btn, .ajax_add_to_cart_button.btn span, .view_button.btn span{font-size:16px;}.btn-default i, .go i, .add-to-cart.btn i, .ajax_add_to_cart_button.btn i, .view_button.btn i{font-size:18px;}@media (max-width: 1219px) { .images-container.pro_number_lg_1, .images-container.pro_number_lg_1 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_lg_2, .images-container.pro_number_lg_2 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_lg_3, .images-container.pro_number_lg_3 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_lg_4, .images-container.pro_number_lg_4 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_lg_5, .images-container.pro_number_lg_5 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_lg_6, .images-container.pro_number_lg_6 .pro_gallery_thumbs_horizontal{max-width: 700px;} }@media (max-width: 991px) { .images-container.pro_number_md_1, .images-container.pro_number_md_1 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_md_2, .images-container.pro_number_md_2 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_md_3, .images-container.pro_number_md_3 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_md_4, .images-container.pro_number_md_4 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_md_5, .images-container.pro_number_md_5 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_md_6, .images-container.pro_number_md_6 .pro_gallery_thumbs_horizontal{max-width: 700px;} }@media (max-width: 767px) { .images-container.pro_number_sm_1, .images-container.pro_number_sm_1 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_sm_2, .images-container.pro_number_sm_2 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_sm_3, .images-container.pro_number_sm_3 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_sm_4, .images-container.pro_number_sm_4 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_sm_5, .images-container.pro_number_sm_5 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_sm_6, .images-container.pro_number_sm_6 .pro_gallery_thumbs_horizontal{max-width: 700px;} }@media (max-width: 479px) { .images-container.pro_number_xs_1, .images-container.pro_number_xs_1 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_xs_2, .images-container.pro_number_xs_2 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_xs_3, .images-container.pro_number_xs_3 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_xs_4, .images-container.pro_number_xs_4 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_xs_5, .images-container.pro_number_xs_5 .pro_gallery_thumbs_horizontal{max-width: 700px;} .images-container.pro_number_xs_6, .images-container.pro_number_xs_6 .pro_gallery_thumbs_horizontal{max-width: 700px;} } /* mintymigration:category-full-width */ @media (min-width: 768px) { #left_column { display: none !important; } #content-wrapper #center_column, #center_column { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } #js-product-list .products.product_list > .product_list_item { flex: 0 0 25% !important; max-width: 25% !important; } } /* ===== MINT-6040 — recette monpetitmug (shop 5) ===== */ /* [1] Palette : MPM n'a ni le vert (#51C073) ni le bleu-violet (#5766F2) du theme totebag. Meme principe que Feylt (shop 3) et La Puzzlerie (shop 4) : on surcharge les variables au niveau de body.shop-5 plutot que de hardcoder !important au cas par cas. Corrige d'un coup : pastilles Panier/Mon compte du header, encadre de la miniature active, onglet produit actif, liens/bordures divers. */ body.shop-5 { --vert-1: #1A8BA0; /* bleu MPM */ --vert-2: #1A8BA0; --bleu-1: #1A8BA0; --bleu-2: #1A8BA0; --font-text: 'Questrial'; /* le theme totebag est en Comfortaa */ } /* Onglet produit actif : le fond vient de customer-sN.css (genere par le theme) en dur */ body.shop-5 .product_info_tabs.sttab_block .nav-tabs .nav-link.active, body.shop-5 .product_info_tabs.sttab_block .nav-tabs .nav-link:hover, body.shop-5 .product_info_tabs.sttab_block .nav-tabs .nav-link:focus, body.shop-5 .accordion_more_info .mobile_tab .st_open .mobile_tab_title { background-color: #1A8BA0; } /* Encadre de la miniature active de la galerie produit */ body.shop-5 .pro_gallery_thumbs_container .swiper-slide-thumb-active img, body.shop-5 .pro_gallery_thumbs_container .swiper-slide.active img, body.shop-5 #product .pro_gallery_thumbs_container .swiper-slide-thumb-active { border-color: #1A8BA0 !important; } /* [2] Espace lateral de la section onglets produit (48px de chaque cote) */ body.shop-5 .product_info_tabs { padding-left: 48px; padding-right: 48px; } /* [3] Reassurance FP (variante _1_1) : icone a gauche, textes empiles a droite. Meme approche que le bloc shop-3 (Feylt) : le markup icon_with_text/1.tpl n'a PAS de wrapper .easy_content — les enfants directs sont le bloc icone (
), puis .easy_header, .easy_sub_header, .easy_text, .easy_link. Un display:flex mettrait TOUS ces blocs sur la meme ligne : on flotte le bloc icone a gauche, les textes s'empilent d'eux-memes a droite. SCOPE .product-information obligatoire : la meme classe sert aux blocs de l'onglet Livraison (sous .product_info_tabs), qui doivent rester pilotes par le module. NB vs Feylt : pas de decalage vertical du texte (Feylt descend le texte de 20px pour le centrer sur sa pastille de 56px ; MPM a un glyphe nu). On neutralise le margin-bottom herite du layout empile (mar_b1) qui creusait un vide vertical entre les items. */ body.shop-5 .product-information .easy_icon_with_text_1_1 { display: flow-root; } body.shop-5 .product-information .easy_icon_with_text_1_1 > div:first-child { float: left; margin-right: 12px; } body.shop-5 .product-information .easy_icon_with_text_1_1 .easy_icon { margin-bottom: 0; } body.shop-5 .product-information .easy_icon_with_text_1_1 .easy_header, body.shop-5 .product-information .easy_icon_with_text_1_1 .easy_sub_header, body.shop-5 .product-information .easy_icon_with_text_1_1 .easy_text { white-space: normal; } /* [4] Boutons panier (modale d'ajout ET panier lateral) : une couleur MPM par bouton, l'autre au survol. "Panier d'achat" = orange -> bleu ; "Passer a la caisse" = bleu -> orange. ATTENTION : "Passer a la caisse" porte A LA FOIS .btn-default et .btn_to_checkout, donc la regle generique doit exclure .btn_to_checkout (:not) sinon elle gagne en specificite et repeint le bouton checkout. !important necessaire pour battre le style du theme. */ body.shop-5 .cart-content-btn .btn.btn-default:not(.btn_to_checkout), body.shop-5 .small_cart_btn.btn:not(.btn_to_checkout):not(.side_continue) { background-color: #FBA500 !important; border-color: #FBA500 !important; color: #ffffff !important; } body.shop-5 .cart-content-btn .btn.btn-default:not(.btn_to_checkout):hover, body.shop-5 .cart-content-btn .btn.btn-default:not(.btn_to_checkout):focus, body.shop-5 .small_cart_btn.btn:not(.btn_to_checkout):not(.side_continue):hover, body.shop-5 .small_cart_btn.btn:not(.btn_to_checkout):not(.side_continue):focus { background-color: #1A8BA0 !important; border-color: #1A8BA0 !important; color: #ffffff !important; } body.shop-5 .cart-content-btn .btn.btn_to_checkout, body.shop-5 .btn.btn_to_checkout, body.shop-5 .small_cart_btn.btn.btn_to_checkout { background-color: #1A8BA0 !important; border-color: #1A8BA0 !important; color: #ffffff !important; } body.shop-5 .cart-content-btn .btn.btn_to_checkout:hover, body.shop-5 .btn.btn_to_checkout:hover, body.shop-5 .btn.btn_to_checkout:focus, body.shop-5 .small_cart_btn.btn.btn_to_checkout:hover { background-color: #FBA500 !important; border-color: #FBA500 !important; color: #ffffff !important; } /* [5] Logo : tampon rond MPM, 110x110 demande par la cliente (desktop + mobile). Le theme genere #st_header .shop_logo{width:170px} et l' porte width=100 height=28 en dur dans le HTML, d'ou l'ecrasement : on fixe les deux dimensions + object-fit. */ body.shop-5 #st_header .shop_logo, body.shop-5 #header_left .shop_logo { width: 110px !important; } body.shop-5 #st_header .shop_logo img, body.shop-5 #header_left .shop_logo img.logo, body.shop-5 #mobile_bar .mobile_logo img { width: 110px !important; height: 110px !important; object-fit: contain !important; } /* [6] Croix de fermeture (modale d'ajout .st_modal_close et panier lateral .close_right_side) : fond bleu MPM, fond orange au survol, glyphe blanc dans les deux etats. !important pour battre le style du theme. */ body.shop-5 .st_modal_close, body.shop-5 .close_right_side { background-color: #1A8BA0 !important; color: #ffffff !important; } body.shop-5 .st_modal_close:hover, body.shop-5 .st_modal_close:focus, body.shop-5 .close_right_side:hover, body.shop-5 .close_right_side:focus { background-color: #FBA500 !important; color: #ffffff !important; } body.shop-5 .st_modal_close i, body.shop-5 .st_modal_close i::before, body.shop-5 .st_modal_close:hover i, body.shop-5 .st_modal_close:hover i::before, body.shop-5 .close_right_side i, body.shop-5 .close_right_side i::before, body.shop-5 .close_right_side:hover i, body.shop-5 .close_right_side:hover i::before { color: #ffffff !important; } /* [7] Megamenu : centrage du sous-menu — RETIRE. Tentative abandonnee : le .mm_columns_ul est position:absolute / left:0 / width:100% et ses 4 colonnes sont en largeur %. En l'ancrant sur le
  • avec width:max-content, les colonnes se superposaient (panneau illisible). Un centrage propre demanderait de figer une largeur explicite du panneau — a definir avec le client avant de le retenter. */ /* [8] Panier & checkout : hover orange sur les boutons d'action bleus. Deux pieges evites ici : - [data-link-action="add-voucher"] est porte par le
    du bloc promo, pas par le bouton : le cibler repeignait toute la zone (input compris). On vise le vrai bouton .promo-code .input-group-btn .btn. - "Continuer mes achats" est un avec une fleche i.fto-left-open, mais ce n'est pas un bouton a fond : on l'exclut du fond orange et on lui met seulement le texte en orange. */ body.shop-5#cart .btn.btn-default:not(.disabled):not(:has(> i.fto-left-open)):hover, body.shop-5#cart .btn.btn-default:not(.disabled):not(:has(> i.fto-left-open)):focus, body.shop-5#cart .btn.btn-primary:hover, body.shop-5#cart .btn.btn-primary:focus, body.shop-5#cart .promo-code .input-group-btn .btn:hover, body.shop-5#checkout .btn.btn-default:not(.disabled):not(:has(> i.fto-left-open)):hover, body.shop-5#checkout .btn.btn-default:not(.disabled):not(:has(> i.fto-left-open)):focus, body.shop-5#checkout .btn.btn-primary:hover, body.shop-5#checkout .btn.btn-primary:focus, body.shop-5#checkout .promo-code .input-group-btn .btn:hover, body.shop-5#checkout button[name="confirmDeliveryOption"]:hover, body.shop-5#checkout #payment-confirmation button:hover, body.shop-5#order .btn.btn-default:not(.disabled):not(:has(> i.fto-left-open)):hover, body.shop-5#order .btn.btn-primary:hover { background-color: #FBA500 !important; border-color: #FBA500 !important; color: #ffffff !important; } /* Liens "retour" (fleche gauche) : pas de fond, juste le texte en orange au survol. */ body.shop-5#cart .btn.btn-default:has(> i.fto-left-open):hover, body.shop-5#checkout .btn.btn-default:has(> i.fto-left-open):hover, body.shop-5#order .btn.btn-default:has(> i.fto-left-open):hover { color: #FBA500 !important; } /* [9] Page connexion (body#authentication). "Connexion" (.btn-primary) et l'oeil du mot de passe (.show_password) : bleu MPM, orange au survol. "Creez votre compte" (.no_account) : orange, bleu au survol. */ body.shop-5#authentication .btn.btn-primary:hover, body.shop-5#authentication .btn.btn-primary:focus, body.shop-5#authentication .btn.show_password:hover, body.shop-5#authentication .btn.show_password:focus { background-color: #FBA500 !important; border-color: #FBA500 !important; color: #ffffff !important; } body.shop-5#authentication .no_account.btn { background-color: #FBA500 !important; border-color: #FBA500 !important; color: #ffffff !important; } body.shop-5#authentication .no_account.btn:hover, body.shop-5#authentication .no_account.btn:focus { background-color: #1A8BA0 !important; border-color: #1A8BA0 !important; color: #ffffff !important; } /* [10] Bouton de visibilite du mot de passe (.show_password), tous contextes (connexion, inscription, checkout, adresses) : hover orange. Le theme met un hover var(--bleu-1) global, et surtout reduit le rayon a 6px dans le contexte .form-group-small.st_form_item_password (checkout) alors que la regle globale est 0 10px 10px 0 : on realigne pour que le checkout matche la page connexion. */ body.shop-5 button.btn.show_password:hover, body.shop-5 button.btn.show_password:focus { background-color: #FBA500 !important; color: #ffffff !important; } body.shop-5 .form-group.form-group-small.st_form_item_password button.btn.show_password, body.shop-5#checkout button.btn.show_password { border-radius: 0 10px 10px 0; } /* [11] Compteur panier. ATTENTION : en desktop, .amount_circle n'est PAS une pastille ronde — c'est le texte "X produit(s)" (le :after de .lang-fr ajoute " produit(s)"). Lui mettre un fond peint donc tout le libelle : on le laisse sans fond, juste le texte en bleu MPM. Seule la barre mobile a une vraie pastille ronde, qui elle garde un fond bleu. */ body.shop-5 #header_right .blockcart .ajax_cart_quantity.amount_circle, body.shop-5 #header_right .ajax_cart_bag .amount_circle { background: transparent !important; background-color: transparent !important; color: #1A8BA0 !important; } body.shop-5 #mobile_bar .amount_circle, body.shop-5 #mobile_bar_right .amount_circle, body.shop-5 #mobile_bar .ajax_cart_quantity.amount_circle { background: #1A8BA0 !important; background-color: #1A8BA0 !important; color: #ffffff !important; } /* [12] Croix de fermeture des panneaux lateraux (panier, recherche, menu mobile). Le glyphe fto-cancel-2 EST deja un rond barre : pas de fond ni de border-radius a ajouter, on colore l'icone elle-meme. Bleu MPM, orange au survol. */ body.shop-5 .st-menu-header a[class*="close"], body.shop-5 .st-menu-header a[class*="close"] i, body.shop-5 .st-menu-header a[class*="close"] i::before, body.shop-5 #side_stmobilemenu .close_right_side, body.shop-5 #side_stmobilemenu .close_right_side i, body.shop-5 #side_stmobilemenu .close_right_side i::before { background: none !important; background-color: transparent !important; border-radius: 0 !important; color: #1A8BA0 !important; } body.shop-5 .st-menu-header a[class*="close"]:hover, body.shop-5 .st-menu-header a[class*="close"]:hover i, body.shop-5 .st-menu-header a[class*="close"]:hover i::before, body.shop-5 #side_stmobilemenu .close_right_side:hover, body.shop-5 #side_stmobilemenu .close_right_side:hover i, body.shop-5 #side_stmobilemenu .close_right_side:hover i::before { background: none !important; background-color: transparent !important; color: #FBA500 !important; } /* [13] Encoche "connecte" sur l'icone Mon compte (:after de .header_icon_btn_icon, pastille 14x14 en haut a droite) : fond orange MPM. */ body.shop-5 .userinfo_mod_top.dropdown_wrap.top_bar_item .dropdown_tri span.header_icon_btn_icon:after, body.shop-5 #header_right .userinfo_mod_top span.header_icon_btn_icon:after { background: #FBA500 !important; background-color: #FBA500 !important; } /* [14] Menu mobile : masquer le selecteur de langue (site FR uniquement). Bloc .langues-mobile du theme, qui embarque le module stlanguageselector. */ body.shop-5 #side_stmobilemenu .langues-mobile, body.shop-5 .langues-mobile { display: none !important; } /* [15] Menu mobile : pave de liens du bas (telephone, e-mail, FAQ, formulaire de contact). Replique du bloc Totebag (#st_mo_menu_27) pour l'entree MPM 100208, creee en base sur le meme modele (entree is_mega sans lien + 1 colonne + 4 enfants item_t=4). L'entree porteuse a un titre technique ("BLOC MOBILE MENU - LIENS BAS - MONPETITMUG") qu'on masque, et on force l'ouverture permanente de sa sous-liste. Selecteur par ID : l'id 100208 n'existe que sur la boutique 5, pas besoin de scope. */ ul#st_mobile_menu_ul li#st_mo_menu_100208.mo_ml_level_0 { font-weight: normal; } #st_mobile_menu li#st_mo_menu_100208 ul.mo_mu_level_1.mo_sub_ul { display: block !important; } #st_mobile_menu li#st_mo_menu_100208 .opener, #st_mobile_menu li#st_mo_menu_100208 .mo_ma_level_0 { display: none; } #st_mobile_menu li#st_mo_menu_100208 { background: var(--gris-clair); margin-top: 3rem; padding-top: 1rem; padding-bottom: 1rem; } #st_mobile_menu li#st_mo_menu_100208 a.mo_sub_a { padding: 0.75rem 0rem; } ul#st_mobile_menu_ul li#st_mo_menu_100208 .mo_sub_li { border: unset; padding-left: 1rem; } ul#st_mobile_menu_ul li#st_mo_menu_100208 i { margin-right: 6px; } /* ===== Retours cliente (MINT-6043, commentaire du 21/07) ===== */ /* [16] Typo : le theme est en Comfortaa, MPM doit etre en Questrial. La variable --font-text est surchargee en [1] ; restent des font-family en dur (search bar). */ body.shop-5 #st_header .search_widget_text, body.shop-5 #st_header .search_widget_text::placeholder, body.shop-5 #st_header .search_widget .autocomplete-suggestions, body.shop-5 #js-product-list .s_title_block a, body.shop-5 .product_list_item .s_title_block a { font-family: 'Questrial', sans-serif !important; } /* [17] Fil d'ariane : fond blanc (pages categorie et produit) */ body.shop-5 .breadcrumb_spacing { background-color: #ffffff !important; } /* [18] Page categorie : fond blanc du bloc de contenu bas */ body.shop-5 .cat-content-bottom { background-color: #ffffff !important; } /* [19] Page categorie : survol de la liste "Trier par" en orange MPM */ body.shop-5 .products-sort-order .dropdown-menu a:hover, body.shop-5 .products-sort-order .select-list:hover, body.shop-5 .sort_by_wrap .dropdown_list a:hover { color: #FBA500 !important; } /* [20] Page produit : prix dans la meme couleur que le titre (#444) */ body.shop-5 #product .current-price, body.shop-5 #product .current-price span.price { color: #444444 !important; } /* [21] Page produit : images en border-radius 20px */ body.shop-5 #product .pro_gallery_top_container img, body.shop-5 #product .pro_gallery_thumbs_container img { border-radius: 20px; } /* [22] Page produit : fleches de navigation de la galerie en blanc */ body.shop-5 #product .pro_gallery_top_container .swiper-button-lr .swiper-button, body.shop-5 #product .pro_gallery_top_container .swiper-button-lr .swiper-button i, body.shop-5 #product .pro_gallery_top_container .swiper-button-lr .swiper-button:hover i { color: #ffffff !important; } /* [23] Page produit : bouton "Ajouter au panier" en Questrial majuscule */ body.shop-5 .btn.add-to-cart, body.shop-5 .btn.ajax_add_to_cart_button { font-family: 'Questrial', sans-serif !important; text-transform: uppercase; } /* [24] Menu desktop (module stmegamenu — c'est lui qui rend le menu, pas ETS) : 1er niveau a 0.85rem ; items de 2e niveau en 500 / 0.85rem. ATTENTION : les titres de colonne (OCCASIONS, POUR QUI ?...) portent EXACTEMENT la meme classe .ma_level_1.ma_item que les items — leur mise en avant vient du CSS genere par bloc (item_t=1 + txt_color). Une regle sur .ma_level_1 les ecraserait donc aussi. On les epargne via :only-child : un bloc de titre ne contient qu'un seul
  • , un bloc d'items en contient plusieurs. NB : pas de white-space:nowrap ici — teste et abandonne, les libelles longs ("Fete des Grand-Meres") elargissent les colonnes et la 4e sort de l'ecran. */ body.shop-5 #st_mega_menu_wrap .ma_level_0 { font-size: 0.85rem; } body.shop-5 #st_mega_menu_wrap .mu_level_1 > .ml_level_1:not(:only-child) > .ma_level_1 { font-weight: 500; font-size: 0.85rem; } /* [25] Panier : cross-selling du bas — pas d'ombre + espace entre les visuels */ body.shop-5 #cart #crossselling_products_container .pro_outer_box, body.shop-5 #cart #crossselling_products_container .pro_first_box, body.shop-5 #cart .crossselling_products_container .pro_outer_box { box-shadow: none !important; } body.shop-5 #cart #crossselling_products_container .swiper-slide, body.shop-5 #cart .crossselling_products_container .swiper-slide { padding-left: 8px; padding-right: 8px; } /* [26] Page categorie : pas de colonne gauche sur MPM -> le center_column doit occuper toute la largeur (sinon le bloc de contenu du bas reste decale a droite), et la grille passe a 4 produits/ligne. Decalage de la 4e vignette de la 1ere ligne : meme cause que sur Feylt — le theme est configure pour 3 produits/ligne (product_per_xl=3), il pose donc .first-desktop-line (border-top:none; padding-top:0) sur les 3 premiers items seulement, et le 4e garde son padding-top/border-top -> decalage vertical. On neutralise sur les 4 premiers. */ body.shop-5.category #center_column, body.shop-5.search #center_column { flex: 0 0 100%; max-width: 100%; } @media (min-width: 992px) { body.shop-5.category #js-product-list .products.product_list > .product_list_item, body.shop-5.search #js-product-list .products.product_list > .product_list_item { flex: 0 0 25%; max-width: 25%; } body.shop-5.category #js-product-list .products.product_list > .product_list_item:nth-child(-n+4), body.shop-5.search #js-product-list .products.product_list > .product_list_item:nth-child(-n+4) { padding-top: 0; border-top: none; } } /* [27] Menu desktop : trait sous l'entree survolee / active en bleu MPM. Le fichier customer-sN.css genere par le theme le pose en vert (#51c073) et violet (#5766f2) en dur — les variables de palette ne le couvrent donc pas. */ body.shop-5 #st_mega_menu_wrap .ml_level_0.current .ma_level_0, body.shop-5 #st_mega_menu_wrap .ma_level_0:hover, body.shop-5 #st_mega_menu_wrap .ml_level_0:hover .ma_level_0 { border-bottom-color: #1A8BA0 !important; color: #1A8BA0 !important; }