/* ════════════════════════════════════════════════════════ VDP COMPANY – CSS GLOBAL (Storefront override) Toutes les pages sauf homepage : boutique, compte, panier... ════════════════════════════════════════════════════════ */ :root { --vdp-gold: #F5C518; --vdp-gold-dark: #C9A200; --vdp-gold-light: #FFE066; --vdp-navy: #060D26; --vdp-navy-mid: #0A1535; --vdp-navy-card: #0D1B40; --vdp-navy-border: #1A2E6A; --vdp-muted: #9AB0D8; --vdp-red: #E63030; } /* ── Base ── */ /* Le fond est piloté par les variables --vdp-bg-* définies dans wp_head (VDP Company → Réglages généraux). L'image est portée par . */ html { background-color: var(--vdp-navy) !important; background-image: var(--vdp-bg-image, none) !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: cover !important; background-attachment: fixed !important; } body { background-color: transparent !important; background-image: none !important; font-family: 'Open Sans', sans-serif !important; color: #fff !important; } /* Décor d'étoiles CSS : masqué automatiquement si une image de fond est active */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; display: var(--vdp-bg-stars, block); background: radial-gradient(ellipse at 30% 20%, rgba(26,61,168,.25) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(42,13,96,.3) 0%, transparent 60%), radial-gradient(2px 2px at 15% 20%, rgba(255,255,255,.12) 0%, transparent 100%), radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,.10) 0%, transparent 100%), radial-gradient(2px 2px at 50% 65%, rgba(255,255,255,.08) 0%, transparent 100%), radial-gradient(1px 1px at 70% 85%, rgba(255,255,255,.09) 0%, transparent 100%); } /* Voile sombre par-dessus l'image (lisibilité du texte) */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--vdp-bg-veil, transparent); } @media (max-width: 900px) { html { background-attachment: scroll !important; } } .site-content, #content, .hentry, .entry-content, .storefront-full-width-content, .woocommerce, .woocommerce-page { background: transparent !important; } p, li, td, th, label, span { color: inherit; } /* ── Header Storefront ── */ .site-header { background: var(--vdp-navy-mid) !important; border-bottom: 2px solid var(--vdp-navy-border) !important; padding: 12px 0 !important; } .site-header .col-full { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 0 32px !important; } .site-branding .site-title a, .site-branding .site-description { color: var(--vdp-gold) !important; font-family: 'Bebas Neue', sans-serif !important; } .site-header .site-logo img { max-height: 80px !important; border-radius: 50%; } /* Search Storefront */ .storefront-product-search input[type="search"] { background: #0F1E4A !important; border: 2px solid var(--vdp-navy-border) !important; color: #fff !important; border-radius: 4px 0 0 4px !important; } .storefront-product-search button { background: var(--vdp-gold) !important; color: var(--vdp-navy) !important; border: none !important; } /* Panier header */ .site-header-cart .cart-contents { color: #fff !important; } .site-header-cart .cart-contents:hover { color: var(--vdp-gold) !important; } .site-header-cart .widget_shopping_cart { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; } /* ── Navigation Storefront ── */ .storefront-primary-navigation, .main-navigation { background: var(--vdp-navy-mid) !important; border-bottom: 2px solid var(--vdp-gold) !important; } .main-navigation ul li a { font-family: 'Rajdhani', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #fff !important; padding: 14px 20px !important; } .main-navigation ul li a:hover, .main-navigation ul li.current-menu-item > a { color: var(--vdp-gold) !important; } .main-navigation ul ul { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-top: 2px solid var(--vdp-gold) !important; } .main-navigation ul ul a { color: var(--vdp-muted) !important; padding: 10px 20px !important; } .main-navigation ul ul a:hover { color: var(--vdp-gold) !important; } /* ── Produits ── */ ul.products li.product, .product-grid-item { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 8px !important; padding: 0 !important; overflow: hidden !important; transition: transform .25s, box-shadow .25s, border-color .25s !important; } ul.products li.product:hover { transform: translateY(-6px) !important; box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 0 20px rgba(245,197,24,.15) !important; border-color: var(--vdp-gold-dark) !important; } ul.products li.product img { padding: 12px !important; background: linear-gradient(135deg,#0D1B40,#162050) !important; } ul.products li.product .woocommerce-loop-product__title { font-family: 'Rajdhani', sans-serif !important; font-weight: 600 !important; color: #fff !important; font-size: 13px !important; padding: 8px 14px 0 !important; } ul.products li.product .price { font-family: 'Bebas Neue', sans-serif !important; font-size: 22px !important; color: var(--vdp-gold) !important; padding: 4px 14px !important; display: block !important; } ul.products li.product .price del bdi { color: var(--vdp-muted) !important; font-size: 14px !important; } ul.products li.product .button, .woocommerce a.button, .woocommerce button.button { background: var(--vdp-gold) !important; color: var(--vdp-navy) !important; font-family: 'Rajdhani', sans-serif !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .06em !important; text-transform: uppercase !important; border: none !important; border-radius: 0 !important; width: 100% !important; padding: 10px !important; text-align: center !important; display: block !important; margin: 8px 0 0 !important; transition: background .2s !important; } ul.products li.product .button:hover, .woocommerce a.button:hover { background: var(--vdp-gold-light) !important; color: var(--vdp-navy) !important; } span.onsale { background: var(--vdp-gold) !important; color: var(--vdp-navy) !important; font-family: 'Rajdhani',sans-serif !important; font-weight: 700 !important; border-radius: 2px !important; } /* ── Titres ── */ h1,h2,h3,h4,h5 { font-family: 'Bebas Neue', sans-serif !important; letter-spacing: .05em !important; color: #fff !important; } .woocommerce-products-header__title { color: #fff !important; } /* ── Sidebar ── */ .widget { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 8px !important; padding: 16px !important; margin-bottom: 20px !important; } .widget-title, .widgettitle { color: var(--vdp-gold) !important; font-family: 'Rajdhani',sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing:.1em !important; } .widget a { color: var(--vdp-muted) !important; } .widget a:hover { color: #fff !important; } .price_slider_wrapper .ui-slider { background: var(--vdp-navy-border) !important; } .price_slider_wrapper .ui-slider-range { background: var(--vdp-gold) !important; } .price_slider_wrapper .ui-slider-handle { background: var(--vdp-gold) !important; border: none !important; } .price_slider_amount button { background: var(--vdp-gold) !important; color: var(--vdp-navy) !important; border: none !important; border-radius: 4px !important; font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; } /* ── Pagination ── */ .woocommerce-pagination a, .woocommerce-pagination span.current { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; color: #fff !important; border-radius: 4px !important; } .woocommerce-pagination span.current, .woocommerce-pagination a:hover { background: var(--vdp-gold) !important; color: var(--vdp-navy) !important; border-color: var(--vdp-gold) !important; } /* ── Mon Compte / Login ── */ .woocommerce-account .woocommerce, .woocommerce-page .woocommerce { background: transparent !important; } .woocommerce-form-login, .woocommerce-form-register { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 10px !important; padding: 30px !important; } .woocommerce-form-login label, .woocommerce-form-register label { color: var(--vdp-muted) !important; font-family:'Rajdhani',sans-serif !important; font-weight:600 !important; } .woocommerce-form-login input, .woocommerce-form-register input { background: #0F1E4A !important; border: 1px solid var(--vdp-navy-border) !important; color: #fff !important; border-radius: 4px !important; } .woocommerce-form-login input:focus, .woocommerce-form-register input:focus { border-color: var(--vdp-gold) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(245,197,24,.2) !important; } .woocommerce-form-login .button, .woocommerce-form-register .button { background: var(--vdp-gold) !important; color: var(--vdp-navy) !important; font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; border:none !important; border-radius:4px !important; font-size:15px !important; padding:12px 24px !important; } .woocommerce-form-login .button:hover { background: var(--vdp-gold-light) !important; } .woocommerce-form-login__rememberme { color: var(--vdp-muted) !important; } .lost_password a { color: var(--vdp-gold) !important; } /* Navigation Mon Compte */ .woocommerce-MyAccount-navigation { background: var(--vdp-navy-card) !important; border-radius: 8px !important; border: 1px solid var(--vdp-navy-border) !important; overflow: hidden !important; } .woocommerce-MyAccount-navigation ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--vdp-navy-border) !important; } .woocommerce-MyAccount-navigation li a { color: var(--vdp-muted) !important; font-family:'Rajdhani',sans-serif !important; font-weight:600 !important; padding: 12px 16px !important; display: block !important; transition: all .2s !important; } .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { color: var(--vdp-gold) !important; background: rgba(245,197,24,.06) !important; } .woocommerce-MyAccount-content { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 8px !important; padding: 24px !important; } .woocommerce-MyAccount-content input, .woocommerce-MyAccount-content select, .woocommerce-MyAccount-content textarea { background: #0F1E4A !important; border: 1px solid var(--vdp-navy-border) !important; color: #fff !important; border-radius: 4px !important; } .woocommerce-MyAccount-content label { color: var(--vdp-muted) !important; } /* ── Panier ── */ .woocommerce-cart-form table, .woocommerce table.shop_table { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 8px !important; } .cart_totals table, .cart_totals table.shop_table { background: transparent !important; border: none !important; border-radius: 0 !important; } .shop_table th, .shop_table td { color: #fff !important; border-color: var(--vdp-navy-border) !important; } .shop_table .product-name a { color: var(--vdp-gold) !important; } .cart_totals, .cross-sells { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 8px !important; padding: 20px !important; } .cart_totals h2, .cross-sells h2 { color: var(--vdp-gold) !important; } .cart_totals .shop_table th, .cart_totals .shop_table td { color: #fff !important; } input.coupon, .coupon input { background: #0F1E4A !important; border: 1px solid var(--vdp-navy-border) !important; color: #fff !important; border-radius: 4px !important; } /* ── Checkout ── */ #customer_details .woocommerce-billing-fields, #customer_details .woocommerce-shipping-fields, #order_review_heading, #order_review { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 8px !important; padding: 20px !important; margin-bottom: 20px !important; } .woocommerce-checkout input, .woocommerce-checkout select, .woocommerce-checkout textarea { background: #0F1E4A !important; border: 1px solid var(--vdp-navy-border) !important; color: #fff !important; border-radius: 4px !important; } .woocommerce-checkout label { color: var(--vdp-muted) !important; } .woocommerce-checkout input:focus { border-color: var(--vdp-gold) !important; outline: none !important; } #order_review th, #order_review td { color: #fff !important; border-color: var(--vdp-navy-border) !important; } #place_order { background: var(--vdp-gold) !important; color: var(--vdp-navy) !important; font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; font-size:16px !important; border:none !important; border-radius:4px !important; width:100% !important; padding:14px !important; letter-spacing:.06em !important; } #place_order:hover { background: var(--vdp-gold-light) !important; } /* ── Page produit unique ── */ .product .summary .product_title { font-family:'Bebas Neue',sans-serif !important; font-size:36px !important; color:#fff !important; } .woocommerce-tabs .tabs { border-color: var(--vdp-navy-border) !important; } .woocommerce-tabs .tabs li { background: var(--vdp-navy-card) !important; border-color: var(--vdp-navy-border) !important; } .woocommerce-tabs .tabs li a { color: var(--vdp-muted) !important; font-family:'Rajdhani',sans-serif !important; font-weight:600 !important; } .woocommerce-tabs .tabs li.active a { color: var(--vdp-gold) !important; } .woocommerce-Tabs-panel { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 8px !important; padding: 24px !important; color: var(--vdp-muted) !important; } .woocommerce-product-gallery { background: var(--vdp-navy-card) !important; border-radius: 8px !important; } .single_add_to_cart_button { background: var(--vdp-gold) !important; color: var(--vdp-navy) !important; font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; font-size:15px !important; border:none !important; border-radius:4px !important; padding:12px 28px !important; } .single_add_to_cart_button:hover { background: var(--vdp-gold-light) !important; } /* ── Notifications ── */ .woocommerce-message { background: var(--vdp-navy-card) !important; border-top-color: var(--vdp-gold) !important; color: #fff !important; } .woocommerce-error { background: rgba(230,48,48,.15) !important; border-top-color: var(--vdp-red) !important; color: #fff !important; } .woocommerce-info { background: var(--vdp-navy-card) !important; border-top-color: #1A3DA8 !important; color: #fff !important; } /* ── Footer Storefront (pages hors homepage) ── */ .site-footer { background: #040B1E !important; border-top: 2px solid var(--vdp-navy-border) !important; color: var(--vdp-muted) !important; } .site-footer .widget-title { color: var(--vdp-gold) !important; font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.1em !important; } .site-footer a { color: var(--vdp-muted) !important; text-decoration:none !important; transition: color .2s !important; } .site-footer a:hover { color: #fff !important; } .site-info { background: #040B1E !important; border-top: 1px solid var(--vdp-navy-border) !important; color: var(--vdp-muted) !important; } /* ── Breadcrumb ── */ .woocommerce-breadcrumb { color: var(--vdp-muted) !important; background: transparent !important; } .woocommerce-breadcrumb a { color: var(--vdp-gold) !important; } /* ── Ordering / résultats ── */ .woocommerce-ordering select { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; color: #fff !important; border-radius: 4px !important; } .woocommerce-result-count { color: var(--vdp-muted) !important; } /* ═══════════════════════════════════════════════ HEADER OVERRIDES — chargé après Storefront ═══════════════════════════════════════════════ */ .vdp-header { background: #0A1535 !important; border-bottom: 2px solid #1A2E6A !important; padding: 0 !important; position: static !important; z-index: 10 !important; box-shadow: 0 4px 24px rgba(0,0,0,.35) !important; width: 100% !important; box-sizing: border-box !important; display: block !important; } .vdp-header__wrap { max-width: 1280px !important; margin: 0 auto !important; padding: 8px 32px !important; display: grid !important; grid-template-columns: 130px 1fr auto !important; align-items: center !important; gap: 24px !important; box-sizing: border-box !important; width: 100% !important; } .vdp-logo { text-decoration: none !important; display: flex !important; align-items: center !important; flex-shrink: 0 !important; grid-column: 1 !important; } .vdp-logo img { height: 120px !important; width: 120px !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; filter: drop-shadow(0 0 14px rgba(245,197,24,.5)) !important; } .vdp-search { display: flex !important; justify-content: center !important; align-items: center !important; grid-column: 2 !important; } .vdp-search form { display: flex !important; width: 100% !important; max-width: 560px !important; border: 2px solid #1A2E6A !important; border-radius: 6px !important; overflow: hidden !important; background: #0F1E4A !important; } .vdp-header__actions { display: flex !important; gap: 16px !important; align-items: center !important; flex-shrink: 0 !important; grid-column: 3 !important; justify-content: flex-end !important; } .vdp-nav { background: #0A1535 !important; border-bottom: 2px solid #F5C518 !important; width: 100% !important; display: block !important; } .vdp-nav__wrap { max-width: 1280px !important; margin: 0 auto !important; padding: 0 32px !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: stretch !important; list-style: none !important; } /* Chaque lien nav sur une ligne horizontale */ .vdp-nav a, .vdp-nav__wrap a { display: flex !important; align-items: center !important; flex-direction: row !important; padding: 15px 22px !important; white-space: nowrap !important; text-decoration: none !important; color: #fff !important; font-family: 'Rajdhani', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; transition: color .2s !important; position: relative !important; } .vdp-nav a:hover, .vdp-nav__wrap a:hover { color: #F5C518 !important; } /* Sur mobile, le menu est piloté par le burger (voir wp_head) */ @media (max-width: 900px) { .vdp-nav__wrap { display: none !important; flex-direction: column !important; } .vdp-nav__wrap.is-open { display: flex !important; } } .vdp-live-badge { background: #E63030 !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; padding: 2px 6px !important; border-radius: 2px !important; margin-left: 6px !important; animation: vdp-pulse 1.5s infinite !important; } /* === COMPTE — texte en colonne sous le nom === */ .vdp-action { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; color: #fff !important; white-space: nowrap !important; } .vdp-action > div { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .vdp-action strong { display: block !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #fff !important; } .vdp-action small { display: block !important; font-size: 11px !important; color: #9AB0D8 !important; line-height: 1.4 !important; } .vdp-action small a { color: #E63030 !important; text-decoration: none !important; } @media(max-width: 900px) { .vdp-header__wrap { grid-template-columns: 80px 1fr !important; grid-template-rows: auto auto !important; padding: 8px 16px !important; gap: 8px !important; } .vdp-logo { grid-column: 1 !important; grid-row: 1 !important; } .vdp-header__actions { grid-column: 2 !important; grid-row: 1 !important; justify-content: flex-end !important; } .vdp-search { grid-column: 1 / -1 !important; grid-row: 2 !important; } .vdp-logo img { height: 68px !important; width: 68px !important; } } /* ══════════════════════════════════════════════════════ CHECKOUT — corrections de contraste (zones blanches) Récap commande, bloc paiement (Stripe), CGV ══════════════════════════════════════════════════════ */ /* Récap de commande : tableau */ .woocommerce-checkout #order_review table.shop_table, .woocommerce-checkout .woocommerce-checkout-review-order-table, .woocommerce-checkout #order_review table.shop_table thead, .woocommerce-checkout #order_review table.shop_table tbody, .woocommerce-checkout #order_review table.shop_table tfoot, .woocommerce-checkout #order_review table.shop_table tr, .woocommerce-checkout #order_review table.shop_table th, .woocommerce-checkout #order_review table.shop_table td, .woocommerce-checkout #order_review table.shop_table tr:nth-child(even), .woocommerce-checkout #order_review table.shop_table tr:nth-child(odd) { background: transparent !important; background-color: transparent !important; color: #fff !important; border-color: var(--vdp-navy-border) !important; } .woocommerce-checkout #order_review table.shop_table .cart-subtotal th, .woocommerce-checkout #order_review table.shop_table .order-total th { color: var(--vdp-muted) !important; } .woocommerce-checkout #order_review table.shop_table .order-total td, .woocommerce-checkout #order_review table.shop_table .order-total td strong, .woocommerce-checkout #order_review table.shop_table .order-total bdi { color: var(--vdp-gold) !important; } .woocommerce-checkout #order_review .woocommerce-Price-amount, .woocommerce-checkout #order_review bdi { color: inherit !important; } /* Bloc paiement */ .woocommerce-checkout #payment, .woocommerce-checkout #payment ul.payment_methods, .woocommerce-checkout #payment div.payment_box, .woocommerce-checkout #payment .wc_payment_method, .woocommerce-checkout #payment li, .woocommerce-checkout .wc-block-checkout__payment-method { background: var(--vdp-navy-card) !important; background-color: var(--vdp-navy-card) !important; border-color: var(--vdp-navy-border) !important; color: #fff !important; border-radius: 8px !important; } .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--vdp-navy-border) !important; padding: 14px !important; } .woocommerce-checkout #payment div.payment_box { padding: 14px !important; margin-top: 8px !important; } .woocommerce-checkout #payment div.payment_box::before { display: none !important; } .woocommerce-checkout #payment label, .woocommerce-checkout #payment p, .woocommerce-checkout #payment span, .woocommerce-checkout #payment div { color: #dfe7f5 !important; } .woocommerce-checkout #payment a { color: var(--vdp-gold) !important; } /* Champs carte (Stripe) */ .woocommerce-checkout #payment .wc-stripe-elements-field, .woocommerce-checkout #payment .StripeElement, .woocommerce-checkout #payment .wc-card-fields, .woocommerce-checkout #payment iframe { background: #0F1E4A !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 6px !important; padding: 10px !important; } /* Conditions générales / mentions */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper, .woocommerce-checkout .woocommerce-privacy-policy-text, .woocommerce-checkout .woocommerce-terms-and-conditions { background: transparent !important; color: var(--vdp-muted) !important; } .woocommerce-checkout .woocommerce-privacy-policy-text p, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p, .woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text { color: var(--vdp-muted) !important; } .woocommerce-checkout .woocommerce-privacy-policy-link, .woocommerce-checkout .woocommerce-terms-and-conditions-link { color: var(--vdp-gold) !important; } /* Blocs génériques restés blancs */ .woocommerce-checkout .woocommerce-checkout-payment, .woocommerce-checkout .checkout_coupon, .woocommerce-checkout .woocommerce-info, .woocommerce-checkout .woocommerce-message { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; color: #dfe7f5 !important; border-radius: 8px !important; } .woocommerce-checkout .woocommerce-info a, .woocommerce-checkout .woocommerce-message a { color: var(--vdp-gold) !important; } /* ══════════════════════════════════════════════════════ CHECKOUT — passe finale : conteneurs blancs restants (wrapper champs carte Stripe + bloc CGV/Commander) ══════════════════════════════════════════════════════ */ /* Filet large : tout descendant du bloc paiement repasse en sombre */ .woocommerce-checkout #payment, .woocommerce-checkout #payment * { background-color: transparent !important; } .woocommerce-checkout #payment { background-color: var(--vdp-navy-card) !important; } /* Conteneur des champs carte (Stripe / WooPayments) */ .woocommerce-checkout #payment .payment_box, .woocommerce-checkout #payment .payment_box > div, .woocommerce-checkout #payment .wc-payment-form, .woocommerce-checkout #payment .wcpay-card-mounts, .woocommerce-checkout #payment .wcpay-upe-element, .woocommerce-checkout #payment .wc-stripe-upe-element, .woocommerce-checkout #payment [class*="upe"], .woocommerce-checkout #payment [class*="card-mount"], .woocommerce-checkout #payment fieldset { background-color: var(--vdp-navy-card) !important; border-color: var(--vdp-navy-border) !important; border-radius: 8px !important; } /* Champs de saisie eux-mêmes */ .woocommerce-checkout #payment .StripeElement, .woocommerce-checkout #payment .wc-stripe-elements-field, .woocommerce-checkout #payment .InputContainer, .woocommerce-checkout #payment input[type="text"], .woocommerce-checkout #payment input[type="tel"] { background-color: #0F1E4A !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 6px !important; color: #fff !important; } /* Bloc du bas : CGV + politique + bouton Commander */ .woocommerce-checkout .woocommerce-checkout-payment, .woocommerce-checkout .place-order, .woocommerce-checkout .form-row.place-order, .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper, .woocommerce-checkout .woocommerce-privacy-policy-text { background-color: var(--vdp-navy-card) !important; border-color: var(--vdp-navy-border) !important; border-radius: 8px !important; } /* Lisibilité du texte légal (était gris clair sur blanc) */ .woocommerce-checkout .woocommerce-privacy-policy-text, .woocommerce-checkout .woocommerce-privacy-policy-text p, .woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text, .woocommerce-checkout .place-order label, .woocommerce-checkout .place-order p { color: #dfe7f5 !important; } .woocommerce-checkout .woocommerce-privacy-policy-link, .woocommerce-checkout .woocommerce-terms-and-conditions-link, .woocommerce-checkout .place-order a { color: var(--vdp-gold) !important; } .woocommerce-checkout .place-order .required { color: #E63030 !important; } /* Exceptions : logos de cartes et iframes de paiement gardent leur rendu natif */ .woocommerce-checkout #payment img, .woocommerce-checkout #payment svg, .woocommerce-checkout #payment .payment_methods img, .woocommerce-checkout #payment [class*="payment-method-icon"], .woocommerce-checkout #payment [class*="card-icon"] { background-color: initial !important; } /* ══════════════════════════════════════════════════════ CONFIRMATION DE COMMANDE (Merci) + MON COMPTE Mêmes tableaux WooCommerce -> fonds blancs à neutraliser ══════════════════════════════════════════════════════ */ /* Bandeau récap (n° commande, date, e-mail, total, moyen de paiement) */ .woocommerce-order .woocommerce-order-overview, .woocommerce-order ul.woocommerce-thankyou-order-details, .woocommerce-order ul.order_details { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 10px !important; padding: 18px !important; margin: 0 0 24px !important; list-style: none !important; display: flex !important; flex-wrap: wrap !important; gap: 18px !important; } .woocommerce-order ul.order_details li, .woocommerce-order ul.woocommerce-thankyou-order-details li { background: transparent !important; border: none !important; border-right: 1px solid var(--vdp-navy-border) !important; color: var(--vdp-muted) !important; font-family: 'Rajdhani', sans-serif !important; font-size: 12px !important; letter-spacing: .05em !important; text-transform: uppercase !important; padding: 0 18px 0 0 !important; margin: 0 !important; list-style: none !important; } .woocommerce-order ul.order_details li:last-child { border-right: none !important; } .woocommerce-order ul.order_details li strong, .woocommerce-order ul.woocommerce-thankyou-order-details li strong { display: block !important; color: #fff !important; font-family: 'Bebas Neue', sans-serif !important; font-size: 20px !important; letter-spacing: .03em !important; text-transform: none !important; margin-top: 4px !important; } .woocommerce-order .woocommerce-notice, .woocommerce-order p.woocommerce-thankyou-order-received { color: var(--vdp-gold) !important; font-family: 'Bebas Neue', sans-serif !important; font-size: 26px !important; letter-spacing: .04em !important; background: transparent !important; } /* Tableaux : détails de commande, adresses, historique, téléchargements */ .woocommerce-order table.shop_table, .woocommerce-account table.shop_table, .woocommerce-order table.woocommerce-table, .woocommerce-account table.woocommerce-table { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 10px !important; border-collapse: separate !important; border-spacing: 0 !important; overflow: hidden !important; color: #dfe7f5 !important; } .woocommerce-order table.shop_table thead th, .woocommerce-account table.shop_table thead th, .woocommerce-order table.woocommerce-table thead th, .woocommerce-account table.woocommerce-table thead th { background: var(--vdp-navy-mid) !important; color: var(--vdp-muted) !important; font-family: 'Rajdhani', sans-serif !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important; border-bottom: 1px solid var(--vdp-navy-border) !important; } .woocommerce-order table.shop_table tbody, .woocommerce-order table.shop_table tbody tr, .woocommerce-order table.shop_table tbody td, .woocommerce-order table.shop_table tfoot, .woocommerce-order table.shop_table tfoot tr, .woocommerce-order table.shop_table tfoot th, .woocommerce-order table.shop_table tfoot td, .woocommerce-order table.shop_table tr:nth-child(even), .woocommerce-order table.shop_table tr:nth-child(odd), .woocommerce-account table.shop_table tbody, .woocommerce-account table.shop_table tbody tr, .woocommerce-account table.shop_table tbody td, .woocommerce-account table.shop_table tr:nth-child(even), .woocommerce-account table.shop_table tr:nth-child(odd) { background: transparent !important; background-color: transparent !important; color: #dfe7f5 !important; border-color: var(--vdp-navy-border) !important; } .woocommerce-order table.shop_table tfoot th, .woocommerce-account table.shop_table tfoot th { color: var(--vdp-muted) !important; text-transform: uppercase !important; font-family:'Rajdhani',sans-serif !important; } .woocommerce-order table.shop_table .woocommerce-Price-amount, .woocommerce-order table.shop_table bdi, .woocommerce-account table.shop_table .woocommerce-Price-amount { color: #fff !important; } .woocommerce-order table.shop_table tfoot tr:last-child td, .woocommerce-order table.shop_table tfoot tr:last-child bdi, .woocommerce-order table.shop_table tfoot tr:last-child .woocommerce-Price-amount { color: var(--vdp-gold) !important; font-family: 'Bebas Neue', sans-serif !important; font-size: 20px !important; } .woocommerce-order table.shop_table a, .woocommerce-account table.shop_table a { color: var(--vdp-gold) !important; } /* Adresses de facturation / livraison */ .woocommerce-order .woocommerce-customer-details, .woocommerce-order .woocommerce-columns--addresses .col-1, .woocommerce-order .woocommerce-columns--addresses .col-2, .woocommerce-account .woocommerce-Address, .woocommerce-order address, .woocommerce-account address { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 10px !important; color: #dfe7f5 !important; padding: 16px !important; font-style: normal !important; } .woocommerce-order h2, .woocommerce-order h3, .woocommerce-account h2, .woocommerce-account h3 { color: #fff !important; } /* ══════════════════════════════════════════════════════ CONFIRMATION — retirer les bordures « dents de scie » (décor Storefront) + style carte VDP homogène ══════════════════════════════════════════════════════ */ .woocommerce-order ul.order_details::before, .woocommerce-order ul.order_details::after, .woocommerce-order ul.woocommerce-thankyou-order-details::before, .woocommerce-order ul.woocommerce-thankyou-order-details::after, .woocommerce-order .woocommerce-order-overview::before, .woocommerce-order .woocommerce-order-overview::after, .woocommerce-order .woocommerce-customer-details::before, .woocommerce-order .woocommerce-customer-details::after, .woocommerce-order address::before, .woocommerce-order address::after { content: none !important; display: none !important; background: none !important; border: none !important; height: 0 !important; } /* Carte récap : même langage visuel que les blocs du site */ .woocommerce-order ul.order_details, .woocommerce-order ul.woocommerce-thankyou-order-details, .woocommerce-order .woocommerce-order-overview { position: relative !important; background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 12px !important; box-shadow: none !important; padding: 20px !important; overflow: hidden !important; } /* Titre « Merci » aligné sur les titres du site */ .woocommerce-order p.woocommerce-thankyou-order-received, .woocommerce-order .woocommerce-notice--success { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-left: 4px solid var(--vdp-gold) !important; border-radius: 10px !important; padding: 16px 20px !important; margin: 0 0 20px !important; font-size: 22px !important; } /* Titres de section */ .woocommerce-order h2, .woocommerce-order h3 { font-family: 'Bebas Neue', sans-serif !important; letter-spacing: .04em !important; color: #fff !important; margin: 28px 0 14px !important; } /* Espacement général de la page */ .woocommerce-order { padding-bottom: 32px !important; } .woocommerce-order .woocommerce-customer-details { margin-top: 8px !important; } .woocommerce-order .woocommerce-columns--addresses { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; } @media (max-width: 768px) { .woocommerce-order .woocommerce-columns--addresses { grid-template-columns: 1fr !important; } .woocommerce-order ul.order_details li { border-right: none !important; } } /* Vignette produit dans les commandes (Mon compte / view-order) */ .vdp-order-item { display: flex !important; align-items: center !important; gap: 14px !important; } .vdp-order-item__thumb { flex-shrink: 0 !important; display: block !important; width: 48px !important; height: 48px !important; } .vdp-order-item__thumb img { width: 48px !important; height: 48px !important; object-fit: contain !important; background: #162050 !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 8px !important; padding: 3px !important; display: block !important; margin: 0 !important; box-shadow: none !important; } .vdp-order-item__body { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; } .vdp-order-item__qty { font-family: 'Rajdhani', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .04em !important; color: var(--vdp-muted) !important; } .vdp-order-item__qty strong { color: #fff !important; font-weight: 700 !important; } /* ══════════════════════════════════════════════════════ MON COMPTE — tableau de bord client Corrections de contraste + titre harmonisé ══════════════════════════════════════════════════════ */ /* Titre de page façon héro (comme panier / confirmation) */ /* Mon compte : le titre par défaut est masqué, un vrai héro le remplace */ .woocommerce-account .entry-title, .woocommerce-account h1.entry-title, .woocommerce-account .vdp-generic-page__title, .woocommerce-account .vdp-generic-page__line { display: none !important; } /* Texte du tableau de bord (souvent resté sombre/illisible) */ .woocommerce-MyAccount-content p, .woocommerce-MyAccount-content li, .woocommerce-MyAccount-content td, .woocommerce-MyAccount-content th, .woocommerce-MyAccount-content div, .woocommerce-MyAccount-content span, .woocommerce-MyAccount-content legend, .woocommerce-MyAccount-content fieldset { color: #dfe7f5 !important; } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3, .woocommerce-MyAccount-content legend { font-family: 'Bebas Neue', sans-serif !important; letter-spacing: .04em !important; color: #fff !important; } .woocommerce-MyAccount-content strong { color: #fff !important; } .woocommerce-MyAccount-content a { color: var(--vdp-gold) !important; } .woocommerce-MyAccount-content a:hover { color: #FFE066 !important; } .woocommerce-MyAccount-content fieldset { border: 1px solid var(--vdp-navy-border) !important; border-radius: 8px !important; padding: 16px !important; background: transparent !important; } /* Boutons */ .woocommerce-account .woocommerce-Button, .woocommerce-account .button, .woocommerce-MyAccount-content .button, .woocommerce-MyAccount-content button[type="submit"] { background: var(--vdp-gold) !important; color: #060D26 !important; border: none !important; border-radius: 6px !important; font-family: 'Rajdhani', sans-serif !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .05em !important; text-transform: uppercase !important; padding: 11px 22px !important; cursor: pointer !important; text-decoration: none !important; transition: background .2s !important; } .woocommerce-account .button:hover, .woocommerce-MyAccount-content .button:hover, .woocommerce-MyAccount-content button[type="submit"]:hover { background: #FFE066 !important; } /* Boutons secondaires (voir / re-commander) */ .woocommerce-MyAccount-content .button.view, .woocommerce-MyAccount-content .woocommerce-button.view { background: transparent !important; color: var(--vdp-gold) !important; border: 1px solid var(--vdp-gold) !important; } .woocommerce-MyAccount-content .button.view:hover { background: var(--vdp-gold) !important; color: #060D26 !important; } /* Messages (info / succès / erreur) */ .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-error, .woocommerce-account .woocommerce-notice { background: var(--vdp-navy-card) !important; border: 1px solid var(--vdp-navy-border) !important; border-left: 4px solid var(--vdp-gold) !important; border-radius: 8px !important; color: #dfe7f5 !important; box-shadow: none !important; list-style: none !important; } .woocommerce-account .woocommerce-error { border-left-color: #E63030 !important; } .woocommerce-account .woocommerce-message a, .woocommerce-account .woocommerce-info a { color: var(--vdp-gold) !important; } /* Formulaires (connexion, inscription, adresses, mot de passe) */ .woocommerce-account form.login, .woocommerce-account form.register, .woocommerce-account form.woocommerce-EditAccountForm, .woocommerce-account form.edit-account, .woocommerce-account .woocommerce-form { background: transparent !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 10px !important; padding: 22px !important; } .woocommerce-account label, .woocommerce-account .woocommerce-form__label span { color: var(--vdp-muted) !important; } .woocommerce-account input[type="text"], .woocommerce-account input[type="email"], .woocommerce-account input[type="password"], .woocommerce-account input[type="tel"], .woocommerce-account select, .woocommerce-account textarea { background: #0F1E4A !important; border: 1px solid var(--vdp-navy-border) !important; color: #fff !important; border-radius: 6px !important; padding: 10px 12px !important; } .woocommerce-account input:focus, .woocommerce-account select:focus, .woocommerce-account textarea:focus { border-color: var(--vdp-gold) !important; outline: none !important; } .woocommerce-account ::placeholder { color: #5f7bb0 !important; } .woocommerce-account .required { color: #E63030 !important; } /* ══════════════════════════════════════════════════════ MON COMPTE — tableau des commandes : bandes blanches (colonnes order-number / actions gardaient un fond clair) ══════════════════════════════════════════════════════ */ .woocommerce-account .woocommerce-MyAccount-content table, .woocommerce-account .woocommerce-MyAccount-content table *, .woocommerce-account .woocommerce-orders-table, .woocommerce-account .woocommerce-orders-table *, .woocommerce-account table.my_account_orders, .woocommerce-account table.my_account_orders * { background-color: transparent !important; } .woocommerce-account .woocommerce-MyAccount-content table thead, .woocommerce-account .woocommerce-MyAccount-content table thead th { background-color: var(--vdp-navy-mid) !important; } /* Cellules : toutes colonnes, y compris order-number et actions */ .woocommerce-account .woocommerce-orders-table__cell, .woocommerce-account .woocommerce-orders-table__cell-order-number, .woocommerce-account .woocommerce-orders-table__cell-order-date, .woocommerce-account .woocommerce-orders-table__cell-order-status, .woocommerce-account .woocommerce-orders-table__cell-order-total, .woocommerce-account .woocommerce-orders-table__cell-order-actions, .woocommerce-account td.order-number, .woocommerce-account td.order-date, .woocommerce-account td.order-status, .woocommerce-account td.order-total, .woocommerce-account td.order-actions, .woocommerce-account td.download-product, .woocommerce-account td.download-remaining, .woocommerce-account td.download-expires, .woocommerce-account td.download-file { background-color: transparent !important; border-color: var(--vdp-navy-border) !important; color: #dfe7f5 !important; } .woocommerce-account .woocommerce-orders-table__cell-order-number a, .woocommerce-account td.order-number a { color: var(--vdp-gold) !important; font-weight: 700 !important; } /* Les boutons gardent leur fond doré */ .woocommerce-account .woocommerce-MyAccount-content table .button, .woocommerce-account .woocommerce-orders-table .button { background-color: var(--vdp-gold) !important; color: #060D26 !important; } .woocommerce-account .woocommerce-MyAccount-content table .button.view, .woocommerce-account .woocommerce-orders-table .button.view { background-color: transparent !important; color: var(--vdp-gold) !important; border: 1px solid var(--vdp-gold) !important; } /* ══════════════════════════════════════════════════════ AVATAR CLIENT (Mon compte) ══════════════════════════════════════════════════════ */ .vdp-avatar-field { border: 1px solid var(--vdp-navy-border) !important; border-radius: 10px !important; padding: 18px !important; margin-bottom: 22px !important; background: transparent !important; } .vdp-avatar-field legend { font-family: 'Bebas Neue', sans-serif !important; font-size: 18px !important; letter-spacing: .05em !important; color: #fff !important; padding: 0 8px !important; } .vdp-avatar-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .vdp-avatar-preview img, .vdp-account-hello img { width: 74px !important; height: 74px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid var(--vdp-gold) !important; box-shadow: 0 0 14px rgba(245,197,24,.25) !important; display: block !important; } .vdp-avatar-actions { flex: 1; min-width: 220px; } .vdp-avatar-actions input[type="file"] { color: var(--vdp-muted) !important; font-family: 'Rajdhani', sans-serif !important; font-size: 13px !important; } .vdp-avatar-actions input[type="file"]::file-selector-button { background: var(--vdp-gold) !important; color: #060D26 !important; border: none !important; border-radius: 6px !important; font-family: 'Rajdhani', sans-serif !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: .05em !important; text-transform: uppercase !important; padding: 9px 16px !important; margin-right: 10px !important; cursor: pointer !important; } .vdp-avatar-hint { font-size: 12px !important; color: var(--vdp-muted) !important; margin: 0 0 8px !important; } .vdp-avatar-remove { display: inline-flex; align-items: center; gap: 6px; font-size: 12px !important; color: #FF8A8A !important; cursor: pointer; } /* Avatar dans l'en-tête (zone compte) */ .vdp-action__icon--avatar { display: inline-flex !important; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; } .vdp-action__icon--avatar img { width: 48px !important; height: 48px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid var(--vdp-gold) !important; box-shadow: 0 0 10px rgba(245,197,24,.3) !important; display: block !important; margin: 0 !important; } /* ══════════════════════════════════════════════════════ EN-TÊTE — zone compte (avatar + texte alignés) ══════════════════════════════════════════════════════ */ .vdp-header__actions .vdp-action { display: flex !important; align-items: center !important; /* le texte se centre sur l'avatar */ gap: 12px !important; } /* Le bloc texte ne doit pas s'étirer */ .vdp-header__actions .vdp-action > div { display: flex !important; flex-direction: column !important; justify-content: center !important; line-height: 1.35 !important; } .vdp-header__actions .vdp-action strong { font-size: 15px !important; } .vdp-header__actions .vdp-action small { font-size: 12px !important; } /* ══════════════════════════════════════════════════════ MON COMPTE — menu latéral : espace entre icône et texte ══════════════════════════════════════════════════════ */ .woocommerce-MyAccount-navigation li a { display: flex !important; align-items: center !important; gap: 10px !important; } /* L'icône (pseudo-élément WooCommerce) ne colle plus au libellé */ .woocommerce-MyAccount-navigation li a::before { margin-right: 0 !important; flex-shrink: 0 !important; display: inline-flex !important; width: 18px !important; justify-content: center !important; } /* ══════════════════════════════════════════════════════ HÉROS DE PAGE — présentation unifiée (précommandes, lives, boutique, compte, confirmation…) Icône au-dessus · titre 56px · sous-titre centré ══════════════════════════════════════════════════════ */ .vdp-page-hero, .vdp-live-hero, .vdp-shop-hero, .vdp-cart-hero, .vdp-ty-hero { padding: 32px 32px !important; text-align: center !important; margin-bottom: 28px !important; } /* Icône : toujours au-dessus du titre, même taille partout */ .vdp-page-hero__icon, .vdp-live-hero__icon, .vdp-shop-hero__icon-wrap, .vdp-shop-hero__emoji, .vdp-cart-hero__icon, .vdp-ty-hero__icon { display: block !important; font-size: 44px !important; line-height: 1 !important; margin: 0 auto 10px !important; } /* Le titre du calendrier avait l'icône en ligne : on la remet au-dessus */ .vdp-live-hero__title { display: block !important; gap: 0 !important; } /* Titres : même taille partout */ .vdp-page-hero h1, .vdp-live-hero__title, .vdp-shop-hero__title, .vdp-cart-hero__title, .vdp-ty-hero__title { font-family: 'Bebas Neue', sans-serif !important; font-size: 56px !important; letter-spacing: .06em !important; color: #fff !important; line-height: 1.05 !important; margin: 0 0 8px !important; } /* Sous-titres : même taille et même largeur de lecture */ .vdp-page-hero p, .vdp-live-hero__sub, .vdp-shop-hero__desc, .vdp-cart-hero__sub, .vdp-ty-hero__sub { font-size: 16px !important; color: var(--vdp-muted) !important; line-height: 1.7 !important; max-width: 640px !important; margin: 0 auto !important; } /* Boutons éventuels sous le sous-titre (calendrier) */ .vdp-live-btns { margin-top: 24px !important; } @media (max-width: 700px) { .vdp-page-hero, .vdp-live-hero, .vdp-shop-hero, .vdp-cart-hero, .vdp-ty-hero { padding: 30px 20px !important; } .vdp-page-hero h1, .vdp-live-hero__title, .vdp-shop-hero__title, .vdp-cart-hero__title, .vdp-ty-hero__title { font-size: 38px !important; } .vdp-page-hero__icon, .vdp-live-hero__icon, .vdp-shop-hero__icon-wrap, .vdp-shop-hero__emoji, .vdp-cart-hero__icon, .vdp-ty-hero__icon { font-size: 36px !important; } } /* Titre bicolore sur Mon compte */ .woocommerce-account .entry-title span, .woocommerce-account .vdp-generic-page__title span { color: var(--vdp-gold) !important; } /* ══════════════════════════════════════════════════════ MON COMPTE — héro (identique aux autres pages) ══════════════════════════════════════════════════════ */ .vdp-account-hero { max-width: 1180px; margin: 0 auto 28px !important; padding: 32px 32px !important; background: linear-gradient(135deg, #060D26 0%, #0A1535 50%, #060D26 100%) !important; border: 1px solid var(--vdp-navy-border) !important; border-radius: 16px !important; text-align: center !important; position: relative; overflow: hidden; } .vdp-account-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--vdp-gold), transparent); } .vdp-account-hero__icon { font-size: 44px; line-height: 1; margin-bottom: 10px; } .vdp-account-hero__title { font-family: 'Bebas Neue', sans-serif !important; font-size: 56px !important; letter-spacing: .06em !important; color: #fff !important; line-height: 1.05 !important; margin: 0 0 8px !important; } .vdp-account-hero__title span { color: var(--vdp-gold) !important; } .vdp-account-hero__sub { font-size: 16px !important; color: var(--vdp-muted) !important; line-height: 1.7 !important; max-width: 640px; margin: 0 auto !important; } @media (max-width: 700px) { .vdp-account-hero { padding: 30px 20px !important; } .vdp-account-hero__title { font-size: 38px !important; } .vdp-account-hero__icon { font-size: 36px; } } /* ══════════════════════════════════════════════════════ MON COMPTE — mise en page : héro pleine largeur au-dessus ══════════════════════════════════════════════════════ */ .woocommerce-account .woocommerce { display: grid !important; grid-template-columns: 260px 1fr !important; gap: 24px !important; align-items: start !important; max-width: 1180px; margin: 0 auto !important; } /* Le héro traverse les deux colonnes */ .woocommerce-account .woocommerce > .vdp-account-hero { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; } /* Colonnes : plus de flottement Storefront */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: 100% !important; margin: 0 !important; } /* Page de connexion : une seule colonne */ .woocommerce-account:not(.logged-in) .woocommerce { display: block !important; max-width: 1180px; } @media (max-width: 860px) { .woocommerce-account .woocommerce { grid-template-columns: 1fr !important; } }