/** Shopify CDN: Minification failed Line 182:98 Expected ":" **/ .mix-match-image-with-text-inner { text-align: center;} .mix-match-image-with-text-main {background: #ffdaa7; padding: 30px 0;} .mix-match-image-with-text-inner .main-title h2 { margin-top: 0; font-size: 48px; margin-bottom: 10px; text-transform: capitalize; font-weight: bold;} .mix-match-desc b { display: block;} .mix-match-desc { font-size: 18px; line-height: 1.6;} .mix-match-main-wrap-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;} .mix-match-main-grid { padding: 15px; border-radius: 20px; flex: 1; background:#fffdf0;} .svg_image { display: inline-block;} .mix-match-main-grid .svg_image img { max-width: 80px; vertical-align: middle;} .add_product_btn {margin: 25px 0;} .mix-match-main-grid a { display: inline-block; width: 100%; height: 100%; color: #000; text-decoration: none;} .mix-match-main-grid .product_count { margin: 10px 0; line-height: 1.4;} .mix-match-main-grid .discount { font-size: 20px; font-weight: bold; font-style: italic; margin: 0; line-height: 1.4;} .pack_title h4 { margin: 0; font-size: 24px; font-weight: bold; letter-spacing: 0;} .pack_title .item_count { width: 35px; height: 35px; background: #f2a03d; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 100%;} .mix-bundle-right { width: 375px; position: sticky; top: 70px; background:#fffdf0; padding: 15px;} .pack_title { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #cccccc7d; padding-bottom: 15px; margin-bottom: 15px;} .order_list { margin-bottom: 10px; align-items: center; display: flex; padding: 0.5rem; border: 2px dashed #ccc; border-radius: 5px;} .order_list .order_list_image { width: 60px; padding:5px; margin-right: 10px;} .order_list_text { flex: 1; line-height: 1.2;} .order_list_footer { border-top: 1px solid #ccc; margin-top: 15px; padding-top: 5px;} .product_text_discount_wapper { font-size: 13px;} .product_update_progress ul { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none;} .product_update_progress ul li { width: 40px; height: 8px; background: #f2a03d63; border-radius: 10px;} .product_update_progress ul li.active{ background: #f2a03d;} .product_update_progress{margin: 5px 0 10px 0;} .bundle-add-to-cart { margin-top: 5px; display: inline-block; width: 100%;} .bundle-add-to-cart a.button {font-size: 16px;width: 100%;} .bundle-add-to-cart a.button span { padding: 0 2px; font-weight: bold; letter-spacing: 0; text-transform: uppercase;} .bundle-add-to-cart a.button span.add-cart-compate-price { padding-left: 5px; font-weight: normal;} .mix-bundle-left .collection__title.title-wrapper h2.title { text-align: left; position: relative; font-size: 32px; letter-spacing: 0; font-weight: bold; margin-bottom: 0;} .mix-bundle-left .collection__title.title-wrapper {padding: 0; margin-bottom: 1.2rem;} .mix-bundle-left .collection__title.title-wrapper h2.title:after { z-index: -1; content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 5px; background: #DDD1C4; transform: translate(0, -50%);} .mix-bundle-left .collection__title.title-wrapper h2.title span { display: inline-block; background: #FEFCEE; padding-right: 20px;} .mix-bundle-left ul.product-grid.contains-card { row-gap: 20px; column-gap: 20px;justify-content: space-between;} .mix-bundle-left ul.product-grid.contains-card .grid__item {width: calc(25% - 15px); flex-grow: initial; max-width: 100%;} .mix-bundle-left ul.product-grid .card__heading a:after{display: none;} .mix-bundle-left .card__information1 a.full-unstyled-link { text-decoration: none;} .mix-bundle-left .card__information1 .card__heading {text-align: left; letter-spacing: 0;} .mix-bundle-left .price-qty-main-wapper { margin-top: 0 !important; text-align: left; display: flex; align-items: center; justify-content: space-between;} .mix-bundle-wrapper .quantity {min-height: 35px;} .mix-bundle-left .card .card__inner .card__media{z-index: 1;} .mix-bundle-wrapper .quantity { min-height: 35px; width:80px;} .mix-bundle-wrapper .quantity button.quantity__button { width: 25px;} .mix-bundle-wrapper .quantity:before,.mix-bundle-wrapper .quantity:after{border-radius:50px;} .mix-bundle-left .card--card:after,.mix-bundle-left .card--standard .card__inner:after{display: none;} .mix-bundle-left .card--card.card--media>.card__content{padding-left:0;padding-right:0;} .mix-bundle-left .card .card__inner .card__media{border-bottom-right-radius:12px;border-bottom-left-radius:12px;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;} .mix-bundle-left .card .card__inner .card__media a { display: inline-block; width: 100%; height: 100%;} .mix-bundle-left .card .card__inner .card__media:hover img.product-image.primary-image {visibility: hidden;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;} .mix-bundle-left .card .card__inner .card__media:hover img.product-image.secondary-image { visibility: visible;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;} @-webkit-keyframes fadeIn{from {opacity: 0;}to{opacity:1;}} @keyframes fadeIn {from{opacity:0;}to{opacity: 1;}} .mix-bundle-left .card-information>.rating,.mix-bundle-left .rating-text.caption,.mix-bundle-left .rating-count.caption{display: none;} .mix-top-bar { background:#FEFCEE; border-bottom: 1px solid #DDD1C4; position: sticky; top:73px; z-index: 9;} .mix-top-bar .page-width,.mix-bar-main-bundle .page-width,.mix-match-page .rich-text.content-container .rich-text__wrapper{ max-width: 1600px; padding: 0 1rem;} .mix-top-bar ul { margin: 0; padding: 0; list-style: none; display: flex;} .mix-top-bar ul li a { color: #000; text-decoration: none; padding: 22px 20px 12px; line-height: 1.2; /* +10 px au-dessus, 2026-09-21 */ display: inline-block; transition: all 0.5s ease-in-out; border-bottom:5px solid transparent;} /* inactif : aucun trait, 2026-09-20 */ .mix-top-bar ul li a.active{border-color:#7D432D;} .mix-bar-main-bundle { padding: 30px 0;} .mix-bundle-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start;} .mix-bundle-left {width: calc(100% - 400px);} .mix-bundle-right { width: 375px; position: sticky; top:70px;} .mix-match-main-grid .product_count { margin: 10px 0; line-height: 1.4; text-transform: lowercase;} .mix-match-page .rich-text.content-container .rich-text__wrapper .rich-text__blocks { max-width: 100%;} .mix-match-page .price-qty-main-wapper .Qty-main-wapper .quantity__input,.bundle-qty .quantity__input{pointer-events: none;} .mix-bundle-left .price-qty-main-wapper .price__regular * {cursor: auto;} .quantity_lists product-card-gift { display: flex; justify-content: space-between; align-items: start;margin-bottom: 15px;} .quantity_lists product-card-gift .bundle-image-wapper {width: 70px; overflow: hidden;} .quantity_lists product-card-gift .bundle-info { width: calc(100% - 85px);} .bundle-price-qty-wapper { display: flex; justify-content: space-between; align-items: center;} .quantity_lists product-card-gift .bundle-info .bundle-title { font-weight: 600; letter-spacing: 0;} .bundle-price-qty-wapper .bundle-price { flex: 1; padding-right: 10px;} .quantity_lists product-card-gift .bundle-info .bundle-title { font-weight: 600; letter-spacing: 0; line-height: 1.3; margin-bottom: 7px;} .custom-hide{display:none;} .custom-show{display:block;} .quantity_lists { max-height: 300px; overflow: auto;} .product_text_discount_wapper { display: flex; justify-content: space-between;} quantity-input-mix-match.quantity.disable { pointer-events: none; opacity: 0.5;} .mix-bundle-left .price-qty-main-wapper span.dis_price {color: #000; position: absolute; top: 7px; right: 7px; background: #fff; line-height: 1.2; padding: 2px 5px; font-size: 12px; border-radius: 25px;} .mix-bundle-left .price-qty-main-wapper span.dis_price:empty {display: none;} .bundle-price-qty-wapper .bundle-price div[main-price-bundle] [data-main-price-bundle-update] { font-size: 80%; letter-spacing: 0; text-decoration: line-through; opacity: 0.5;} .bundle-price-qty-wapper .bundle-price div[main-price-bundle] span[data-discount-bundle]:empty {display: none;} .bundle-price-qty-wapper .bundle-price div[main-price-bundle] span[data-discount-bundle] { background: #ccc; color: #fff; line-height: 1.2; font-size: 13px; padding: 0px 5px; margin-left: 2px;} .bundle-price-qty-wapper .bundle-price [data-sale-price-bundle-update] { line-height: 1.2; font-weight: 600; font-size: 17px; letter-spacing: 0;} .quantity_lists product-card-gift .bundle-info .bundle-title { font-weight: 600; letter-spacing: 0; line-height: 1.3; margin-bottom: 0;} .product_text_discount_wapper .product_nex_discount { font-weight: bold;} .bundle-add-to-cart a.button span.add-cart-compate-price { font-size: 100%; /*text-decoration: line-through; */ font-weight: normal; vertical-align: middle; padding-left: 5px;} .mix-bundle-left .price-qty-main-wapper .price__regular .price-item.price-item--regular[data-main-price-bundle] { /* text-decoration: line-through; */ color: #999;} .price__regular:has(.discount-added) [data-main-price-bundle] { text-decoration: line-through;} product-card-gift [main-price-bundle]:has([data-discount-bundle]:empty) [data-main-price-bundle-update] {text-decoration: none;} .mix-bundle-left .card--card.card--media>.card__content .tital-main-wapper { text-align: left;} .mix-bundle-left .card--card.card--media>.card__content .tital-main-wapper .product-variants {display: flex; margin:2px 0 7px 0;} .mix-bundle-left .card--card.card--media>.card__content .tital-main-wapper .product-variants .input-wapper { margin-right: 7px; line-height: 1.2; position: relative;} .mix-bundle-left .card--card.card--media>.card__content .tital-main-wapper .product-variants .input-wapper input { cursor: pointer; appearance: none; -webkit-appearance: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0;} .mix-bundle-left .card--card.card--media>.card__content .tital-main-wapper .product-variants .input-wapper label.variant-option { cursor: pointer; background: #cccccc; color: #000; padding: 3px 5px; line-height: 1.2; border-radius: 5px; font-size: 14px;} .mix-bundle-left .card--card.card--media>.card__content .tital-main-wapper .product-variants .input-wapper input:checked + .variant-option { background: #f2a03d; color: #fff;} .bundle-add-to-cart a.button span.add-cart-compate-price:empty {display: none;} .bundle-add-to-cart a.button span[add-cart-main-price] { text-decoration: line-through;} .mix-bundle-left button.quick-cart-drawer__trigger,.mix-bundle-left .product-card .product-card__info {display: none !important;} .add_product_btn a.button {background-color: #000;} .mix-bundle-left product-card.product-card {margin-bottom: 10px;} .mix_match_cover {background: #FEFCEE;} .mix_match_cover .collection,.mix_match_cover .color-background-1.gradient{background:transparent !important;} .mix-bundle-left .price-qty-main-wapper .price *{font-size: 16px;} .mix-bundle-wrapper quantity-input-mix-match.quantity { padding: 0 5px; display: flex; align-items: center; border: 1px solid #000; justify-content: space-between;} .mix-bundle-wrapper .quantity button.quantity__button { opacity: 1;} .mix-bundle-left .product-variants { display: flex; gap: 5px;} .mix-bundle-left .product-variants .input-wapper { position: relative;} .mix-bundle-left .product-variants .input-wapper label.variant-option { background: #af9983; color: #fff; display: inline-block; line-height: 1.2; padding: 5px 10px; cursor: pointer; font-size: 12px; font-weight: 600;} .mix-bundle-left .product-variants .input-wapper input.variant-radio:checked+label{background: #000;} .mix-bundle-left .product-variants .input-wapper input.variant-radio { appearance: none; -webkit-appearance: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; z-index: 9;} .mix-bundle-left .product-card .product-card__content h3.card__heading { font-size: 16px; font-weight: 500;} .mix-bundle-wrapper quantity-input-mix-match.quantity button.quantity__button { width: 12px;} html[lang="fr"] .order_list_text span,.order_list_text font,.product_update_title font,html[lang="fr"] .product_update_title span{display: none;} html[lang="fr"] .order_list_text font,html[lang="fr"] .product_update_title font {display: block;} /* ================Meida Query=========================== */ @media screen and (min-width:1025px){ .bundle_right_top_part .close_btn,.mobile_view_pack_btn { display: none;} } @media screen and (max-width:1024px){ .mix-match-image-with-text-inner .main-title h2 { font-size: 34px; margin-bottom: 0;} .mix-match-desc p { margin: 10px 0;} .mix-match-main-grid { padding: 10px; border-radius: 20px;} .mix-match-main-grid .product_count { margin: 3px 0; line-height: 1.2;} .mix-match-main-grid .discount { font-size: 16px; line-height: 1.2;} .add_product_btn { margin: 15px 0;} .mix-match-image-with-text-main {padding: 20px 0;} .mix-bundle-left .collection__title.title-wrapper h2.title { font-size: 24px;} .mix-bundle-left .collection__title.title-wrapper h2.title span { padding-right: 12px;} .mix-bundle-wrapper {flex-direction: column;} .mix-bundle-left {width: 100%;} .mix-bundle-right {width: 100%; top: initial; position: fixed; bottom: 0; left: 0; z-index: 99;} .mix-top-bar .page-width, .mix-bar-main-bundle .page-width, .mix-match-page .rich-text.content-container .rich-text__wrapper { padding: 0;} .mix-bundle-left, .mix-match-page .rich-text.content-container .rich-text__wrapper {padding: 0 2.4rem;} .mix-match-page .rich-text content-container{padding-top: 0px !important;} .mix-match-page .close_btn { width: 35px; height: 35px; position: relative; background: #f2a03d; font-size: 0;cursor: pointer; text-align: center; border-radius: 50%;} .mix-match-page .close_btn:before, .mix-match-page .close_btn:after { position: absolute; left: 16px; content: ' '; height: 15px; width: 2px; background-color: #fff; top:10px;} .mix-match-page .close_btn:before { transform: rotate(45deg);} .mix-match-page .close_btn:after { transform: rotate(-45deg);} .product_update_progress ul li{flex: 1;} .mobile_view_pack_btn {position: relative; margin-top: 7px; background: #f2a03d; border-radius: 10px; display: flex; text-align: center; justify-content: center; align-items: center; cursor: pointer; padding: 10px; font-size: 15px; font-weight: bold; color: #fff;} .mobile_view_pack_btn .item_count { width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 50%; margin-left: 5px; color: #000; padding: 3px;} .mobile_view_pack_btn:after { content: ""; position: absolute; right: 15px; border: solid #fff; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg);} .mobile_view_pack_btn.active { background: #ccc; color: #000;} .mobile_view_pack_btn.active .item_count,.bundle_right_top_part,.bundle-add-to-cart { display: none;} .mobile_view_pack_btn.active::after { border-color: #000; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .bundle_right_top_part.active,.bundle-add-to-cart.active {display: block;} .order_list_footer { border-top: none; margin-top: 0; padding-top: 0;} body.bundle_active { overflow: hidden;} body.bundle_active .mix-bar-main-bundle:after { content: ""; position: fixed; z-index: 9; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);} .quantity_lists { max-height: 200px; overflow: auto;} .quantity_lists product-card-gift .bundle-image-wapper { width: 60px;} .quantity_lists product-card-gift .bundle-info { width: calc(100% - 69px);} .mobile_view_pack_btn .valid_text_active,.mobile_view_pack_btn.active .valid_text { display: none;} .mobile_view_pack_btn.active .valid_text_active { display: block;} .mix-bundle-left .price-qty-main-wapper .price__regular { font-size: 14px; letter-spacing: 0.2px;} .mix-bundle-left .card--card.card--media>.card__content .tital-main-wapper .product-variants .input-wapper label.variant-option{font-size: 12px;} } @media screen and (max-width:749px){ .mix-bundle-left .collection__grid {flex-direction: initial; flex-wrap: wrap;} .mix-bundle-left product-card.product-card { margin-bottom: 10px; width: calc(50% - 4px);} .mix-bundle-left .price-qty-main-wapper .price * { font-size: 14px;} } @media screen and (max-width:600px){ .mix-bundle-left ul.product-grid.contains-card { row-gap: 10px; column-gap: 10px;} .mix-bundle-left ul.product-grid.contains-card .grid__item { width: calc(50% - 5px); flex -grow: initial; max-width: 100%;} .mix-match-main-wrap-grid .mix-match-main-grid { width: calc(33% - 6px); flex: initial; padding: 5px; border-radius: 15px;} .mix-match-page .rich-text.content-container .rich-text__wrapper { padding: 0;} .mix-bar-main-bundle { padding: 30px 0 0 0;} .mix-match-page .rich-text.content-container .rich-text__wrapper h2 { margin-top: 0;} .mix-match-main-grid .svg_image img { max-width: 55px;} .mix-bundle-wrapper .quantity button.quantity__button { width: 20px;} .mix-bundle-wrapper .quantity { width: 65px;} .mix-bundle-left, .mix-match-page .rich-text.content-container .rich-text__wrapper {padding: 0 ;} .mix-match-page .rich-text__wrapper{width:100%;} .mix-top-bar ul li a { padding: 18px 5px 10px; font-size: 13px; border-bottom:3px solid transparent;} /* idem sous 600 px */ /* .mix-top-bar{ padding: 0 10px;} */ .mix-bundle-left .price-qty-main-wapper .price {font-size: 1.5rem; letter-spacing: 0;} .mix-top-bar ul {white-space: nowrap;overflow: auto;} .mix-bundle-wrapper .quantity { min-height: 32px;} .mix-bundle-left .product-variants .input-wapper label.variant-option{ padding: 3px 5px;} .mix-bundle-left product-card.product-card { margin-bottom: 0;} .mix-top-bar { top: 65px;} .mix-top-bar .container.max-w-page {padding: 0;} } /* --------------------------------------------------------------------------- PILATES : les boutons prennent l'ORANGE de la pastille « Mon pack », #f2a03d. Demandé par Nicolas le 2026-09-20 : « n'utilise peut-être pas le rouille pour les boutons, utilise l'orange, celui de la notification mon pack ». ⚠️ Ce qu'on croyait rouille ne l'était pas. Mesuré au pixel sur la prod : le gros bouton « AJOUTER AU PANIER » est en TAUPE #AF9983, pas en rouille #7D432D, qui n'apparaît nulle part sur cette page. Il tient sa couleur de --color-filled-button, déclarée sur :root depuis config/settings_data.json : la toucher repeindrait TOUS les boutons pleins du site. D'où la redéfinition de la variable sur le seul body de la page Pilates. Le texte est en encre #1A1A1A et pas en blanc : mesuré, le blanc sur #f2a03d donne un contraste de 2,1 contre 1 quand WCAG demande 3 pour du gros texte gras. L'encre donne 8,2. Pour repasser au blanc, remplacer 26,26,26 et #1A1A1A par 255,255,255 et #FFFFFF. --------------------------------------------------------------------------- */ /* ⚠️ Redéfinir la variable sur le BODY ne suffit pas, mesuré le 2026-09-20 : le bouton « + » de chaque carte porte sa PROPRE classe de schéma (color-scheme-8e06ddd6-…), et une variable déclarée sur un ancêtre plus proche gagne toujours, quelle que soit la spécificité du sélecteur. On pose donc les couleurs sur les boutons EUX-MÊMES. */ body.template--mix-match-pilates { --color-filled-button: 242,160,61; --color-filled-button-text: 26,26,26; } body.template--mix-match-pilates .bundle-add-to-cart .button--filled, body.template--mix-match-pilates .product-card__add-to-cart--button, body.template--mix-match-pilates .quick-cart-drawer__trigger.product-card__add-to-cart--button { --color-filled-button: 242,160,61; --color-filled-button-text: 26,26,26; --color-button-background: #f2a03d; --color-button-outline: #f2a03d; --color-button-text: #1A1A1A; --color-button-hover-background: #D98A22; --color-button-hover-outline: #D98A22; --color-button-hover-text: #1A1A1A; background-color: #f2a03d; border-color: #f2a03d; color: #1A1A1A; } body.template--mix-match-pilates .bundle-add-to-cart .button--filled:hover, body.template--mix-match-pilates .product-card__add-to-cart--button:hover { background-color: #D98A22; border-color: #D98A22; color: #1A1A1A; } body.template--mix-match-pilates .add_product_btn a.button { background-color: #f2a03d; color: #1A1A1A; } body.template--mix-match-pilates .mix-bundle-left .product-variants .input-wapper label.variant-option { background: #f2a03d; border-color: #f2a03d; color: #1A1A1A; } body.template--mix-match-pilates .mix-bundle-left .product-variants .input-wapper input.variant-radio:checked+label { background: #f2a03d; } /* --------------------------------------------------------------------------- ONGLETS PLEINE LARGEUR SUR TÉLÉPHONE QUAND IL N'Y EN A QUE DEUX. Demandé par Nicolas le 21/09/2026 sur la page Pilates : « vu qu'il n'y a que deux collections, tu as toute la largeur de l'écran, donc deux boutons centrés, à gauche c'est Unis, à droite c'est Motifs, et ils ne sont pas collés ». On vise `:has(:nth-child(2)):not(:has(:nth-child(3)))`, donc EXACTEMENT deux onglets : la règle s'appliquera d'elle-même à toute page à deux collections et ne touchera jamais celle d'hiver, qui en a quatre. Pas de classe à poser dans le gabarit. --------------------------------------------------------------------------- */ @media screen and (max-width: 749px) { .mix-top-bar ul:has(li:nth-child(2)):not(:has(li:nth-child(3))) { display: flex; gap: 10px; padding: 0 4px; white-space: normal; overflow: visible; } .mix-top-bar ul:has(li:nth-child(2)):not(:has(li:nth-child(3))) li { flex: 1 1 0; min-width: 0; } .mix-top-bar ul:has(li:nth-child(2)):not(:has(li:nth-child(3))) li a { display: block; width: 100%; text-align: center; padding: 18px 8px 10px; } } /* --------------------------------------------------------------------------- LIVRAISON OFFERTE ATTEINTE : un bandeau qui apparaît dans le panneau du pack. Demandé par Nicolas le 21/09/2026, sur les deux pages. Le seuil n'est PAS le même partout : 45 € en France et en Zone 1, 60 € en Zone 2 (Suisse, Canada, US, Norvège, Pologne, Tchéquie, Croatie). Le message ne s'affiche donc que lorsque le total du pack a réellement franchi le seuil du pays, calculé dans le script, jamais sur un nombre de paires écrit en dur. --------------------------------------------------------------------------- */ .mm-franco { display: none; align-items: center; gap: 10px; margin: 12px 0 0; padding: 11px 14px; border-radius: 12px; background: rgba(95, 122, 88, .12); border: 1px solid rgba(95, 122, 88, .35); color: #3F5539; font-size: 14px; font-weight: 600; line-height: 1.3; animation: mm-franco-apparition .35s ease both; } .mm-franco[data-atteint="1"] { display: flex; } .mm-franco__icone { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #5F7A58; color: #FFFFFF; font-size: 14px; } @keyframes mm-franco-apparition { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .mm-franco { animation: none; } } /* --------------------------------------------------------------------------- LA BARRE À CÔTÉ DE « UNIS » ET « MOTIFS » : DES BLOCS DE COULEUR, UN PAR MODÈLE. Nicolas, 21/09/2026 : « je veux pas que ce soit un dégradé, je veux que ce soit vraiment des blocs de couleurs. Tu divises la bande. Par contre tu respectes une chronologie de couleurs, à savoir que tu commences du plus clair et tu suis les couleurs selon la roue des couleurs. » La bande n'est donc PAS écrite ici : elle est calculée à l'exécution, dans snippets/correctifs-ui-3.liquid, à partir des produits réellement affichés sous chaque titre. « Unis » et « Motifs » portent exactement les mêmes classes et vivent dans la même section : aucun sélecteur CSS ne sait les distinguer, et surtout une bande écrite en dur mentirait dès qu'un modèle entre ou sort de la collection. Le script pose la variable --ps-bande sur chaque titre ; le CSS ne fait que la lire. Repli : si le script ne tourne pas, la barre garde son beige d'origine. --------------------------------------------------------------------------- */ body.template--mix-match-pilates .mix-bundle-left .collection__title.title-wrapper h2.title::after, body.template--mix-match-pilates .collection__title.title-wrapper h2.title::after, body.template--stillness-collection .collection__title.title-wrapper h2.title::after { /* La règle d'origine, `.mix-bundle-left .collection__title.title-wrapper h2.title:after`, pèse (0,4,2) et pose un `background` en raccourci. Un sélecteur plus léger voyait son rayon passer et sa couleur non. On repasse par le même chemin plus la classe du gabarit, ce qui suffit sans aucun !important. */ background: var(--ps-bande, #DDD1C4); border-radius: 999px; overflow: hidden; } /* --------------------------------------------------------------------------- LES DEUX ONGLETS « UNIS » ET « MOTIFS » SUR ORDINATEUR. Nicolas, 21/09/2026 : « fais en sorte que les deux boutons Unis et Motifs soient plus larges, donc plus grands. Il n'y a pas besoin de les coller autant, c'est trop petit sur l'ordinateur, tu peux un peu plus utiliser l'espace. » Mesure avant correction, en 1440 px : les deux onglets faisaient 69 et 81 px et occupaient 150 px d'un conteneur de 1368. Ils étaient en 14 px avec 20 px de marge latérale, soit les réglages pensés pour la barre d'hiver qui porte cinq onglets. ⚠️ La règle ne vaut QUE pour une barre à deux onglets, d'où le :has(). La page d'hiver en a cinq : les élargir de la même façon les ferait déborder et réapparaître en barre de défilement horizontale. L'élargissement passe par la marge plutôt que par une largeur fixe : le trait de l'onglet actif reste ainsi proportionné au mot, un soulignement de 260 px sous « Unis » aurait l'air d'une erreur. --------------------------------------------------------------------------- */ @media (min-width: 990px) { .mix-top-bar ul:has(li:nth-child(2)):not(:has(li:nth-child(3))) { gap: 18px; } .mix-top-bar ul:has(li:nth-child(2)):not(:has(li:nth-child(3))) li a { padding: 24px 44px 14px; font-size: 16px; letter-spacing: .02em; } }