/* ========================================================== WooCommerce — Lauxane Home Cohérent avec assets/css/tokens.css (bundle.css) - Couleurs : var(--gold), var(--gold-strong), var(--champagne), var(--ink) - Surfaces : var(--panel), var(--shadow) - CTA stroke : var(--cta-stroke), var(--cta-stroke-hover) ========================================================== */ /* ============ Fil d’Ariane ============ */ .woocommerce-breadcrumb{ text-align:center; font: 500 14px/1.4 ui-sans-serif,system-ui,Inter,Helvetica,Arial; color: var(--gold); margin: 20px 0 40px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, #fff 75%); } .woocommerce-breadcrumb a{ color: var(--cta-stroke); text-decoration: none; } .woocommerce-breadcrumb a:hover{ color: var(--gold-strong); text-decoration: underline; text-underline-offset: 2px; } /* ============ Résultats & Tri ============ */ .woocommerce-result-count{ font: 400 13px/1.4 ui-sans-serif,system-ui,Inter,Helvetica,Arial; color: var(--gold); margin: 0; } .woocommerce-ordering{ font: 600 14px/1 ui-sans-serif,system-ui,Inter,Helvetica,Arial; padding: 10px 20px; border: 1px solid color-mix(in srgb, var(--gold) 40%, #fff 60%); border-radius: 999px; background: color-mix(in srgb, var(--champagne) 55%, #fff 45%); position: relative; width: auto; white-space: nowrap; box-sizing: border-box; } @media (max-width:768px){ .woocommerce-ordering{ font-size:13px; padding:8px 16px; max-width: 90%; margin: 0 auto; } } .woocommerce-ordering select{ border:0; background:transparent; color: var(--gold); font: inherit; font-weight:700; cursor:pointer; padding-right: 28px; appearance:none; outline:0; background-image: url('data:image/svg+xml;utf8,'); background-repeat:no-repeat; background-position:right 10px center; background-size: 12px; } .woocommerce-ordering select:focus{ outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: 999px; } /* ============ En-tête liste produits ============ */ .woocommerce-products-header{ display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap; text-align:center; margin:40px auto; width:100%; max-width:1180px; padding-left: clamp(16px,4vw,48px); padding-right: clamp(16px,4vw,48px); } @media (max-width:768px){ .woocommerce-products-header{ flex-direction:column; gap:12px; margin:24px auto 16px; } } /* Masque le titre Woo si géré ailleurs */ .woocommerce-products-header__title.page-title{ display:none !important; } /* ============ Bannière boutique ============ */ .banniere-boutique-lauxane{ text-align:center; padding:60px 20px; background: color-mix(in srgb, var(--champagne) 70%, #fff 30%); border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, #fff 75%); box-shadow: var(--shadow); max-width:1180px; margin:0 auto; animation: shopFadeIn 1.0s ease-out both; } .banniere-boutique-lauxane .titre-boutique-lauxane{ font-family: var(--heading-font, "Cormorant Garamond", serif); font-size: 32px; font-weight:500; font-style:normal; color: var(--gold); letter-spacing:-.008em; text-transform:none; margin:0 0 10px; } .banniere-boutique-lauxane .sous-titre-boutique-lauxane{ font-size:16px; color: color-mix(in srgb, var(--ink) 60%, #000 40%); font-style:italic; margin:0 0 20px; } .separateur-boutique-lauxane{ width:60px; height:2px; background: var(--gold); margin:0 auto; border-radius:2px; } @keyframes shopFadeIn{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} } /* ============ Catégories (pills) ============ */ .lauxane-category-scroll{ display:flex; justify-content:center; align-items:flex-start; overflow-x:auto; padding:1rem 0; background: color-mix(in srgb, var(--champagne) 70%, #fff 30%); border-top:1px solid color-mix(in srgb, var(--gold) 25%, #fff 75%); } .lauxane-category-tabs{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; align-items:flex-start; max-width:100%; } .cat-pill-wrapper{ position:relative; display:flex; flex-direction:column; align-items:center } .cat-pill{ display:inline-flex; align-items:center; justify-content:center; min-height: 2.5rem; padding:.5rem 1.1rem; white-space:nowrap; background: color-mix(in srgb, var(--gold) 10%, #fff 90%); color: color-mix(in srgb, var(--gold) 60%, #000 40%); border:1px solid color-mix(in srgb, var(--gold) 35%, #fff 65%); border-radius:999px; font: 500 .95rem/1 ui-sans-serif,system-ui,Inter,Helvetica,Arial; transition: .2s ease; } .cat-pill:hover{ background: var(--gold); color:#fff; border-color: var(--gold) } .cat-pill.active{ background: var(--gold); color:#fff; border-color: var(--gold) } .subcat-dropdown{ display:none; margin-top:.5rem; padding:.5rem; width:auto; max-width:220px; white-space:nowrap; background:#fff; border:1px solid color-mix(in srgb, var(--gold) 25%, #000 75%); border-radius:.75rem; box-shadow: var(--shadow); z-index:20; } .cat-pill-wrapper:hover .subcat-dropdown{ display:block } .subcat-link{ display:block; padding:.4rem .8rem; border-radius:.5rem; color: color-mix(in srgb, var(--gold) 55%, #000 45%); text-decoration:none; font-size:.875rem; } .subcat-link:hover{ background: color-mix(in srgb, var(--gold) 12%, #fff 88%) } .cat-toggle-button{ display:none; font:600 .9rem/1 ui-sans-serif,system-ui,Inter,Helvetica,Arial; color: var(--gold); background:#fff; border:1px solid var(--gold); border-radius:999px; padding:.5rem 1.4rem; margin:0 auto 1rem; cursor:pointer; box-shadow: 0 2px 4px rgba(0,0,0,.05); transition:.2s ease; } .cat-toggle-button:hover{ background: var(--gold); color:#fff } @media (max-width:768px){ .cat-toggle-button{ display:inline-flex; align-items:center; justify-content:center } .lauxane-category-scroll{ padding:1rem; border-radius:1rem; width:calc(100% - 2rem); margin:0 auto } .lauxane-category-tabs{ display:none } .lauxane-category-tabs.show{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; padding-top:.5rem } } /* ============ Grille produits ============ */ .woocommerce ul.products{ display:grid !important; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; margin: 0 auto 80px; padding: 0; justify-items:center; width:100%; max-width:1180px; } @media (max-width:768px){ .woocommerce ul.products{ grid-template-columns: repeat(2,1fr); gap:16px; margin-bottom:64px; padding:0 12px } } /* ============ Carte produit ============ */ .woocommerce ul.products li.product{ all: unset; display:flex; flex-direction:column; align-items:center; width:100%; position:relative; overflow:hidden; cursor:pointer; border-radius:12px; background:transparent; box-shadow: 0 2px 6px rgba(0,0,0,.04); transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease, border-color .35s ease; } .woocommerce ul.products li.product:hover{ transform: translateY(-6px); background: var(--panel); border:1px solid var(--gold); border-radius:14px; box-shadow: 0 12px 24px rgba(156,107,47,.12); padding: 8px; } /* Image 2:3 + zoom doux */ .woocommerce ul.products li.product img{ width:100%; aspect-ratio: 2/3; object-fit:cover; display:block; border-radius:12px; transition: transform .35s ease, opacity .35s ease; margin:0; opacity:1; } .woocommerce ul.products li.product:hover img{ transform: scale(1.03) } /* Catégorie, titre, prix, bouton — apparitions progressives */ .woocommerce ul.products li.product .ast-woo-product-category, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .button{ opacity:0; visibility:hidden; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; pointer-events:none; margin-top:4px; text-align:center; } .woocommerce ul.products li.product:hover .ast-woo-product-category, .woocommerce ul.products li.product:hover .woocommerce-loop-product__title, .woocommerce ul.products li.product:hover .price, .woocommerce ul.products li.product:hover .button{ opacity:1; visibility:visible; transform:none; pointer-events:auto; } /* Typo micro-ajustements */ .woocommerce ul.products li.product .woocommerce-loop-product__title{ margin:2px 0 0 } .woocommerce ul.products li.product .ast-woo-product-category{ color:#888; font-size:13px; font-weight:400; margin-bottom:2px; } .woocommerce ul.products li.product .price{ font-size: 22px; font-weight:600; color: var(--gold); margin:0 0 6px; } /* Bouton = style "btn-stroke" (cohérent masterclass) */ .woocommerce ul.products li.product a.button{ display:none; } .woocommerce ul.products li.product:hover a.button{ display:inline-flex; align-items:center; justify-content:center; gap:.5ch; padding:10px 22px; font:600 13px/1 ui-sans-serif,system-ui,Inter,Helvetica,Arial; color: var(--cta-stroke); background:#fff; border:1.5px solid var(--cta-stroke); border-radius:999px; letter-spacing:.02em; transition: background .18s ease, color .18s ease, border-color .18s ease; text-transform: none; } .woocommerce ul.products li.product:hover a.button:hover{ background: color-mix(in srgb, var(--gold) 10%, #fff 90%); border-color: var(--cta-stroke-hover); color: var(--cta-stroke-hover); text-decoration:none; } /* Prix flottant (overlay) — desktop + mobile */ @media (min-width:769px){ .woocommerce ul.products li.product .price-overlay{ position:absolute; right:12px; bottom:12px; background: rgba(255,255,255,.92); color: var(--gold); font-weight:600; font-size:15px; padding:6px 10px; border-radius:8px; box-shadow: 0 2px 6px rgba(0,0,0,.08); z-index:10; display:block; } } @media (max-width:768px){ .woocommerce ul.products li.product .price-overlay{ position:absolute; right:12px; bottom:12px; background: rgba(255,255,255,.85); color: var(--gold); font-weight:600; font-size:14px; padding:6px 10px; border-radius:8px; box-shadow: 0 2px 6px rgba(0,0,0,.10); display:block; } /* Carte « active » sur mobile (si tu l’utilises via JS) */ .woocommerce ul.products li.product.active{ background: var(--panel); border:1px solid var(--gold); border-radius:14px; padding:12px; box-shadow: var(--shadow); } .woocommerce ul.products li.product.active .price-overlay{ display:none } } /* ============ Related / Upsells : mêmes règles ============ */ .woocommerce .related ul.products li.product, .woocommerce .upsells ul.products li.product{ all: unset; display:flex; flex-direction:column; align-items:center; width:100%; position:relative; overflow:hidden; cursor:pointer; border-radius:12px; background:transparent; transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease, border-color .35s ease; } .woocommerce .related ul.products li.product:hover, .woocommerce .upsells ul.products li.product:hover{ transform: translateY(-6px); background: var(--panel); border:1px solid var(--gold); border-radius:14px; box-shadow: 0 12px 24px rgba(156,107,47,.12); padding: 8px; } /* Révélations */ .woocommerce .related ul.products li.product .ast-woo-product-category, .woocommerce .related ul.products li.product .woocommerce-loop-product__title, .woocommerce .related ul.products li.product .price, .woocommerce .related ul.products li.product .button, .woocommerce .upsells ul.products li.product .ast-woo-product-category, .woocommerce .upsells ul.products li.product .woocommerce-loop-product__title, .woocommerce .upsells ul.products li.product .price, .woocommerce .upsells ul.products li.product .button{ opacity:0; visibility:hidden; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; pointer-events:none; } .woocommerce .related ul.products li.product:hover .ast-woo-product-category, .woocommerce .related ul.products li.product:hover .woocommerce-loop-product__title, .woocommerce .related ul.products li.product:hover .price, .woocommerce .related ul.products li.product:hover .button, .woocommerce .upsells ul.products li.product:hover .ast-woo-product-category, .woocommerce .upsells ul.products li.product:hover .woocommerce-loop-product__title, .woocommerce .upsells ul.products li.product:hover .price, .woocommerce .upsells ul.products li.product:hover .button{ opacity:1; visibility:visible; transform:none; pointer-events:auto; } /* ============ Conteneurs alignement (panier/checkout) ============ */ .woocommerce-page .ast-container, .woocommerce-cart .ast-container, .woocommerce-checkout .ast-container{ max-width:1180px; padding-left: clamp(16px,4vw,48px); padding-right: clamp(16px,4vw,48px); margin:0 auto; box-sizing:border-box; } /* ============ Bouton checkout cohérent (stroke) ============ */ .checkout-button.button.alt.wc-forward{ display:block; width:fit-content; margin:15px auto 0; font:600 14px/1 ui-sans-serif,system-ui,Inter,Helvetica,Arial; color: var(--cta-stroke); background:#fff; border:1.5px solid var(--cta-stroke); border-radius:999px; padding:10px 24px; text-transform:none; transition: background .18s ease, color .18s ease, border-color .18s ease; } .checkout-button.button.alt.wc-forward:hover{ background: color-mix(in srgb, var(--gold) 12%, #fff 88%); color: var(--cta-stroke-hover); border-color: var(--cta-stroke-hover); } /* ============ Divers harmonisation panier ============ */ .woocommerce-cart h1.entry-title, .woocommerce-cart .cart_totals h2{ color: var(--gold); font-family: var(--heading-font, "Cormorant Garamond", serif); text-transform: uppercase; letter-spacing:.04em; font-weight:600; font-size:1.8rem; } .woocommerce-cart th{ color: var(--gold); font-weight:600; } .woocommerce-cart .cart_totals td, .woocommerce-cart .cart-subtotal .amount, .woocommerce-cart .order-total .amount, .woocommerce-cart .shipping td, .woocommerce td.product-subtotal, .woocommerce td.product-price, .woocommerce td.product-total{ color: var(--gold); font-weight:500; } /* ============ Hamburger (mobile) ============ */ .ast-header-break-point .main-header-menu-toggle{ background: color-mix(in srgb, #fff 92%, var(--champagne) 8%) !important; border:1px solid var(--gold) !important; border-radius:8px; width:42px; height:42px; display:flex !important; align-items:center; justify-content:center; padding:0; box-shadow:none; } .ast-header-break-point .main-header-menu-toggle svg, .ast-header-break-point .main-header-menu-toggle .ast-icon{ width:20px !important; height:20px !important; fill: var(--gold) !important; stroke: var(--gold) !important; color: var(--gold) !important; } /* === FIX PRIX & BOUTON – cartes boutique, related, upsells === */ /* 1) Prix doré (y compris promo ins/del) */ .woocommerce ul.products li.product .price, .woocommerce .related ul.products li.product .price, .woocommerce .upsells ul.products li.product .price, .woocommerce ul.products li.product .price .amount, .woocommerce .related ul.products li.product .price .amount, .woocommerce .upsells ul.products li.product .price .amount, .woocommerce ul.products li.product .price ins .amount, .woocommerce ul.products li.product .price del .amount { color: var(--cta-stroke, var(--doré-naturel, #a8743b)) !important; font-weight: 600; } /* Aspect des prix barrés (promo) */ .woocommerce ul.products li.product .price del { opacity: .65; } .woocommerce ul.products li.product .price ins { text-decoration: none; } /* 2) Bouton “add-to-cart / choix des options” = style btn-stroke */ .woocommerce ul.products li.product a.button, .woocommerce .related ul.products li.product a.button, .woocommerce .upsells ul.products li.product a.button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--cta-stroke, var(--doré-naturel, #a8743b)); background: #fff; color: #6C4920 !important; font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: none; /* pas de MAJUSCULES forcées */ box-shadow: none; transition: all .18s ease; } /* Hover du bouton (cohérent avec .btn-stroke) */ .woocommerce ul.products li.product a.button:hover, .woocommerce .related ul.products li.product a.button:hover, .woocommerce .upsells ul.products li.product a.button:hover { background: #FAF2E7; border-color: var(--cta-stroke-hover, #7D5727); color: var(--cta-stroke-hover, #7D5727) !important; text-decoration: underline; text-underline-offset: 3px; } /* 3) Petites priorités pour l’état “active” de tes cartes */ .woocommerce ul.products li.product.active .price { color: var(--cta-stroke, var(--doré-naturel, #a8743b)) !important; } .woocommerce ul.products li.product.active a.button { display: inline-flex !important; } /* === PRICE OVERLAY — unifié (boutique, related, upsells) === */ /* Conteneur du pill */ .woocommerce ul.products li.product .price-overlay, .woocommerce .related ul.products li.product .price-overlay, .woocommerce .upsells ul.products li.product .price-overlay{ position: absolute; right: 12px; bottom: 12px; z-index: 12; /* au-dessus de ::before et de l'image */ display: inline-block; padding: 6px 10px; border-radius: 10px; /* look verre dépoli + léger liseré doré */ background: color-mix(in srgb, #fff 92%, var(--champagne, #FBF7F2) 8%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid color-mix(in srgb, var(--cta-stroke, var(--doré-naturel, #a8743b)) 45%, #fff 55%); box-shadow: 0 2px 6px rgba(0,0,0,.08); /* typo */ font-size: 14px; line-height: 1.2; font-weight: 600; color: var(--cta-stroke, var(--doré-naturel, #a8743b)); } /* Forcer la teinte dorée à l’intérieur (y compris promo) */ .woocommerce .price-overlay, .woocommerce .price-overlay *, .woocommerce .price-overlay .amount, .woocommerce .price-overlay bdi{ color: var(--cta-stroke, var(--doré-naturel, #a8743b)) !important; } .woocommerce .price-overlay del{ opacity:.55; margin-right:.35ch } .woocommerce .price-overlay ins{ text-decoration:none } /* Comportement quand la carte “s’ouvre” au hover/active */ .woocommerce ul.products li.product:hover .price-overlay, .woocommerce ul.products li.product.active .price-overlay{ opacity: 0; transition: opacity .18s cubic-bezier(.22,.61,.36,1); } /* Mobile : pill compact */ @media (max-width: 768px){ .woocommerce ul.products li.product .price-overlay, .woocommerce .related ul.products li.product .price-overlay, .woocommerce .upsells ul.products li.product .price-overlay{ right: 8px; bottom: 8px; padding: 4px 8px; font-size: 12px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.06); } } /* Masquer toutes les notations (étoiles) WooCommerce */ .woocommerce .star-rating, .woocommerce ul.products li.product .star-rating, .woocommerce .products .star-rating, .woocommerce .woocommerce-product-rating, .woocommerce .woocommerce-review-link, .woocommerce .widget .star-rating, .single-product .woocommerce-product-rating, .single-product .star-rating, .related .star-rating, .upsells .star-rating, .ast-woo-shop-product-rating { display: none !important; visibility: hidden !important; } /* Supprimer l’espace résiduel éventuel */ .woocommerce .woocommerce-product-rating { margin: 0 !important; height: 0 !important; } /* ========================================================= MOBILE (≤768px) — Bouton "retour haut" bien dans l'écran (Woo shop / archives / catégories) ========================================================= */ /* 0) Couper tout débordement horizontal propre aux listes Woo */ @media (max-width:768px){ body.woocommerce, body.post-type-archive-product, body.tax-product_cat{ overflow-x: hidden !important; /* évite le scroll latéral qui "emmène" le bouton */ } } /* 1) Repositionner le bouton côté viewport + safe areas */ @media (max-width:768px){ body.woocommerce #ast-scroll-top, body.post-type-archive-product #ast-scroll-top, body.tax-product_cat #ast-scroll-top{ position: fixed !important; z-index: 2147483647 !important; /* cible viewport, pas le conteneur */ inset-inline-end: max(16px, env(safe-area-inset-right)) !important; inset-block-end: max(18px, env(safe-area-inset-bottom)) !important; right: auto !important; /* neutralise règles "physiques" du thème */ left: auto !important; bottom: auto !important; transform: none !important; -webkit-transform: none !important; /* tap target cohérente */ width: 48px !important; height: 48px !important; line-height: 48px !important; border-radius: 999px !important; } } /* 2) Très petits écrans */ @media (max-width:360px){ body.woocommerce #ast-scroll-top, body.post-type-archive-product #ast-scroll-top, body.tax-product_cat #ast-scroll-top{ width: 44px !important; height: 44px !important; line-height: 44px !important; inset-inline-end: max(12px, env(safe-area-inset-right)) !important; inset-block-end: max(14px, env(safe-area-inset-bottom)) !important; } } /* ========================================================= CTA — Unifié (identique aux CTA des cartes) S'appuie sur les tokens définis dans tokens.css : --cta-strong: #795324; --cta-strong-hover: #6F4A1F; --cta-strong-border: #6F4A1F ========================================================= */ /* 1) Reset des effets qui délavent la couleur */ :where(.woocommerce) :where( a.button, button.button, input.button, .single_add_to_cart_button, .button.alt ){ background-image: none !important; text-shadow: none !important; box-shadow: none !important; filter: none !important; } /* 2) Base = même gabarit/couleurs que les cartes */ :where(.woocommerce) :where( a.button, button.button, input.button, .single_add_to_cart_button, .button.alt ){ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; box-sizing: border-box; height: 38px; /* idem cartes */ padding: 0 16px; /* idem cartes */ border-radius: 999px; background-color: var(--cta-strong) !important; border: 1px solid var(--cta-strong-border) !important; color: #fff !important; -webkit-text-fill-color: #fff; font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; user-select: none; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease; } /* 3) Hover/active = comme la carte */ :where(.woocommerce) :where( a.button, button.button, input.button, .single_add_to_cart_button, .button.alt ):hover{ background-color: var(--cta-strong-hover) !important; border-color: var(--cta-strong-border) !important; /* tokens = #795324 */ box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 1px color-mix(in srgb, var(--cta-strong) 42%, transparent) inset; } :where(.woocommerce) :where( a.button, button.button, input.button, .single_add_to_cart_button, .button.alt ):active{ transform: translateY(1px); box-shadow: 0 1px 4px rgba(0,0,0,.10); } /* 4) Focus clavier (cohérent avec tokens --ring) */ :where(.woocommerce) :where( a.button, button.button, input.button, .single_add_to_cart_button, .button.alt ):focus-visible{ outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 8px; } /* 5) États Woo communs */ :where(.woocommerce) :where(a.button.loading, button.button.loading, input.button.loading){ opacity: .8; pointer-events: none; } :where(.woocommerce) :where(a.button.disabled, button.button.disabled, input.button.disabled, .button[disabled], .button:disabled){ opacity: .5; cursor: not-allowed; box-shadow: none; } /* 6) Mobile : légère compaction au besoin */ @media (max-width: 768px){ :where(.woocommerce) :where( a.button, button.button, input.button, .single_add_to_cart_button, .button.alt ){ height: 36px; padding: 0 14px; font-size: 13px; letter-spacing: .055em; } } /* ========================================================= CTA — Complément : 1 ligne + largeur auto partout (à coller juste sous ton bloc CTA unifié) ========================================================= */ /* 1) Toujours sur une ligne + largeur auto */ :where(.woocommerce) :where( a.button, button.button, input.button, .single_add_to_cart_button, .button.alt ){ white-space: nowrap !important; /* 1 seule ligne */ width: auto !important; /* largeur = contenu */ max-width: none !important; /* pas de contrainte 100% héritée */ text-align: center !important; /* centrage du libellé */ overflow: visible !important; /* jamais rogné */ text-overflow: clip !important; /* pas d’ellipse */ } /* 2) Neutralise les “text-indent / padding fantômes” de Woo (loading/added) */ :where(.woocommerce) :where( a.button, button.button, input.button, .single_add_to_cart_button, .button.alt, a.button.loading, button.button.loading, input.button.loading, a.button.added, button.button.added, input.button.added ){ text-indent: 0 !important; padding-left: 16px !important; /* cohérent avec la base */ margin: 0 !important; } /* 3) Gutenberg / Elementor : même rendu (inline-flex + largeur auto) */ :where(.wp-element-button, .wp-block-button__link, .elementor-button){ display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; width: auto !important; height: 38px !important; /* même gabarit que les cartes */ padding: 0 16px !important; border-radius: 999px !important; background: var(--cta-strong) !important; border: 1px solid var(--cta-strong-border) !important; color: #fff !important; -webkit-text-fill-color:#fff !important; font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial) !important; letter-spacing: .06em !important; text-transform: uppercase !important; text-decoration: none !important; } :where(.wp-element-button, .wp-block-button__link, .elementor-button):hover{ background: var(--cta-strong-hover) !important; border-color: var(--cta-strong-border) !important; box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 1px color-mix(in srgb, var(--cta-strong) 42%, transparent) inset !important; } /* 4) Panier — zone coupon : garde des boutons à largeur auto, jamais 100% */ .woocommerce-cart .cart .actions{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .woocommerce-cart .cart .actions .coupon{ display: contents; /* input + bouton participent au flow */ } .woocommerce-cart .cart .actions .coupon .button, .woocommerce-cart .cart .actions > .button{ width: auto !important; /* pas de full-width */ white-space: nowrap !important; } /* 5) Mobile : conserve 1 ligne (boutons compacts) */ @media (max-width:768px){ :where(.woocommerce) :where( a.button, button.button, input.button, .single_add_to_cart_button, .button.alt, .wp-element-button, .wp-block-button__link, .elementor-button ){ height: 36px !important; padding: 0 14px !important; font-size: 13px !important; letter-spacing: .055em !important; } } /* ========================================================= CART — "Valider la commande" = même rendu que les autres CTA ========================================================= */ /* Auto-largeur centrée + une seule ligne */ .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button, .woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce a.checkout-button.button.alt, .woocommerce a.button.checkout-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; /* mêmes dimensions que nos CTA */ height: 38px !important; padding: 0 16px !important; border-radius: 999px !important; /* une seule ligne, jamais rogné */ white-space: nowrap !important; overflow: visible !important; text-overflow: unset !important; /* largeur auto et centrage dans le bloc totaux */ width: auto !important; margin: 12px auto 0 !important; } /* Typo identique (si un thème la surcharge) */ .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button, .woocommerce a.checkout-button.button.alt { font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial) !important; letter-spacing: .06em !important; text-transform: uppercase !important; text-decoration: none !important; text-align: center !important; color: #fff !important; -webkit-text-fill-color: #fff !important; background-color: var(--cta-strong) !important; border: 1px solid var(--cta-strong-border) !important; } /* Hover/active : même feedback que partout */ .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce a.checkout-button.button.alt:hover{ background-color: var(--cta-strong-hover) !important; border-color: var(--cta-strong-border) !important; box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 1px color-mix(in srgb, var(--cta-strong) 42%, transparent) inset; } .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:active, .woocommerce a.checkout-button.button.alt:active{ transform: translateY(1px); box-shadow: 0 1px 4px rgba(0,0,0,.10); } /* Supprime la petite flèche ajoutée par Woo (wc-forward) */ .woocommerce a.button.wc-forward::after{ content: none !important; } /* Mobile : compaction comme les autres CTA */ @media (max-width: 768px){ .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button, .woocommerce a.checkout-button.button.alt{ height: 36px !important; padding: 0 14px !important; font-size: 13px !important; letter-spacing: .055em !important; } } /* ========================================================= Woo — Boutons génériques (incl. "Voir le panier") --------------------------------------------------------- - 1 ligne, texte centré, largeur auto - supprime la flèche wc-forward - cohérence avec notre CTA global ========================================================= */ /* Base commune : 1 ligne + largeur auto partout */ :where(.woocommerce) :where( a.button, button.button, input.button, .single_add_to_cart_button, .added_to_cart, .button.alt, .wc-forward, .checkout-button ){ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* pas de 2e ligne */ white-space: nowrap !important; text-overflow: ellipsis !important; overflow: visible !important; /* largeur auto, jamais 100% imposé par le thème */ width: auto !important; /* garde le même gabarit et centrage que nos CTA */ height: 38px !important; padding: 0 16px !important; border-radius: 999px !important; /* typo / style unifiés (hérite déjà du bloc CTA) */ font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial) !important; letter-spacing: .06em !important; text-transform: uppercase !important; text-decoration: none !important; } /* Notices (“Produit ajouté au panier…”) — bouton "Voir le panier" */ .woocommerce-message .button.wc-forward, .woocommerce-info .button.wc-forward{ float: none !important; /* certains thèmes le flottent à droite */ margin-left: 10px !important; /* petit espace après le texte de la notice */ vertical-align: middle !important; } /* Mini-panier (sidebar / offcanvas) : mêmes règles + centrage horizontal */ .woocommerce-mini-cart__buttons .button{ width: auto !important; margin-inline: 6px !important; text-align: center !important; } /* Supprime la petite flèche par défaut sur wc-forward */ .woocommerce :is(a.button.wc-forward, .button.wc-forward)::after{ content: none !important; } /* Hover / active : même feedback que nos CTA */ .woocommerce :is(a.button, button.button, input.button, .single_add_to_cart_button, .button.alt, .wc-forward):hover{ background-color: var(--cta-strong-hover) !important; border-color: var(--cta-strong-border) !important; box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 1px color-mix(in srgb, var(--cta-strong) 42%, transparent) inset; } .woocommerce :is(a.button, button.button, input.button, .single_add_to_cart_button, .button.alt, .wc-forward):active{ transform: translateY(1px); box-shadow: 0 1px 4px rgba(0,0,0,.10); } /* Mobile : compaction identique */ @media (max-width: 768px){ :where(.woocommerce) :where( a.button, button.button, input.button, .single_add_to_cart_button, .added_to_cart, .button.alt, .wc-forward ){ height: 36px !important; padding: 0 14px !important; font-size: 13px !important; letter-spacing: .055em !important; } } /* Woo notices / mini-panier — centrer le texte du bouton "Voir le panier" */ .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button.wc-forward, .woocommerce .woocommerce-mini-cart__buttons .button.wc-forward { /* gabarit CTA */ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; padding-inline: 16px !important; /* ← paddings symétriques */ width: auto !important; white-space: nowrap !important; text-align: center !important; text-indent: 0 !important; /* annule un éventuel reset global */ border-radius: 999px !important; } /* supprime la flèche Woo + son espacement résiduel */ .woocommerce .button.wc-forward::after { content: none !important; } /* Au cas où un thème force un padding droit plus grand sur wc-forward */ .woocommerce .button.wc-forward { padding-right: 16px !important; } /* Même compaction mobile que les autres CTA */ @media (max-width: 768px){ .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button.wc-forward, .woocommerce .woocommerce-mini-cart__buttons .button.wc-forward{ height: 36px !important; padding-inline: 14px !important; font-size: 13px !important; letter-spacing: .055em !important; } } /* ========================================================= Mon compte — Actions des commandes Corrige le décalage du texte (icônes ::before Woo) et force le centrage partout (desktop + mobile) ========================================================= */ /* 1) Boutons d’actions (Voir, Facture, etc.) = même gabarit que CTA */ .woocommerce-account .woocommerce-orders-table__cell-order-actions .button, .woocommerce-account a.woocommerce-button.button.view, .woocommerce-account a.woocommerce-button.button.invoice, .woocommerce-orders-table__cell-order-actions .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; /* centrage horizontal */ height: 38px !important; padding: 0 16px !important; border-radius: 999px !important; white-space: nowrap !important; /* 1 seule ligne */ text-align: center !important; gap: 0 !important; /* pas d’espace fantôme */ } /* 2) Supprime l’icône/picto qui décale le texte sur “VOIR” (Woo ajoute ::before pour .button.view) */ .woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view::before, .woocommerce-account a.woocommerce-button.button.view::before, .woocommerce-orders-table__cell-order-actions .button.view::before, a.woocommerce-button.button.view::before { content: none !important; display: none !important; } /* (par sécurité) supprime aussi un éventuel ::after et évite le padding forcé */ .woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view::after, .woocommerce-account a.woocommerce-button.button.view::after { content: none !important; display: none !important; } .woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view { padding-left: 16px !important; /* remet un padding propre après suppression de l’icône */ } /* 3) Contenu interne (span/strong) ne doit pas reprendre 100% largeur */ .woocommerce-account .woocommerce-orders-table__cell-order-actions .button > span, .woocommerce-account .woocommerce-orders-table__cell-order-actions .button > strong, .woocommerce-account .woocommerce-orders-table__cell-order-actions .button > b { display: inline !important; flex: 0 0 auto !important; width: auto !important; text-align: inherit !important; /* conserve le centrage */ } /* 4) Espacement propre entre les deux actions */ .woocommerce-account .woocommerce-orders-table__cell-order-actions .button + .button { margin-left: .5rem !important; } /* 5) Mobile : même résultat, un poil plus compact */ @media (max-width: 768px){ .woocommerce-account .woocommerce-orders-table__cell-order-actions .button, .woocommerce-account a.woocommerce-button.button.view, .woocommerce-account a.woocommerce-button.button.invoice { height: 36px !important; padding: 0 14px !important; font-size: 13px !important; } } /* ========================================================= WOO — Panier (cart) : style cohérent Lauxane ========================================================= */ /* Conteneur/page */ .woocommerce-cart .entry-content, .woocommerce-cart .woocommerce{ color: var(--ink); } /* Table du panier */ :where(.woocommerce-cart) :where(table.shop_table.cart){ width: 100%; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); border-collapse: separate; border-spacing: 0; } :where(.woocommerce-cart) :where(table.shop_table.cart thead){ background: color-mix(in srgb, var(--champagne) 70%, #fff 30%); } :where(.woocommerce-cart) :where(table.shop_table.cart th){ font: 600 14px/1 var(--body-font); color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--line); text-transform: none; letter-spacing: .02em; } :where(.woocommerce-cart) :where(table.shop_table.cart td){ padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); vertical-align: middle; } /* Vignette produit */ :where(.woocommerce-cart) :where(td.product-thumbnail img){ width: 72px; height: 72px; object-fit: cover; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } /* Titre & lien produit */ :where(.woocommerce-cart) :where(td.product-name a){ color: var(--ink); text-decoration: none; font-weight: 600; } :where(.woocommerce-cart) :where(td.product-name a:hover){ text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 20%, transparent); } /* Prix alignés proprement */ :where(.woocommerce-cart) :where(td.product-price, td.product-subtotal, th.product-price, th.product-subtotal){ text-align: right; font-variant-numeric: tabular-nums; } /* Bouton supprimer (×) */ :where(.woocommerce-cart) :where(a.remove){ width: 28px; height: 28px; line-height: 26px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted) !important; background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease; } :where(.woocommerce-cart) :where(a.remove:hover){ color: #fff !important; background: var(--cta-strong); border-color: var(--cta-strong-border); box-shadow: 0 6px 16px rgba(0,0,0,.10); } /* Quantité */ :where(.woocommerce-cart) :where(.quantity input.qty){ width: 82px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); padding: 0 10px; font: 500 14px/1 var(--body-font); -moz-appearance: textfield; } :where(.woocommerce-cart) :where(.quantity input.qty:focus){ outline: 2px solid var(--ring); outline-offset: 2px; } :where(.woocommerce-cart) :where(.quantity input.qty::-webkit-outer-spin-button, .quantity input.qty::-webkit-inner-spin-button){ -webkit-appearance: none; margin: 0; } /* Ligne actions sous le tableau (coupon + update) */ :where(.woocommerce-cart) :where(.actions){ padding: 14px 16px; gap: 12px; } :where(.woocommerce-cart) :where(.actions .coupon){ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } :where(.woocommerce-cart) :where(#coupon_code){ height: 40px; padding: 0 12px; min-width: 200px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 500 14px/1 var(--body-font); color: var(--ink); } :where(.woocommerce-cart) :where(#coupon_code:focus){ outline: 2px solid var(--ring); outline-offset: 2px; } /* Les boutons ici héritent de ton bloc CTA global. On force juste quelques placements. */ :where(.woocommerce-cart) :where(button[name="apply_coupon"], button[name="update_cart"]){ margin-left: 0; } /* Totaux panier */ :where(.woocommerce-cart) :where(.cart-collaterals){ margin-top: clamp(18px, 3.4vw, 28px); } :where(.woocommerce-cart) :where(.cart-collaterals .cart_totals){ margin-left: auto; max-width: 520px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 18px; } :where(.woocommerce-cart) :where(.cart_totals h2){ font: 700 18px/1.1 var(--body-font); margin: 2px 0 12px; color: var(--ink); } :where(.woocommerce-cart) :where(.cart_totals table){ width: 100%; border-collapse: separate; border-spacing: 0; } :where(.woocommerce-cart) :where(.cart_totals table th, .cart_totals table td){ padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } :where(.woocommerce-cart) :where(.cart_totals table th){ color: var(--muted); font-weight: 600; text-align: left; } :where(.woocommerce-cart) :where(.cart_totals table td){ text-align: right; font-variant-numeric: tabular-nums; } :where(.woocommerce-cart) :where(.order-total th, .order-total td){ border-bottom: 0; font-weight: 750; } :where(.woocommerce-cart) :where(.order-total td){ background: color-mix(in srgb, var(--champagne) 50%, #fff 50%); padding: 12px; border-radius: 10px; } /* CTA “Passer à la commande” */ :where(.woocommerce-cart) :where(.wc-proceed-to-checkout){ margin-top: 16px; } :where(.woocommerce-cart) :where(.wc-proceed-to-checkout .checkout-button){ width: 100%; } /* Notices Woo */ :where(.woocommerce) :where(.woocommerce-info, .woocommerce-message, .woocommerce-error){ border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--champagne) 60%, #fff 40%); box-shadow: 0 1px 2px rgba(0,0,0,.04); } /* Responsive */ @media (max-width: 768px){ :where(.woocommerce-cart) :where(table.shop_table.cart th){ padding: 12px 14px; } :where(.woocommerce-cart) :where(table.shop_table.cart td){ padding: 12px 14px; } /* stack coupon + update */ :where(.woocommerce-cart) :where(.actions){ display: grid; gap: 10px; } :where(.woocommerce-cart) :where(.actions .coupon){ width: 100%; } :where(.woocommerce-cart) :where(#coupon_code){ flex: 1 1 auto; min-width: 0; } :where(.woocommerce-cart) :where(.cart-collaterals .cart_totals){ max-width: none; } } /* =============================== PANIER — Harmonisation Lauxane Dépend: tokens.css =============================== */ /* Table panier : bordures douces + espacements */ .woocommerce-cart table.shop_table { border: 0 !important; background: transparent !important; box-shadow: none !important; border-collapse: separate !important; border-spacing: 0 !important; } .woocommerce-cart table.shop_table th, .woocommerce-cart table.shop_table td{ border-top: 1px solid color-mix(in srgb, var(--line) 86%, #fff 14%) !important; padding: 14px 18px !important; vertical-align: middle !important; } .woocommerce-cart table.shop_table tr:first-child th, .woocommerce-cart table.shop_table tr:first-child td{ border-top: 0 !important; } /* Miniature produit : taille fixe + rayon */ .woocommerce-cart table.shop_table .product-thumbnail img{ width: 88px !important; height: 88px !important; object-fit: cover !important; border-radius: 12px !important; box-shadow: var(--shadow, 0 8px 22px rgba(156,107,47,.06)); } /* Nom produit + liens */ .woocommerce-cart .product-name a{ color: var(--ink); text-decoration: none; font-weight: 500; } .woocommerce-cart .product-name a:hover{ text-decoration: none; color: color-mix(in srgb, var(--ink) 85%, var(--gold) 15%); } /* Bouton retirer (x) */ .woocommerce-cart .product-remove .remove{ display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted) !important; line-height: 1; text-decoration: none !important; transition: border-color .18s ease, box-shadow .18s ease, color .18s ease; } .woocommerce-cart .product-remove .remove:hover{ border-color: var(--cta-stroke); color: var(--cta-stroke); box-shadow: 0 4px 12px rgba(0,0,0,.06); } /* Quantité : input propre */ .woocommerce-cart .quantity .qty{ width: 74px !important; height: 42px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; background: #fff !important; text-align: center !important; font-weight: 600; color: var(--ink); box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset; } .woocommerce-cart .quantity .qty:focus{ outline: 2px solid var(--ring); outline-offset: 2px; } /* Coupon + MAJ panier : champs alignés et cohérents */ .woocommerce-cart .coupon .input-text{ height: 44px !important; padding: 0 14px !important; border: 1px solid var(--line) !important; border-radius: 999px !important; background: #fff !important; min-width: min(280px, 100%); } .woocommerce-cart .coupon .input-text:focus{ outline: 2px solid var(--ring); outline-offset: 2px; } .woocommerce-cart .actions .button{ /* suit CTA.css ; on force juste le wrap */ white-space: nowrap !important; } /* Empilement mobile */ @media (max-width: 768px){ .woocommerce-cart .coupon{ display: grid !important; grid-template-columns: 1fr; gap: 10px; } .woocommerce-cart .actions{ display: grid !important; gap: 10px; } } /* Bloc TOTAL PANIER : carte cohérente + sticky desktop */ .woocommerce .cart-collaterals .cart_totals{ background: var(--panel) !important; border: 1px solid color-mix(in srgb, var(--cta-stroke) 22%, #E9DFD4) !important; border-radius: 16px !important; padding: 22px 24px !important; box-shadow: var(--shadow); } .woocommerce .cart-collaterals .cart_totals h2{ font-family: var(--heading-font); font-weight: 700; letter-spacing: .02em; color: var(--cta-stroke); margin: 8px 0 14px !important; } .woocommerce .cart-collaterals .cart_totals table{ border: 0 !important; background: transparent !important; } .woocommerce .cart-collaterals .cart_totals table tr th, .woocommerce .cart-collaterals .cart_totals table tr td{ border-top: 1px solid color-mix(in srgb, var(--line) 86%, #fff 14%) !important; padding: 12px 0 !important; } .woocommerce .cart-collaterals .cart_totals table tr:first-child th, .woocommerce .cart-collaterals .cart_totals table tr:first-child td{ border-top: 0 !important; } .woocommerce .cart-collaterals .cart_totals .order-total th, .woocommerce .cart-collaterals .cart_totals .order-total td strong{ font-weight: 700 !important; font-size: 1.08rem !important; } /* CTA “Valider la commande” : plein écran du bloc */ .woocommerce .cart-collaterals .wc-proceed-to-checkout{ margin-top: 14px !important; } .woocommerce .cart-collaterals .wc-proceed-to-checkout a.checkout-button{ width: 100% !important; /* pleine largeur */ } /* TOTAL PANIER – Expédition : éviter le chevauchement sur mobile */ @media (max-width: 768px){ /* 1) On supprime le label doublon généré par Woo (td::before) */ .woocommerce .cart-collaterals .cart_totals td::before{ content: none !important; display: none !important; } /* 2) Expédition : texte aligné à gauche et bien sur plusieurs lignes */ .woocommerce .cart-collaterals .cart_totals tr.shipping td{ text-align: left !important; white-space: normal !important; } .woocommerce .cart-collaterals .cart_totals tr.shipping td *{ white-space: normal !important; } } /* STICKY Desktop du totals (confort) */ @media (min-width: 992px){ .woocommerce .cart-collaterals .cart_totals{ position: sticky; top: 18px; } } /* Texte d’expédition / adresse : lisible et cohérent */ .woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-destination{ color: var(--muted); line-height: 1.45; } .woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-destination b, .woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-destination strong{ color: var(--ink); } /* Typos “libellé” (Sous-total, Expédition…) */ .woocommerce .cart-collaterals .cart_totals th{ color: var(--muted) !important; font-weight: 650 !important; } /* Petites mises au propre diverses */ .woocommerce .return-to-shop a{ /* profite du CTA global */ margin-top: 10px; } /* ========================================================= Woo ⟶ Mon compte : navigation + Commandes (pro & clair) - tokens : --panel --line --ink --muted --shadow --radius - CTA : profite du bloc CTA unifié déjà en place ========================================================= */ /* ---------- NAV latérale (look carte, état actif) ---------- */ .woocommerce-account .woocommerce-MyAccount-navigation { position: relative; z-index: 1; /* pas d’écrasement du contenu */ margin-bottom: 18px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 14px 18px; color: var(--ink); text-decoration: none; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a { background: #fbf7f2; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, #fff 70%); } /* Sticky doux sur grands écrans, sans chevauchement */ @media (min-width: 992px){ .woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: 24px; z-index: 0; } } /* ---------- Commandes : table → clean & lisible (desktop) ---------- */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table{ width:100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); } /* En-tête discret */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table thead th{ background: #fbf7f2; color: var(--muted); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--line); } /* Lignes & cellules */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr{ border-top: 1px solid var(--line); } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table td{ padding: 14px 16px; vertical-align: middle; background: var(--panel); } /* Groupe “Actions” : deux boutons alignés, espacés */ .woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions{ white-space: nowrap; } .woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions .button{ margin: 0 6px 0 0; /* petit gap horizontal */ } /* Colonne “Fichiers téléchargeables” (plugin WPO/WCPOA) */ .woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-wcpoa-attachment{ white-space: nowrap; } /* ---------- Commandes : mode carte lisible (mobile) ---------- */ @media (max-width: 768px){ /* On masque l’en-tête et on transforme chaque en “carte” */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table thead{ display:none; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody{ display: grid; gap: 12px; /* espace entre cartes */ } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr{ display: grid; grid-template-columns: 1fr; /* full width */ background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody td{ display: grid; grid-template-columns: auto 1fr; /* Label / Valeur */ align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr > td:first-child{ border-top: 0; } /* Label (vient du data-title Woo) */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table tbody td::before{ content: attr(data-title) " :"; font-weight: 600; color: var(--muted); } /* Actions : les 2 CTA sur une ligne, centrés */ .woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions{ grid-template-columns: 1fr; /* une seule colonne */ } .woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions::before{ content: "Actions :"; } .woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions .button{ margin: 0 8px 0 0; } /* Fichiers téléchargeables */ .woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-wcpoa-attachment::before{ content: "Fichiers téléchargeables :"; } } /* ---------- Boutons d’actions (VOIR / FACTURE / VIEW) ---------- */ /* profite du CTA unifié, on force centrage & min-width auto */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table .button{ display:inline-flex !important; align-items:center; justify-content:center; text-align:center; min-width: auto; /* largeur = au texte */ padding-inline: 16px; /* homogène */ } /* Traduction visuelle “VIEW” → “VOIR” si le plugin sort de l’anglais */ .woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-wcpoa-attachment a.woocommerce-button.button{ position: relative; } .woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-wcpoa-attachment a.woocommerce-button.button{ /* masque le texte interne si c'est “VIEW” */ color: transparent; } .woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-wcpoa-attachment a.woocommerce-button.button::before{ content: "VOIR"; color:#fff; /* reprend la couleur CTA */ position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; pointer-events:none; } /* ---------- Petites finitions typographiques ---------- */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table td .total .amount, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table td .order-total{ font-weight: 600; } /* ===== Mon compte → Commandes : alignements simples & fiables ===== */ /* 1) Cellules lisibles + centrage vertical partout */ .woocommerce-account table.my_account_orders th, .woocommerce-account table.my_account_orders td{ padding: 12px 14px; vertical-align: middle; border-color: var(--line, #eadfd2); } /* 2) Colonne Actions : centrée, boutons sur une ligne */ .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-actions{ text-align: center; white-space: nowrap; } .woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-actions .button{ display: inline-block; /* garde le modèle de tableau intact */ margin: 0 6px; } /* 3) Colonne Fichiers téléchargeables (plugins) : même rendu */ .woocommerce-account table.my_account_orders td[class*="wcpoa"], .woocommerce-account table.my_account_orders th[class*="wcpoa"]{ text-align: center; white-space: nowrap; } .woocommerce-account table.my_account_orders td[class*="wcpoa"] .button{ display: inline-block; margin: 0 6px; } /* 4) CTA : texte bien centré, une seule ligne, taille homogène */ .woocommerce-account table.my_account_orders .button{ height: 38px; line-height: 38px; /* HACK simple = centrage vertical interne */ padding: 0 16px; white-space: nowrap; /* jamais de 2e ligne */ text-align: center; /* centrage horizontal du texte */ } /* 5) Mobile : petits espacements pour éviter tout chevauchement */ @media (max-width: 768px){ .woocommerce-account table.my_account_orders .button{ margin: 4px 6px 0 0; } } /* ========================================================= MON COMPTE — corrections globales (bloc safe : ne touche QUE la page Mon compte) ========================================================= */ /* 0) Garde-fous typographiques + pas de scroll horizontal */ body.woocommerce-account{ overflow-x: hidden; /* évite la barre horizontale si un plugin déborde */ } .woocommerce-account .woocommerce-MyAccount-navigation ul li a{ white-space: normal !important; word-break: keep-all !important; } /* 1) TABLE DES COMMANDES — desktop : alignements propres */ @media (min-width: 769px){ /* table à 100% et pas de largeur imposée par du contenu */ .woocommerce-account .woocommerce-MyAccount-content table{ width: 100%; table-layout: auto; } .woocommerce-account .woocommerce-MyAccount-content th, .woocommerce-account .woocommerce-MyAccount-content td{ vertical-align: middle; white-space: normal; /* évite les débordements par mots longs */ } /* Colonne Actions = centrée, boutons sur une ligne */ .woocommerce-orders-table__cell-order-actions, .woocommerce-table--order-downloads td{ display: flex; align-items: center; justify-content: center; gap: 12px; } /* Boutons bien centrés et cohérents avec les CTA globaux */ .woocommerce-account .woocommerce-MyAccount-content a.button{ display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; white-space: nowrap; text-align: center; } } /* 2) MOBILE — transformation des tableaux en cartes lisibles (SANS scroll) → on vise UNIQUEMENT les tables commandes & téléchargements */ @media (max-width: 768px){ /* Navigation : plein écran, texte normal */ .woocommerce-account .woocommerce-MyAccount-navigation{ margin-bottom: 12px; } /* Cible uniquement les 2 tables Woo */ .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table, .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads{ display: block; border: 0; background: transparent; width: 100% !important; overflow: visible; /* pas de scroll */ } .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table thead, .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads thead{ display: none; } .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody, .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads tbody{ display: grid; gap: 12px; } /* Une ligne de table = une carte */ .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr, .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads tbody tr{ display: block; background: var(--panel,#fff); border: 1px solid var(--line,#eadfd2); border-radius: 14px; box-shadow: var(--shadow,0 8px 22px rgba(156,107,47,.06)); overflow: hidden; } /* Chaque cellule devient une ligne "Libellé : Valeur" */ .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td, .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 0; border-top: 1px solid var(--line,#eadfd2); color: var(--ink,#1f2328); } .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td:first-child, .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td:first-child{ border-top: 0; } /* Libellé à gauche depuis data-title (Woo le fournit) */ .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td::before, .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td::before{ content: attr(data-title) " :"; font-weight: 600; color: var(--muted,#5f6670); margin-right: 8px; flex: 0 0 auto; } /* Certains plugins n’ajoutent pas data-title pour la colonne pièces jointes */ .woocommerce-account .woocommerce-MyAccount-content td[class*="wcpoa"]::before{ content: "Fichiers téléchargeables :"; } /* Bloc actions (VOIR, FACTURE) : pile verticale compacte */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions{ justify-content: flex-start; flex-wrap: wrap; gap: 8px; } /* CTA mobile : 1 ligne, centré, taille cohérente */ .woocommerce-account .woocommerce-MyAccount-content a.button{ display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; line-height: 36px; text-align: center; white-space: nowrap; } } /* 3) Uniformisation du libellé “VIEW” → “VOIR” pour les plugins (sans JS ; accessible ; n’impacte pas le titre aria) */ .woocommerce-account a.button.view{ font-size: 0 !important; /* masque le texte plugin */ } .woocommerce-account a.button.view::before{ content: "VOIR"; font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); letter-spacing: .06em; text-transform: uppercase; color: #fff; } /* 4) Petite retouche esthétique des titres du tableau */ .woocommerce-account .woocommerce-MyAccount-content th{ font-weight: 700; color: var(--muted,#5f6670); } /* === MY ACCOUNT — FIX "VOIR" + PAGINATION MOBILE === */ /* 1) Ré-afficher le libellé "VOIR" (actions + fichiers téléchargeables) */ .woocommerce-account a.woocommerce-button.button.view, .woocommerce-account .woocommerce-orders-table a.woocommerce-button.button.view, .woocommerce-account .woocommerce-orders a.woocommerce-button.button.view { /* annule les styles "pastille" de certains thèmes/plugins */ width: auto !important; min-width: 0 !important; height: 38px !important; padding: 0 16px !important; text-indent: 0 !important; overflow: visible !important; clip: auto !important; border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center; /* texte bien centré */ white-space: nowrap; } /* si un plugin ajoute une icône circulaire avant le texte, on la neutralise */ .woocommerce-account a.woocommerce-button.button.view::before { content: none !important; } /* aligne verticalement les actions dans la cellule (desktop) */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{ display: flex; align-items: center; gap: 12px; } /* ================================ MY ACCOUNT — Boutons / Pagination ================================ */ /* 1) Normalise tous les « petits » boutons de la page compte */ .woocommerce-account :where( .woocommerce-orders-table__cell-order-actions a.button, .woocommerce-orders-table__cell-wcpoa-attachment a.button, .woocommerce-button.button.view, /* Voir la commande */ .woocommerce-button.button.invoice, /* Facture (PDF plugin) */ .woocommerce-Button.button /* divers boutons */ ){ /* gabarit CTA (tokens) */ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; padding: 0 16px !important; border-radius: 999px !important; background: var(--cta-strong) !important; border: 1px solid var(--cta-strong-border) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; /* jamais sur 2 lignes */ text-indent: 0 !important; /* empêche les styles qui cachent le texte */ overflow: visible !important; /* au cas où */ } /* Hover/active */ .woocommerce-account :where( .woocommerce-orders-table__cell-order-actions a.button, .woocommerce-orders-table__cell-wcpoa-attachment a.button, .woocommerce-button.button.view, .woocommerce-button.button.invoice, .woocommerce-Button.button ):hover{ background: var(--cta-strong-hover) !important; border-color: var(--cta-strong-border) !important; box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 1px color-mix(in srgb, var(--cta-strong) 42%, transparent) inset; } .woocommerce-account :where( .woocommerce-orders-table__cell-order-actions a.button, .woocommerce-orders-table__cell-wcpoa-attachment a.button, .woocommerce-button.button.view, .woocommerce-button.button.invoice, .woocommerce-Button.button ):active{ transform: translateY(1px); box-shadow: 0 1px 4px rgba(0,0,0,.10); } /* 2) Désactive toute tentative de « pastille » ronde qui rogne le texte */ .woocommerce-account :where( .woocommerce-orders-table__cell-order-actions a.button, .woocommerce-orders-table__cell-wcpoa-attachment a.button ){ width: auto !important; min-width: 0 !important; max-width: none !important; aspect-ratio: auto !important; box-sizing: border-box !important; } /* 3) Aligne correctement les boutons dans les cellules d’actions */ .woocommerce-account .woocommerce-orders-table__cell-order-actions{ display: flex; align-items: center; gap: 12px; } /* 4) Colonne « Fichiers téléchargeables » : même rendu que les autres boutons */ .woocommerce-account .woocommerce-orders-table__cell-wcpoa-attachment{ display: flex; align-items: center; justify-content: center; } .woocommerce-account .woocommerce-orders-table__cell-wcpoa-attachment a.button{ margin-inline: auto; } /* 5) Pagination Suivant/Précédent : centrée + CTA */ .woocommerce-account .woocommerce-pagination{ display: flex; justify-content: center; gap: 10px; margin: 20px 0 10px; text-align: center; } .woocommerce-account .woocommerce-pagination a.woocommerce-button{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; padding: 0 16px !important; border-radius: 999px !important; background: var(--cta-strong) !important; border: 1px solid var(--cta-strong-border) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); letter-spacing: .06em; text-transform: uppercase; } /* 6) Mobile : garde des boutons lisibles et centrés */ @media (max-width: 768px){ .woocommerce-account .woocommerce-pagination{ justify-content: center; } .woocommerce-account .woocommerce-pagination a.woocommerce-button{ min-width: 140px; /* évite le texte collé */ } } /* 2) Pagination (Précédent / Suivant) — centrage + cohérence CTA */ .woocommerce-account nav.woocommerce-pagination{ margin: 22px 0 0; } .woocommerce-account nav.woocommerce-pagination .woocommerce-button{ display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 999px; text-align: center; } /* centrage sur mobile/tablette */ @media (max-width: 768px){ .woocommerce-account nav.woocommerce-pagination{ display: flex; justify-content: center; gap: 12px; } .woocommerce-account nav.woocommerce-pagination .woocommerce-button{ flex: 0 0 auto; /* largeur auto, pas d’étirement */ } } /* === WooCommerce / My Account — Centrage des boutons Suivant/Précédent === */ /* conteneur de pagination */ .woocommerce .woocommerce-pagination{ display: flex; /* centre les boutons horizontalement */ justify-content: center; gap: 12px; margin-top: 18px; } /* boutons eux-mêmes */ .woocommerce .woocommerce-pagination .woocommerce-button, .woocommerce .woocommerce-pagination .woocommerce-Button{ display: inline-flex; /* texte parfaitement centré */ align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 999px; text-align: center; line-height: 1; /* évite le décalage vertical */ } /* (optionnel) un léger resserrage en très petit écran */ @media (max-width: 480px){ .woocommerce .woocommerce-pagination{ gap: 10px; } } /* ========================================================= MON COMPTE — Commandes (DESKTOP uniquement) - Rétablit le texte des boutons (VOIR) caché par la pastille - Gabarit CTA cohérent + centrage - Colonne "Fichiers téléchargeables" centrée - Pagination Suivant/Précédent centrée (mobile & desktop) ========================================================= */ /* ---------- Desktop : actions & fichiers téléchargeables ---------- */ @media (min-width: 769px){ /* Cellule Actions = centrée et espacée */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{ display: flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; } /* Boutons d'actions : on enlève la "pastille" qui masque le texte */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a.button{ width: auto !important; min-width: 0 !important; max-width: none !important; aspect-ratio: auto !important; height: 38px !important; padding: 0 16px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-indent: 0 !important; clip: auto !important; overflow: visible !important; background: var(--cta-strong) !important; border: 1px solid var(--cta-strong-border) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: none !important; white-space: nowrap !important; font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); letter-spacing: .06em; text-transform: uppercase; background-image: none !important; box-shadow: none !important; } /* Au cas où un ancien bloc aurait mis font-size:0 sur .button.view */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a.button.view{ font-size: 14px !important; } /* Supprime toute icône pseudo-élément qui recouvre le texte */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a.button::before, .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a.button::after{ content: none !important; } /* Colonne "Fichiers téléchargeables" : bouton centré */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-wcpoa-attachment{ text-align: center; } .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-wcpoa-attachment a.button{ margin-inline: auto; width: auto !important; min-width: 0 !important; max-width: none !important; height: 38px !important; padding: 0 16px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--cta-strong) !important; border: 1px solid var(--cta-strong-border) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-transform: uppercase; font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); letter-spacing: .06em; } /* Certains plugins écrivent "VIEW" : on remplace visuellement par "VOIR" (desktop seulement) */ .woocommerce-account table.woocommerce-orders-table td[class*="wcpoa"] a.button{ font-size: 0 !important; } .woocommerce-account table.woocommerce-orders-table td[class*="wcpoa"] a.button::before{ content: "VOIR"; font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); letter-spacing: .06em; text-transform: uppercase; color: #fff; } /* Hover / active */ .woocommerce-account table.woocommerce-orders-table td a.button:hover{ background: var(--cta-strong-hover) !important; border-color: var(--cta-strong-border) !important; box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 0 0 1px color-mix(in srgb, var(--cta-strong) 42%, transparent) inset; } .woocommerce-account table.woocommerce-orders-table td a.button:active{ transform: translateY(1px); box-shadow: 0 1px 4px rgba(0,0,0,.10); } } /* ---------- Pagination Suivant/Précédent (mobile & desktop) ---------- */ .woocommerce-account .woocommerce-pagination, .woocommerce-account nav.woocommerce-pagination{ display: flex; justify-content: center; gap: 12px; margin: 20px 0 0; } .woocommerce-account .woocommerce-pagination .woocommerce-button, .woocommerce-account nav.woocommerce-pagination .woocommerce-button{ display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 999px; background: var(--cta-strong); border: 1px solid var(--cta-strong-border); color: #fff; -webkit-text-fill-color:#fff; text-transform: uppercase; font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); letter-spacing: .06em; } /* ========================================================= MON COMPTE — Commandes (DESKTOP) Fix "VOIR" (pièces jointes) invisible + mauvaise pastille ========================================================= */ @media (min-width: 769px){ /* Colonne "Fichiers téléchargeables" (plugins WCPOA/WPO, etc.) */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-wcpoa-attachment{ text-align: center; vertical-align: middle; } /* Le lien doit être un VRAI bouton CTA, texte visible et centré */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-wcpoa-attachment a.button{ /* on neutralise la “pastille” ronde des thèmes/plugins */ width: auto !important; min-width: 0 !important; max-width: none !important; aspect-ratio: auto !important; text-indent: 0 !important; clip: auto !important; overflow: visible !important; /* gabarit CTA cohérent */ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; padding: 0 16px !important; border-radius: 999px !important; background: var(--cta-strong) !important; border: 1px solid var(--cta-strong-border) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap !important; background-image: none !important; box-shadow: none !important; } /* si un style/plug-in cachait le texte (font-size:0, icône pseudo, etc.) */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-wcpoa-attachment a.button.view{ font-size: 14px !important; /* ré-affiche “VOIR” */ } .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-wcpoa-attachment a.button::before, .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-wcpoa-attachment a.button::after{ content: none !important; /* supprime la pastille ronde */ } /* Alignement propre dans la cellule d’actions (inchangé côté mobile) */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{ display: flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; } .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a.button::before, .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a.button::after{ content: none !important; /* pas d’icône parasite */ } } /* ========================================================= MON COMPTE — Ordres (Desktop) Met le bouton "VOIR" des pièces jointes dans la bonne colonne sans casser le mobile. ========================================================= */ @media (min-width: 769px){ /* 1) Dans la colonne Actions : on ne “trafique” plus le libellé VIEW */ .woocommerce-account td.woocommerce-orders-table__cell-order-actions a.button.view{ font-size: 14px !important; /* texte normal */ } .woocommerce-account td.woocommerce-orders-table__cell-order-actions a.button.view::before{ content: none !important; /* pas de pseudo-texte ajouté */ } /* 2) Colonne Fichiers téléchargeables : vrai bouton VOIR centré */ .woocommerce-account td.woocommerce-orders-table__cell-wcpoa-attachment{ text-align: center; vertical-align: middle; white-space: nowrap; } .woocommerce-account td.woocommerce-orders-table__cell-wcpoa-attachment a.button{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; padding: 0 16px !important; border-radius: 999px !important; background: var(--cta-strong) !important; border: 1px solid var(--cta-strong-border) !important; color: #fff !important; -webkit-text-fill-color:#fff !important; text-transform: uppercase; font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); letter-spacing: .06em; text-decoration: none !important; background-image: none !important; box-shadow: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; aspect-ratio: auto !important; text-indent: 0 !important; overflow: visible !important; margin-inline: auto; } /* 3) Certains plugins écrivent "VIEW" avec font-size:0 : on remplace VISUELLEMENT ici seulement */ .woocommerce-account td[class*="wcpoa"] a.button{ font-size: 14px !important; /* ré-affiche le texte */ } .woocommerce-account td[class*="wcpoa"] a.button::before{ content: "VOIR" !important; /* remplace VIEW → VOIR dans cette colonne uniquement */ font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); letter-spacing: .06em; text-transform: uppercase; color: #fff; } /* 4) Si un bouton d'attachement tombe par erreur dans "Actions", on le masque */ .woocommerce-account td.woocommerce-orders-table__cell-order-actions a.button[href*="download"], .woocommerce-account td.woocommerce-orders-table__cell-order-actions a.button[href*="wcpoa"], .woocommerce-account td.woocommerce-orders-table__cell-order-actions a.button[href*="attachment"]{ display: none !important; } /* 5) Alignement propre des boutons dans 'Actions' (inchangé) */ .woocommerce-account td.woocommerce-orders-table__cell-order-actions{ display: flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; } } /* ========================================================= MON COMPTE — Commandes : retrait "VOIR" (Actions) + suppression de la dernière colonne "Fichiers téléchargeables" ========================================================= */ /* 1) Retire le bouton VOIR situé dans la colonne Actions */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a.button.view{ display: none !important; } /* 2) Supprime la colonne Fichiers téléchargeables (plugins WCPOA/WPO, etc.) */ .woocommerce-account table.woocommerce-orders-table th.woocommerce-orders-table__header-wcpoa-attachment, .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-wcpoa-attachment{ display: none !important; } /* Fallback au cas où le plugin utiliserait d'autres classes ou que la colonne soit juste "la dernière du tableau" */ .woocommerce-account table.woocommerce-orders-table th:last-child, .woocommerce-account table.woocommerce-orders-table td:last-child{ display: none !important; } /* 3) Mobile : on cache aussi ces blocs dans la version "cartes" */ @media (max-width: 768px){ .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td[class*="wcpoa"], .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table th[class*="wcpoa"], .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td[class*="attachment"], .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table th[class*="attachment"]{ display: none !important; } } /* ====== MON COMPTE — Colonne VOIR (nouvelle colonne) ====== */ /* En-tête et cellule de la colonne VOIR */ .woocommerce-account .woocommerce-orders-table th.lh-col-view{ width: 1%; white-space: nowrap; text-align: center; } .woocommerce-account .woocommerce-orders-table td.lh-cell-view{ text-align: center; vertical-align: middle; } /* Le bouton VOIR dans sa colonne: gabarit CTA et centrage */ .woocommerce-account .woocommerce-orders-table td.lh-cell-view a.button{ display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: 999px; white-space: nowrap; } /* Mobile (cartes): label "Voir :" auto */ @media (max-width:768px){ .woocommerce-account .woocommerce-orders-table td.lh-cell-view::before{ content: attr(data-title) " :"; font-weight: 600; color: var(--muted,#5f6670); margin-right: 8px; flex: 0 0 auto; } } /* On retire le VOIR resté dans "Actions" pour éviter tout doublon */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions a.button.view{ display: none !important; } /* ======= Mon Compte > Commandes : renommer "Voir" en "DÉTAILS" ======= */ /* 1) En-tête de la colonne (dernier ) */ .woocommerce-account table.woocommerce-orders-table th:last-child{ font-size: 0; /* masque "Voir" existant */ } .woocommerce-account table.woocommerce-orders-table th:last-child::after{ content: "Détails"; font: 600 12px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); color: var(--muted,#5f6670); text-transform: none; } /* 2) Bouton de la colonne (forcé en "DÉTAILS") */ .woocommerce-account td.lh-cell-view a.button{ font-size: 0 !important; /* masque "Voir"/"View" du plugin */ } .woocommerce-account td.lh-cell-view a.button::before{ content: "DÉTAILS"; /* ⬅ change ici si tu veux "CONSULTER", etc. */ font: 600 14px/1 var(--body-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial); letter-spacing: .06em; text-transform: uppercase; color: #fff; } /* 3) Mobile : libellé de la carte (remplace "Voir :" par "Détails :") */ @media (max-width: 768px){ .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.lh-cell-view::before{ content: "Détails :"; } } /* MON COMPTE — Colonne Détails : forcer un vrai bouton texte */ .woocommerce-account td.lh-cell-view a.button, .woocommerce-account td.lh-cell-view a.woocommerce-button.button.view{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; padding: 0 16px !important; border-radius: 999px !important; width: auto !important; min-width: 0 !important; max-width: none !important; aspect-ratio: auto !important; text-indent: 0 !important; font-size: 14px !important; line-height: 1 !important; overflow: visible !important; clip: auto !important; background-image: none !important; box-shadow: none !important; } /* supprime l’icône/pastille ajoutée par le thème/plugin */ .woocommerce-account td.lh-cell-view a.button::before, .woocommerce-account td.lh-cell-view a.button::after{ content: none !important; } /* Garder l’aspect CTA unifié (couleurs déjà définies dans tes tokens) */ .woocommerce-account td.lh-cell-view a.button{ background: var(--cta-strong) !important; border: 1px solid var(--cta-strong-border) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; text-transform: uppercase; letter-spacing:.06em; font-weight:600; } .woocommerce-account td.lh-cell-view a.button:hover{ background: var(--cta-strong-hover) !important; border-color: var(--cta-strong-border) !important; } /* === Mon Compte > Commandes — renommer la colonne "Actions" en "Téléchargements" === */ /* En-tête (desktop/tablette) */ .woocommerce-account table.woocommerce-orders-table th.woocommerce-orders-table__header-order-actions{ font-size: 0; /* masque le libellé d’origine */ position: relative; } .woocommerce-account table.woocommerce-orders-table th.woocommerce-orders-table__header-order-actions::after{ content: "Téléchargements"; /* nouveau libellé */ font: inherit; font-size: 14px; /* même taille que les autres th */ font-weight: 700; color: inherit; } /* Cartes (mobile) : libellé à gauche des lignes */ @media (max-width: 768px){ .woocommerce-account .woocommerce-orders-table__cell-order-actions::before{ content: "Téléchargements :" !important; /* remplace "Actions :" */ } } /* Mon compte > Commandes — Centrage vertical du bouton FACTURE (desktop) */ @media (min-width: 769px){ /* La cellule "Téléchargements" (ex- order-actions) */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{ display: grid !important; /* fiable pour centrer dans une */ place-items: center !important; /* centre horizontal + vertical */ gap: 12px; /* espace si plusieurs actions */ vertical-align: middle !important; } /* Le(s) bouton(s) à l’intérieur : aucune marge parasite */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button{ margin: 0 !important; } } /* Mon compte > Commandes — CENTRER "FACTURE" verticalement (desktop) */ @media (min-width: 769px){ /* Revenir au modèle table-cell pour profiter du vertical-align */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{ display: table-cell !important; /* annule flex/grid posés ailleurs */ vertical-align: middle !important;/* centrage vertical fiable */ text-align: center !important; /* centrage horizontal */ white-space: nowrap; } /* Les boutons à l’intérieur : inline-block + petit écart */ .woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button{ display: inline-block !important; margin: 0 6px !important; } } /*---------------------------------------------------*/ /*---------------------------------------------------*/ /* === Accordéon CSS pour les étiquettes produit === */ /*---------------------------------------------------*/ /*---------------------------------------------------*/ /* === ÉTIQUETTES : accordéon léger, sans bulles === */ /* On cible la ligne WooCommerce .tagged_as et on la transforme en accordéon */ .single-product .product .product_meta .tagged_as{ position: relative; display: block; margin-top: .75rem; padding-top: .25rem; /* un tout petit espace au-dessus */ overflow: hidden; max-height: 2rem; /* hauteur fermée (n'affiche que l'entête) */ transition: max-height .3s ease; cursor: pointer; border-top: 1px solid #eee; } /* Supprime le texte "Étiquettes :" de Woo (mais pas les liens) */ .single-product .product .product_meta .tagged_as{ font-size: 0; } /* Entête "Étiquettes" + chevron, injectés proprement (plus de doublon) */ .single-product .product .product_meta .tagged_as::before{ content: "Étiquettes"; display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.6; color: #222; } .single-product .product .product_meta .tagged_as::after{ content: "▾"; position: absolute; right: 0; top: 0; font-size: 0.95rem; line-height: 1.6; transition: transform .25s ease; color: #888; pointer-events: none; } /* Style des liens d'étiquette : simples, lisibles */ .single-product .product .product_meta .tagged_as a{ font-size: .95rem; /* on rétablit la taille */ color: #555; text-decoration: underline; text-underline-offset: 2px; margin-right: .35rem; } .single-product .product .product_meta .tagged_as a:hover{ color: #111; } /* OUVERTURE : survol desktop ou navigation au clavier (focus à l'intérieur) */ .single-product .product .product_meta .tagged_as:hover, .single-product .product .product_meta .tagged_as:focus-within{ max-height: 500px; /* assez grand pour contenir la liste */ } .single-product .product .product_meta .tagged_as:hover::after, .single-product .product .product_meta .tagged_as:focus-within::after{ transform: rotate(180deg); } /* (Option) si tu veux aussi alléger le reste des métas : */ /* .single-product .product .product_meta .posted_in, .single-product .product .product_meta .sku_wrapper{ opacity:.75; } */ /* ========================================================= FINAL – Shipping methods alignement propre ========================================================= */ body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul.woocommerce-shipping-methods > li{ position: static !important; padding: 8px 0 !important; border-bottom: 1px solid rgba(206,188,160,.45) !important; } body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul.woocommerce-shipping-methods > li:last-child{ border-bottom: none !important; } /* Radio : inline, plus en absolu, plus de recouvrement */ body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul.woocommerce-shipping-methods > li > input[type="radio"]{ position: static !important; display: inline-block !important; vertical-align: top !important; margin: 3px 6px 0 0 !important; } /* Label : bloc à côté du radio, largeur calculée */ body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul.woocommerce-shipping-methods > li > label{ display: inline-block !important; vertical-align: top !important; width: calc(100% - 26px) !important; margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; white-space: normal !important; overflow: visible !important; } /* Prix dans le label */ body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td label .woocommerce-Price-amount{ margin-left: 4px !important; font-weight: 600 !important; white-space: nowrap !important; } /* Estimation sous le texte */ body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td small.wc-eta-option{ display: block !important; margin-top: 2px !important; font-size: 11px !important; opacity: .75 !important; } /* Conteneur du bouton Colissimo : sous le texte, aligné à gauche */ body.woocommerce-checkout #order_review #lpc_layer_pickup_selection_button{ margin: 4px 0 0 26px !important; max-width: 100% !important; } /* Bouton → simple lien texte, pas de gros pill */ body.woocommerce-checkout #order_review #lpc_layer_pickup_selection_button button#lpc_pick_up_widget_show_map, body.woocommerce-checkout #order_review #lpc_layer_pickup_selection_button .lpc_pick_up_widget_show_map.wp-element-button{ background: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; width: auto !important; display: inline !important; font-family: inherit !important; font-size: 12px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.4 !important; color: var(--gold, #a9742a) !important; text-decoration: underline !important; text-underline-offset: 2px !important; cursor: pointer !important; } /* On garde juste l’icône, très légère */ body.woocommerce-checkout #order_review #lpc_layer_pickup_selection_button button#lpc_pick_up_widget_show_map::before, body.woocommerce-checkout #order_review #lpc_layer_pickup_selection_button .lpc_pick_up_widget_show_map.wp-element-button::before{ content: "📍 " !important; font-size: 12px !important; } /* Bouton de validation : pleine largeur, texte à la ligne si besoin */ body.woocommerce-checkout form.checkout #place_order{ width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; white-space: normal !important; text-align: center !important; padding-inline: 16px !important; padding-block: 11px !important; font-size: 14px !important; line-height: 1.3 !important; } @media (max-width: 480px){ body.woocommerce-checkout form.checkout #place_order{ font-size: 13px !important; padding-block: 10px !important; } } /* ========================================================= Harmonisation Colissimo relais / signature ========================================================= */ /* 1) Layout identique pour chaque méthode d'expédition */ body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul#shipping_method li{ position: relative !important; margin: 0 !important; padding: 10px 0 10px 26px !important; /* place pour le radio */ border-bottom: 1px solid rgba(206,188,160,.45) !important; } body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul#shipping_method li:last-child{ border-bottom: none !important; } /* Radio : même distance pour relais & signature, plus "collé" au texte */ body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul#shipping_method li > input[type="radio"]{ position: absolute !important; left: 0 !important; top: 12px !important; margin: 0 !important; } /* Label : bloc complet à droite du radio, largeur 100% */ body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul#shipping_method li > label{ display: block !important; margin: 0 !important; width: 100% !important; font-size: 13px !important; line-height: 1.4 !important; white-space: normal !important; } /* Prix + estimation mêmes styles pour les 2 lignes */ body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul#shipping_method li > label .woocommerce-Price-amount{ margin-left: 4px !important; font-weight: 600 !important; white-space: nowrap !important; } body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul#shipping_method li > label small.wc-eta-option{ display: block !important; margin-top: 2px !important; font-size: 11px !important; opacity: .75 !important; } /* 2) Point relais choisi : enlever le fond moche, garder juste le texte */ body.woocommerce-checkout #order_review #lpc_pick_up_info{ margin: 6px 0 0 26px !important; padding: 0 !important; background: transparent !important; border: none !important; } /* Optionnel : texte un peu plus léger pour ne pas voler la vedette au reste */ body.woocommerce-checkout #order_review #lpc_pick_up_info, body.woocommerce-checkout #order_review #lpc_pick_up_info *{ font-size: 12px !important; } /* Plus d'espace entre radio et texte pour "Colissimo avec signature" */ body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul#shipping_method input#shipping_method_0_lpc_sign31{ margin-right: 8px !important; /* espace entre radio et texte */ } body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul#shipping_method label[for="shipping_method_0_lpc_sign31"]{ padding-left: 1px !important; /* micro-ajustement pour ne pas coller */ } /* Même espace radio / texte pour "Colissimo avec signature" en mobile */ @media (max-width: 768px){ body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul#shipping_method input#shipping_method_0_lpc_sign31{ margin-right: 10px !important; /* un poil plus d'air sur mobile */ } body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul#shipping_method label[for="shipping_method_0_lpc_sign31"]{ padding-left: 2px !important; } } /* Encore un peu plus d'espace sur très petits écrans */ @media (max-width: 450px){ body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul#shipping_method input#shipping_method_0_lpc_sign31{ margin-right: 2px !important; /* un chouïa plus d'air */ } body.woocommerce-checkout #order_review .woocommerce-shipping-totals.shipping td ul#shipping_method label[for="shipping_method_0_lpc_sign31"]{ padding-left: 10px !important; } } /* Bouton "Passer la commande" : taille adaptée au contenu */ body.woocommerce-checkout form.checkout button[name="woocommerce_checkout_place_order"], body.woocommerce-checkout form.checkout #place_order{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; /* s’adapte au texte */ max-width: 100% !important; /* ne dépasse jamais sur mobile */ box-sizing: border-box !important; white-space: normal !important; /* texte peut revenir à la ligne si besoin */ padding: 11px 24px !important; margin-top: 12px !important; margin-bottom: 0 !important; margin-left: auto !important; margin-right: 0 !important; /* aligné à droite ; mets auto des deux côtés si tu le veux centré */ } /* Si tu préfères le centrer, remplace les 3 dernières lignes de margin par : margin: 12px auto 0 !important; */ /* Masquer le cadre du récap commande sur petits écrans */ @media (max-width: 768px){ body.woocommerce-checkout #order_review{ border: none !important; } } /* Masquer style du heading "Votre commande" sur petits écrans */ @media (max-width: 768px){ body.woocommerce-checkout #order_review_heading{ border: none !important; box-shadow: none !important; background: none !important; } } @media (max-width: 768px){ body.woocommerce-checkout #order_review_heading{ font-size: 20px !important; margin-bottom: 10px !important; } } /* Ajustements de centrage pour très petits écrans (~360px) */ @media (max-width: 400px){ /* Bloc récap commande : bien dans la grille, sans décalage */ body.woocommerce-checkout #order_review{ width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Titre "Votre commande" aligné proprement */ body.woocommerce-checkout #order_review_heading{ width: 100% !important; text-align: left !important; /* mets center si tu préfères centré */ margin-left: 0 !important; margin-right: 0 !important; } /* Bouton "Passer la commande" bien centré */ body.woocommerce-checkout form.checkout button[name="woocommerce_checkout_place_order"], body.woocommerce-checkout form.checkout #place_order{ display: block !important; margin: 12px auto 0 !important; /* centré */ max-width: 100% !important; } } /* Bouton "Passer la commande" (Veuillez choisir un point de retrait) - plus large + police réduite sur petits écrans */ @media (max-width: 768px){ body.woocommerce-checkout form.checkout button[name="woocommerce_checkout_place_order"], body.woocommerce-checkout form.checkout #place_order{ width: 100% !important; /* plein largeur */ max-width: 100% !important; box-sizing: border-box !important; font-size: 12px !important; /* police réduite */ line-height: 1.3 !important; padding: 10px 14px !important; /* un peu plus compact */ white-space: normal !important; /* texte peut aller à la ligne proprement */ } } /* Encore un peu plus compact pour très petits écrans (~360px) */ @media (max-width: 400px){ body.woocommerce-checkout form.checkout button[name="woocommerce_checkout_place_order"], body.woocommerce-checkout form.checkout #place_order{ font-size: 14px !important; padding: 9px 12px !important; } } /* Petit mobile uniquement : bouton à la largeur du contenu */ @media (max-width: 400px){ body.woocommerce-checkout form.checkout button[name="woocommerce_checkout_place_order"], body.woocommerce-checkout form.checkout #place_order{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; /* s'adapte au texte, ex : "Commander" */ max-width: 100% !important; box-sizing: border-box !important; font-size: 11px !important; /* on garde une typo compacte */ padding: 9px 16px !important; white-space: nowrap !important; /* reste sur une ligne si possible */ margin: 12px auto 0 !important; /* centré */ } }