(seul enfant direct de ) au lieu du header, cassant son position:sticky. La protection anti-débordement horizontal existe déjà plus bas sur #wrapper/#main/.container — pas besoin de ce filet de sécurité en plus. */ .oe-prod-layout { max-width: 1300px; margin: 0 auto; padding: 28px 40px 52px; display: grid; grid-template-columns: 1fr 560px; gap: 44px; align-items: start; } .oe-prod-gallery { position: sticky; top: 118px; } .oe-main-img-wrap { position: relative; background: var(--blanc); border: 1px solid var(--gris); border-radius: 14px; overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .oe-main-img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 22px; transition: transform .4s; } .oe-main-img-wrap:hover img { transform: scale(1.04); } .oe-badge-ref { position: absolute; top: 12px; left: 12px; background: var(--navy); color: var(--cyan); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; } .oe-wish-btn-wrap { position: absolute; bottom: 12px; right: 12px; z-index: 2; } .oe-thumbs { display: flex; gap: 8px; flex-wrap: wrap; } .oe-thumb { width: 68px; height: 68px; flex-shrink: 0; border: 2px solid var(--gris); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--blanc); transition: border-color .15s; display: flex; align-items: center; justify-content: center; } .oe-thumb.active, .oe-thumb:hover { border-color: var(--blue); } .oe-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; } .oe-brand-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); font-family: var(--font-display); margin-bottom: 9px; background: var(--blue-pale); padding: 4px 12px; border-radius: 50px; } .oe-prod-title { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--navy); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 7px; } .oe-prod-title em { font-style: normal; color: var(--blue); } .oe-prod-sub { font-size: 13.5px; color: var(--texte-soft); margin-bottom: 13px; line-height: 1.5; } .oe-sku-row { display: flex; align-items: center; gap: 7px; margin-bottom: 13px; flex-wrap: wrap; } .oe-sku-tag { font-size: 11px; color: var(--texte-soft); background: var(--gris-fond); padding: 3px 9px; border-radius: 6px; border: 1px solid var(--gris); } .oe-cert { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 6px; font-family: var(--font-display); letter-spacing: .04em; } .oe-cert-ms { background: rgba(89,100,219,.12); color: #5964db; border: 1px solid rgba(89,100,219,.25); } .oe-rating-row { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; } .oe-prod-carousel-wrap { position: relative; background: var(--blanc); border: 1px solid var(--gris); border-radius: 14px; margin-bottom: 20px; user-select: none; } .oe-prod-swiper { border-radius: 14px; } .oe-carousel-slide { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: #ffffff; position: relative; } .oe-carousel-slide img { width: 100%; height: 100%; object-fit: contain; padding: 0; } .oe-carousel-badge-ref { position: absolute; top: 12px; left: 12px; background: var(--navy); color: var(--cyan); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; z-index: 2; } .oe-carousel-badge-promo { position: absolute; top: 12px; right: 48px; background: var(--orange); color: var(--navy); font-family: var(--font-display); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; z-index: 2; } /* Pagination Swiper (remplace les anciens .oe-cdot) */ .oe-swiper-pagination { position: static !important; display: flex; justify-content: center; gap: 6px; padding: 10px 0 14px; } .oe-swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; border-radius: 50%; background: var(--gris); opacity: 1; margin: 0 !important; transition: all .2s; } .oe-swiper-pagination .swiper-pagination-bullet-active { background: var(--navy); width: 18px; border-radius: 3px; } .oe-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.92); border: 1px solid var(--gris); display: flex; align-items: center; justify-content: center; color: var(--texte); box-shadow: 0 2px 8px rgba(13,13,13,.1); z-index: 10; cursor: pointer; transition: all .15s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .oe-carousel-nav:hover { background: var(--blanc); box-shadow: 0 4px 14px rgba(13,13,13,.15); } .oe-carousel-nav svg { width: 16px; height: 16px; } .oe-carousel-prev { left: 12px; } .oe-carousel-next { right: 12px; } .oe-price-block { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; position: relative; overflow: hidden; } .oe-price-block::before { content: ''; position: absolute; top: -40px; right: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(15,27,45,.6), transparent 70%); } .oe-leasing-row { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.08); position: relative; z-index: 1; flex-wrap: wrap; } .oe-leasing-tag { font-size: 11px; color: rgba(255,255,255,.5); } .oe-leasing-link { font-size: 11px; color: rgba(174,216,121,.7); text-decoration: underline; } .oe-pb-divider { height: 1px; background: rgba(255,255,255,.1); margin: 14px 0; } .oe-pb-stock { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--green-stock); margin-bottom: 13px; position: relative; z-index: 1; } .oe-pb-stock-exact { font-size: 11px; font-weight: 400; color: var(--texte-soft); margin-left: 2px; } .oe-pb-atc-row { display: flex; gap: 9px; align-items: center; margin-bottom: 9px; position: relative; z-index: 1; } .oe-pb-qty-wrap { display: flex; align-items: center; border: 1.5px solid rgba(255,255,255,.3); border-radius: 8px; overflow: hidden; background: var(--blanc); } .oe-pb-qty-btn { width: 36px; height: 44px; background: none; border: none; font-size: 18px; color: var(--texte-soft); cursor: pointer; transition: all .15s; } .oe-pb-qty-btn:hover { background: var(--blue-pale); color: var(--blue-deep); } .oe-pb-btn-atc { flex: 1; background: var(--orange); color: var(--navy); border: none; border-radius: 8px; padding: 0 20px; height: 44px; font-size: 14px; font-weight: 700; font-family: var(--font-display); display: flex; align-items: center; justify-content: center; gap: 7px; transition: all .2s; box-shadow: 0 4px 14px rgba(120,190,32,.35); cursor: pointer; } .oe-pb-btn-atc:hover { background: var(--orange-hover); transform: translateY(-1px); } .oe-pb-btn-atc svg { width: 16px; height: 16px; } .oe-pb-btn-atc.disabled { opacity: .5; cursor: not-allowed; } .oe-pb-btn-devis { width: 100%; border: 1.5px solid rgba(255,255,255,.2); border-radius: 8px; padding: 10px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.8); font-size: 13px; font-weight: 700; font-family: var(--font-display); display: flex; align-items: center; justify-content: center; gap: 6px; transition: all .2s; cursor: pointer; text-decoration: none; position: relative; z-index: 1; margin-top: 8px; } .oe-pb-btn-devis:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: white; } .oe-pb-btn-devis svg { width: 14px; height: 14px; } .oe-reass { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 14px; } .oe-reass-item { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; font-size: 10.5px; color: var(--texte-soft); font-weight: 500; background: var(--blanc); border: 1px solid var(--gris); border-radius: 8px; padding: 11px 7px; } .oe-reass-item svg { width: 19px; height: 19px; stroke: var(--blue); } .oe-reass .blockreassurance { display: contents; } .oe-pay-block { display: flex; align-items: center; gap: 11px; padding: 11px 14px; background: var(--blanc); border: 1px solid var(--gris); border-radius: 8px; flex-wrap: wrap; } .oe-pay-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texte-soft); font-weight: 500; } .oe-pay-logos { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .oe-pay-logo { height: 20px; width: auto; object-fit: contain; opacity: .75; } .oe-prod-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--texte-soft); } .oe-content-section { max-width: 1300px; margin: 0 auto; padding: 0 40px 52px; } .oe-cs-block { margin-bottom: 48px; } .oe-cs-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--gris); display: flex; align-items: center; gap: 10px; } .oe-cs-title em { font-style: normal; color: var(--blue); } .oe-tab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .oe-tab-txt p { font-size: 13.5px; color: var(--texte-soft); line-height: 1.75; margin-bottom: 14px; } .oe-tab-txt strong { color: var(--texte); } .oe-spec-row { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--gris); transition: background .12s; } .oe-spec-row:last-child { border-bottom: none; } .oe-spec-row:hover { background: var(--creme); } .oe-spec-lbl { font-size: 12px; color: var(--texte-soft); width: 190px; flex-shrink: 0; } .oe-spec-val { font-size: 12.5px; font-weight: 500; color: var(--texte); } .oe-tech-card { background: linear-gradient(145deg, var(--navy), var(--navy-mid)); border-radius: 14px; padding: 26px; color: white; position: relative; overflow: hidden; } .oe-tech-card::before { content: ''; position: absolute; top: -40px; right: -40px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(15,27,45,.8), transparent 70%); } .oe-tech-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 800; line-height: 1.25; margin-bottom: 11px; position: relative; z-index: 1; } .oe-tech-card h3 em { font-style: normal; color: var(--cyan); } .oe-rel-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .feat-list { display: flex; flex-direction: column; gap: 9px; } .feat-item { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; background: var(--blanc); border: 1px solid var(--gris); border-radius: 8px; } .feat-ico { width: 32px; height: 32px; background: var(--blue-pale); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; } .feat-txt strong { font-size: 12.5px; font-weight: 700; color: var(--texte); display: block; margin-bottom: 2px; font-family: var(--font-display); } .feat-txt span { font-size: 11.5px; color: var(--texte-soft); line-height: 1.5; } @media (max-width: 1024px) { .oe-prod-layout { grid-template-columns: 1fr; gap: 28px; padding: 20px 24px 40px; } .oe-prod-gallery { position: static; } .oe-main-img-wrap { max-width: 480px; margin: 0 auto 10px; } .oe-thumbs { justify-content: center; } .oe-tab-grid { grid-template-columns: 1fr; gap: 20px; } .oe-rel-grid { grid-template-columns: repeat(3, 1fr); } .oe-content-section { padding-left: 24px; padding-right: 24px; } } @media (max-width: 768px) { .oe-desktop-only { display: none; } .oe-mobile-only { display: block; } .oe-prod-layout { grid-template-columns: 1fr; padding: 12px 0 36px; gap: 0; } .oe-prod-gallery { position: static; } .oe-reass { grid-template-columns: repeat(3, 1fr); } .oe-rel-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .oe-content-section { padding: 0 12px 40px; } .oe-bc { padding: 10px 16px; } /* Fix débordement horizontal fiche produit — neutralise le padding Bootstrap du col-xs-12 */ body#product #wrapper, body#product #main { overflow-x: hidden !important; max-width: 100% !important; } body#product #content-wrapper { padding-left: 0 !important; padding-right: 0 !important; } body#product .container { padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden !important; } body#product .row { margin-left: 0 !important; margin-right: 0 !important; } /* Cache le breadcrumb natif PS8 — on utilise .oe-bc-wrap */ body#product nav.breadcrumb { display: none !important; } /* Titre, sous-titre, EAN — padding interne */ .oe-prod-info { padding: 0 12px; box-sizing: border-box; width: 100%; max-width: 100%; overflow: hidden; } .oe-prod-title, .oe-prod-sub, .oe-sku-row { word-break: break-word; overflow-wrap: break-word; max-width: 100%; } .oe-sku-row { display: none !important; } .oe-bc-wrap { padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; border-bottom: none !important; } .oe-prod-carousel-wrap { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; border-radius: 14px !important; } .oe-prod-swiper { border-radius: 14px !important; } .oe-carousel-slide { aspect-ratio: 16/11; } .oe-carousel-slide { background: #ffffff !important; } .oe-carousel-slide img { padding: 0 !important; } } @media (max-width: 480px) { .oe-prod-title { font-size: 22px; } .oe-price-main { font-size: 28px; } .oe-pb-atc-row { flex-wrap: wrap; } .oe-pb-btn-atc { width: 100%; } .oe-rel-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .oe-prod-layout { padding: 12px 0 32px; } } #product #wrapper .breadcrumb:not(.oe-bc) { display: none !important; } #product #wrapper > .container > .breadcrumb { display: none !important; } #product #wrapper > .container { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } #product #wrapper > .container > .row, #product #content-wrapper { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; float: none !important; } .oe-content-section { padding-top: 10px !important; } .oe-cs-block { margin-bottom: 48px; } .oe-cs-block:last-child { margin-bottom: 0; } .oe-pb-stock { color: var(--green-stock) !important; } .oe-pb-stock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-stock) !important; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(78,255,154,.2) !important; } .oe-price-block { margin-bottom: 16px; } .oe-reass { margin-bottom: 14px; } .oe-cs-title { border-bottom: 2px solid var(--gris); padding-bottom: 12px; margin-bottom: 20px; } .oe-cs-desc { font-size: 13.5px; color: var(--texte-soft); line-height: 1.75; } .oe-cs-desc p { font-size: 13.5px; color: var(--texte-soft); line-height: 1.75; margin-bottom: 14px; } #product .container, #product .container-fluid { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } #product .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; display: block !important; } #product #content-wrapper { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; float: none !important; } #product .oe-prod-layout { width: 100% !important; box-sizing: border-box !important; } #product .oe-content-section { width: 100% !important; box-sizing: border-box !important; } .oe-reass [class*="blockreassurance"], .oe-reass .blockreassurance_product, .oe-reass .block-title, .oe-reass .block-reassurance, .oe-reass ul, .oe-reass li { display: none !important; } .oe-price-block { margin-top: 16px !important; padding: 20px 22px !important; } .oe-prod-meta { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; margin-top: 14px !important; padding-top: 12px !important; border-top: 1px solid var(--gris) !important; font-size: 11.5px !important; color: var(--texte-soft) !important; } .oe-prod-meta strong { color: var(--texte) !important; font-weight: 600 !important; } .oe-pb-qty-wrap { display: flex !important; align-items: center !important; width: auto !important; flex: none !important; } .oe-pb-qty-inp { width: 44px !important; height: 44px; text-align: center; border: none; font-size: 15px; font-weight: 600; font-family: var(--font-display); outline: none; background: var(--blanc); color: var(--texte); flex: none !important; } .bootstrap-touchspin .oe-pb-qty-inp, .oe-pb-qty-inp.input-group { border: none !important; border-left: none !important; border-right: none !important; outline: none !important; box-shadow: none !important; } /* ═══ LISTES DESCRIPTION FICHE PRODUIT ═══ */ .oe-tab-txt ul, .oe-cs-desc ul { list-style: disc !important; padding-left: 20px !important; margin: 10px 0 14px !important; } .oe-tab-txt ul li, .oe-cs-desc ul li { display: list-item !important; list-style: disc !important; padding: 3px 0 !important; font-size: 14px !important; color: var(--texte) !important; line-height: 1.6 !important; } .oe-tab-txt h2, .oe-tab-txt h3 { font-size: 16px !important; font-weight: 700 !important; color: var(--navy) !important; margin: 18px 0 10px !important; } /* ═══ COCHES FICHE PRODUIT ═══ */ .oe-tab-txt ul, .oe-cs-desc ul { list-style: none !important; padding-left: 0 !important; } .oe-tab-txt ul li, .oe-cs-desc ul li { list-style: none !important; padding: 5px 0 5px 26px !important; position: relative !important; } .oe-tab-txt ul li::before, .oe-cs-desc ul li::before { content: '' !important; position: absolute !important; left: 0 !important; top: 9px !important; width: 14px !important; height: 14px !important; background: var(--blue) !important; border-radius: 50% !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 6 5 9 10 3'/%3E%3C/svg%3E") !important; background-size: 10px !important; background-repeat: no-repeat !important; background-position: center !important; } /* ── Fiches produit description longue — responsive mobile ── */ @media (max-width: 640px) { .oe-tab-txt table, .oe-tab-txt tbody, .oe-tab-txt tr { display: block !important; } .oe-tab-txt td { display: block !important; width: 100% !important; padding-right: 0 !important; padding-left: 0 !important; margin-bottom: 10px !important; box-sizing: border-box !important; } .oe-tab-txt span { display: inline-block !important; width: auto !important; } /* Sauf le tableau de specs qui doit rester en table */ .oe-tab-txt table[style*="border-collapse"] td { display: table-cell !important; width: auto !important; } .oe-tab-txt table[style*="border-collapse"], .oe-tab-txt table[style*="border-collapse"] tbody, .oe-tab-txt table[style*="border-collapse"] tr { display: table !important; display: revert !important; } } @media (max-width: 768px) { .oe-prod-carousel-wrap { position: relative !important; } .oe-prod-swiper { overflow: hidden !important; } .oe-carousel-nav { position: absolute !important; z-index: 30 !important; pointer-events: auto !important; touch-action: manipulation !important; -webkit-tap-highlight-color: rgba(0,0,0,0) !important; } .oe-carousel-prev { left: 8px !important; } .oe-carousel-next { right: 8px !important; } }