/* ========================================================== DECOENLIGNE - PREMIUM V9 ========================================================== */ body.del-premium-product{ --premium-black:#211d1a; --premium-gold:#b58a49; --premium-gold-dark:#91692f; --premium-gold-light:#d7b36e; --premium-soft:#fbf9f6; --premium-border:#e4dbcf; --premium-text:#554e48; } /* ========================================================== MASQUE LES ANCIENS ELEMENTS WOOCOMMERCE / BETHEME ========================================================== */ body.del-premium-product .entry-summary .woocommerce-product-details__short-description, body.del-premium-product .entry-summary .product_meta, body.del-premium-product .entry-summary .share-simple-wrapper, body.del-premium-product .entry-summary .share_wrapper, body.del-premium-product .entry-summary .product_share, body.del-premium-product .entry-summary .social, body.del-premium-product .related.products{ display:none !important; } body.del-premium-product .entry-summary hr{ display:none !important; } /* ========================================================== STRUCTURE DU HAUT DE FICHE Le JS crée .del-premium-hero-grid autour de la galerie et du résumé. Betheme ne décide plus de leurs positions. ========================================================== */ body.del-premium-product #Content div.product > .product_wrapper{ display:block !important; width:100% !important; max-width:none !important; margin:0 !important; overflow:visible !important; } body.del-premium-product .del-premium-hero-grid{ display:grid !important; grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr) !important; gap:38px !important; align-items:start !important; width:100% !important; max-width:1220px !important; margin:0 auto 26px !important; } body.del-premium-product .del-premium-hero-grid > .product_image_wrapper, body.del-premium-product .del-premium-hero-grid > .entry-summary{ position:relative !important; float:none !important; width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; clear:none !important; } body.del-premium-product .del-premium-hero-grid > .entry-summary{ align-self:start !important; } /* ========================================================== GALERIE - NEUTRALISATION COMPLETE ========================================================== */ body.del-premium-product #Content .product_image_wrapper, body.del-premium-product #Content .woocommerce-product-gallery, body.del-premium-product #Content .woocommerce-product-gallery .flex-viewport, body.del-premium-product #Content .woocommerce-product-gallery__wrapper, body.del-premium-product #Content .woocommerce-product-gallery__image, body.del-premium-product #Content .woocommerce-product-gallery__image > a, body.del-premium-product #Content .woocommerce-product-gallery__image > a > img{ border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; } body.del-premium-product #Content .woocommerce-product-gallery{ overflow:visible !important; } /* * Le JS applique cette classe soit au viewport FlexSlider, * soit au wrapper s'il n'y a qu'une seule image. */ body.del-premium-product #Content .del-premium-frame-target{ position:relative !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:2px solid var(--premium-gold) !important; outline-offset:2px !important; overflow:hidden !important; } /* ========================================================== PAS DE LOUPE / PAS DE LIEN IMAGE ========================================================== */ body.del-premium-product .woocommerce-product-gallery__trigger, body.del-premium-product .woocommerce-product-gallery img.zoomImg{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } body.del-premium-product .woocommerce-product-gallery__image, body.del-premium-product .woocommerce-product-gallery__image > a, body.del-premium-product .woocommerce-product-gallery__image > a > img{ cursor:default !important; } body.del-premium-product .woocommerce-product-gallery__image > a{ pointer-events:none !important; overflow:hidden !important; } body.del-premium-product .woocommerce-product-gallery__image > a > img{ display:block !important; width:100% !important; height:auto !important; transform:scale(1); transform-origin:center center; transition: transform .22s ease-out, transform-origin .08s linear; will-change:transform; } /* ========================================================== OVERLAY IMAGE ========================================================== */ body.del-premium-product .del-premium-gallery-overlay{ position:absolute !important; inset:0; z-index:30; pointer-events:none; } body.del-premium-product .del-premium-gallery-badge{ position:absolute; top:0; left:0; padding:23px 20px; background:rgba(181,138,73,.96); color:#fff; font-size:12px; font-weight:700; line-height:1; letter-spacing:.8px; text-transform:uppercase; } body.del-premium-addon .del-premium-gallery-badge{ background:var(--premium-black); color:var(--premium-gold-light); } body.del-premium-product .del-premium-gallery-caption{ position:absolute; left:0; bottom:4%; width:60%; min-width:335px; padding:23px 28px 22px; background:rgba(31,27,24,.86); color:#fff; backdrop-filter:blur(2px); } body.del-premium-product .del-premium-gallery-title{ margin:0 !important; color:#fff !important; font-family:Georgia,"Times New Roman",serif; font-size:30px; font-weight:400; line-height:1.05; } body.del-premium-product .del-premium-gallery-subtitle{ margin:4px 0 0 !important; color:var(--premium-gold-light) !important; font-size:13px; font-weight:700; line-height:1.25; letter-spacing:1.05px; } body.del-premium-product .del-premium-gallery-line{ width:100%; height:1px; margin:13px 0 12px; background:#c79a51; } body.del-premium-product .del-premium-gallery-text{ margin:0 !important; color:#fff !important; font-size:13px; line-height:1.45; } /* ========================================================== 5 MINIATURES ========================================================== */ body.del-premium-product .woocommerce-product-gallery{ margin-bottom:14px !important; } body.del-premium-product .woocommerce-product-gallery .flex-control-thumbs{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:8px !important; margin:10px 0 0 !important; padding:0 !important; list-style:none !important; } body.del-premium-product .woocommerce-product-gallery .flex-control-thumbs li:first-child{ display:none !important; } body.del-premium-product .woocommerce-product-gallery .flex-control-thumbs li{ float:none !important; width:auto !important; margin:0 !important; padding:0 !important; } body.del-premium-product .woocommerce-product-gallery .flex-control-thumbs li img{ display:block !important; width:100% !important; height:auto !important; aspect-ratio:1 / 1; object-fit:cover; border:0 !important; border-radius:0 !important; box-shadow:none !important; opacity:.78 !important; cursor:pointer !important; } body.del-premium-product .woocommerce-product-gallery .flex-control-thumbs li img:hover, body.del-premium-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active{ opacity:1 !important; } /* ========================================================== COLONNE DROITE ========================================================== */ body.del-premium-product .entry-summary{ box-sizing:border-box !important; } body.del-premium-product .entry-summary .price{ margin:15px 0 17px !important; } body.del-premium-main .entry-summary .price .del-premium-price-from{ display:block; color:#a77a36; } body.del-premium-main .entry-summary .price .del-premium-price-detail{ display:block; margin-top:4px; color:#554e48; font-size:12px; font-weight:600; line-height:1.4; } /* ========================================================== RESUME COURT ========================================================== */ body.del-premium-product .del-premium-summary-main{ margin:0 0 17px; } body.del-premium-product .del-premium-summary-main__lead{ margin:0 0 15px !important; color:#4e4842 !important; font-size:13px !important; line-height:1.55 !important; text-align:left !important; hyphens:none !important; } body.del-premium-main .del-premium-summary-main__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 19px; padding-bottom:17px; border-bottom:1px solid #ded7ce; } body.del-premium-main .del-premium-summary-main__grid > div{ position:relative; padding-left:19px; color:#302b27; font-size:11px; line-height:1.4; } body.del-premium-main .del-premium-summary-main__grid > div::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--premium-gold); font-weight:700; } /* ========================================================== CALCULATEUR ========================================================== */ body.del-premium-main .del-premium-surface{ margin:17px 0 16px; padding:17px 19px; background:#fff; border:1px solid #ddd5ca; border-radius:0; } body.del-premium-main .del-premium-surface__heading{ display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:9px; } body.del-premium-main .del-premium-surface__heading label{ color:#25211e; font-size:11px; font-weight:700; line-height:1.3; text-transform:uppercase; } body.del-premium-main .del-premium-surface__heading > span{ color:var(--premium-gold-dark); font-size:10px; font-weight:700; white-space:nowrap; } body.del-premium-main .del-premium-surface__control{ display:flex; align-items:center; width:100%; margin-bottom:10px; border:1px solid #d8d0c6; background:#fff; } body.del-premium-main .del-premium-surface__control input{ flex:1 1 auto; width:auto !important; min-width:0; height:39px; margin:0 !important; padding:0 12px !important; border:0 !important; background:#fff !important; box-shadow:none !important; color:#25211e !important; font-size:15px !important; } body.del-premium-main .del-premium-surface__control > span{ display:flex; align-items:center; justify-content:center; width:48px; height:39px; background:#f1ebe3; color:var(--premium-gold-dark); font-weight:700; } body.del-premium-main .del-premium-surface__summary{ padding:4px 0; border-top:1px solid #ece5dc; border-bottom:1px solid #ece5dc; } body.del-premium-main .del-premium-surface__summary > div{ display:flex; justify-content:space-between; gap:14px; padding:5px 0; color:#5a524b; font-size:10px; } body.del-premium-main .del-premium-surface__summary strong{ color:#29241f; white-space:nowrap; } body.del-premium-main .del-premium-surface__total{ margin-top:2px; padding-top:8px !important; border-top:1px solid #ddd3c6; } body.del-premium-main .del-premium-surface__total span{ color:#25211e; font-weight:700; } body.del-premium-main .del-premium-surface__total strong{ color:var(--premium-gold-dark); font-size:16px; } body.del-premium-main .del-premium-surface__note{ margin:8px 0 0 !important; color:#6c645d !important; font-size:10px !important; line-height:1.4 !important; text-align:left !important; hyphens:none !important; } /* ========================================================== BOUTON ========================================================== */ body.del-premium-main form.cart > .quantity{ display:none !important; } body.del-premium-main .single_add_to_cart_button{ width:100% !important; min-height:46px; margin:0 !important; border:1px solid var(--premium-gold) !important; border-radius:999px !important; background:var(--premium-black) !important; color:var(--premium-gold-light) !important; font-size:11px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.35px; } body.del-premium-main .single_add_to_cart_button:hover{ background:var(--premium-gold) !important; color:#171411 !important; } /* ========================================================== PETIT BLOC SOUS PANIER ========================================================== */ body.del-premium-main .del-premium-summary-after-cart{ margin-top:17px; } body.del-premium-main .del-premium-why{ display:flex; gap:12px; padding:14px 15px; background:var(--premium-soft); border:1px solid #ebe4db; } body.del-premium-main .del-premium-why__icon{ flex:0 0 auto; color:var(--premium-gold); font-size:22px; line-height:1; } body.del-premium-main .del-premium-why strong{ display:block; margin-bottom:3px; color:#25211e; font-size:11px; } body.del-premium-main .del-premium-why p{ margin:0 !important; color:#5b544e !important; font-size:10px !important; line-height:1.45 !important; text-align:left !important; } /* ========================================================== 4 ATOUTS + BANDEAU NOIR ========================================================== */ body.del-premium-main .del-premium-top-extra{ clear:both !important; display:block !important; width:100% !important; max-width:100% !important; margin:28px 0 38px !important; } body.del-premium-main .del-premium-top-extra__icons{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:0 !important; width:100% !important; background:var(--premium-soft); border:1px solid var(--premium-border); overflow:hidden; } body.del-premium-main .del-premium-top-extra__card{ min-width:0; padding:22px 20px 20px !important; text-align:center !important; border-right:1px solid var(--premium-border); } body.del-premium-main .del-premium-top-extra__card:last-child{ border-right:0; } body.del-premium-main .del-premium-top-extra__card img{ display:block; width:46px !important; height:46px !important; object-fit:contain; margin:0 auto 12px !important; } body.del-premium-main .del-premium-top-extra__card h3{ margin:0 0 7px !important; color:#25211e !important; font-size:11px !important; font-weight:700 !important; line-height:1.3 !important; text-align:center !important; text-transform:uppercase; } body.del-premium-main .del-premium-top-extra__card p{ margin:0 !important; color:#5b544d !important; font-size:11px !important; line-height:1.45 !important; text-align:center !important; hyphens:none !important; } body.del-premium-main .del-premium-top-extra__bar{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; width:100% !important; background:var(--premium-black); color:#fff; } body.del-premium-main .del-premium-top-extra__bar-item{ padding:14px 18px !important; text-align:center !important; border-right:1px solid rgba(255,255,255,.13); } body.del-premium-main .del-premium-top-extra__bar-item:last-child{ border-right:0; } body.del-premium-main .del-premium-top-extra__bar-item strong{ display:block; margin-bottom:4px; color:var(--premium-gold-light) !important; font-size:10px; line-height:1.3; text-transform:uppercase; } body.del-premium-main .del-premium-top-extra__bar-item span{ color:#fff !important; font-size:10px; line-height:1.4; } /* ========================================================== COMPLEMENT ========================================================== */ body.del-premium-addon .del-premium-addon-extra{ clear:both; width:100%; margin:26px 0 36px; } body.del-premium-addon .del-premium-addon-extra__inner{ padding:15px 20px; background:var(--premium-black); color:#fff; text-align:center; } body.del-premium-addon .del-premium-addon-extra__inner strong{ color:var(--premium-gold-light); } body.del-premium-addon .del-premium-addon-extra__inner span{ display:block; margin-top:4px; font-size:11px; } /* ========================================================== CONTENU EDITORIAL ========================================================== */ .del-premium-content, .del-premium-content *{ box-sizing:border-box; } .del-premium-content{ clear:both; width:100%; color:var(--premium-text); font-size:15px; line-height:1.7; } .del-premium-container{ width:calc(100% - 40px); max-width:1160px; margin:0 auto; } .del-premium-section{ padding:68px 0; background:#fff; } .del-premium-section--soft{ background:var(--premium-soft); } .del-premium-section--dark{ background:var(--premium-black); color:#eee8e1; } .del-premium-section-head{ max-width:790px; margin:0 auto 35px; text-align:center; } .del-premium-eyebrow{ display:block; margin:0 0 10px; color:var(--premium-gold-dark); font-size:11px; font-weight:700; line-height:1.3; letter-spacing:1.5px; text-transform:uppercase; } .del-premium-content h2{ margin:0 0 17px !important; color:#25211e !important; font-family:Georgia,"Times New Roman",serif; font-size:33px !important; font-weight:400 !important; line-height:1.2 !important; } .del-premium-section--dark h2{ color:#fff !important; } .del-premium-section--dark p{ color:#eee8e1 !important; } .del-premium-section-head p{ margin:0 !important; text-align:center !important; hyphens:none !important; } .del-premium-highlight{ display:flex; align-items:center; justify-content:center; gap:10px 22px; max-width:780px; margin:0 auto; padding:17px 22px; background:var(--premium-black); color:#fff; } .del-premium-highlight strong{ color:var(--premium-gold-light); font-size:21px; } .del-premium-included-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px; max-width:980px; margin:0 auto; } .del-premium-included-item{ position:relative; min-height:57px; padding:15px 18px 15px 49px; background:#fff; border:1px solid var(--premium-border); } .del-premium-included-item::before{ content:"✓"; position:absolute; left:17px; top:15px; color:var(--premium-gold-dark); font-weight:700; } .del-premium-steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; } .del-premium-step{ padding:22px 18px; border-top:2px solid var(--premium-gold); } .del-premium-step > span{ display:block; margin-bottom:10px; color:var(--premium-gold); font-size:28px; } .del-premium-step h3{ margin:0 0 8px !important; color:#25211e !important; font-size:16px !important; } .del-premium-step p{ margin:0 !important; font-size:12px; line-height:1.55; text-align:left !important; } .del-premium-independent{ max-width:820px; margin:0 auto; text-align:center; } .del-premium-independent p{ text-align:center !important; } .del-premium-two-columns{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .del-premium-card{ padding:28px; background:#fff; border:1px solid var(--premium-border); } .del-premium-card h2{ font-size:24px !important; } .del-premium-card p{ text-align:left !important; } .del-premium-card ul{ margin:0 !important; padding:0 !important; list-style:none !important; } .del-premium-card li{ position:relative; margin:0 0 9px !important; padding-left:22px !important; list-style:none !important; } .del-premium-card li::before{ content:"—"; position:absolute; left:0; color:var(--premium-gold-dark); } .del-premium-faq{ max-width:900px; margin:0 auto; border-top:1px solid var(--premium-border); } .del-premium-faq details{ border-bottom:1px solid var(--premium-border); } .del-premium-faq summary{ padding:17px 3px; color:#25211e; font-weight:700; cursor:pointer; } .del-premium-faq details p{ margin:0 !important; padding:0 3px 18px; text-align:left !important; } .del-premium-cta{ padding:62px 20px; background:#eee6da; } .del-premium-cta__inner{ max-width:760px; margin:0 auto; text-align:center; } .del-premium-cta__inner p{ max-width:640px; margin:0 auto 24px !important; text-align:center !important; } .del-premium-button{ display:inline-block !important; padding:13px 27px !important; border:1px solid var(--premium-black) !important; border-radius:50px; background:var(--premium-black) !important; color:#fff !important; font-size:13px; font-weight:700; text-decoration:none !important; } .del-premium-button:hover{ border-color:var(--premium-gold-dark) !important; background:var(--premium-gold-dark) !important; color:#fff !important; } /* ========================================================== COMPLEMENT - DESCRIPTION ========================================================== */ .del-premium-content--addon{ padding:55px 0 65px; background:var(--premium-soft); } .del-premium-lead{ max-width:790px; margin:0 0 26px !important; text-align:left !important; } .del-premium-addon-examples{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:23px; } .del-premium-addon-examples > div{ padding:19px; background:#fff; border:1px solid var(--premium-border); text-align:center; } .del-premium-addon-examples strong{ display:block; color:#25211e; font-family:Georgia,"Times New Roman",serif; font-size:23px; } .del-premium-addon-examples span{ display:block; margin-top:4px; color:var(--premium-gold-dark); font-weight:700; } .del-premium-addon-notice{ margin:0 0 23px !important; padding:16px 18px; background:#fff; border-left:3px solid var(--premium-gold); text-align:left !important; } /* ========================================================== PANIER PREMIUM Le CSS est aussi chargé sur /panier/ lorsque Premium est présent. ========================================================== */ body.woocommerce-cart tr.del-premium-cart-main .product-name, body.woocommerce-cart tr.del-premium-cart-addon .product-name{ line-height:1.4 !important; } body.woocommerce-cart tr.del-premium-cart-main .product-price, body.woocommerce-cart tr.del-premium-cart-main .product-quantity, body.woocommerce-cart tr.del-premium-cart-main .product-subtotal, body.woocommerce-cart tr.del-premium-cart-addon .product-price, body.woocommerce-cart tr.del-premium-cart-addon .product-quantity, body.woocommerce-cart tr.del-premium-cart-addon .product-subtotal{ white-space:nowrap !important; vertical-align:middle !important; } body.woocommerce-cart tr.del-premium-cart-addon{ background:#fbf8f3 !important; } body.woocommerce-cart tr.del-premium-cart-addon .product-name{ font-size:14px !important; } body.woocommerce-cart .del-premium-cart-linked{ display:block; margin-top:5px; color:#8b7357; font-size:11px; font-weight:400; line-height:1.35; } body.woocommerce-cart .del-premium-locked-qty{ display:inline-flex; align-items:center; justify-content:center; min-width:66px; padding:6px 8px; background:#f0e8dc; color:#5b4a39; font-size:12px; font-weight:700; white-space:nowrap; } body.woocommerce-cart tr.del-premium-cart-main .variation{ margin-top:5px !important; } body.woocommerce-cart tr.del-premium-cart-main .variation dt, body.woocommerce-cart tr.del-premium-cart-main .variation dd{ float:none !important; display:inline !important; margin:0 !important; color:#80766d !important; font-size:12px !important; } body.woocommerce-cart tr.del-premium-cart-addon .variation{ display:none !important; } body.woocommerce-cart tr.del-premium-cart-addon .product-remove{ opacity:.35; } /* * Le complément est piloté par la surface du projet : * seul le projet principal possède une action de suppression. */ body.woocommerce-cart tr.del-premium-cart-addon .product-remove a{ display:none !important; } /* ========================================================== TABLETTE ========================================================== */ @media only screen and (max-width:959px){ body.del-premium-product .del-premium-hero-grid{ display:block !important; max-width:760px !important; } body.del-premium-product .del-premium-hero-grid > .entry-summary{ margin-top:30px !important; } body.del-premium-product .del-premium-gallery-caption{ width:65%; min-width:0; } body.del-premium-main .del-premium-summary-main__grid{ grid-template-columns:1fr; } body.del-premium-main .del-premium-top-extra__icons{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } body.del-premium-main .del-premium-top-extra__bar{ grid-template-columns:1fr !important; } .del-premium-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ========================================================== MOBILE ========================================================== */ @media only screen and (max-width:600px){ body.del-premium-product .del-premium-gallery-caption{ left:0; bottom:3%; width:100%; min-width:0; padding:16px 18px; } body.del-premium-product .del-premium-gallery-title{ font-size:23px; } body.del-premium-product .woocommerce-product-gallery .flex-control-thumbs{ gap:4px !important; } body.del-premium-main .del-premium-surface__heading{ align-items:flex-start; flex-direction:column; gap:4px; } body.del-premium-main .del-premium-top-extra__icons{ grid-template-columns:1fr !important; } body.del-premium-main .del-premium-top-extra__card{ border-right:0; border-bottom:1px solid var(--premium-border); } .del-premium-container{ width:calc(100% - 28px); } .del-premium-section{ padding:47px 0; } .del-premium-content h2{ font-size:27px !important; } .del-premium-included-grid, .del-premium-steps, .del-premium-two-columns, .del-premium-addon-examples{ grid-template-columns:1fr; } } /* ========================================================== SECURITES V5 ========================================================== */ body.del-premium-product .upsells.products, body.del-premium-product .related.products{ display:none !important; } body.del-premium-product .del-premium-top-extra, body.del-premium-product .del-premium-addon-extra{ position:relative !important; z-index:2 !important; } /* ========================================================== V6 - CORRECTIONS MISE EN PAGE - meilleur équilibre PC - liste bien alignée à gauche - prix centré - bouton compact à droite sur PC - bouton sous le calculateur sur mobile ========================================================== */ body.del-premium-product .del-premium-hero-grid{ grid-template-columns:minmax(520px, 1.12fr) minmax(360px, .88fr) !important; gap:44px !important; max-width:1280px !important; padding:0 18px !important; box-sizing:border-box !important; justify-content:center !important; } body.del-premium-product .del-premium-hero-grid > .entry-summary{ width:100% !important; max-width:430px !important; } body.del-premium-product .entry-summary .product_title{ text-align:left !important; } body.del-premium-product .entry-summary .price{ text-align:center !important; } body.del-premium-main .entry-summary .price .del-premium-price-from, body.del-premium-main .entry-summary .price .del-premium-price-detail{ text-align:center !important; } body.del-premium-main .del-premium-summary-main__grid{ justify-items:start !important; align-items:start !important; } body.del-premium-main .del-premium-summary-main__grid > div{ width:100% !important; text-align:left !important; } body.del-premium-main form.cart{ display:grid !important; grid-template-columns:minmax(290px,1fr) 168px !important; gap:16px !important; align-items:center !important; } body.del-premium-main form.cart .del-premium-surface{ margin:0 !important; } body.del-premium-main .single_add_to_cart_button{ width:168px !important; min-width:168px !important; min-height:82px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:12px 14px !important; text-align:center !important; white-space:normal !important; line-height:1.25 !important; word-break:normal !important; overflow-wrap:normal !important; } body.del-premium-main .del-premium-summary-after-cart{ margin-top:18px !important; } body.del-premium-main .del-premium-why{ align-items:flex-start !important; } body.del-premium-main .del-premium-why p{ text-align:left !important; } /* tablette large / PC étroit */ @media only screen and (max-width:1100px){ body.del-premium-product .del-premium-hero-grid{ grid-template-columns:minmax(0,1fr) minmax(330px,390px) !important; gap:28px !important; } body.del-premium-main form.cart{ grid-template-columns:minmax(260px,1fr) 160px !important; } body.del-premium-main .single_add_to_cart_button{ width:160px !important; min-width:160px !important; } } /* mobile / tablette */ @media only screen and (max-width:959px){ body.del-premium-product .del-premium-hero-grid{ display:block !important; max-width:760px !important; padding:0 14px !important; } body.del-premium-product .del-premium-hero-grid > .entry-summary{ max-width:none !important; margin-top:26px !important; } body.del-premium-main .entry-summary .product_title{ text-align:center !important; } body.del-premium-main .del-premium-summary-main__grid{ grid-template-columns:1fr !important; gap:8px 0 !important; } body.del-premium-main form.cart{ display:block !important; } body.del-premium-main .del-premium-surface{ margin:0 0 14px !important; } body.del-premium-main .single_add_to_cart_button{ width:100% !important; min-width:0 !important; min-height:54px !important; margin:0 !important; } } @media only screen and (max-width:600px){ body.del-premium-main .entry-summary .price{ margin:14px 0 16px !important; } body.del-premium-main .entry-summary .price .amount{ display:block !important; text-align:center !important; } body.del-premium-main .entry-summary .price .del-premium-price-detail{ display:block !important; margin-top:3px !important; text-align:center !important; } } /* ========================================================== V7 - MISE EN PAGE DEFINITIVE PRODUIT PREMIUM ========================================================== */ body.del-premium-product .del-premium-hero-grid{ display:contents !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; transform:none !important; } @media only screen and (min-width:960px){ body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout{ position:relative !important; left:50% !important; transform:translateX(-50%) !important; display:grid !important; grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr) !important; gap:44px !important; align-items:start !important; width:calc(100vw - 80px) !important; max-width:1220px !important; min-width:0 !important; margin:0 0 30px !important; padding:0 !important; overflow:visible !important; box-sizing:border-box !important; } body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout > .product_image_wrapper, body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout > .entry-summary{ position:relative !important; float:none !important; clear:none !important; width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; } body.del-premium-product .del-premium-top-extra, body.del-premium-product .del-premium-addon-extra, body.del-premium-product .del-premium-content{ position:relative !important; left:50% !important; transform:translateX(-50%) !important; width:calc(100vw - 80px) !important; max-width:1220px !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; } body.del-premium-product .entry-summary, body.del-premium-product .entry-summary p, body.del-premium-product .entry-summary div{ hyphens:none !important; word-break:normal !important; overflow-wrap:normal !important; } body.del-premium-product .entry-summary p{ text-align:left !important; } body.del-premium-main .del-premium-summary-main__grid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px 24px !important; justify-items:start !important; text-align:left !important; } body.del-premium-main .del-premium-summary-main__grid > div{ width:100% !important; text-align:left !important; } body.del-premium-main .entry-summary .price, body.del-premium-main .entry-summary .price .del-premium-price-from, body.del-premium-main .entry-summary .price .del-premium-price-detail{ width:100% !important; text-align:center !important; } body.del-premium-main .entry-summary form.cart{ display:grid !important; grid-template-columns:minmax(0,1fr) 118px !important; gap:18px !important; align-items:center !important; width:100% !important; margin:0 !important; } body.del-premium-main .entry-summary form.cart .del-premium-surface{ width:100% !important; min-width:0 !important; margin:0 !important; } body.del-premium-main .entry-summary .single_add_to_cart_button{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; width:118px !important; min-width:118px !important; max-width:118px !important; min-height:98px !important; margin:0 !important; padding:13px 9px !important; border-radius:999px !important; text-align:center !important; white-space:normal !important; line-height:1.22 !important; } body.del-premium-main .entry-summary .single_add_to_cart_button > span{ display:block !important; width:100% !important; text-align:center !important; } body.del-premium-main .del-premium-summary-after-cart{ width:100% !important; margin:18px 0 0 !important; } } @media only screen and (max-width:959px){ body.del-premium-product:not(.template-slider) #Header{ min-height:0 !important; height:auto !important; background:#fff !important; } body.del-premium-product #Header_wrapper{ min-height:0 !important; background:#fff !important; } body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout{ position:static !important; left:auto !important; transform:none !important; display:block !important; width:100% !important; max-width:760px !important; margin:0 auto 24px !important; padding:0 14px !important; box-sizing:border-box !important; } body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout > .product_image_wrapper, body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout > .entry-summary{ float:none !important; clear:both !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; } body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout > .entry-summary{ margin-top:26px !important; } body.del-premium-product .del-premium-top-extra, body.del-premium-product .del-premium-addon-extra, body.del-premium-product .del-premium-content{ position:static !important; left:auto !important; transform:none !important; width:100% !important; max-width:none !important; } body.del-premium-main .del-premium-summary-main__grid{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; justify-items:start !important; } body.del-premium-main .del-premium-summary-main__grid > div{ width:100% !important; text-align:left !important; } body.del-premium-main .entry-summary .price, body.del-premium-main .entry-summary .price .del-premium-price-from, body.del-premium-main .entry-summary .price .del-premium-price-detail{ width:100% !important; text-align:center !important; } body.del-premium-main .entry-summary form.cart{ display:block !important; width:100% !important; } body.del-premium-main .entry-summary form.cart .del-premium-surface{ width:100% !important; margin:0 0 14px !important; } body.del-premium-main .entry-summary .single_add_to_cart_button{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; max-width:none !important; min-height:52px !important; margin:0 !important; padding:12px 18px !important; text-align:center !important; } body.del-premium-main .entry-summary .single_add_to_cart_button > span{ display:inline !important; width:auto !important; } body.del-premium-main .entry-summary .single_add_to_cart_button > span + span::before{ content:" "; } } body.del-premium-product .related, body.del-premium-product .related.products, body.del-premium-product .upsells, body.del-premium-product .upsells.products, body.del-premium-product .up-sells, body.del-premium-product .mfn-related-products{ display:none !important; } /* ========================================================== V8 - CORRECTION DESKTOP Le DOM Betheme place le résumé avant la galerie. On impose donc explicitement : colonne 1 = image colonne 2 = résumé ========================================================== */ @media only screen and (min-width:960px){ body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout > .product_image_wrapper{ grid-column:1 !important; grid-row:1 !important; align-self:start !important; } body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout > .entry-summary{ grid-column:2 !important; grid-row:1 !important; align-self:start !important; width:100% !important; max-width:440px !important; justify-self:stretch !important; } /* * Neutralise les comportements WooCommerce / Betheme * susceptibles de réduire ou décaler la zone d'achat. */ body.del-premium-main .entry-summary form.cart{ float:none !important; clear:both !important; width:100% !important; max-width:none !important; margin:0 !important; } body.del-premium-main .entry-summary .del-premium-surface{ float:none !important; clear:none !important; width:100% !important; max-width:none !important; box-sizing:border-box !important; } /* * Le bouton reste volontairement compact à droite, * avec 3 lignes centrées. */ body.del-premium-main .entry-summary .single_add_to_cart_button{ float:none !important; clear:none !important; width:118px !important; min-width:118px !important; max-width:118px !important; min-height:98px !important; margin:0 !important; text-align:center !important; } body.del-premium-main .entry-summary .single_add_to_cart_button > span{ display:block !important; width:100% !important; margin:0 !important; text-align:center !important; } /* * Le prix reste centré dans toute la colonne droite. */ body.del-premium-main .entry-summary .price{ display:block !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } } /* ========================================================== V8 - MOBILE La V7 est validée : on conserve son organisation. ========================================================== */ @media only screen and (max-width:959px){ body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout > .product_image_wrapper, body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout > .entry-summary{ grid-column:auto !important; grid-row:auto !important; } } /* ========================================================== V9 - CALCULATEUR + BOUTON + BLOC ACCOMPAGNEMENT ========================================================== */ /* * Le form n'est plus une grille. * La grille d'achat est portée par .del-premium-buy-row. */ body.del-premium-main .entry-summary form.cart{ display:block !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; float:none !important; clear:both !important; } /* ---------------------------------------------------------- DESKTOP ---------------------------------------------------------- */ @media only screen and (min-width:960px){ /* * Colonne droite suffisamment large pour : * calculateur 300px environ + bouton 118px. */ body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout{ grid-template-columns:minmax(0,1.05fr) minmax(460px,.95fr) !important; gap:42px !important; } body.del-premium-product #Content div.product .product_wrapper.del-premium-product-layout > .entry-summary{ max-width:460px !important; } /* * Wrapper achat autonome. */ body.del-premium-main .del-premium-buy-row{ display:grid !important; grid-template-columns:minmax(0,1fr) 118px !important; gap:18px !important; align-items:center !important; width:100% !important; max-width:460px !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; } /* * Calculateur : largeur disponible entière. */ body.del-premium-main .del-premium-buy-row .del-premium-surface{ grid-column:1 !important; width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; box-sizing:border-box !important; } body.del-premium-main .del-premium-buy-row .del-premium-surface__heading{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; } body.del-premium-main .del-premium-buy-row .del-premium-surface__heading label{ flex:1 1 auto !important; width:auto !important; text-align:left !important; white-space:normal !important; } body.del-premium-main .del-premium-buy-row .del-premium-surface__heading > span{ flex:0 0 auto !important; text-align:right !important; } body.del-premium-main .del-premium-buy-row .del-premium-surface__summary > div{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px !important; width:100% !important; } body.del-premium-main .del-premium-buy-row .del-premium-surface__summary > div > span{ min-width:0 !important; text-align:left !important; } body.del-premium-main .del-premium-buy-row .del-premium-surface__summary > div > strong{ flex:0 0 auto !important; text-align:right !important; } /* * Bouton : 3 lignes, compact à droite. */ body.del-premium-main .del-premium-buy-row .single_add_to_cart_button{ grid-column:2 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; width:118px !important; min-width:118px !important; max-width:118px !important; min-height:98px !important; margin:0 !important; padding:13px 9px !important; float:none !important; clear:none !important; border-radius:999px !important; text-align:center !important; line-height:1.22 !important; } body.del-premium-main .del-premium-buy-row .single_add_to_cart_button > span{ display:block !important; width:100% !important; text-align:center !important; } /* * Accompagnement : sous l'image, exactement la largeur * de la colonne galerie. */ body.del-premium-main .product_image_wrapper > .del-premium-summary-after-cart--under-image{ display:block !important; width:100% !important; max-width:none !important; margin:20px 0 0 !important; padding:0 !important; box-sizing:border-box !important; } body.del-premium-main .product_image_wrapper > .del-premium-summary-after-cart--under-image .del-premium-why{ width:100% !important; margin:0 !important; box-sizing:border-box !important; } } /* ---------------------------------------------------------- MOBILE / TABLETTE La présentation déjà validée est conservée. ---------------------------------------------------------- */ @media only screen and (max-width:959px){ body.del-premium-main .del-premium-buy-row{ display:block !important; width:100% !important; max-width:none !important; margin:0 !important; } body.del-premium-main .del-premium-buy-row .del-premium-surface{ width:100% !important; margin:0 0 14px !important; } body.del-premium-main .del-premium-buy-row .single_add_to_cart_button{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; width:100% !important; min-width:0 !important; max-width:none !important; min-height:52px !important; margin:0 !important; padding:12px 18px !important; } body.del-premium-main .del-premium-buy-row .single_add_to_cart_button > span{ display:inline !important; width:auto !important; } body.del-premium-main .del-premium-buy-row .single_add_to_cart_button > span + span::before{ content:" "; } body.del-premium-main .del-premium-summary-after-cart{ width:100% !important; margin:18px 0 0 !important; } } /* ========================================================== PERSPECTIVE - FICHE M² SUPPLEMENTAIRE ========================================================== */ body.del-premium-addon .entry-summary .price{ width:100% !important; margin:14px 0 18px !important; text-align:center !important; } body.del-premium-addon .del-premium-price-from--addon{ display:block !important; color:var(--premium-gold-dark) !important; font-size:34px !important; font-weight:700 !important; line-height:1.05 !important; text-align:center !important; } body.del-premium-addon .del-premium-price-detail--addon{ display:block !important; margin-top:5px !important; color:#554e48 !important; font-size:12px !important; font-weight:700 !important; line-height:1.35 !important; text-align:center !important; } body.del-premium-addon .del-premium-summary-main--addon{ width:100% !important; } body.del-premium-addon .del-premium-addon-order{ margin-top:18px; padding:20px 21px; background:var(--premium-soft); border:1px solid var(--premium-border); box-sizing:border-box; } body.del-premium-addon .del-premium-addon-order__eyebrow{ display:block; margin-bottom:7px; color:var(--premium-gold-dark); font-size:10px; font-weight:700; line-height:1.3; letter-spacing:1.15px; text-transform:uppercase; } body.del-premium-addon .del-premium-addon-order__price{ display:flex; align-items:baseline; gap:8px; margin-bottom:12px; } body.del-premium-addon .del-premium-addon-order__price strong{ color:#211d1a; font-family:Georgia,"Times New Roman",serif; font-size:30px; font-weight:400; line-height:1; } body.del-premium-addon .del-premium-addon-order__price span{ color:#6c6259; font-size:12px; font-weight:700; } body.del-premium-addon .del-premium-addon-order__formula{ margin-bottom:12px; padding:10px 12px; background:#fff; border-left:3px solid var(--premium-gold); } body.del-premium-addon .del-premium-addon-order__formula strong{ color:#2b2622; font-size:12px; } body.del-premium-addon .del-premium-addon-order p{ margin:0 0 16px !important; color:#5a524b !important; font-size:12px !important; line-height:1.55 !important; text-align:left !important; hyphens:none !important; } body.del-premium-addon .del-premium-addon-order__button{ display:block !important; width:100% !important; padding:12px 16px !important; border:1px solid var(--premium-gold) !important; border-radius:999px !important; background:var(--premium-black) !important; color:var(--premium-gold-light) !important; font-size:11px !important; font-weight:700 !important; line-height:1.3 !important; text-align:center !important; text-decoration:none !important; box-sizing:border-box !important; } body.del-premium-addon .del-premium-addon-order__button:hover{ background:var(--premium-gold) !important; color:#171411 !important; } /* * Aucun formulaire de commande ne doit rester visible * sur la fiche complément. */ body.del-premium-addon .entry-summary form.cart{ display:none !important; } /* Mobile */ @media only screen and (max-width:959px){ body.del-premium-addon .del-premium-addon-order{ padding:18px; } body.del-premium-addon .del-premium-addon-order__price{ justify-content:center; } body.del-premium-addon .del-premium-addon-order__eyebrow{ text-align:center; } }