/* ================================================================ MINI-PANIER LATERAL — REFONTE COMPLETE (08/2026) ---------------------------------------------------------------- Voir inc/mu-cart.php pour le contexte. Le HTML appartient au theme parent (offcanvas/minicart.php) et n'est PAS modifie : tout se fait ici et dans js/mu-cart.js. SPECIFICITE : le theme style le panneau avec des chaines de classes (jusqu'a (0,3,0)), l'ancien style.css du theme enfant pose quelques `!important`, et le kit Elementor repeint tous les en rose #F24080 a (0,1,1) (Piege n°6 du journal). Toutes les regles ici sont donc prefixees `body .rbt-cart-side-menu` (>= (0,2,1)) et les proprietes reellement disputees portent `!important`. Cette feuille se charge apres celles du theme (priorite 1001) : a specificite egale, elle gagne par l'ordre. ================================================================ */ /* ---------------------------------------------------------------- 1. FOND ASSOMBRI ET FLOUTE (il n'en existait aucun) ---------------------------------------------------------------- L'element est cree par js/mu-cart.js et rendu visible tant que porte `cart-sidenav-menu-active` (la classe que le theme pose lui-meme a l'ouverture). Meme famille visuelle que les fenetres de Tutor 4 : noir translucide + flou. ---------------------------------------------------------------- */ /* PLUS AUCUN backdrop-filter ICI — ET C'EST DEFINITIF. Historique : trois tentatives avec `backdrop-filter` sur le calque (flou permanent + fondu d'opacite, puis flou binaire) ont toutes produit des artefacts de composition dans Chrome : flou qui persiste apres fermeture, puis couches de flou fantomes qui finissent par couvrir TOUT l'ecran, panneau compris. Ce mecanisme est abandonne. Nouvelle approche, structurellement insensible a ces bugs : - le calque ci-dessous ne porte QUE la teinte sombre (background anime : aucune interaction avec un quelconque filtre) ; - le FLOU est applique au CONTENU de la page lui-meme (`filter` sur les enfants directs de , regle plus bas). `filter` est un effet applique a l'element qui le porte — rien a composer avec les calques du dessus, donc rien qui puisse fuir sur le panneau ou survivre a la fermeture. */ .mu-cart-backdrop { position: fixed; inset: 0; z-index: 9998; /* le panneau du theme est a 9999 */ background: rgba(10, 6, 30, 0); visibility: hidden; pointer-events: none; transition: background-color .25s ease, visibility 0s linear .25s; } .mu-cart-backdrop--visible { background: rgba(10, 6, 30, .45); visibility: visible; pointer-events: auto; transition: background-color .3s ease; } /* Le flou du contenu : tout ce qui est au niveau de SAUF le panneau, le calque de teinte, les notifications et la fenetre de confirmation des favoris. Montee progressive a l'ouverture ; a la fermeture la classe disparait et le flou tombe avec elle — chaque element retrouve son etat par un simple recalcul de style, il n'existe aucun calque residuel possible. */ body.cart-sidenav-menu-active > *:not(.rbt-cart-side-menu):not(.mu-cart-backdrop):not(.mu-toast-root):not(.mu-modal):not(#wpadminbar) { filter: blur(7px); transition: filter .35s ease; } /* Les widgets flottants (bulle d'aide, cookies) vivent au-dessus de tout (z-index eleves) : floutes par la regle ci-dessus, ils resteraient pourtant AU-DESSUS de la teinte. On les range dessous le temps de l'ouverture ; ils reviennent tels quels a la fermeture. */ body.cart-sidenav-menu-active #mu-help-center, body.cart-sidenav-menu-active .mu-cc, body.cart-sidenav-menu-active .mu-cc__fab { z-index: 9997 !important; } /* Les widgets re-activent `pointer-events: auto` sur leurs boutons internes (voir mu-help-center.css) : il faut donc neutraliser AUSSI les descendants, sinon la bulle continuerait d'avaler les clics. */ body.cart-sidenav-menu-active #mu-help-center, body.cart-sidenav-menu-active #mu-help-center *, body.cart-sidenav-menu-active .mu-cc, body.cart-sidenav-menu-active .mu-cc *, body.cart-sidenav-menu-active .mu-cc__fab { pointer-events: none !important; } /* ---------------------------------------------------------------- 2. LE PANNEAU ---------------------------------------------------------------- */ body .rbt-cart-side-menu { width: 420px; /* 500px chez le theme : trop large */ max-width: 100vw; box-shadow: -28px 0 64px rgba(16, 24, 40, .22); /* Le theme anime en .85s : trainant. Meme courbe, plus vif. */ transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s step-end; } body .rbt-cart-side-menu.side-menu-active { transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s step-start; } /* Le theme pose padding:60px 50px sur ce conteneur : on structure plutot en trois zones (en-tete / liste / pied) avec leurs propres marges, pour un pied de panneau toujours visible. */ body .rbt-cart-side-menu .inner-wrapper { padding: 0 !important; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; overflow: hidden; /* seule la liste defile */ } /* ---------------------------------------------------------------- 3. EN-TETE ---------------------------------------------------------------- */ body .rbt-cart-side-menu .inner-wrapper .inner-top { margin: 0 !important; padding: 18px 22px !important; border-bottom: 1px solid #eef0f4 !important; flex: 0 0 auto; } body .rbt-cart-side-menu .inner-wrapper .inner-top .content { display: flex; align-items: center; justify-content: space-between; } body .rbt-cart-side-menu .inner-top .title h4.title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: #192335; display: flex; align-items: center; gap: 10px; } /* Pastille du nombre d'articles (remplie par js/mu-cart.js). */ body .rbt-cart-side-menu .mu-cart-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--color-primary, #501AA2); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1; } body .rbt-cart-side-menu .mu-cart-chip[hidden] { display: none; } /* Bouton de fermeture : rond fantome, croix qui pivote au survol. L'ancien style.css du thème enfant pose deja transparent!important : on aligne avec !important la ou on change son comportement. */ body .rbt-cart-side-menu .minicart-close-button { width: 38px !important; height: 38px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; background-image: none !important; color: #6b7385 !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .18s ease, color .18s ease; } body .rbt-cart-side-menu .minicart-close-button i { font-size: 20px; line-height: 1; display: block; transition: transform .25s ease; } body .rbt-cart-side-menu .minicart-close-button:hover, body .rbt-cart-side-menu .minicart-close-button:focus-visible { background: #f2f3f7 !important; color: #192335 !important; } body .rbt-cart-side-menu .minicart-close-button:hover i { transform: rotate(90deg); } body .rbt-cart-side-menu .minicart-close-button:focus-visible { outline: 2px solid var(--color-primary, #501AA2); outline-offset: 2px; } /* ---------------------------------------------------------------- 4. LA LISTE (seule zone qui defile) ---------------------------------------------------------------- */ body .rbt-cart-side-menu .side-nav { flex: 1 1 auto !important; min-height: 0 !important; /* le theme force min-height:50vh */ margin: 0 !important; padding: 4px 22px 10px; overflow-y: auto; overscroll-behavior: contain; } body .rbt-cart-side-menu .rbt-minicart-wrapper { list-style: none; margin: 0; padding: 0; } /* ---- Un article ------------------------------------------------ */ body .rbt-cart-side-menu .rbt-minicart-wrapper .minicart-item { display: flex; align-items: flex-start; gap: 14px; margin: 0 !important; padding: 16px 0 !important; border: 0 !important; position: relative; /* Entree en cascade a l'ouverture du panneau (delai par article pose en JS via --mu-i ; sans JS, tous partent ensemble). */ opacity: 0; transform: translateX(32px); transition: opacity .4s ease, transform .45s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(.16s + var(--mu-i, 0) * .06s); } body .rbt-cart-side-menu.side-menu-active .rbt-minicart-wrapper .minicart-item { opacity: 1; transform: none; } /* Separateur plein (le theme utilise un pointille date). */ body .rbt-cart-side-menu .rbt-minicart-wrapper .minicart-item + .minicart-item { border-top: 1px solid #eef0f4 !important; } /* Repli anime d'un article supprime (classe posee par js/mu-cart.js ; la hauteur de depart est mesuree et posee en style en ligne). Le delai d'entree ci-dessus est annule : le depart est immediat. */ body .rbt-cart-side-menu .rbt-minicart-wrapper .minicart-item.mu-cart-item--leaving { opacity: 0 !important; transform: translateX(40px) !important; max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top-width: 0 !important; overflow: hidden; transition: opacity .3s ease, transform .35s cubic-bezier(.4, 0, .2, 1), max-height .35s cubic-bezier(.4, 0, .2, 1) .05s, padding .35s cubic-bezier(.4, 0, .2, 1) .05s !important; transition-delay: 0s !important; pointer-events: none; } /* ---- Vignette -------------------------------------------------- */ body .rbt-cart-side-menu .rbt-minicart-wrapper .thumbnail a img { width: 64px !important; height: 64px !important; object-fit: cover; border-radius: 12px !important; border: 1px solid #eef0f4; display: block; } /* ---- Contenu --------------------------------------------------- */ body .rbt-cart-side-menu .rbt-minicart-wrapper .product-content { flex: 1 1 auto; min-width: 0; padding: 2px 0 0 !important; } body .rbt-cart-side-menu .rbt-minicart-wrapper .product-content .title { margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.45; } /* Les titres etaient repeints en rose par le kit Elementor. */ body .rbt-cart-side-menu .rbt-minicart-wrapper .product-content .title a { color: #192335 !important; text-decoration: none !important; transition: color .18s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body .rbt-cart-side-menu .rbt-minicart-wrapper .product-content .title a:hover { color: var(--color-primary, #501AA2) !important; } /* Le soulignement fantome du theme sur les liens. */ body .rbt-cart-side-menu .rbt-minicart-wrapper .product-content .title a::after { content: none !important; display: none !important; } body .rbt-cart-side-menu .rbt-minicart-wrapper .product-content .quantity { display: block; font-size: 13px; color: #6b7385; } body .rbt-cart-side-menu .rbt-minicart-wrapper .product-content .quantity .woocommerce-Price-amount { font-weight: 700; color: var(--color-primary, #501AA2); } /* ---- Bouton de suppression ------------------------------------- */ body .rbt-cart-side-menu .rbt-minicart-wrapper a.remove_from_cart_button { flex: 0 0 auto; align-self: flex-start; margin-top: 2px; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #98a0ad !important; background: transparent; text-decoration: none !important; transition: background-color .18s ease, color .18s ease; } body .rbt-cart-side-menu .rbt-minicart-wrapper a.remove_from_cart_button i { font-size: 15px; line-height: 1; color: inherit !important; } body .rbt-cart-side-menu .rbt-minicart-wrapper a.remove_from_cart_button:hover, body .rbt-cart-side-menu .rbt-minicart-wrapper a.remove_from_cart_button:focus-visible { background: #fdeceb; color: #c62828 !important; } body .rbt-cart-side-menu .rbt-minicart-wrapper a.remove_from_cart_button:focus-visible { outline: 2px solid #c62828; outline-offset: 1px; } body .rbt-cart-side-menu .rbt-minicart-wrapper a.remove_from_cart_button::after { content: none !important; } /* Pendant l'aller-retour serveur : la croix devient un petit anneau qui tourne (classe posee par js/mu-cart.js). */ body .rbt-cart-side-menu a.remove_from_cart_button.mu-cart-removing i { display: none; } body .rbt-cart-side-menu a.remove_from_cart_button.mu-cart-removing::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: mu-cart-spin .6s linear infinite; } @keyframes mu-cart-spin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------------- 5. PIED : SOUS-TOTAL + BOUTONS ---------------------------------------------------------------- */ body .rbt-cart-side-menu .rbt-minicart-footer { flex: 0 0 auto; padding: 0 22px 20px; } /* Les

du gabarit : remplaces par la bordure du pied. */ body .rbt-cart-side-menu .rbt-side-cart-subtotal-box hr { display: none !important; } body .rbt-cart-side-menu .rbt-cart-subttotal { padding: 16px 0 14px !important; border-top: 1px solid #eef0f4; } body .rbt-cart-side-menu .rbt-cart-subttotal .subtotal { display: flex; align-items: center; justify-content: space-between; margin: 0; } body .rbt-cart-side-menu .rbt-cart-subttotal .subtotal strong { font-size: 15px; font-weight: 600; color: #475467; } body .rbt-cart-side-menu .rbt-cart-subttotal .woocommerce-Price-amount { font-size: 20px; font-weight: 800; color: #192335; } /* Le fragment du theme imbrique parfois un montant dans un autre : l'interieur ne doit pas re-grossir. */ body .rbt-cart-side-menu .rbt-cart-subttotal .woocommerce-Price-amount .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; } /* Pulsation a chaque mise a jour (classe posee par js/mu-cart.js). */ body .rbt-cart-side-menu .rbt-cart-subttotal .mu-cart-pulse { animation: mu-cart-pulse .45s ease; display: inline-block; } @keyframes mu-cart-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } } body .rbt-cart-side-menu .rbt-minicart-bottom { margin-top: 4px !important; } /* ---- Les deux boutons ------------------------------------------ Chaque !important repond soit au .rbt-btn du theme, soit au kit Elementor (Piege n°6). Les internes (btn-text / btn-icon) sont conserves : l'animation de fleche du theme continue de jouer. */ body .rbt-cart-side-menu .woocommerce-mini-cart__buttons a.rbt-btn { box-sizing: border-box !important; /* sinon 48px + 2x2px de bordure = 52px */ display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 48px !important; line-height: 1 !important; padding: 0 20px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important; } /* « Voir le panier » : contour. */ body .rbt-cart-side-menu .woocommerce-mini-cart__buttons .view-cart-btn a.rbt-btn { background: transparent !important; background-image: none !important; border: 2px solid var(--color-primary, #501AA2) !important; color: var(--color-primary, #501AA2) !important; } body .rbt-cart-side-menu .woocommerce-mini-cart__buttons .view-cart-btn a.rbt-btn .btn-text, body .rbt-cart-side-menu .woocommerce-mini-cart__buttons .view-cart-btn a.rbt-btn .btn-icon { color: inherit !important; } body .rbt-cart-side-menu .woocommerce-mini-cart__buttons .view-cart-btn a.rbt-btn:hover { background: rgba(80, 26, 162, .07) !important; } /* « Validation de la commande » : plein, degrade de la marque. */ body .rbt-cart-side-menu .woocommerce-mini-cart__buttons .checkout-btn a.rbt-btn { background-image: linear-gradient(135deg, #7a48e6 0%, #501AA2 100%) !important; border: 0 !important; color: #fff !important; box-shadow: 0 8px 20px rgba(80, 26, 162, .28); transition: box-shadow .2s ease, transform .2s ease; } body .rbt-cart-side-menu .woocommerce-mini-cart__buttons .checkout-btn a.rbt-btn .btn-text, body .rbt-cart-side-menu .woocommerce-mini-cart__buttons .checkout-btn a.rbt-btn .btn-icon { color: #fff !important; } body .rbt-cart-side-menu .woocommerce-mini-cart__buttons .checkout-btn a.rbt-btn:hover { box-shadow: 0 10px 26px rgba(80, 26, 162, .4); transform: translateY(-1px); } body .rbt-cart-side-menu .woocommerce-mini-cart__buttons .checkout-btn { margin-top: 12px !important; } body .rbt-cart-side-menu .woocommerce-mini-cart__buttons a.rbt-btn:focus-visible { outline: 2px solid var(--color-primary, #501AA2); outline-offset: 2px; } /* ---------------------------------------------------------------- 6. ETAT VIDE ---------------------------------------------------------------- L'ancien style.css du theme enfant force le message en 12px majuscules avec !important : on reprend la main, meme arme. ---------------------------------------------------------------- */ body .rbt-cart-side-menu .rbt-minicart-wrapper .section-title { text-align: center; } /* SANS le qualificatif `.side-menu-active` : pendant l'animation de fermeture cette classe tombe alors que le panneau est encore visible — scoper la regle a l'etat actif faisait retomber le message sur le style H3 geant du theme sous les yeux de l'utilisateur (bug constate). La specificite (0,4,1) suffit a battre la vieille regle du style.css enfant, elle, scopee a l'etat actif ((0,3,0) !important). */ body .rbt-cart-side-menu .rbt-minicart-wrapper .rbt-title-style-2 { font-size: 15px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; opacity: 1 !important; color: #475467; margin: 18px 0 0 !important; } body .rbt-cart-side-menu .rbt-no-cart-item-exits { margin-top: 26px; } body .rbt-cart-side-menu .rbt-no-cart-item-exits img { width: 110px !important; height: auto !important; display: block; margin: 0 auto; opacity: .9; } /* « Retour a la boutique » : contour, centre. */ body .rbt-cart-side-menu .rbt-minicart-wrapper a.rbt-btn.rbt-switch-btn { box-sizing: border-box !important; display: flex !important; align-items: center; justify-content: center; width: auto !important; margin: 24px auto 0 !important; height: 44px !important; line-height: 1 !important; padding: 0 24px !important; border-radius: 10px !important; background: transparent !important; background-image: none !important; border: 2px solid var(--color-primary, #501AA2) !important; color: var(--color-primary, #501AA2) !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; } body .rbt-cart-side-menu .rbt-minicart-wrapper a.rbt-btn.rbt-switch-btn span { color: inherit !important; } body .rbt-cart-side-menu .rbt-minicart-wrapper a.rbt-btn.rbt-switch-btn:hover { background: rgba(80, 26, 162, .07) !important; } /* ---------------------------------------------------------------- 7. MOBILE ---------------------------------------------------------------- */ @media (max-width: 480px) { body .rbt-cart-side-menu { width: 100vw; max-width: 100vw; } body .rbt-cart-side-menu .inner-wrapper .inner-top { padding: 16px 18px !important; } body .rbt-cart-side-menu .side-nav { padding-left: 18px; padding-right: 18px; } body .rbt-cart-side-menu .rbt-minicart-footer { padding: 0 18px 18px; } } /* ---------------------------------------------------------------- 8. MOUVEMENT REDUIT ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .mu-cart-backdrop, body .rbt-cart-side-menu, body .rbt-cart-side-menu .rbt-minicart-wrapper .minicart-item, body .rbt-cart-side-menu .minicart-close-button i, body .rbt-cart-side-menu .woocommerce-mini-cart__buttons .checkout-btn a.rbt-btn { transition: none !important; animation: none !important; } body .rbt-cart-side-menu .rbt-minicart-wrapper .minicart-item { opacity: 1; transform: none; } body .rbt-cart-side-menu .rbt-cart-subttotal .mu-cart-pulse { animation: none !important; } } /* ================================================================ 9. COURS DEJA AU PANIER : LE BOUTON DEVIENT « VOIR LE PANIER » ---------------------------------------------------------------- Deux sources pour ce bouton : - au rendu de la page : inc/mu-cart.php (filtre WooCommerce woocommerce_loop_add_to_cart_link) remplace le bouton d'ajout par celui-ci quand le produit est deja dans le panier ; - apres un ajout AJAX : js/mu-cart.js transforme le bouton clique SUR PLACE (meme element, pas de second bouton). Le clic ouvre le panneau lateral — aucune navigation. WooCommerce ajoute de son cote un lien « Voir le panier » (a.added_to_cart) SOUS le bouton d'origine : c'est le doublon constate sur les cartes. Il est definitivement masque ci-dessous — notre bouton transforme le remplace. ================================================================ */ a.added_to_cart.wc-forward { display: none !important; } /* Etat « dans le panier » : bouton PLEIN (l'ajout est en contour), meme geometrie que le bouton d'ajout des cartes. POURQUOI LA CLASSE EST REPETEE DIX FOIS : une fois transforme, le bouton n'a plus la classe add_to_cart_button — toute l'armure de custom-buttons.css cesse donc de s'appliquer, et les regles !important du theme (mesurees jusqu'a (0,9,1), voir l'entree « guerre de specificite » du journal) reprenaient la main : le bouton s'affichait en blanc. Repeter `.mu-open-cart` porte legalement la specificite a (0,10,1) : au-dessus de tout ce que le theme possede, quel que soit le contexte (carte, panneau, ailleurs). NE PAS « simplifier ». */ a.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px; width: 100% !important; min-height: 44px !important; height: auto !important; padding: 10px 18px !important; background: linear-gradient(135deg, #7a48e6 0%, #501AA2 100%) !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important; white-space: nowrap; box-shadow: 0 6px 16px rgba(80, 26, 162, .25); transition: box-shadow .2s ease, transform .2s ease; } a.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart:hover, a.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart:focus { background: linear-gradient(135deg, #7a48e6 0%, #501AA2 100%) !important; color: #fff !important; box-shadow: 0 10px 22px rgba(80, 26, 162, .38); transform: translateY(-1px); } a.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart .cart-text, a.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart [class*="tutor-icon-"] { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; } /* Le soulignement fantome du theme sur les liens ((0,8,1) !important chez lui : meme armure ici). */ a.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart::before, a.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart.mu-open-cart::after { content: none !important; display: none !important; } a.mu-open-cart:focus-visible { outline: 2px solid #fff; outline-offset: -4px; } @media (prefers-reduced-motion: reduce) { a.mu-open-cart { transition: none !important; } a.mu-open-cart:hover { transform: none; } } /* ================================================================ 10. PAGE /panier/ (bloc panier WooCommerce) ---------------------------------------------------------------- La page est rendue par le BLOC WooCommerce (wp-block-woocommerce- cart, classes wc-block-* stables d'une version a l'autre), pose dans un conteneur .math-universe-cart-page ecrit dans le contenu de la page elle-meme. Probleme signale : contenu colle au header et au footer. On respire, et on aligne le style sur le reste du site (cartes blanches arrondies, ombres douces, degrade de marque). ================================================================ */ .math-universe-cart-page { padding: clamp(40px, 6vw, 72px) 16px clamp(64px, 8vw, 110px); max-width: 1240px; margin: 0 auto; } /* ---- Liste des articles : une carte ---------------------------- */ .math-universe-cart-page table.wc-block-cart-items { background: #fff; border-radius: 18px; box-shadow: 0 16px 44px rgba(16, 24, 40, .08); overflow: hidden; border-collapse: separate; border-spacing: 0; } .math-universe-cart-page .wc-block-cart-items thead { background: linear-gradient(90deg, #501AA2 0%, #8b5cf6 100%); } .math-universe-cart-page .wc-block-cart-items th { color: #fff !important; font-size: 12.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 14px 18px; border: 0; } .math-universe-cart-page .wc-block-cart-items td { padding: 20px 18px; border-top: 1px solid #f0f1f5; vertical-align: top; } .math-universe-cart-page .wc-block-cart-items__row:first-child td { border-top: 0; } /* vignette */ .math-universe-cart-page .wc-block-cart-item__image img { width: 86px; max-width: 86px; border-radius: 12px; border: 1px solid #eef0f4; } /* nom du cours */ .math-universe-cart-page .wc-block-components-product-name { font-size: 15px; font-weight: 600; line-height: 1.45; color: #192335 !important; text-decoration: none !important; } .math-universe-cart-page .wc-block-components-product-name:hover { color: var(--color-primary, #501AA2) !important; } /* pastille « Economisez X » */ .math-universe-cart-page .wc-block-components-sale-badge { background: #fff4e5; color: #8a5600; border: 1px solid #ffd9a0; border-radius: 999px; font-size: 12px; font-weight: 600; padding: 3px 10px; text-transform: none; } /* prix */ .math-universe-cart-page .wc-block-components-product-price { font-weight: 700; color: #192335; } .math-universe-cart-page .wc-block-components-product-price del { color: #98a0ad; font-weight: 500; } .math-universe-cart-page .wc-block-cart-item__total .wc-block-components-product-price { font-size: 16px; } /* lien/bouton de suppression */ .math-universe-cart-page .wc-block-cart-item__remove-link { color: #98a0ad; font-size: 13px; text-decoration: none; border: 0; background: none; cursor: pointer; transition: color .18s ease; } .math-universe-cart-page .wc-block-cart-item__remove-link:hover { color: #c62828; text-decoration: none; } /* ---- Colonne resume ------------------------------------------- */ .math-universe-cart-page .wc-block-cart__sidebar { position: sticky; top: 110px; } .math-universe-cart-page .wp-block-woocommerce-cart-order-summary-block { background: #fff; border-radius: 18px; box-shadow: 0 16px 44px rgba(16, 24, 40, .08); padding: 10px 22px 22px; } .math-universe-cart-page .wc-block-components-totals-wrapper { border-color: #f0f1f5; } /* « Total estime » : la ligne qui compte */ .math-universe-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 17px; font-weight: 700; color: #192335; } .math-universe-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 22px; font-weight: 800; color: var(--color-primary, #501AA2); } /* bouton « Valider la commande » : meme langage que le panneau lateral */ .math-universe-cart-page .wc-block-cart__submit-button, .math-universe-cart-page .wc-block-cart__submit-container a { background: linear-gradient(135deg, #7a48e6 0%, #501AA2 100%) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; min-height: 52px; font-size: 16px !important; font-weight: 600 !important; box-shadow: 0 10px 24px rgba(80, 26, 162, .30); transition: box-shadow .2s ease, transform .2s ease; } .math-universe-cart-page .wc-block-cart__submit-button:hover, .math-universe-cart-page .wc-block-cart__submit-container a:hover { box-shadow: 0 14px 30px rgba(80, 26, 162, .42); transform: translateY(-1px); color: #fff !important; } /* champ code promo */ .math-universe-cart-page .wc-block-components-totals-coupon .wc-block-components-text-input input { border-radius: 8px; } .math-universe-cart-page .wc-block-components-totals-coupon__button { border-radius: 8px !important; } /* ---- Etat vide ------------------------------------------------- */ .math-universe-cart-page .wp-block-woocommerce-empty-cart-block { padding: clamp(24px, 5vw, 56px) 16px; text-align: center; } /* l'icone du bloc (masque SVG colore par currentColor) : geante et noire par defaut — on la reduit et on la met aux couleurs du site */ .math-universe-cart-page .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { height: 7em; color: var(--color-primary, #501AA2); opacity: .85; } .math-universe-cart-page .wc-block-cart__empty-cart__title { font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: #192335; } .math-universe-cart-page .wp-block-separator.is-style-dots { color: #b9a6e3; } /* boutons eventuels de l'etat vide (« Retour a la boutique ») */ .math-universe-cart-page .wp-block-woocommerce-empty-cart-block .wp-block-button__link { background: transparent !important; border: 2px solid var(--color-primary, #501AA2) !important; color: var(--color-primary, #501AA2) !important; border-radius: 10px !important; font-weight: 600 !important; padding: 12px 26px !important; } /* ---- Mobile ---------------------------------------------------- */ @media (max-width: 781px) { .math-universe-cart-page { padding-left: 12px; padding-right: 12px; } .math-universe-cart-page .wc-block-cart__sidebar { position: static; } .math-universe-cart-page .wc-block-cart-items td { padding: 14px 12px; } .math-universe-cart-page .wc-block-cart-item__image img { width: 64px; } }