/* Theme Name: BOX Commerce Theme URI: https://boxantinuisibles.com Author: BOX ANTI-NUISIBLES Author URI: https://boxantinuisibles.com Description: Thème WordPress léger et autonome habillant le moteur WooCommerce de shop.boxantinuisibles.com dans la direction artistique du site public boxantinuisibles.com. N'altère aucun template WooCommerce natif : restylage par CSS et hooks uniquement. V5.5.3 : redirection de la racine de shop.boxantinuisibles.com vers le site public boxantinuisibles.com (architecture officielle : shop.* réservé au moteur transactionnel WooCommerce). Condition strictement scopée à is_front_page() + HTTP_HOST exact + GET/HEAD uniquement, hors admin/AJAX/REST/wc-ajax ; /checkout/, /my-account/ et toute route technique WooCommerce ne correspondent structurellement jamais à cette condition. Redirection 302 temporaire (passage à 301 réservé à une version ultérieure après validation). Aucune autre modification : checkout, Mon Compte, my-address.php, Stripe, PayPal, Store API, CORS, header, footer, Elementor non touchés. Version: 5.5.3 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 WC requires at least: 8.0 WC tested up to: 10.9.4 Text Domain: box-commerce */ /* ============================================================ 1. VARIABLES — identiques au site public boxantinuisibles.com ============================================================ */ :root{ --base:#08090A; --surface:#111315; --surface-2:#181B1E; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --text:#F3F5F1; --text-muted:#82877F; --green:#3ECF8E; --green-dim:rgba(62,207,142,.13); --rats:#6BC24A; --souris:#E8DD4A; --cafards:#5EDCF2; --fourmis:#E63A93; --mouches:#F4A214; --error:#E85C5C; } /* ============================================================ 2. RESET & BASE ============================================================ */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--base); color:var(--text); font-family:'Poppins',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; margin:0; padding:0; overflow-x:hidden; } a{color:inherit; text-decoration:none;} img{max-width:100%; height:auto; display:block;} h1,h2,h3,h4{font-family:'Archivo Black',sans-serif; font-weight:400; letter-spacing:-.01em; color:var(--text); margin:0 0 16px;} .wrap{max-width:1240px; margin:0 auto; padding:0 30px;} @media (max-width:600px){ .wrap{padding:0 20px;} } /* No WordPress sidebar is registered or called by this theme — nothing to hide. */ #wpadminbar{position:fixed !important;} /* keep admin bar usable for logged-in staff, unaffected otherwise */ /* ============================================================ 3. HEADER (matches boxantinuisibles.com header) ============================================================ */ .box-header{ position:sticky; top:0; z-index:500; background:rgba(8,9,10,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:18px 0; } .box-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;} .box-logo img{height:34px; width:auto; display:block;} .box-nav{display:flex; align-items:center; gap:34px;} .box-nav a{font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text); transition:color .2s ease;} .box-nav a:hover{color:var(--green);} .box-nav .has-mega{position:relative;} .box-nav .mega{ position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(6px); background:var(--surface); border:1px solid var(--line-strong); padding:14px; min-width:230px; display:flex; flex-direction:column; gap:2px; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; box-shadow:0 20px 40px rgba(0,0,0,.5); } .box-nav .has-mega:hover .mega{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);} .box-nav .mega a{padding:9px 10px; font-family:'Poppins',sans-serif; text-transform:none; font-size:13.5px; display:flex; align-items:center; gap:9px;} .box-nav .mega a:hover{background:var(--surface-2); color:var(--green);} .box-header-actions{display:flex; align-items:center; gap:12px;} .box-icon-btn{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--text); position:relative; transition:border-color .2s ease, color .2s ease; } .box-icon-btn:hover{border-color:var(--green); color:var(--green);} .box-cart-count{ position:absolute; top:-4px; right:-4px; width:17px; height:17px; border-radius:50%; background:var(--green); color:#06170F; font-family:'JetBrains Mono',monospace; font-size:10px; display:flex; align-items:center; justify-content:center; } .box-cart-count.is-zero{display:none;} .box-menu-toggle{display:none;} @media (max-width:900px){ .box-nav{display:none;} .box-menu-toggle{display:flex;} } /* Mobile menu */ .box-mobile-menu{ position:fixed; inset:0; z-index:600; background:var(--base); transform:translateY(-100%); transition:transform .35s cubic-bezier(.2,.8,.2,1); overflow-y:auto; } .box-mobile-menu.open{transform:translateY(0);} .box-mobile-menu .mm-top{display:flex; align-items:center; justify-content:space-between; padding:22px 30px;} .box-mobile-menu nav{padding:10px 30px 60px; display:flex; flex-direction:column; gap:26px;} .box-mobile-menu nav a{font-family:'Archivo Black',sans-serif; font-size:22px;} .box-mobile-menu .mm-sub{display:flex; flex-direction:column; gap:14px; padding-left:14px; margin-top:6px;} .box-mobile-menu .mm-sub a{font-family:'Poppins',sans-serif; font-size:15px; color:var(--text-muted);} /* ============================================================ 4. FOOTER (matches boxantinuisibles.com footer) ============================================================ */ /* Spécificité renforcée (préfixe "footer" + !important ciblé aux seules propriétés de couleur) : un style hérité (ancien thème/WordPress core) plus spécifique écrasait ces couleurs, faisant apparaître les titres de colonnes et le copyright en vert alors que le vrai site public les affiche en gris discret (var(--text-muted)) — le vert n'apparaît QUE sur les liens au survol sur boxantinuisibles.com, jamais à l'état normal. V5.4.2 : structure (display/gap/flex) reproduite à l'identique du vrai assets/styles.css du site public — plus de grid, uniquement flex comme sur boxantinuisibles.com. */ footer.box-footer{border-top:1px solid var(--line); padding:60px 0 26px; margin-top:80px; background:var(--base);} footer.box-footer .footer-top{display:flex !important; justify-content:space-between; flex-wrap:wrap; gap:32px; margin-bottom:36px;} footer.box-footer .footer-brand img{height:30px; margin-bottom:14px;} footer.box-footer .footer-social{display:flex; gap:10px; margin-top:20px;} footer.box-footer .footer-social-icon{width:34px; height:34px;} footer.box-footer .footer-note{font-size:10.5px; color:var(--text-muted) !important; opacity:.6; margin-top:14px; max-width:260px;} footer.box-footer .footer-brand p{color:var(--text-muted) !important; font-size:13.5px; max-width:280px; margin-top:12px;} footer.box-footer .footer-cols{display:flex !important; gap:56px; flex-wrap:wrap;} footer.box-footer h4{ font-size:11.5px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted) !important; margin-bottom:16px; } footer.box-footer .footer-cols a{ display:block; font-size:13.5px; color:var(--text) !important; opacity:.85; margin-bottom:11px; transition:opacity .2s ease, transform .2s ease, color .2s ease; text-decoration:none; } footer.box-footer .footer-cols a:hover{opacity:1; color:var(--green) !important; transform:translateX(3px);} .box-footer-bottom{ display:flex; justify-content:space-between; padding-top:22px; border-top:1px solid var(--line); font-size:11.5px; color:var(--text-muted) !important; flex-wrap:wrap; gap:10px; font-family:'JetBrains Mono',monospace; } .box-footer-bottom span{color:var(--text-muted) !important;} .box-footer-bottom a{color:var(--text-muted) !important; text-decoration:underline; text-underline-offset:2px;} .box-footer-bottom a:hover{color:var(--green) !important;} @media (max-width:800px){ footer.box-footer .footer-top{flex-direction:column; gap:28px;} footer.box-footer .footer-cols{gap:28px;} } /* ============================================================ 5. PAGE HERO (generic title band for Cart/Checkout/My Account) ============================================================ */ .box-page-hero{padding:56px 0 30px;} .box-page-hero .tag{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--green); letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:12px;} .box-page-hero h1{font-size:clamp(28px,4vw,42px); margin:0;} .box-content-section{padding:20px 0 90px;} /* ============================================================ 6. WOOCOMMERCE — GENERAL ============================================================ */ .woocommerce, .woocommerce-page{color:var(--text); font-size:15px;} .woocommerce a{color:var(--green);} .woocommerce ::placeholder{color:var(--text-muted); opacity:1;} /* Notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error{ background:var(--surface) !important; border:1px solid var(--line-strong) !important; border-left:3px solid var(--green) !important; color:var(--text) !important; padding:16px 20px !important; list-style:none !important; margin:0 0 24px !important; font-size:14px !important; } .woocommerce-error{border-left-color:var(--error) !important;} .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{display:none !important;} .woocommerce-message a.button, .woocommerce-error a.button{margin-left:10px;} /* Buttons — used across cart/checkout/account */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #place_order, .woocommerce .checkout-button{ background:var(--green) !important; color:#06170F !important; border:none !important; font-family:'JetBrains Mono',monospace !important; font-weight:700 !important; font-size:13px !important; letter-spacing:.04em !important; text-transform:uppercase !important; padding:14px 26px !important; border-radius:2px !important; cursor:pointer; transition:filter .2s ease, transform .2s ease !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #place_order:hover{filter:brightness(1.08) !important; transform:translateY(-1px);} .woocommerce a.button.alt{background:var(--green) !important;} .woocommerce a.remove{ color:var(--text-muted) !important; font-size:20px !important; border:none !important; background:none !important; } .woocommerce a.remove:hover{color:var(--error) !important; background:none !important;} /* Quantity inputs */ .woocommerce .quantity{display:inline-flex; align-items:center; border:1px solid var(--line-strong);} .woocommerce .quantity .qty{ background:var(--surface-2) !important; border:none !important; color:var(--text) !important; width:56px !important; text-align:center; padding:10px 4px !important; font-family:'JetBrains Mono',monospace; } /* Form fields (checkout, my account, login) */ .woocommerce form .form-row label{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-muted); letter-spacing:.04em; text-transform:uppercase; margin-bottom:6px; display:block;} .woocommerce form .form-row .required{color:var(--fourmis);} .woocommerce form input.input-text, .woocommerce form textarea, .woocommerce form select, .woocommerce-page select{ background:var(--surface-2) !important; border:1px solid var(--line-strong) !important; color:var(--text) !important; padding:12px 14px !important; border-radius:2px !important; font-family:'Poppins',sans-serif !important; width:100%; } .woocommerce form input.input-text:focus, .woocommerce form textarea:focus, .woocommerce form select:focus{ outline:none !important; border-color:var(--green) !important; } .select2-container .select2-selection--single{ background:var(--surface-2) !important; border:1px solid var(--line-strong) !important; height:44px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--text) !important; line-height:42px !important;} .select2-dropdown{background:var(--surface) !important; border:1px solid var(--line-strong) !important;} .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--green) !important; color:#06170F !important;} /* ============================================================ 7. SHOP / PRODUCT ARCHIVE & SINGLE (kept minimal on purpose — customer-facing catalog lives on boxantinuisibles.com) ============================================================ */ .woocommerce ul.products{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; list-style:none; padding:0;} .woocommerce ul.products li.product{background:var(--surface); border:1px solid var(--line); padding:20px;} .woocommerce ul.products li.product img{background:#F5F3EC; border-radius:4px; margin-bottom:14px;} .woocommerce ul.products li.product .price{color:var(--green); font-family:'JetBrains Mono',monospace;} .woocommerce span.onsale{background:var(--green) !important; color:#06170F !important;} .box-shop-notice{ background:var(--surface); border:1px solid var(--line-strong); border-left:3px solid var(--green); padding:16px 20px; font-size:13.5px; color:var(--text-muted); margin-bottom:30px; } .box-shop-notice a{color:var(--green); text-decoration:underline;} /* ============================================================ 8. CART PAGE ============================================================ */ .woocommerce table.shop_table{ width:100%; border-collapse:collapse; background:none !important; border:none !important; } .woocommerce table.shop_table thead th{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); text-align:left; padding:0 12px 14px; border-bottom:1px solid var(--line-strong) !important; } .woocommerce table.shop_table tbody tr{border-bottom:1px solid var(--line) !important;} .woocommerce table.shop_table td{padding:20px 12px !important; border:none !important; vertical-align:middle;} .woocommerce td.product-thumbnail img{width:72px; border-radius:4px; background:#F5F3EC;} .woocommerce td.product-name{font-weight:600;} .woocommerce td.product-name a{color:var(--text);} .woocommerce td.product-price, .woocommerce td.product-subtotal{font-family:'JetBrains Mono',monospace; font-weight:600;} .woocommerce-cart-form .coupon{display:flex; gap:10px; align-items:center; flex-wrap:wrap;} .woocommerce-cart-form .coupon input#coupon_code{width:auto; max-width:220px;} .woocommerce-cart-form table.shop_table{margin-bottom:30px;} .wc-proceed-to-checkout{margin-top:20px;} .cart-collaterals{margin-top:10px;} .cart_totals{background:var(--surface); border:1px solid var(--line-strong); padding:28px; max-width:420px; margin-left:auto;} .cart_totals h2{font-size:18px; margin-bottom:20px;} .cart_totals table{width:100%; border-collapse:collapse;} .cart_totals table th, .cart_totals table td{padding:12px 0 !important; border-top:1px solid var(--line) !important; font-size:14px;} .cart_totals table tr:first-child th, .cart_totals table tr:first-child td{border-top:none !important;} .cart_totals .order-total th, .cart_totals .order-total td{font-weight:700; font-size:17px; color:var(--text);} @media (max-width:780px){ .cart_totals{max-width:100%;} .woocommerce table.shop_table thead{display:none;} .woocommerce table.shop_table td{display:flex; width:100%; padding:8px 0 !important;} } /* ============================================================ 9. CHECKOUT PAGE — shortcode classique [woocommerce_checkout] Confirmé par diagnostic : page Checkout ID 1306 = shortcode classique, pas un bloc, pas CartFlows, pas Elementor. Chaque sélecteur ci-dessous cible directement le markup réel généré par ce shortcode, préfixé par body.woocommerce-checkout pour gagner en spécificité sur les styles WooCommerce/Astra sans avoir à abuser de !important partout. ============================================================ */ /* ---- Fond général : neutralise tout fond blanc hérité du thème/wrapper parent (thème d'origine, wrapper #page/.site/.content-area, etc.), scopé strictement à la page Checkout pour ne rien affecter ailleurs. */ body.woocommerce-checkout, body.woocommerce-checkout #page, body.woocommerce-checkout .site, body.woocommerce-checkout .site-content, body.woocommerce-checkout .content-area, body.woocommerce-checkout .entry-content, body.woocommerce-checkout .woocommerce{ background-color:#050707; color:var(--text); } body.woocommerce-checkout .box-content-section{background-color:#050707;} /* ---- Conteneur principal : largeur premium, centré */ body.woocommerce-checkout .box-content-section .wrap{max-width:1400px;} /* ---- Structure deux colonnes du formulaire natif ---- Structure RÉELLE de form.checkout.woocommerce-checkout (shortcode classique WooCommerce) : form.checkout |- #customer_details.col2-set (-> .col-1 facturation, .col-2 livraison) |- #order_review_heading (h3, FRÈRE de #customer_details, pas un enfant) \- #order_review (FRÈRE de #customer_details, pas un enfant) #order_review n'est jamais imbriqué dans .col2-set dans le markup réel. La disposition deux colonnes s'applique donc ici au niveau du form lui-même : colonne gauche = #customer_details, colonne droite = #order_review_heading + #order_review regroupés par grid-column (CSS Grid permet d'assigner des frères non contigus à la même colonne, sans wrapper ni déplacement de markup). */ body.woocommerce-checkout form.checkout.woocommerce-checkout{ display:grid; grid-template-columns:minmax(0, 62fr) minmax(400px, 38fr); gap:30px; align-items:start; } body.woocommerce-checkout #customer_details{ grid-column:1; grid-row:1 / span 3; } body.woocommerce-checkout #order_review_heading{ grid-column:2; grid-row:1; } body.woocommerce-checkout #order_review{ grid-column:2; grid-row:2; } /* .col-1 (facturation) et .col-2 (livraison, affiché seulement si "Livrer à une autre adresse ?" est coché) restent empilés verticalement au sein de la colonne gauche : ils ne forment pas eux-mêmes deux colonnes. */ body.woocommerce-checkout .col2-set{ display:block; width:100%; } body.woocommerce-checkout .col2-set .col-1, body.woocommerce-checkout .col2-set .col-2{width:100%; float:none;} body.woocommerce-checkout .col2-set .col-2{margin-top:24px;} body.woocommerce-checkout #customer_details{ background:#111416; border:1px solid #2a2f32; border-radius:4px; padding:28px; margin-bottom:0; } body.woocommerce-checkout .woocommerce-billing-fields, body.woocommerce-checkout .woocommerce-shipping-fields, body.woocommerce-checkout .woocommerce-additional-fields{margin-bottom:26px;} body.woocommerce-checkout .woocommerce-billing-fields:last-child, body.woocommerce-checkout .woocommerce-shipping-fields:last-child, body.woocommerce-checkout .woocommerce-additional-fields:last-child{margin-bottom:0;} body.woocommerce-checkout .woocommerce-billing-fields h3, body.woocommerce-checkout .woocommerce-shipping-fields h3, body.woocommerce-checkout .woocommerce-additional-fields h3{ font-family:'Archivo Black',sans-serif; font-size:16px; color:var(--text); margin-bottom:18px; } body.woocommerce-checkout .woocommerce-shipping-fields .shipping_address{margin-top:12px;} /* ---- Colonne droite : résumé de commande ---- V5.2.0 : le scroll interne (max-height + overflow-y) introduit en V5.1.0 est retiré à la demande explicite. Le sticky est également retiré (et non simplement rendu "conditionnel") : en CSS pur, sans JavaScript de mesure de hauteur, il n'existe pas de moyen fiable de désactiver automatiquement position:sticky uniquement "quand le contenu ne tient pas" — un sticky qui reste actif sur un contenu plus haut que le viewport est exactement le risque qui rendait le CTA inaccessible. Le bloc suit donc désormais le flux naturel de la page : scroll de page classique, aucune scrollbar interne, CTA et CGV toujours atteignables quelle que soit la hauteur du formulaire Stripe. */ body.woocommerce-checkout #order_review_heading{ font-family:'Archivo Black',sans-serif; font-size:18px; color:var(--text); margin-bottom:16px; } body.woocommerce-checkout #order_review{ background:#111416; border:1px solid #2a2f32; border-radius:4px; padding:28px; } body.woocommerce-checkout .woocommerce-checkout-review-order-table{ background:none; width:100%; border-collapse:collapse; margin-bottom:0; } body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{ color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid #2a2f32; padding:0 0 12px; } body.woocommerce-checkout .woocommerce-checkout-review-order-table td, body.woocommerce-checkout .woocommerce-checkout-review-order-table th{ color:var(--text); border-top:1px solid #1e2224; padding:12px 0; } body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name{ color:var(--text); word-break:normal; } body.woocommerce-checkout .woocommerce-checkout-review-order-table{table-layout:auto;} body.woocommerce-checkout .woocommerce-checkout-review-order-table th:first-child, body.woocommerce-checkout .woocommerce-checkout-review-order-table td:first-child{width:auto; min-width:55%;} body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total, body.woocommerce-checkout .woocommerce-checkout-review-order-table .amount{ font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--text); } body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount, body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th{ font-size:18px; font-weight:700; color:var(--text); } body.woocommerce-checkout .woocommerce-checkout-review-order-table .shipping ul{list-style:none; margin:0; padding:0;} body.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods{list-style:none; margin:0; padding:0;} body.woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods li{color:var(--text-muted); padding:4px 0;} /* ---- Code promo ---- */ body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{ background:#111416; border:1px solid #2a2f32; border-left:3px solid var(--green); color:var(--text); } body.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon{ background:#111416; border:1px solid #2a2f32; border-radius:4px; padding:20px; margin-bottom:20px; } body.woocommerce-checkout .checkout_coupon .form-row{display:flex; gap:10px; margin-bottom:0;} body.woocommerce-checkout .checkout_coupon .input-text{flex:1;} body.woocommerce-checkout .checkout_coupon button.button{ background:var(--green); color:#06170F; border:none; white-space:nowrap; } /* ---- Champs de formulaire (billing/shipping/coupon) ---- */ body.woocommerce-checkout .form-row label{ color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:6px; display:block; } body.woocommerce-checkout .form-row .required{color:var(--fourmis);} body.woocommerce-checkout .input-text, body.woocommerce-checkout select, body.woocommerce-checkout textarea, body.woocommerce-checkout .select2-container .select2-selection--single{ background-color:#111416; color:#F3F5F1; border:1px solid #2a2f32; border-radius:3px; padding:12px 14px; min-height:44px; width:100%; } body.woocommerce-checkout .input-text::placeholder{color:#82877F; opacity:1;} body.woocommerce-checkout .input-text:focus, body.woocommerce-checkout select:focus, body.woocommerce-checkout textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 1px var(--green); } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{ color:#F3F5F1; line-height:42px; } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{height:42px;} body.woocommerce-checkout .woocommerce-additional-fields textarea{min-height:90px;} /* ---- Paiement natif (méthodes + boîte de contenu de chaque passerelle) ---- */ /* #payment est le même élément que .woocommerce-checkout-payment (id ET classe sur le même
dans le template WooCommerce). On compose l'ID dans le sélecteur pour garantir au moins la même spécificité qu'une éventuelle règle WooCommerce core basée sur #payment seul (un ID bat toujours un empilement de classes) — sans quoi notre fond sombre peut perdre la bataille de cascade sur cet élément précis. */ body.woocommerce-checkout #payment.woocommerce-checkout-payment{ background:#111416; border:1px solid #2a2f32; border-radius:4px; margin-top:20px; } body.woocommerce-checkout ul.payment_methods{ list-style:none; padding:16px; margin:0; border-bottom:1px solid #2a2f32; } body.woocommerce-checkout ul.payment_methods li.wc_payment_method{ padding:12px 4px; border-bottom:1px solid #1e2224; } body.woocommerce-checkout ul.payment_methods li.wc_payment_method:last-child{border-bottom:none;} body.woocommerce-checkout ul.payment_methods label{color:var(--text); font-weight:500;} /* Spécificité renforcée : WooCommerce core impose ".woocommerce-checkout #payment div.payment_box{background-color:#dcd7e2}" (confirmé par inspection DevTools) — sélecteur avec un ID (#payment), que notre ancienne règle ".payment_box" seule ne pouvait pas battre (0 ID contre 1). En reprenant nous aussi #payment div.payment_box (avec en plus le tag body en préfixe), nous égalons l'ID et le nombre de classes de la règle WooCommerce, avec un tag de plus qui fait gagner notre règle sans avoir besoin de !important. */ body.woocommerce-checkout #payment div.payment_box{ background:#181b1e; margin:12px 0 0; padding:20px; font-size:13px; color:var(--text-muted); border-radius:4px; border:1px solid #2a2f32; } /* Triangle décoratif au-dessus de .payment_box : WooCommerce le construit avec la technique CSS classique "border trick" (border pleine couleur sur les 4 côtés, puis border-top/left/right repassés en transparent, ne laissant que border-bottom visible = la pointe du triangle). Seule border-bottom-color porte donc la couleur visible ; c'est la seule propriété surchargée ici, aucune autre déclaration de .payment_box::before n'est modifiée. Je n'ai pas reçu le fichier CSS de WooCommerce core pour le vérifier ligne à ligne (seul le plugin Stripe a été fourni) : cette correction s'appuie sur l'implémentation standard de WooCommerce pour ce triangle, stable depuis de nombreuses versions. */ body.woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:#181b1e; } body.woocommerce-checkout .payment_box p{color:var(--text-muted); margin-bottom:8px;} body.woocommerce-checkout .payment_box p:last-child{margin-bottom:0;} /* Le
qu'un navigateur affiche par défaut avec sa propre bordure grise (comportement HTML natif, pas une règle du thème ni du plugin) est neutralisé UNIQUEMENT à l'intérieur de .payment_box — le plugin Stripe le fait déjà lui-même en mode "Optimized Checkout" via li.wc-stripe-optimized-checkout .payment_box.payment_method_stripe>fieldset, mais uniquement pour cette classe précise. Cette règle sert de filet de sécurité identique, sans dépendre de la présence exacte de cette classe. */ body.woocommerce-checkout .payment_box fieldset{border:none; margin:0; padding:0;} /* Éléments HTML normaux (hors iframe) que WooCommerce/Stripe placent parfois dans .payment_box — libellés, lignes de champ, méthodes enregistrées. Tout ce qui suit reste EN DEHORS de toute iframe Stripe : ce sont des éléments HTML classiques du DOM de la page, donc légitimement stylables. */ body.woocommerce-checkout .payment_box label{color:var(--text-muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;} body.woocommerce-checkout .payment_box .form-row{margin-bottom:12px;} body.woocommerce-checkout .payment_box .form-row:last-child{margin-bottom:0;} body.woocommerce-checkout .woocommerce-SavedPaymentMethods{list-style:none; margin:0 0 14px; padding:0;} body.woocommerce-checkout .woocommerce-SavedPaymentMethods li{padding:8px 0; color:var(--text);} /* Conteneur immédiat où Stripe monte son Payment Element (confirmé dans le code du plugin 10.8.5 : #wc-stripe-upe-form > .wc-stripe-upe-element > iframe Stripe). #wc-stripe-upe-form n'était stylé ni par le plugin ni par ce thème jusqu'ici. .wc-stripe-upe-element portait auparavant SA PROPRE bordure + padding + fond en plus de ceux déjà posés sur .payment_box (son parent direct) : deux cadres sombres empilés produisaient l'effet de bordures imbriquées visible sur la capture. .payment_box reste l'UNIQUE carte visible ; ses enfants directs (#wc-stripe-upe-form et .wc-stripe-upe-element) n'ajoutent plus ni bordure ni padding ni fond propre — le Payment Element sombre (validé, non modifié) s'insère donc directement dans la carte "Moyens de paiement" sans double cadre. */ body.woocommerce-checkout #wc-stripe-upe-form{ background:transparent; border:none; margin:0; padding:0; } body.woocommerce-checkout #wc-stripe-cc-form, body.woocommerce-checkout #wc-stripe-payment-element, body.woocommerce-checkout .wc-stripe-elements-field-container, body.woocommerce-checkout .wc-stripe-upe-element{ background:transparent; border:none; border-radius:0; padding:0; margin:0; } /* La zone gérée par Stripe/PayPal (iframe, éléments montés) n'est jamais ciblée au-delà de ce conteneur générique — aucune règle ne descend dans .payment_box iframe ou ses enfants. Le fond potentiellement clair visible À L'INTÉRIEUR de l'iframe (champs Numéro de carte / Date d'expiration / Cryptogramme) dépend exclusivement de la configuration Stripe Elements (Appearance API) définie dans le script du plugin Stripe lui-même — ce thème ne peut ni ne doit y accéder. */ /* ---- Bouton final ---- */ body.woocommerce-checkout #place_order{ background:var(--green); color:#06170F; border:none; width:100%; font-family:'JetBrains Mono',monospace; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:14px; padding:16px; border-radius:3px; margin-top:18px; cursor:pointer; } body.woocommerce-checkout #place_order:hover{filter:brightness(1.08);} body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{ font-size:13px; color:var(--text-muted); margin:16px 0; } body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a{color:var(--green);} body.woocommerce-checkout .create-account{margin-top:14px; font-size:13px; color:var(--text-muted);} /* ---- Notices (erreurs, infos, messages) ---- */ body.woocommerce-checkout .woocommerce-error, body.woocommerce-checkout .woocommerce-message, body.woocommerce-checkout .woocommerce-info{ background:#111416; border:1px solid #2a2f32; border-left:3px solid var(--green); color:var(--text); padding:16px 20px; list-style:none; margin:0 0 24px; font-size:14px; } body.woocommerce-checkout .woocommerce-error{border-left-color:var(--error);} body.woocommerce-checkout .woocommerce-error::before, body.woocommerce-checkout .woocommerce-message::before, body.woocommerce-checkout .woocommerce-info::before{display:none;} /* Certains styles tiers hérités (Astra / anciens plugins) appliquent parfois leurs propres !important sur les boutons rouges/roses ou les fonds blancs des champs ; ces deux points précis restent donc en !important, ciblé, car impossibles à surcharger proprement autrement. */ body.woocommerce-checkout .button, body.woocommerce-checkout button.button, body.woocommerce-checkout input.button, body.woocommerce-checkout #place_order{ background-color:var(--green) !important; color:#06170F !important; border-color:var(--green) !important; } body.woocommerce-checkout .input-text, body.woocommerce-checkout select, body.woocommerce-checkout textarea{ background-color:#111416 !important; color:#F3F5F1 !important; } @media (max-width:900px){ body.woocommerce-checkout form.checkout.woocommerce-checkout{grid-template-columns:1fr;} body.woocommerce-checkout #customer_details, body.woocommerce-checkout #order_review_heading, body.woocommerce-checkout #order_review{grid-column:1; grid-row:auto;} body.woocommerce-checkout #order_review{margin-top:24px;} body.woocommerce-checkout .checkout_coupon .form-row{flex-direction:column;} body.woocommerce-checkout #customer_details, body.woocommerce-checkout #order_review{padding:20px;} } /* ---- Paiement express en contexte classique (Apple Pay / Google Pay / Link) Selon la version du plugin Stripe, ce bloc peut apparaître au-dessus du formulaire classique sous différents conteneurs connus. On stylise uniquement l'enveloppe, jamais l'iframe/élément Stripe lui-même. */ body.woocommerce-checkout #wc-stripe-payment-request-wrapper, body.woocommerce-checkout .wc-stripe-payment-request-wrapper, body.woocommerce-checkout [id*="payment-request-button"], body.woocommerce-checkout .wc-stripe-elements-field-container{ background:#111416; border:1px solid #2a2f32; border-radius:4px; padding:20px; margin-bottom:24px; } body.woocommerce-checkout #wc-stripe-payment-request-wrapper::before, body.woocommerce-checkout .wc-stripe-payment-request-wrapper::before{ content:"Paiement express"; display:block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin-bottom:14px; } /* ============================================================ 10. MY ACCOUNT ============================================================ */ /* Cause exacte identifiée avant correction : ce grid nav(220px)+contenu(1fr) est nécessaire UNIQUEMENT quand une navigation de compte existe réellement (client connecté). Le template WooCommerce natif my-account.php génère .woocommerce-MyAccount-content dans les DEUX cas (connecté ou non) — sans la restriction .logged-in ci-dessous, l'état déconnecté (formulaires Connexion/Créer un compte) se retrouvait forcé dans la colonne de 220px prévue pour la navigation, d'où la compression extrême observée et l'immense zone vide à droite. .logged-in est la classe standard que WordPress ajoute au pour un utilisateur connecté. */ body.woocommerce-account.logged-in .woocommerce{ display:grid !important; grid-template-columns:240px 1fr !important; gap:40px; align-items:start !important; max-width:1200px; margin:0 auto; width:100%; } /* Cause structurelle réelle trouvée et corrigée dans functions.php : le fichier CSS du thème n'avait aucune dépendance déclarée sur les feuilles WooCommerce ('woocommerce-layout', 'woocommerce-general') via wp_enqueue_style() — un simple commentaire affirmait un ordre de chargement qu'aucun code ne garantissait réellement. Corrigé avec une dépendance explicite (voir functions.php). En complément, la cause déjà identifiée en V5.4.6 reste neutralisée ci-dessous (float/width imposés par woocommerce-layout.css), et les deux règles du dessus reçoivent désormais !important pour rester robustes même si l'ordre de chargement venait à changer pour une autre raison (cache, futur plugin, etc.) — display/grid-template-columns/align-items du parent, jusqu'ici sans !important, pouvaient être neutralisés par toute règle concurrente de spécificité égale chargée après. Un placement explicite en grille (grid-column/grid-row) est également ajouté sur les deux enfants : même si une propriété passait malgré tout au travers, la position de chaque élément dans la grille reste fixée indépendamment de leurs propres float/width/clear. */ body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{ float:none !important; width:100% !important; clear:none !important; grid-column:1 !important; grid-row:1 !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content{ float:none !important; width:100% !important; clear:none !important; grid-column:2 !important; grid-row:1 !important; } .woocommerce-MyAccount-navigation{background:var(--surface); border:1px solid var(--line); padding:10px;} .woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0;} .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line);} .woocommerce-MyAccount-navigation li:last-child{border-bottom:none;} .woocommerce-MyAccount-navigation li a{ display:block; padding:13px 14px; font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--text-muted); } .woocommerce-MyAccount-navigation li.is-active a{color:var(--green);} .woocommerce-MyAccount-navigation li a:hover{color:var(--text);} .woocommerce-MyAccount-content{background:var(--surface); border:1px solid var(--line); padding:30px;} .woocommerce-orders-table{width:100%;} .woocommerce-orders-table thead{display:none;} .woocommerce-orders-table tr{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; border-bottom:1px solid var(--line); padding:16px 0;} .woocommerce-orders-table td{border:none !important; padding:0 !important; font-size:13.5px;} .woocommerce-orders-table td.woocommerce-orders-table__cell-order-status{color:var(--green); font-family:'JetBrains Mono',monospace; font-size:11.5px; text-transform:uppercase;} /* ============================================================ PAGE MES ADRESSES (V5.5.0) Le vrai template (templates/myaccount/my-address.php) génère .u-columns.woocommerce-Addresses.col2-set > .u-column1/.u-column2 .col-1/.col-2.woocommerce-Address — les mêmes classes .col-1/.col-2 que WooCommerce core cible ailleurs avec float+width (déjà neutralisé séparément pour le login/register déconnecté et pour le checkout, chacun avec son propre scope). Ici, neutralisation scopée strictement à .woocommerce-Addresses, sans jamais toucher .col-1/.col-2 hors de ce contexte précis (donc aucun risque sur le checkout). */ .woocommerce-Addresses.col2-set{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:24px; align-items:stretch; } .woocommerce-Addresses .col-1, .woocommerce-Addresses .col-2{ float:none !important; width:100% !important; margin:0 !important; clear:none !important; } .woocommerce-Address{ background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:24px; display:flex; flex-direction:column; height:100%; } .woocommerce-Address-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); } .woocommerce-Address-title h2{ font-size:15px; font-family:'Archivo Black',sans-serif; color:var(--text); margin:0; } .woocommerce-Address-title .edit{font-size:12px; color:var(--green); white-space:nowrap;} .woocommerce-Address-title .edit:hover{opacity:.85;} .woocommerce-Address address{font-style:normal; font-size:13.5px; color:var(--text-muted); line-height:1.7;} @media (max-width:780px){ body.woocommerce-account.logged-in .woocommerce{grid-template-columns:1fr !important;} body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{ float:none !important; width:100% !important; clear:none !important; grid-column:1 !important; grid-row:1 !important; min-width:0; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content{ float:none !important; width:100% !important; clear:none !important; grid-column:1 !important; grid-row:2 !important; min-width:0; } .woocommerce-Addresses.col2-set{grid-template-columns:1fr !important; gap:18px;} /* V5.5.1 — cause réelle du débordement identifiée et corrigée : l'ancien bloc utilisait display:flex + flex-wrap:nowrap sur