/* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/ressources/police-219b02c7d8884817.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/ressources/police-468d56b6b25b05b7.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/ressources/police-219b02c7d8884817.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/ressources/police-468d56b6b25b05b7.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/ressources/police-219b02c7d8884817.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/ressources/police-468d56b6b25b05b7.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/ressources/police-219b02c7d8884817.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/ressources/police-468d56b6b25b05b7.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/ressources/police-e8c0b39992f06b3d.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/ressources/police-95a493061fe0a8d0.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/ressources/police-40af11327fe53081.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/ressources/police-bab757f8a0a1bc04.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/ressources/police-ce093b341d9c1065.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/ressources/police-e310b55a7fd9677f.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/ressources/police-e8c0b39992f06b3d.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/ressources/police-95a493061fe0a8d0.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/ressources/police-40af11327fe53081.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/ressources/police-bab757f8a0a1bc04.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/ressources/police-ce093b341d9c1065.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/ressources/police-e310b55a7fd9677f.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/ressources/police-e8c0b39992f06b3d.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/ressources/police-95a493061fe0a8d0.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/ressources/police-40af11327fe53081.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/ressources/police-bab757f8a0a1bc04.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/ressources/police-ce093b341d9c1065.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/ressources/police-e310b55a7fd9677f.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/ressources/police-e8c0b39992f06b3d.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/ressources/police-95a493061fe0a8d0.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/ressources/police-40af11327fe53081.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/ressources/police-bab757f8a0a1bc04.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/ressources/police-ce093b341d9c1065.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/ressources/police-e310b55a7fd9677f.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/site/ressources/police-e8c0b39992f06b3d.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/site/ressources/police-95a493061fe0a8d0.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/site/ressources/police-40af11327fe53081.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* vietnamese */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/site/ressources/police-bab757f8a0a1bc04.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/site/ressources/police-ce093b341d9c1065.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/site/ressources/police-e310b55a7fd9677f.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/ressources/police-16ae651d9be3a8af.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/ressources/police-bc8aadf92982fed8.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @keyframes op-arrive { from { transform: scale(1.05); } to { transform: scale(1); } } #onlybaie-perspective { --op-red: #d81f26; --op-ink: #161714; --op-paper: #f7f6f2; --op-line: #dedfd7; --op-motion: 1; background: var(--op-paper); color: var(--op-ink); isolation: isolate; width: 100%; font-family: DM Sans, Arial, sans-serif; font-size: 15px; line-height: 1.5; overflow: clip; } #onlybaie-perspective * { box-sizing: border-box; } #onlybaie-perspective h1, #onlybaie-perspective h2, #onlybaie-perspective h3, #onlybaie-perspective p { margin: 0; } #onlybaie-perspective h1, #onlybaie-perspective h2, #onlybaie-perspective h3 { font-family: Manrope, Arial, sans-serif; font-weight: 500; } #onlybaie-perspective a { color: inherit; text-decoration: none; } #onlybaie-perspective button, #onlybaie-perspective input, #onlybaie-perspective select { font: inherit; color: inherit; } #onlybaie-perspective button { cursor: pointer; } #onlybaie-perspective button:disabled { cursor: default; opacity: .65; } #onlybaie-perspective img { object-fit: cover; width: 100%; display: block; } #onlybaie-perspective [hidden] { display: none !important; } #onlybaie-perspective .op-shell { padding-inline: clamp(20px, 4vw, 80px); } #onlybaie-perspective .op-kicker { letter-spacing: .14em; text-transform: uppercase; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; display: flex; } #onlybaie-perspective .op-kicker:before { content: ""; background: var(--op-red); border-radius: 50%; flex-shrink: 0; width: 6px; height: 6px; } #onlybaie-perspective .op-button { background: var(--op-red); border: 1px solid var(--op-red); color: #fff; justify-content: space-between; align-items: center; gap: 30px; min-height: 52px; padding: 15px 23px; font-size: 13px; font-weight: 600; transition: background .2s, transform .2s; display: inline-flex; } #onlybaie-perspective .op-button:hover { background: #b4171c; transform: translateY(-2px); } #onlybaie-perspective .op-button.op-dark { background: var(--op-ink); border-color: var(--op-ink); } #onlybaie-perspective .op-text-link { background: none; border: 0; border-bottom: 1px solid; align-items: center; gap: 25px; padding: 7px 0; font-size: 13px; font-weight: 500; display: inline-flex; } #onlybaie-perspective .op-arrow { font-family: Arial, sans-serif; font-size: 22px; line-height: 1; transition: transform .2s; } #onlybaie-perspective button:hover .op-arrow, #onlybaie-perspective a:hover .op-arrow { transform: translateX(4px); } #onlybaie-perspective .op-top { background: var(--op-ink); color: #f7f6f2; justify-content: space-between; align-items: center; gap: 12px; min-height: 31px; font-size: 11px; display: flex; } #onlybaie-perspective .op-top-right { align-items: center; gap: 25px; display: flex; } #onlybaie-perspective .op-header { z-index: 30; background: #fff; position: relative; } #onlybaie-perspective .op-head { justify-content: space-between; align-items: center; gap: 32px; min-height: 90px; display: flex; } #onlybaie-perspective .op-logo { flex: 0 0 182px; } #onlybaie-perspective .op-logo img { object-fit: contain; } #onlybaie-perspective .op-search { border-bottom: 1px solid #b5b7af; flex: 1; align-items: center; max-width: 425px; display: flex; } #onlybaie-perspective .op-search input { background: none; border: 0; flex: 1; min-width: 0; padding: 13px 0; font-size: 12px; } #onlybaie-perspective .op-search button { background: none; border: 0; padding: 12px; font-size: 13px; } #onlybaie-perspective .op-head-tools { flex-shrink: 0; align-items: center; gap: 24px; display: flex; } #onlybaie-perspective .op-phone small { color: #696c62; font-size: 10px; display: block; } #onlybaie-perspective .op-phone strong { letter-spacing: -.03em; font-size: 17px; font-weight: 500; } #onlybaie-perspective .op-tool { white-space: nowrap; background: none; border: 0; padding: 10px 0; font-size: 12px; } #onlybaie-perspective .op-tool span { background: #eeeae3; border-radius: 50%; place-items: center; min-width: 22px; min-height: 22px; margin-left: 4px; font-size: 10px; display: inline-grid; } #onlybaie-perspective .op-menu-toggle { display: none; } #onlybaie-perspective .op-nav { border-top: 1px solid #efeee9; justify-content: space-between; align-items: stretch; gap: 20px; min-height: 50px; display: flex; } #onlybaie-perspective .op-nav > button, #onlybaie-perspective .op-nav > a { white-space: nowrap; background: none; border: 0; padding: 14px 0; font-size: 12px; font-weight: 500; } #onlybaie-perspective .op-nav > button:after { content: "⌄"; color: #8b8d82; margin-left: 12px; } #onlybaie-perspective .op-nav > button[aria-expanded="true"] { color: var(--op-red); box-shadow: inset 0 -2px var(--op-red); } #onlybaie-perspective .op-nav .op-nav-help { color: var(--op-red); } #onlybaie-perspective .op-mega { background: #fff; border-top: 1px solid #eee; position: absolute; top: 100%; left: 0; right: 0; box-shadow: 0 25px 35px #0003; } #onlybaie-perspective .op-mega-content { grid-template-columns: 1.1fr 1fr 1fr 1.1fr; gap: 30px; padding-block: 30px; display: grid; } #onlybaie-perspective .op-mega h2 { letter-spacing: -.05em; margin: 18px 0; font-size: 34px; line-height: 1.1; } #onlybaie-perspective .op-mega-intro p { color: #686b62; max-width: 240px; margin-bottom: 20px; font-size: 13px; } #onlybaie-perspective .op-menu-label { letter-spacing: .1em; text-transform: uppercase; color: #74776c; margin-bottom: 14px; font-size: 10px; } #onlybaie-perspective .op-model-list { flex-direction: column; gap: 2px; display: flex; } #onlybaie-perspective .op-model-list button { text-align: left; background: none; border: 0; border-bottom: 1px solid #eeeee7; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 13px; display: flex; } #onlybaie-perspective .op-model-list button:hover { color: var(--op-red); } #onlybaie-perspective .op-range { border-bottom: 1px solid #eeeee7; margin-bottom: 14px; padding-bottom: 12px; } #onlybaie-perspective .op-range b { margin-bottom: 4px; font-size: 12px; font-weight: 500; display: block; } #onlybaie-perspective .op-range p { color: #686b62; font-size: 12px; } #onlybaie-perspective .op-menu-photo { color: #fff; min-height: 285px; position: relative; overflow: hidden; } #onlybaie-perspective .op-menu-photo img { height: 100%; position: absolute; inset: 0; } #onlybaie-perspective .op-menu-photo:after { content: ""; background: linear-gradient(#0000 40%, #0009); position: absolute; inset: 0; } #onlybaie-perspective .op-menu-photo span { z-index: 1; letter-spacing: -.04em; font-size: 22px; line-height: 1.15; position: absolute; bottom: 20px; left: 20px; right: 20px; } #onlybaie-perspective .op-menu-bottom { background: #f6f5f1; justify-content: space-between; gap: 20px; padding-block: 12px; font-size: 12px; display: flex; } #onlybaie-perspective .op-menu-close { background: none; border: 0; padding: 4px 0; font-size: 12px; } #onlybaie-perspective .op-hero { color: #fff; background: #655c48; align-items: center; min-height: 650px; display: flex; position: relative; overflow: hidden; } #onlybaie-perspective .op-hero-image { object-position: center 57%; height: 100%; animation: 1.8s ease-out both op-arrive; position: absolute; inset: 0; } #onlybaie-perspective .op-hero:after { content: ""; pointer-events: none; background: linear-gradient(90deg, #14170f99, #14170f55 34%, #0000 66%), linear-gradient(0deg, #12191060, #0000 35%); position: absolute; inset: 0; } #onlybaie-perspective .op-hero-content { z-index: 1; max-width: 900px; padding-block: 65px 125px; position: relative; } #onlybaie-perspective .op-hero .op-kicker { color: #ffffffd4; } #onlybaie-perspective .op-hero h1 { letter-spacing: -.04em; margin: 26px 0 24px; font-size: clamp(66px, 6.8vw, 116px); font-weight: 500; line-height: 1.02; } #onlybaie-perspective .op-hero h1 em { font-style: normal; font-weight: 400; } #onlybaie-perspective .op-hero-content > p { color: #f6f5ed; max-width: 365px; margin-bottom: 29px; font-size: 16px; line-height: 1.6; } #onlybaie-perspective .op-hero-actions { flex-wrap: wrap; align-items: center; gap: 26px; display: flex; } #onlybaie-perspective .op-hero-bottom { z-index: 2; justify-content: space-between; align-items: end; gap: 20px; display: flex; position: absolute; bottom: 30px; left: 0; right: 0; } #onlybaie-perspective .op-hero-caption { text-transform: uppercase; letter-spacing: .15em; color: #fff; align-items: center; gap: 15px; font-size: 10px; display: flex; } #onlybaie-perspective .op-hero-caption:before { content: ""; background: #fff; width: 45px; height: 1px; } #onlybaie-perspective .op-hero-product { width: 275px; color: var(--op-ink); background: #fff; grid-template-columns: 1fr auto; gap: 5px 15px; padding: 22px 23px; display: grid; box-shadow: 0 12px 35px #0002; } #onlybaie-perspective .op-hero-product small { text-transform: uppercase; letter-spacing: .09em; color: #76776d; grid-column: 1 / -1; font-size: 10px; } #onlybaie-perspective .op-hero-product strong { grid-column: 1 / -1; font-size: 16px; font-weight: 500; } #onlybaie-perspective .op-hero-price { letter-spacing: -.06em; align-self: end; margin-top: 9px; font-size: 29px; } #onlybaie-perspective .op-hero-price span { letter-spacing: 0; font-size: 10px; } #onlybaie-perspective .op-round { background: none; border: 1px solid #cccfc3; border-radius: 50%; align-self: end; width: 44px; height: 44px; } #onlybaie-perspective .op-proof { border-bottom: 1px solid var(--op-line); background: #fff; grid-template-columns: repeat(4, 1fr); gap: 30px; padding-block: 25px; display: grid; } #onlybaie-perspective .op-proof-item { align-items: center; gap: 14px; display: flex; } #onlybaie-perspective .op-proof-number { color: var(--op-red); border: 1px solid #e3e4dc; border-radius: 50%; place-items: center; min-width: 33px; height: 33px; font-size: 11px; display: grid; } #onlybaie-perspective .op-proof strong { font-size: 12px; font-weight: 500; display: block; } #onlybaie-perspective .op-proof small { color: #6b6e63; font-size: 11px; } #onlybaie-perspective .op-section { padding-block: 78px; } #onlybaie-perspective .op-section-head { justify-content: space-between; align-items: end; gap: 30px; margin: 18px 0 35px; display: flex; } #onlybaie-perspective .op-section h2 { letter-spacing: -.035em; max-width: 760px; font-size: clamp(34px, 3.2vw, 56px); line-height: 1.12; } #onlybaie-perspective .op-section-head p { color: #676a60; max-width: 310px; font-size: 13px; line-height: 1.7; } #onlybaie-perspective .op-filter-row { flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; display: flex; } #onlybaie-perspective .op-filter-row button { background: none; border: 1px solid #d5d7cd; border-radius: 30px; min-height: 38px; padding: 9px 16px; font-size: 12px; } #onlybaie-perspective .op-filter-row button[aria-pressed="true"] { background: var(--op-ink); color: #fff; border-color: var(--op-ink); } #onlybaie-perspective .op-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; display: grid; } #onlybaie-perspective .op-product { min-width: 0; } #onlybaie-perspective .op-products.op-filtered { grid-template-columns: 1fr; } #onlybaie-perspective .op-products.op-filtered .op-product { background: #eeede6; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 70px); display: grid; } #onlybaie-perspective .op-products.op-filtered .op-product-visual { aspect-ratio: 4 / 3; max-height: 420px; } #onlybaie-perspective .op-products.op-filtered .op-product-info { padding: 30px 40px 30px 0; } #onlybaie-perspective .op-products.op-filtered .op-product-info h3 { margin-block: 15px; font-size: clamp(24px, 3vw, 44px); line-height: 1.15; } #onlybaie-perspective .op-products.op-filtered .op-product-info p { font-size: 14px; } #onlybaie-perspective .op-product-visual { aspect-ratio: 3 / 4; background: #e3e0d4; position: relative; overflow: hidden; } #onlybaie-perspective .op-product-visual > img { height: 100%; transition: transform .8s cubic-bezier(.2, .6, .3, 1); } #onlybaie-perspective .op-product:hover .op-product-visual > img { transform: scale(1.045); } #onlybaie-perspective .op-product[data-product="bay"] .op-product-visual > img { object-position: 70% center; } #onlybaie-perspective .op-tag { letter-spacing: .03em; background: #fffdf5e8; padding: 6px 10px; font-size: 10px; position: absolute; top: 15px; left: 15px; } #onlybaie-perspective .op-favorite { background: #fffdf5ed; border: 0; border-radius: 50%; place-items: center; width: 32px; height: 32px; font-size: 22px; display: grid; position: absolute; top: 12px; right: 12px; } #onlybaie-perspective .op-favorite[aria-pressed="true"] { color: var(--op-red); } #onlybaie-perspective .op-product-hover { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: #ffffffeb; border: 0; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; font-size: 12px; display: flex; position: absolute; bottom: 15px; left: 15px; right: 15px; } #onlybaie-perspective .op-product-info { padding: 19px 0 0; } #onlybaie-perspective .op-product-info small { letter-spacing: .1em; text-transform: uppercase; color: #777a70; font-size: 10px; } #onlybaie-perspective .op-product-info h3 { letter-spacing: -.035em; margin: 5px 0 8px; font-size: 20px; } #onlybaie-perspective .op-product-info p { color: #74766d; margin-bottom: 17px; font-size: 12px; } #onlybaie-perspective .op-product-price { border-top: 1px solid var(--op-line); justify-content: space-between; align-items: end; gap: 10px; padding-top: 12px; display: flex; } #onlybaie-perspective .op-product-price span { color: #74766d; font-size: 10px; } #onlybaie-perspective .op-product-price strong { letter-spacing: -.04em; color: var(--op-ink); font-size: 24px; font-weight: 500; } #onlybaie-perspective .op-product-price strong small { letter-spacing: 0; font-size: 10px; } #onlybaie-perspective .op-product-price .op-text-link { padding: 3px 0; font-size: 11px; } #onlybaie-perspective .op-catalogue-foot { color: #727569; justify-content: space-between; align-items: center; gap: 20px; margin-top: 30px; font-size: 11px; display: flex; } #onlybaie-perspective .op-no-results { color: #666; padding: 35px 0; font-size: 14px; } #onlybaie-perspective .op-editorial { color: #fff; background: #232b24; grid-template-columns: 1.2fr 1fr; min-height: 550px; display: grid; } #onlybaie-perspective .op-editorial-photo { min-height: 450px; position: relative; overflow: hidden; } #onlybaie-perspective .op-editorial-photo > img { object-position: 45% center; height: 100%; transition: transform 1s; position: absolute; inset: 0; } #onlybaie-perspective .op-editorial:hover .op-editorial-photo > img { transform: scale(1.025); } #onlybaie-perspective .op-editorial-label { color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: #141d1a99; padding: 9px 12px; font-size: 11px; position: absolute; bottom: 26px; left: 30px; } #onlybaie-perspective .op-editorial-copy { flex-direction: column; justify-content: center; padding: clamp(35px, 5vw, 85px); display: flex; } #onlybaie-perspective .op-editorial h2 { letter-spacing: -.035em; margin: 20px 0 24px; font-size: clamp(36px, 3.5vw, 61px); line-height: 1.1; } #onlybaie-perspective .op-editorial p { color: #d0d5ca; margin-bottom: 30px; font-size: 14px; line-height: 1.7; } #onlybaie-perspective .op-editorial .op-text-link { align-self: start; } #onlybaie-perspective .op-editorial-details { border-top: 1px solid #ffffff2c; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; padding-top: 25px; display: grid; } #onlybaie-perspective .op-editorial-details strong { font-size: 13px; font-weight: 500; display: block; } #onlybaie-perspective .op-editorial-details small { color: #a8b0a3; font-size: 11px; } #onlybaie-perspective .op-project-block { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 80px; padding-block: 80px; display: grid; } #onlybaie-perspective .op-project-intro { position: relative; } #onlybaie-perspective .op-project-intro h2 { letter-spacing: -.035em; margin: 20px 0; font-size: clamp(38px, 4vw, 65px); line-height: 1.08; } #onlybaie-perspective .op-project-intro > p { color: #6e7167; max-width: 400px; margin-bottom: 25px; font-size: 14px; line-height: 1.7; } #onlybaie-perspective .op-step { border-top: 1px solid #d5d7cd; grid-template-columns: 40px 1fr; gap: 10px; padding: 21px 0; display: grid; } #onlybaie-perspective .op-step > span { color: var(--op-red); padding-top: 3px; font-size: 12px; } #onlybaie-perspective .op-step h3 { letter-spacing: -.04em; margin-bottom: 7px; font-size: 21px; } #onlybaie-perspective .op-step p { color: #6e7167; max-width: 420px; font-size: 13px; line-height: 1.7; } #onlybaie-perspective .op-help-banner { background: var(--op-red); color: #fff; justify-content: space-between; align-items: center; gap: 30px; padding-block: 36px; display: flex; } #onlybaie-perspective .op-help-banner p { color: #ffe8e4; font-size: 13px; } #onlybaie-perspective .op-help-phone { letter-spacing: -.045em; white-space: nowrap; font-size: 34px; } #onlybaie-perspective .op-help-banner .op-text-link { color: #fff; font-size: 12px; } #onlybaie-perspective .op-guides { grid-template-columns: 1fr 1fr 1fr; gap: 25px; display: grid; } #onlybaie-perspective .op-guide { border-top: 1px solid #c9ccc0; padding-top: 21px; } #onlybaie-perspective .op-guide small { text-transform: uppercase; letter-spacing: .08em; color: #767a6b; font-size: 10px; } #onlybaie-perspective .op-guide h3 { letter-spacing: -.05em; max-width: 290px; margin: 12px 0 14px; font-size: 24px; line-height: 1.2; } #onlybaie-perspective .op-guide p { color: #73776a; max-width: 320px; margin-bottom: 20px; font-size: 13px; line-height: 1.7; } #onlybaie-perspective .op-faq { border-top: 1px solid var(--op-line); grid-template-columns: .8fr 1.2fr; gap: 80px; margin-top: 65px; padding-top: 60px; display: grid; } #onlybaie-perspective .op-faq h2 { font-size: 35px; } #onlybaie-perspective .op-faq details { border-bottom: 1px solid var(--op-line); } #onlybaie-perspective .op-faq summary { cursor: pointer; padding: 19px 35px 19px 0; font-size: 14px; list-style: none; position: relative; } #onlybaie-perspective .op-faq summary:after { content: "+"; font-size: 20px; position: absolute; top: 16px; right: 0; } #onlybaie-perspective .op-faq details[open] summary:after { content: "−"; } #onlybaie-perspective .op-faq details p { color: #6b7062; padding: 0 22px 23px 0; font-size: 13px; line-height: 1.7; } #onlybaie-perspective .op-footer { color: #eff1e9; background: #181b16; padding-top: 55px; } #onlybaie-perspective .op-footer-columns { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; display: grid; } #onlybaie-perspective .op-footer h3 { letter-spacing: -.035em; max-width: 240px; margin-bottom: 15px; font-size: 22px; line-height: 1.3; } #onlybaie-perspective .op-footer p { color: #a5ac9e; max-width: 240px; font-size: 12px; line-height: 1.7; } #onlybaie-perspective .op-footer b { letter-spacing: .08em; text-transform: uppercase; margin-bottom: 17px; font-size: 11px; font-weight: 500; display: block; } #onlybaie-perspective .op-footer-list { flex-direction: column; align-items: start; gap: 10px; display: flex; } #onlybaie-perspective .op-footer-list button, #onlybaie-perspective .op-footer-list a { color: #c6ccbe; text-align: left; background: none; border: 0; padding: 0; font-size: 12px; } #onlybaie-perspective .op-footer-word { letter-spacing: -.07em; white-space: nowrap; color: #f3f4ee; border-top: 1px solid #ffffff28; padding-block: 25px; font-family: Manrope, sans-serif; font-size: clamp(70px, 20.6vw, 400px); font-weight: 700; line-height: .93; } #onlybaie-perspective .op-footer-word span { color: var(--op-red); } #onlybaie-perspective .op-footer-bottom { color: #959e8e; border-top: 1px solid #ffffff28; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 18px; font-size: 10px; display: flex; } #onlybaie-perspective .op-dialog { color: #171a13; background: #fafaf5; border: 0; width: min(620px, 100% - 32px); max-height: 85vh; padding: 35px; box-shadow: 0 20px 80px #0004; } #onlybaie-perspective .op-dialog::backdrop { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); background: #14191088; } #onlybaie-perspective .op-dialog-top { justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; display: flex; } #onlybaie-perspective .op-dialog-close { background: none; border: 0; padding: 8px 0; font-size: 12px; } #onlybaie-perspective .op-dialog h2 { letter-spacing: -.05em; margin-bottom: 14px; font-size: 33px; line-height: 1.12; } #onlybaie-perspective .op-dialog p { color: #6a7061; font-size: 13px; line-height: 1.7; } #onlybaie-perspective .op-dialog-body { margin-top: 20px; } #onlybaie-perspective .op-dialog-form { gap: 15px; display: grid; } #onlybaie-perspective .op-dialog-form label { gap: 6px; font-size: 12px; display: grid; } #onlybaie-perspective .op-dialog-form select, #onlybaie-perspective .op-dialog-form input { background: #fff; border: 1px solid #c9cdbf; width: 100%; min-width: 0; padding: 12px; font-size: 16px; } #onlybaie-perspective .op-dimensions { grid-template-columns: 1fr 1fr; gap: 12px; display: grid; } #onlybaie-perspective .op-dialog-note { color: #7e8375 !important; margin-top: 18px !important; font-size: 10px !important; } #onlybaie-perspective .op-draft { border-top: 1px solid #d5d8cc; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 0; display: flex; } #onlybaie-perspective .op-draft b { font-size: 13px; font-weight: 500; display: block; } #onlybaie-perspective .op-draft small { color: #717968; font-size: 12px; } #onlybaie-perspective .op-draft button { color: #9c2525; background: none; border: 0; font-size: 11px; } #onlybaie-perspective .op-toast { color: #405836; min-height: 20px; padding: 12px 0; font-size: 12px; } #onlybaie-perspective.op-motion .op-reveal { transition: transform .8s cubic-bezier(.2, .6, .2, 1), opacity .8s; } #onlybaie-perspective.op-motion .op-reveal.op-pending { opacity: 0; transform: translateY(26px); } @media (width >= 1700px) { #onlybaie-perspective .op-hero { min-height: 780px; } } @media (width <= 1100px) { #onlybaie-perspective .op-head { gap: 25px; } #onlybaie-perspective .op-head-tools { gap: 15px; } #onlybaie-perspective .op-phone { display: none; } #onlybaie-perspective .op-hero { min-height: 620px; } #onlybaie-perspective .op-hero h1 { font-size: 76px; } #onlybaie-perspective .op-project-block, #onlybaie-perspective .op-faq { gap: 45px; } #onlybaie-perspective .op-mega-content { grid-template-columns: 1fr 1fr 1fr; gap: 25px; } #onlybaie-perspective .op-mega-intro { grid-column: 1 / -1; align-items: center; gap: 25px; display: flex; } #onlybaie-perspective .op-mega-intro .op-kicker { display: none; } #onlybaie-perspective .op-mega-intro h2 { flex: 1; margin: 0; font-size: 29px; } #onlybaie-perspective .op-mega-intro p { max-width: 280px; margin: 0; font-size: 12px; } #onlybaie-perspective .op-products { gap: 14px; } #onlybaie-perspective .op-product-info h3 { font-size: 18px; } #onlybaie-perspective .op-product-price { flex-wrap: wrap; } #onlybaie-perspective .op-help-phone { font-size: 28px; } #onlybaie-perspective .op-help-banner h2 { font-size: 26px; } } @media (width <= 850px) { #onlybaie-perspective .op-top-right > span { display: none; } #onlybaie-perspective .op-head { min-height: 80px; } #onlybaie-perspective .op-search { display: none; } #onlybaie-perspective .op-menu-toggle { display: block; } #onlybaie-perspective .op-cart-button { display: none; } #onlybaie-perspective .op-nav { grid-template-columns: 1fr 1fr; gap: 0 25px; padding-block: 12px; display: none; } #onlybaie-perspective .op-nav.op-open { display: grid; } #onlybaie-perspective .op-nav > button, #onlybaie-perspective .op-nav > a { text-align: left; white-space: normal; min-height: 45px; } #onlybaie-perspective .op-nav > button:after { float: right; } #onlybaie-perspective .op-mega { box-shadow: none; position: relative; } #onlybaie-perspective .op-mega-content { grid-template-columns: 1fr 1fr; gap: 25px; } #onlybaie-perspective .op-mega-intro { grid-column: 1 / -1; } #onlybaie-perspective .op-mega-intro h2 { margin: 12px 0; font-size: 29px; } #onlybaie-perspective .op-mega-intro p { max-width: 100%; margin-bottom: 8px; } #onlybaie-perspective .op-menu-photo { display: none; } #onlybaie-perspective .op-hero { min-height: 600px; } #onlybaie-perspective .op-hero h1 { font-size: 65px; } #onlybaie-perspective .op-hero-content { padding-block: 60px 170px; } #onlybaie-perspective .op-hero-product { width: 230px; padding: 16px; } #onlybaie-perspective .op-hero-price { font-size: 24px; } #onlybaie-perspective .op-proof { grid-template-columns: 1fr 1fr; gap: 20px; } #onlybaie-perspective .op-products { grid-template-columns: 1fr 1fr; gap: 30px 20px; } #onlybaie-perspective .op-section { padding-block: 55px; } #onlybaie-perspective .op-editorial { grid-template-columns: 1fr 1fr; min-height: 450px; } #onlybaie-perspective .op-editorial-photo { min-height: 400px; } #onlybaie-perspective .op-editorial-copy { padding: 32px 26px; } #onlybaie-perspective .op-editorial h2 { font-size: 34px; } #onlybaie-perspective .op-editorial p { font-size: 13px; } #onlybaie-perspective .op-project-block { gap: 40px; padding-block: 60px; } #onlybaie-perspective .op-help-banner { flex-wrap: wrap; } #onlybaie-perspective .op-help-banner .op-text-link { margin-left: auto; } #onlybaie-perspective .op-guides { gap: 20px; } #onlybaie-perspective .op-guide h3 { font-size: 20px; } #onlybaie-perspective .op-faq { gap: 30px; } #onlybaie-perspective .op-footer-columns { grid-template-columns: 1fr 1fr; gap: 35px; } } @media (width <= 550px) { #onlybaie-perspective .op-top { min-height: 32px; font-size: 10px; } #onlybaie-perspective .op-top > span { max-width: 170px; } #onlybaie-perspective .op-top-right { gap: 0; } #onlybaie-perspective .op-logo { flex-basis: 140px; } #onlybaie-perspective .op-head { gap: 12px; min-height: 73px; } #onlybaie-perspective .op-head-tools { gap: 15px; } #onlybaie-perspective .op-tool { min-height: 44px; font-size: 11px; } #onlybaie-perspective .op-tool span { min-width: 19px; min-height: 19px; margin-left: 0; } #onlybaie-perspective .op-hero { align-items: start; min-height: 650px; } #onlybaie-perspective .op-hero-image { object-position: 58% center; } #onlybaie-perspective .op-hero:after { background: linear-gradient(90deg, #14170f99, #14170f45), linear-gradient(0deg, #12191044, #0000); } #onlybaie-perspective .op-hero-content { padding-top: 49px; padding-bottom: 190px; } #onlybaie-perspective .op-hero h1 { margin: 23px 0; font-size: clamp(46px, 11.3vw, 62px); line-height: 1.05; } #onlybaie-perspective .op-hero-content > p { max-width: 280px; font-size: 14px; } #onlybaie-perspective .op-hero-actions { flex-direction: column; align-items: start; gap: 17px; } #onlybaie-perspective .op-hero-caption { display: none; } #onlybaie-perspective .op-hero-bottom { bottom: 22px; } #onlybaie-perspective .op-hero-product { grid-template-columns: 1fr auto; gap: 3px 12px; width: 100%; } #onlybaie-perspective .op-hero-product small { grid-column: 1; } #onlybaie-perspective .op-hero-product strong { grid-column: 1; font-size: 14px; } #onlybaie-perspective .op-hero-price { grid-column: 1; margin-top: 4px; font-size: 23px; } #onlybaie-perspective .op-hero-product .op-round { grid-area: 1 / 2 / 4; align-self: center; } #onlybaie-perspective .op-kicker { letter-spacing: .1em; font-size: 10px; } #onlybaie-perspective .op-proof { gap: 22px 12px; padding-block: 23px; } #onlybaie-perspective .op-proof-item { align-items: start; gap: 8px; } #onlybaie-perspective .op-proof-number { border: 0; min-width: 15px; height: 20px; font-size: 10px; } #onlybaie-perspective .op-proof strong { font-size: 11px; } #onlybaie-perspective .op-proof small { margin-top: 3px; font-size: 10px; line-height: 1.4; display: block; } #onlybaie-perspective .op-section-head { flex-direction: column; align-items: start; gap: 18px; margin-bottom: 25px; } #onlybaie-perspective .op-section h2 { font-size: 36px; } #onlybaie-perspective .op-filter-row { gap: 7px; } #onlybaie-perspective .op-filter-row button { min-height: 44px; padding: 9px 12px; font-size: 11px; } #onlybaie-perspective .op-products { gap: 30px 12px; } #onlybaie-perspective .op-product-visual { aspect-ratio: 3 / 4.4; } #onlybaie-perspective .op-tag { max-width: 90px; padding: 4px 6px; font-size: 8px; top: 10px; left: 8px; } #onlybaie-perspective .op-favorite { background: #ffffffe0; width: 40px; height: 40px; top: 35px; right: 6px; } #onlybaie-perspective .op-product-hover { gap: 5px; min-height: 44px; padding: 10px 9px; font-size: 10px; bottom: 8px; left: 7px; right: 7px; } #onlybaie-perspective .op-product-hover .op-arrow { font-size: 18px; } #onlybaie-perspective .op-product-info { padding-top: 14px; } #onlybaie-perspective .op-product-info small { font-size: 9px; } #onlybaie-perspective .op-product-info h3 { min-height: 43px; font-size: 17px; line-height: 1.25; } #onlybaie-perspective .op-product-info p { min-height: 33px; margin-bottom: 12px; font-size: 11px; line-height: 1.5; } #onlybaie-perspective .op-product-price { flex-direction: column; align-items: start; gap: 8px; } #onlybaie-perspective .op-product-price strong { font-size: 22px; } #onlybaie-perspective .op-product-price .op-text-link { min-height: 33px; } #onlybaie-perspective .op-catalogue-foot { flex-direction: column; align-items: start; gap: 15px; } #onlybaie-perspective .op-editorial { grid-template-columns: 1fr; } #onlybaie-perspective .op-editorial-photo { min-height: 380px; } #onlybaie-perspective .op-editorial-copy { padding: 38px 25px 44px; } #onlybaie-perspective .op-editorial h2 { font-size: 40px; } #onlybaie-perspective .op-project-block { grid-template-columns: 1fr; gap: 32px; padding-block: 55px; } #onlybaie-perspective .op-project-intro h2 { font-size: 42px; } #onlybaie-perspective .op-help-banner { gap: 20px; padding-block: 30px; } #onlybaie-perspective .op-help-banner h2 { font-size: 27px; } #onlybaie-perspective .op-help-phone { font-size: 30px; } #onlybaie-perspective .op-help-banner .op-text-link { margin-left: 0; } #onlybaie-perspective .op-guides { grid-template-columns: 1fr; gap: 30px; } #onlybaie-perspective .op-guide h3 { max-width: 300px; font-size: 26px; } #onlybaie-perspective .op-guide p { max-width: none; } #onlybaie-perspective .op-faq { grid-template-columns: 1fr; gap: 25px; margin-top: 45px; padding-top: 45px; } #onlybaie-perspective .op-faq h2 { font-size: 32px; } #onlybaie-perspective .op-footer-columns { gap: 30px 20px; } #onlybaie-perspective .op-footer-columns > div:first-child { grid-column: 1 / -1; } #onlybaie-perspective .op-footer h3, #onlybaie-perspective .op-footer p { max-width: 300px; } #onlybaie-perspective .op-footer-word { font-size: 20vw; } #onlybaie-perspective .op-menu-bottom { flex-direction: column; gap: 8px; } #onlybaie-perspective .op-menu-close { align-self: start; min-height: 35px; } #onlybaie-perspective .op-dialog { padding: 24px; } #onlybaie-perspective .op-dialog h2 { font-size: 29px; } #onlybaie-perspective .op-dialog .op-button { gap: 12px; padding: 14px; font-size: 12px; } } @media (width <= 850px) { #onlybaie-perspective .op-mega-intro { display: block; } #onlybaie-perspective .op-mega-intro h2 { margin: 0 0 12px; } #onlybaie-perspective .op-mega-intro p { max-width: none; margin-bottom: 12px; } } @media (width <= 550px) { #onlybaie-perspective .op-products.op-filtered .op-product { grid-template-columns: 1fr; gap: 0; } #onlybaie-perspective .op-products.op-filtered .op-product-visual { aspect-ratio: 1; } #onlybaie-perspective .op-products.op-filtered .op-product-info { padding: 25px; } #onlybaie-perspective .op-products.op-filtered .op-product-info h3 { min-height: 0; font-size: 29px; } #onlybaie-perspective .op-products.op-filtered .op-product-info p { min-height: 0; font-size: 13px; } #onlybaie-perspective .op-products.op-filtered .op-product-price { flex-direction: row; align-items: end; } } @media (prefers-reduced-motion: reduce) { #onlybaie-perspective *, #onlybaie-perspective :after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } #onlybaie-perspective .op-reveal.op-pending { opacity: 1 !important; transform: none !important; } } #onlybaie-perspective .op-logo:after { content: "LES BELLES OUVERTURES"; letter-spacing: .18em; text-align: center; color: #62635d; margin-top: 3px; font-size: 8px; font-weight: 600; display: block; } #onlybaie-perspective .op-hero .op-kicker { letter-spacing: .18em; font-size: 12px; } #onlybaie-perspective .op-hero .op-kicker:before { border-radius: 0; width: 22px; height: 3px; } #onlybaie-perspective .op-brand-em { color: var(--op-red); } #onlybaie-perspective .op-mega { border-top: 3px solid var(--op-red); } #onlybaie-perspective .op-mega-content { grid-template-columns: 215px minmax(0, 1fr); gap: 34px; padding-block: 28px 25px; } #onlybaie-perspective .op-mega-intro { border-right: 1px solid #e7e7df; grid-column: auto; padding-right: 25px; display: block; } #onlybaie-perspective .op-mega-intro .op-kicker { letter-spacing: .12em; font-size: 9px; display: flex; } #onlybaie-perspective .op-mega-intro h2 { letter-spacing: -.035em; margin: 18px 0 14px; font-size: 29px; } #onlybaie-perspective .op-mega-intro p { max-width: 210px; margin: 0 0 18px; font-size: 12px; } #onlybaie-perspective .op-menu-ranges { margin-top: 24px; } #onlybaie-perspective .op-range { margin-bottom: 10px; padding-bottom: 10px; } #onlybaie-perspective .op-range b { letter-spacing: .04em; font-size: 10px; } #onlybaie-perspective .op-range p { margin: 0; font-size: 10px; line-height: 1.5; } #onlybaie-perspective .op-model-heading { justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 15px; display: flex; } #onlybaie-perspective .op-model-heading .op-menu-label { color: #51564b; margin: 0; } #onlybaie-perspective .op-model-heading small { color: #74786d; font-size: 10px; } #onlybaie-perspective .op-model-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; display: grid; } #onlybaie-perspective .op-model-list:has( > .op-model-card:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } #onlybaie-perspective .op-model-list:has( > .op-model-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } #onlybaie-perspective .op-model-list:has( > .op-model-card:nth-child(4):last-child) img, #onlybaie-perspective .op-model-list:has( > .op-model-card:nth-child(2):last-child) img { height: 180px; } #onlybaie-perspective .op-model-list .op-model-card { text-align: left; background: #f7f7f2; border: 1px solid #ebece4; min-width: 0; padding: 0; transition: border-color .2s, transform .2s, box-shadow .2s; display: block; overflow: hidden; } #onlybaie-perspective .op-model-list .op-model-card:hover { border-color: var(--op-red); color: var(--op-ink); transform: translateY(-3px); box-shadow: 0 8px 20px #222b1112; } #onlybaie-perspective .op-model-card img { object-fit: contain; background: #efeee8; width: 100%; height: 150px; transition: transform .35s; } #onlybaie-perspective .op-model-card:hover img { transform: scale(1.04); } #onlybaie-perspective .op-model-caption { background: #fff; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 11px 12px; display: grid; position: relative; } #onlybaie-perspective .op-model-caption strong { grid-column: 1; font-size: 12px; font-weight: 500; line-height: 1.25; } #onlybaie-perspective .op-model-caption small { color: #7a7e70; grid-column: 1; font-size: 9px; } #onlybaie-perspective .op-model-caption .op-arrow { color: var(--op-red); grid-area: 1 / 2 / 3; align-self: center; font-size: 20px; } #onlybaie-perspective .op-menu-bottom { font-size: 11px; } #onlybaie-perspective .op-hero-bottom { align-items: end; } @media (width >= 1550px) { #onlybaie-perspective .op-model-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } #onlybaie-perspective .op-model-card img { height: 175px; } #onlybaie-perspective .op-menu-ranges { display: none; } #onlybaie-perspective .op-mega-content { padding-block: 32px; } } @media (width <= 1100px) { #onlybaie-perspective .op-mega-content { grid-template-columns: 190px minmax(0, 1fr); gap: 22px; } #onlybaie-perspective .op-model-card img { height: 125px; } #onlybaie-perspective .op-mega-intro { padding-right: 20px; } #onlybaie-perspective .op-model-list { gap: 11px; } } @media (width <= 850px) { #onlybaie-perspective .op-mega-content { grid-template-columns: 1fr; gap: 22px; } #onlybaie-perspective .op-mega-intro { border-right: 0; grid-template-columns: 1fr auto; align-items: center; gap: 0 20px; padding-right: 0; display: grid; } #onlybaie-perspective .op-mega-intro h2 { grid-column: 1; margin: 10px 0 8px; } #onlybaie-perspective .op-mega-intro .op-kicker { grid-column: 1 / -1; } #onlybaie-perspective .op-mega-intro p { grid-column: 1; max-width: none; margin: 0; } #onlybaie-perspective .op-mega-intro > .op-text-link { grid-area: 2 / 2 / 4; } #onlybaie-perspective .op-menu-ranges { display: none; } #onlybaie-perspective .op-model-card img { height: 145px; } #onlybaie-perspective .op-logo { flex-basis: 180px; } #onlybaie-perspective .op-hero-video { object-position: center 57%; } } @media (width <= 550px) { #onlybaie-perspective .op-logo { flex-basis: 137px; } #onlybaie-perspective .op-logo:after { letter-spacing: .17em; margin-top: 0; font-size: 6px; } #onlybaie-perspective .op-head { min-height: 83px; } #onlybaie-perspective .op-mega-intro { display: block; } #onlybaie-perspective .op-mega-intro > .op-text-link { margin-top: 12px; } #onlybaie-perspective .op-mega-intro h2 { font-size: 28px; } #onlybaie-perspective .op-model-list { grid-template-columns: 1fr 1fr; gap: 10px; } #onlybaie-perspective .op-model-card img { height: 115px; } #onlybaie-perspective .op-model-caption { gap: 3px 5px; min-height: 60px; padding: 10px; } #onlybaie-perspective .op-model-caption strong { font-size: 11px; } #onlybaie-perspective .op-model-caption small { font-size: 8px; } #onlybaie-perspective .op-model-caption .op-arrow { font-size: 17px; } #onlybaie-perspective .op-model-heading small, #onlybaie-perspective .op-model-heading .op-menu-label { font-size: 9px; } #onlybaie-perspective .op-hero .op-kicker { letter-spacing: .12em; font-size: 10px; } #onlybaie-perspective .op-hero-bottom { flex-direction: column; align-items: stretch; gap: 22px; } #onlybaie-perspective .op-hero-content { padding-bottom: 285px; } #onlybaie-perspective .op-motion-control { width: 100%; } #onlybaie-perspective .op-motion-control > label { margin-bottom: 7px; font-size: 9px; } #onlybaie-perspective .op-motion-control > p { margin-top: 3px; } #onlybaie-perspective .op-hero-video { object-position: 58% center; } } @media (width <= 850px) { #onlybaie-perspective .op-model-list:has( > .op-model-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width <= 550px) { #onlybaie-perspective .op-model-list:has( > .op-model-card:nth-child(4):last-child) img, #onlybaie-perspective .op-model-list:has( > .op-model-card:nth-child(2):last-child) img { height: 130px; } } @media (width >= 851px) and (width <= 980px) { #onlybaie-perspective .op-menu-toggle { display: block; } #onlybaie-perspective .op-cart-button { display: none; } #onlybaie-perspective .op-nav { grid-template-columns: 1fr 1fr; padding-block: 12px; display: none; } #onlybaie-perspective .op-nav.op-open { display: grid; } #onlybaie-perspective .op-nav > button, #onlybaie-perspective .op-nav > a { text-align: left; white-space: normal; min-height: 45px; } #onlybaie-perspective .op-nav > button:after { float: right; } #onlybaie-perspective .op-mega { box-shadow: none; position: relative; } } #onlybaie-perspective .op-top { min-height: 36px; font-size: 12px; } #onlybaie-perspective .op-head { gap: 30px; min-height: 116px; } #onlybaie-perspective .op-logo { flex-basis: 270px; } #onlybaie-perspective .op-logo:after { letter-spacing: .19em; margin-top: 5px; font-size: 10px; } #onlybaie-perspective .op-search input { padding-block: 16px; font-size: 15px; } #onlybaie-perspective .op-search button { font-size: 14px; } #onlybaie-perspective .op-phone small { font-size: 12px; } #onlybaie-perspective .op-phone strong { font-size: 21px; } #onlybaie-perspective .op-tool { font-size: 14px; } #onlybaie-perspective .op-tool span { font-size: 11px; } #onlybaie-perspective .op-nav { gap: 16px; min-height: 58px; } #onlybaie-perspective .op-nav > button, #onlybaie-perspective .op-nav > a { padding-block: 17px; font-size: 15px; font-weight: 600; } #onlybaie-perspective .op-nav > button:after { margin-left: 7px; } #onlybaie-perspective .op-help-banner { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(32px, 5vw, 85px); padding-block: 44px; display: grid; } #onlybaie-perspective .op-help-portrait { object-position: 78% center; border-radius: 3px; height: 290px; } #onlybaie-perspective .op-help-copy { max-width: 800px; } #onlybaie-perspective .op-help-copy > small { letter-spacing: .13em; text-transform: uppercase; color: #ffe7e7; margin-bottom: 18px; font-size: 11px; display: block; } #onlybaie-perspective .op-help-banner h2 { letter-spacing: -.04em; margin-bottom: 17px; font-size: clamp(28px, 3.1vw, 48px); line-height: 1.13; } #onlybaie-perspective .op-help-banner p { font-size: 15px; line-height: 1.6; } #onlybaie-perspective .op-help-actions { flex-wrap: wrap; align-items: center; gap: 14px 35px; margin-top: 24px; display: flex; } #onlybaie-perspective .op-help-phone { letter-spacing: -.035em; padding-block: 6px; font-size: clamp(27px, 2.8vw, 42px); font-weight: 500; line-height: 1.25; } #onlybaie-perspective .op-help-banner .op-text-link { min-height: 44px; margin-left: 0; font-size: 14px; } @media (width <= 1200px) { #onlybaie-perspective .op-nav { gap: 8px; } #onlybaie-perspective .op-nav > button, #onlybaie-perspective .op-nav > a { font-size: 13px; } #onlybaie-perspective .op-nav > button:after { margin-left: 5px; } #onlybaie-perspective .op-head-tools { gap: 18px; } } @media (width <= 1100px) { #onlybaie-perspective .op-logo { flex-basis: 240px; } #onlybaie-perspective .op-head { gap: 24px; } #onlybaie-perspective .op-help-banner { grid-template-columns: 230px minmax(0, 1fr); gap: 35px; } } @media (width <= 850px) { #onlybaie-perspective .op-head { min-height: 112px; } #onlybaie-perspective .op-nav > button, #onlybaie-perspective .op-nav > a { font-size: 15px; } #onlybaie-perspective .op-help-banner { grid-template-columns: 190px minmax(0, 1fr); gap: 28px; } #onlybaie-perspective .op-help-portrait { height: 285px; } #onlybaie-perspective .op-help-copy > small { letter-spacing: .1em; margin-bottom: 14px; font-size: 10px; } } @media (width <= 550px) { #onlybaie-perspective .op-top { min-height: 39px; font-size: 11px; } #onlybaie-perspective .op-top > span { max-width: 145px; } #onlybaie-perspective .op-head { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; min-height: 115px; padding-block: 12px; display: grid; } #onlybaie-perspective .op-logo { width: clamp(160px, 48vw, 210px); max-width: 100%; } #onlybaie-perspective .op-logo:after { letter-spacing: .1em; margin-top: 4px; font-size: 8px; } #onlybaie-perspective .op-head-tools { flex-direction: column; align-items: flex-end; gap: 0; } #onlybaie-perspective .op-tool { min-height: 44px; padding: 8px 0; font-size: 13px; } #onlybaie-perspective .op-tool span { font-size: 10px; } #onlybaie-perspective .op-menu-toggle { font-size: 14px; } #onlybaie-perspective .op-nav { column-gap: 20px; } #onlybaie-perspective .op-nav > button, #onlybaie-perspective .op-nav > a { font-size: 14px; } #onlybaie-perspective .op-help-banner { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: 30px 36px; } #onlybaie-perspective .op-help-portrait { object-position: 75% 35%; height: 235px; } #onlybaie-perspective .op-help-banner h2 { font-size: 30px; } #onlybaie-perspective .op-help-banner p { font-size: 14px; } #onlybaie-perspective .op-help-actions { gap: 10px 25px; margin-top: 20px; } #onlybaie-perspective .op-help-phone { font-size: 29px; } } #onlybaie-perspective .op-stars { color: #b98019; letter-spacing: .09em; white-space: nowrap; font-size: 18px; } #onlybaie-perspective .op-rating-proof { gap: 16px; } #onlybaie-perspective .op-rating-proof > b { letter-spacing: -.06em; font-family: Manrope, Arial, sans-serif; font-size: 34px; font-weight: 600; line-height: 1; } #onlybaie-perspective .op-rating-proof .op-stars { margin-bottom: 4px; font-size: 14px; line-height: 1.25; display: block; } #onlybaie-perspective .op-rating-proof small { text-underline-offset: 3px; margin-top: 3px; font-size: 11px; text-decoration: underline; display: block; } #onlybaie-perspective .ob-avis { color: #f7f6f2; background: #161714; padding-block: clamp(46px, 6vw, 84px); } #onlybaie-perspective .ob-avis .op-kicker { color: #b9bdae; } #onlybaie-perspective .ob-avis-head { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(26px, 4vw, 62px); display: grid; } #onlybaie-perspective .ob-avis-score { text-align: center; background: linear-gradient(160deg, #22231e, #161714); border: 1px solid #33352c; border-radius: 18px; flex-direction: column; align-items: center; gap: 4px; padding: 26px 34px; display: flex; } #onlybaie-perspective .ob-avis-note { white-space: nowrap; letter-spacing: -.05em; font-family: Manrope, Arial, sans-serif; font-size: 62px; font-weight: 700; line-height: 1; } #onlybaie-perspective .ob-avis-note small { color: #9ba093; font-size: 20px; font-weight: 500; } #onlybaie-perspective .ob-avis-etoiles { letter-spacing: 3px; color: #f5b301; font-size: 19px; } #onlybaie-perspective .ob-avis-source { letter-spacing: .08em; text-transform: uppercase; color: #c5c9ba; font-size: 11px; } #onlybaie-perspective .ob-avis h2 { letter-spacing: -.04em; margin: 14px 0 12px; font-size: clamp(29px, 3.1vw, 46px); line-height: 1.1; } #onlybaie-perspective .ob-avis-intro p { color: #c2c6b8; max-width: 520px; font-size: 14.5px; line-height: 1.7; } #onlybaie-perspective .ob-avis-cta { color: #fff; background: var(--op-red); border-radius: 999px; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 22px; font-size: 13px; font-weight: 600; transition: transform .18s ease, background .18s ease; display: inline-flex; } #onlybaie-perspective .ob-avis-cta:hover { background: #b9171d; transform: translateY(-1px); } #onlybaie-perspective .ob-avis-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 3.4vw, 46px); display: grid; } #onlybaie-perspective .ob-avis-carte { color: var(--op-ink); background: #fff; border-radius: 16px; flex-direction: column; min-width: 0; padding: 24px 22px 20px; display: flex; box-shadow: 0 18px 40px #0000002e; } #onlybaie-perspective .ob-avis-carte blockquote { letter-spacing: -.02em; flex: 1; margin: 14px 0 20px; font-family: Manrope, Arial, sans-serif; font-size: 17.5px; font-weight: 500; line-height: 1.5; } #onlybaie-perspective .ob-avis-auteur { border-top: 1px solid #ecede5; align-items: center; gap: 11px; padding-top: 16px; display: flex; } #onlybaie-perspective .ob-avis-initiales { color: #fff; background: var(--op-red); border-radius: 50%; flex-shrink: 0; place-items: center; width: 40px; height: 40px; font-size: 13px; font-weight: 600; display: grid; } #onlybaie-perspective .ob-avis-auteur strong { font-size: 13.5px; font-weight: 600; display: block; } #onlybaie-perspective .ob-avis-auteur small { color: #7b7f73; margin-top: 2px; font-size: 11.5px; display: block; } #onlybaie-perspective .ob-avis-mention { color: #8e9385; margin-top: 22px; font-size: 11px; } @media (width <= 1080px) { #onlybaie-perspective .ob-avis-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width <= 720px) { #onlybaie-perspective .ob-avis-head { grid-template-columns: minmax(0, 1fr); justify-items: start; } #onlybaie-perspective .ob-avis-score { flex-direction: row; align-items: baseline; gap: 12px; padding: 16px 20px; } #onlybaie-perspective .ob-avis-note { font-size: 44px; } #onlybaie-perspective .ob-avis-grille { grid-template-columns: minmax(0, 1fr); } } /* Toutes les sections de l'accueil partagent la meme largeur utile. */ #onlybaie-perspective #op-proof, #onlybaie-perspective #op-familles, #onlybaie-perspective #op-collections, #onlybaie-perspective #op-realisations, #onlybaie-perspective #op-avis > *, #onlybaie-perspective #op-projet, #onlybaie-perspective #op-contact, #onlybaie-perspective #op-guides { max-width: 1480px; margin-inline: auto; } @media (width <= 850px) { } @media (width <= 550px) { #onlybaie-perspective .op-rating-proof { gap: 9px; } #onlybaie-perspective .op-rating-proof > b { font-size: 27px; } #onlybaie-perspective .op-rating-proof .op-stars { font-size: 12px; } #onlybaie-perspective .op-rating-proof small { font-size: 10px; } #onlybaie-perspective .op-review-top .op-stars { font-size: 17px; } } #pvc-parcours{color-scheme:light;--cs-red:#d81f26;--cs-ink:#161714;--cs-muted:#656760;--cs-paper:#f7f6f2;background:var(--cs-paper);color:var(--cs-ink);font:13px/1.5 'DM Sans',Arial,sans-serif;width:100%;isolation:isolate}#pvc-parcours *{box-sizing:border-box}#pvc-parcours [hidden]{display:none!important}#pvc-parcours button,#pvc-parcours input,#pvc-parcours select{font:inherit;color:inherit}#pvc-parcours button{cursor:pointer}#pvc-parcours button:disabled{cursor:not-allowed;opacity:.45}#pvc-parcours button{background:#fff;border:1px solid #dedfd9;border-radius:5px}#pvc-parcours input,#pvc-parcours select{background:#fff;border:1px solid #c9cbc4;border-radius:5px}#pvc-parcours button:hover:not(:disabled){border-color:#aaa}#pvc-parcours img{max-width:100%;display:block}#pvc-parcours h1,#pvc-parcours h2,#pvc-parcours h3,#pvc-parcours p{margin:0}#pvc-parcours .cs-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;background:#fff;border-bottom:1px solid #e2e2dc}#pvc-parcours .cs-logo{width:151px;height:40px;object-fit:contain}#pvc-parcours .cs-breadcrumb{font-size:12px;color:var(--cs-muted)}#pvc-parcours .cs-help{padding:9px 12px;display:flex;gap:7px;align-items:center;font-size:12px}#pvc-parcours .cs-heading{padding:20px 20px 17px;display:flex;justify-content:space-between;align-items:center;gap:20px}#pvc-parcours h1{font:800 24px/1.3 Manrope,sans-serif;letter-spacing:-.7px}#pvc-parcours .cs-subtitle{color:var(--cs-muted);margin-top:3px;font-size:12px}#pvc-parcours .cs-range{display:flex;align-items:center;gap:10px;font-size:12px}#pvc-parcours .cs-range select{padding:10px;min-width:135px;font-weight:600}#pvc-parcours .cs-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:0 20px 20px}#pvc-parcours .cs-step{display:flex;align-items:center;justify-content:center;gap:7px;min-height:43px;padding:8px 5px;border:0;border-radius:0;background:#e6e7e2;font-size:12px;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%,10px 50%)}#pvc-parcours .cs-step:first-child{clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%)}#pvc-parcours .cs-step[aria-current=step]{background:var(--cs-red);color:#fff;font-weight:700}#pvc-parcours .cs-step-number{font-weight:700}#pvc-parcours .cs-grid{display:grid;grid-template-columns:310px minmax(0,1fr) 210px;gap:14px;align-items:start;padding:0 20px 20px}#pvc-parcours .cs-panel{background:#fff;border:1px solid #dedfd9;border-radius:7px;overflow:clip;min-width:0}#pvc-parcours .cs-band{background:#151613;color:#fff;padding:12px 14px;font-weight:600;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px}#pvc-parcours .cs-band small{font-weight:400;font-size:11px;color:#d4d6cd}#pvc-parcours .cs-options-body{padding:15px}#pvc-parcours .cs-section{margin-top:24px;padding-top:19px;border-top:1px solid #e7e8e2}#pvc-parcours .cs-section:first-child{margin-top:0;padding-top:0;border:0}#pvc-parcours .cs-section h2{font-size:16px;line-height:1.35;font-weight:700;margin-bottom:5px;letter-spacing:-.2px}#pvc-parcours .cs-section h3{font-size:13px;font-weight:600;margin-bottom:7px}#pvc-parcours .cs-desc{font-size:12px;color:#66685f;line-height:1.5;margin-bottom:13px}#pvc-parcours .cs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#pvc-parcours .cs-card{border:1px solid #daddd4;border-radius:6px;overflow:hidden;background:#fff;min-width:0}#pvc-parcours .cs-card.is-selected{border:2px solid var(--cs-red)}#pvc-parcours .cs-card.is-disabled{opacity:.5}#pvc-parcours .cs-choice{border:0;border-radius:0;width:100%;height:100%;padding:9px;text-align:left;display:flex;flex-direction:column;gap:7px}#pvc-parcours .cs-card:has(.cs-zoom) .cs-choice{height:auto}#pvc-parcours .cs-card.is-selected .cs-choice{padding:8px}#pvc-parcours .cs-picture{height:91px;display:flex;justify-content:center;align-items:center;background:#f8f9f6;width:100%;border-radius:3px}#pvc-parcours .cs-picture img{width:100%;height:100%;object-fit:contain}#pvc-parcours .cs-picture svg{width:100%;height:100%;max-height:91px}#pvc-parcours .cs-choice-title{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:12px;font-weight:600;line-height:1.35;width:100%}#pvc-parcours .cs-radio{width:12px;height:12px;border:1px solid #b7bbb0;border-radius:100%;flex:none}#pvc-parcours .is-selected .cs-radio{border:4px solid var(--cs-red)}#pvc-parcours .cs-choice-desc{font-size:11px;color:#61645b;line-height:1.4}#pvc-parcours .cs-tag{font-size:11px;color:#ba1b22;line-height:1.3}#pvc-parcours .cs-zoom{width:100%;display:flex;justify-content:center;align-items:center;gap:5px;border:0;border-top:1px solid #eceee6;border-radius:0;padding:6px;font-size:11px;color:#6a6d62}#pvc-parcours .cs-tip{padding:11px 12px;background:#f5f6f0;border-left:2px solid #9ca590;margin-top:12px;font-size:12px;color:#53584c;line-height:1.5}#pvc-parcours .cs-tip strong{color:#292e24}#pvc-parcours .cs-included{display:flex;align-items:center;gap:12px;background:#f5f6f0;padding:12px;border-radius:5px}#pvc-parcours .cs-included img{width:80px;height:75px;object-fit:contain}#pvc-parcours .cs-included strong{display:block;font-size:13px}#pvc-parcours .cs-included span{display:block;font-size:12px;color:#636a5b;margin-top:3px}#pvc-parcours .cs-included em{font-style:normal;font-size:11px;color:#526442;display:block;margin-top:5px}#pvc-parcours .cs-color{height:43px;width:100%;display:flex;overflow:hidden;border-radius:3px;border:1px solid #d5d7d0}#pvc-parcours .cs-color>span{flex:1}#pvc-parcours .cs-color img{width:100%;height:100%;object-fit:cover}#pvc-parcours .cs-text-select{display:block;width:100%;padding:9px 10px;margin-top:6px}#pvc-parcours .cs-local-label{display:block;font-size:12px;margin-top:15px;font-weight:600}#pvc-parcours .cs-slider-label{display:block;font-size:12px;margin-top:14px}#pvc-parcours input[type=range]{accent-color:var(--cs-red);width:100%;margin:7px 0 0}#pvc-parcours .cs-scene,#pvc-parcours .cs-order{position:sticky;top:12px}#pvc-parcours .cs-view-tools{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:12px 12px 0;background:#fafbf8}#pvc-parcours .cs-view-choice{display:flex;padding:3px;background:#e9ebe5;border-radius:5px}#pvc-parcours .cs-view-choice button{border:0;background:transparent;padding:5px 9px;font-size:11px}#pvc-parcours .cs-view-choice button[aria-pressed=true]{background:#fff;box-shadow:0 1px 3px #00000014}#pvc-parcours .cs-enlarge{border:0;background:transparent;display:flex;align-items:center;gap:5px;font-size:11px;padding:7px}#pvc-parcours .cs-drawing{height:386px;padding:9px 12px;background:#fafbf8;display:flex;align-items:center;justify-content:center}#pvc-parcours .cs-drawing>svg{width:100%;height:100%;display:block}#pvc-parcours .cs-drawing-empty{font-size:13px;line-height:1.6;max-width:250px;text-align:center;color:#767a70}#pvc-parcours .cs-drawing-note{padding:0 14px 12px;background:#fafbf8;color:#666b61;text-align:center;font-size:11px}#pvc-parcours .cs-measures{padding:13px 14px;border-bottom:1px solid #e0e4d8}#pvc-parcours .cs-measure-title{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}#pvc-parcours .cs-measure-title h2{font-size:15px;font-weight:700;letter-spacing:-.2px}#pvc-parcours .cs-measure-title span{font-size:11px;color:#666b61;align-self:center}#pvc-parcours .cs-measure-help{font-size:12px;color:#656b5b;margin-bottom:12px}#pvc-parcours .cs-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#pvc-parcours .cs-field label{display:block;font-size:12px;font-weight:600;margin-bottom:5px}#pvc-parcours .cs-input{position:relative}#pvc-parcours .cs-input input{width:100%;min-width:0;padding:9px 38px 9px 10px;font-size:19px;font-weight:500;height:45px}#pvc-parcours .cs-input span{position:absolute;right:10px;top:13px;font-size:11px;pointer-events:none;color:#666b61}#pvc-parcours input[aria-invalid=true]{border-color:var(--cs-red);background:#fff8f7}#pvc-parcours .cs-conversion{font-size:11px;color:#666b61;margin-top:4px;display:block}#pvc-parcours .cs-bounds{font-size:11px;line-height:1.4;color:#666b61;margin-top:2px}#pvc-parcours .cs-error{font-size:12px;color:#b01b22;padding-top:7px;line-height:1.45}#pvc-parcours .cs-extra-measures{margin-top:14px;padding-top:13px;border-top:1px solid #e8ebe2}#pvc-parcours .cs-extra-measures h3{font-size:12px;font-weight:600;margin-bottom:8px}#pvc-parcours .cs-mini-label{font-size:11px;color:#666b61;padding-top:10px}#pvc-parcours .cs-order-body{padding:15px 13px}#pvc-parcours .cs-price-label{font-size:12px;color:#666c5f}#pvc-parcours .cs-price{font:800 30px/1.4 Manrope,sans-serif;letter-spacing:-1px}#pvc-parcours .cs-price small{font:400 11px 'DM Sans',sans-serif;letter-spacing:0;color:#666b61}#pvc-parcours .cs-demo-label{font-size:11px;color:#666b61;margin-top:1px}#pvc-parcours .cs-quantity{display:flex;align-items:center;justify-content:space-between;margin:15px 0;font-size:12px}#pvc-parcours .cs-quantity select{padding:5px 9px;min-width:55px}#pvc-parcours .cs-order-summary{padding:0 12px 12px}#pvc-parcours .cs-summary-group{border-top:1px solid #e4e8dc;padding:11px 0 0;margin-top:3px}#pvc-parcours .cs-summary-group summary{font-size:12px;font-weight:600;cursor:pointer;display:list-item;list-style-position:inside;padding-bottom:9px}#pvc-parcours .cs-summary-group summary span{display:block;font-size:11px;font-weight:400;color:#6d7464;padding-left:13px;margin-top:3px}#pvc-parcours .cs-summary-row{display:flex;gap:8px;justify-content:space-between;padding:6px 0;font-size:11px;line-height:1.4}#pvc-parcours .cs-summary-row>span{color:#717965}#pvc-parcours .cs-summary-row b{font-weight:500;text-align:right;max-width:66%}#pvc-parcours .cs-edit{border:0;background:transparent;font-size:11px;color:#ad151d;text-decoration:underline;padding:6px 0}#pvc-parcours .cs-recap{padding:3px 0}#pvc-parcours .cs-recap h3{font-size:13px;margin:20px 0 7px}#pvc-parcours .cs-recap h3:first-child{margin-top:0}#pvc-parcours .cs-recap .cs-summary-row{font-size:12px;padding:8px 0;border-bottom:1px solid #f0f2e9}#pvc-parcours .cs-actions{position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid #d9ded0;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -4px 17px #15230008}#pvc-parcours .cs-back{display:flex;gap:6px;align-items:center;padding:10px 14px;font-size:12px}#pvc-parcours .cs-forward{background:var(--cs-red);border-color:var(--cs-red);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 19px;font-size:13px;min-height:44px}#pvc-parcours .cs-forward:hover:not(:disabled){background:#b9181f;border-color:#b9181f}#pvc-parcours .cs-action-middle{font-size:12px;color:#727a67}#pvc-parcours .cs-mobile-total{display:none}#pvc-parcours .cs-status{margin:0 20px 15px;background:#f0f3e9;border:1px solid #dbe3cc;padding:11px 13px;font-size:12px;color:#465738;border-radius:5px}#pvc-parcours .cs-inline-feedback{margin:12px 14px 0;color:#b01b22;font-size:12px}#pvc-parcours dialog{padding:0;width:min(720px,calc(100% - 28px));max-height:none;border:1px solid #cbd1c1;border-radius:8px;background:#fff;color:#171b12;box-shadow:0 16px 65px #0004}#pvc-parcours dialog::backdrop{background:#171b1266}#pvc-parcours .cs-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 17px;border-bottom:1px solid #e1e6d8;font-size:14px;font-weight:600}#pvc-parcours .cs-dialog-close{padding:7px 10px;font-size:12px}#pvc-parcours .cs-dialog-content{padding:18px;display:flex;align-items:center;justify-content:center;background:#fafbf8}#pvc-parcours .cs-dialog-content>img{height:430px;max-height:100%;object-fit:contain}#pvc-parcours .cs-dialog-content>svg{height:490px;max-width:100%}#pvc-parcours .cs-dialog-desc{font-size:13px;line-height:1.6;color:#68725d;padding:14px 18px}#pvc-parcours .cs-raw-preview{padding:40px;text-align:center} @media(min-width:1250px){#pvc-parcours .cs-grid{grid-template-columns:340px minmax(0,1fr) 250px;gap:18px}#pvc-parcours .cs-drawing{height:410px}#pvc-parcours .cs-picture{height:104px}#pvc-parcours .cs-choice-title{font-size:13px}} @media(max-width:950px){#pvc-parcours .cs-grid{grid-template-columns:310px minmax(0,1fr);gap:13px;grid-template-areas:'options scene' 'options order'}#pvc-parcours .cs-options{grid-area:options}#pvc-parcours .cs-scene{grid-area:scene;position:static}#pvc-parcours .cs-order{grid-area:order;position:static}#pvc-parcours .cs-order-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}#pvc-parcours .cs-order-body{display:flex;align-items:center;justify-content:space-between;gap:12px}#pvc-parcours .cs-quantity{gap:12px;margin:0}#pvc-parcours .cs-drawing{height:345px}#pvc-parcours .cs-step{gap:4px;font-size:11px}#pvc-parcours .cs-step-number{display:none}#pvc-parcours .cs-breadcrumb{display:none}} @media(max-width:650px){#pvc-parcours .cs-head{padding:12px 14px}#pvc-parcours .cs-logo{width:130px;height:35px}#pvc-parcours .cs-help{font-size:11px;padding:8px}#pvc-parcours .cs-heading{padding:17px 14px;display:block}#pvc-parcours h1{font-size:22px}#pvc-parcours .cs-range{justify-content:space-between;margin-top:13px}#pvc-parcours .cs-range select{font-size:13px;padding:8px}#pvc-parcours .cs-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 14px 14px}#pvc-parcours .cs-step,#pvc-parcours .cs-step:first-child{clip-path:none;border-radius:4px;font-size:12px;min-height:40px}#pvc-parcours .cs-step-number{display:inline}#pvc-parcours .cs-grid{display:flex;flex-direction:column;padding:0 14px 15px;gap:14px}#pvc-parcours .cs-panel{width:100%}#pvc-parcours .cs-scene{order:0}#pvc-parcours .cs-options{order:1}#pvc-parcours .cs-order{order:2}#pvc-parcours .cs-drawing{height:295px;padding:8px 14px}#pvc-parcours .cs-measures{padding:14px}#pvc-parcours .cs-picture{height:100px}#pvc-parcours .cs-choice-title{font-size:13px}#pvc-parcours .cs-choice-desc{font-size:12px}#pvc-parcours .cs-order-summary{display:block}#pvc-parcours .cs-input input{font-size:18px;padding-right:33px}#pvc-parcours .cs-actions{padding:11px 14px;gap:9px;flex-wrap:wrap}#pvc-parcours .cs-forward{padding:11px 12px;font-size:12px;flex:1;gap:6px}#pvc-parcours .cs-back{padding:10px 7px;font-size:11px}#pvc-parcours .cs-action-middle{display:none}#pvc-parcours .cs-mobile-total{display:block;width:100%;font-size:11px;color:#707960}#pvc-parcours .cs-mobile-total strong{font-size:17px;color:#1b2313;padding-right:6px}#pvc-parcours .cs-status{margin:0 14px 14px}#pvc-parcours .cs-dialog-content>img{height:300px}#pvc-parcours .cs-dialog-content>svg{height:365px}#pvc-parcours .cs-dialog-desc{font-size:12px}} @media(pointer:coarse){#pvc-parcours .cs-zoom,#pvc-parcours .cs-edit,#pvc-parcours .cs-view-choice button,#pvc-parcours .cs-enlarge{min-height:44px}#pvc-parcours select{min-height:44px}} #pvc-parcours{--cs-paper:#f3f3f3;--cs-ink:#111;--cs-muted:#666;background:#f3f3f3;font-family:Arial,sans-serif;max-width:1520px;margin:auto} #pvc-parcours .cs-head{padding:13px 22px;border-bottom:3px solid #d81f26} #pvc-parcours .cs-logo{width:173px;height:45px} #pvc-parcours .cs-heading{padding:23px 18px 21px} #pvc-parcours h1{font:700 26px/1.25 Arial,sans-serif;letter-spacing:-.5px} #pvc-parcours .cs-subtitle{font-size:13px;margin-top:7px} #pvc-parcours .cs-steps{display:flex;gap:0;margin:0 16px 18px;filter:drop-shadow(0 2px 3px #0003)} #pvc-parcours .cs-step{flex:0 0 52px;margin-left:-7px;min-height:39px;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 34%,rgba(255,255,255,0) 35%),linear-gradient(180deg,#868c93 0%,#6e747b 55%,#5a5f66 100%);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%,13px 50%);border-radius:0;text-shadow:0 1px 1px #0004;padding:0 13px 0 20px;gap:7px} #pvc-parcours .cs-step:first-child{margin-left:0;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%);padding-left:13px} #pvc-parcours .cs-step[aria-current=step]{flex:1 1 auto;background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.08) 34%,rgba(0,0,0,0) 35%),linear-gradient(180deg,#e2413f 0%,#d81f26 55%,#a01218 100%)} #pvc-parcours .cs-step-name{display:none;white-space:nowrap} #pvc-parcours .cs-step[aria-current=step] .cs-step-name{display:inline} #pvc-parcours .cs-step-number{display:inline} #pvc-parcours .cs-grid{grid-template-columns:400px minmax(0,1fr) 280px;gap:16px;padding:0 16px 24px;grid-template-areas:'options scene order'} #pvc-parcours .cs-options{grid-area:options} #pvc-parcours .cs-scene{grid-area:scene} #pvc-parcours .cs-order{grid-area:order} #pvc-parcours .cs-panel{border:1px solid #ddd;border-radius:8px;overflow:hidden;background:#fff} #pvc-parcours .cs-options,#pvc-parcours .cs-order{display:flex;flex-direction:column;height:var(--cs-scene-height,580px);position:sticky;top:10px} #pvc-parcours .cs-band{background:#111;color:#fff;min-height:41px;padding:12px 14px;font-size:12px;font-weight:700;letter-spacing:.1px;text-transform:uppercase;flex:none} #pvc-parcours .cs-band small{font-size:11px;color:#bbb} #pvc-parcours .cs-options-body{padding:14px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#bbb transparent;flex:1;min-height:0} #pvc-parcours .cs-section{margin-top:19px;padding-top:16px;border-color:#eee} #pvc-parcours .cs-section:first-child{margin:0;padding:0} #pvc-parcours .cs-section h2{font-size:15px} #pvc-parcours .cs-desc{font-size:12px;color:#666} #pvc-parcours .cs-tip,#pvc-parcours .cs-included{background:#f5f5f5;border-color:#bbb;color:#555} #pvc-parcours .cs-tip strong,#pvc-parcours .cs-included strong{color:#222} #pvc-parcours .cs-included span,#pvc-parcours .cs-included em{color:#666} #pvc-parcours .cs-cards{gap:8px} #pvc-parcours .cs-cards:has([data-key=color]),#pvc-parcours .cs-cards:has([data-key=shape]),#pvc-parcours .cs-cards:has([data-key=finish]){grid-template-columns:repeat(3,minmax(0,1fr))} #pvc-parcours .cs-picture{height:94px;background:#fafafa} #pvc-parcours .cs-card:has([data-key=color]) .cs-picture{height:38px} #pvc-parcours .cs-color{height:38px} #pvc-parcours .cs-choice-title{font-size:12px} #pvc-parcours .cs-choice-desc{font-size:11px;color:#666} #pvc-parcours .cs-picture svg{max-height:94px} #pvc-parcours .cs-input input{font-size:16px;height:43px;padding:8px 33px 8px 10px} #pvc-parcours .cs-bounds{font-size:11px;color:#666} #pvc-parcours .cs-conversion{color:#555} #pvc-parcours .cs-dim-guide{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid #eee;font-size:12px} #pvc-parcours .cs-dim-guide button{padding:8px 10px;color:#444;font-size:12px} #pvc-parcours .cs-inline-measure{margin-top:12px;padding:12px;background:#f7f7f7;border-radius:4px} #pvc-parcours .cs-field-grid{gap:10px} #pvc-parcours .cs-pose-directe .cs-picture{height:100px} #pvc-parcours .cs-pose-directe .cs-choice{padding:7px;gap:5px} #pvc-parcours .cs-pose-directe .is-selected .cs-choice{padding:6px} #pvc-parcours .cs-pose-directe .cs-choice-desc{display:block} #pvc-parcours .cs-pose-directe .cs-zoom{padding:4px 6px;font-size:11px} #pvc-parcours .cs-pose-directe .cs-section{margin-top:15px;padding-top:12px} #pvc-parcours .cs-pose-directe .cs-section:first-child{margin:0;padding:0} #pvc-parcours .cs-pose-directe .cs-section h2{margin-bottom:9px} #pvc-parcours .cs-pose-reference{font-size:12px;line-height:1.4;color:#555;margin-bottom:10px} #pvc-parcours .cs-pose-reference strong{color:#333} #pvc-parcours .cs-measure-link{font-size:12px;border:0;background:#fff;color:#555;text-decoration:underline;padding:7px 0;margin-top:4px} #pvc-parcours .cs-profile-context{font-size:12px;color:#666;margin-bottom:14px} #pvc-parcours .cs-profile-context+.cs-section{margin-top:0;padding-top:0;border:0} #pvc-parcours .cs-view-tools{padding:9px 12px;background:#fafafa;justify-content:center} #pvc-parcours .cs-view-choice{background:#e9e9e9} #pvc-parcours .cs-view-choice button{font-size:11px;padding:5px 12px} #pvc-parcours .cs-drawing{height:426px;padding:8px 16px;background:#fafafa} #pvc-parcours .cs-drawing-note{background:#fff;padding:2px 14px 10px;font-size:11px;color:#777} #pvc-parcours .cs-scene-nav{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap;padding:12px 13px 9px;border-top:1px solid #eee} #pvc-parcours .cs-scene-nav button{min-height:38px;font-size:12px;font-weight:700;color:#fff;border:0;padding:9px 14px;background:linear-gradient(180deg,#9aa0a6,#6e7379)} #pvc-parcours .cs-scene-nav .cs-prev{clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);padding-left:23px;border-radius:0} #pvc-parcours .cs-scene-nav .cs-next{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);padding-right:23px;border-radius:0;background:linear-gradient(180deg,#e2413f,#b3161c)} #pvc-parcours .cs-nav-tools{display:flex;align-items:center;gap:7px} #pvc-parcours .cs-scene-nav .cs-enlarge{background:#fff;color:#555;min-width:34px;padding:5px} #pvc-parcours .cs-res-content{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#bbb transparent;min-height:0;flex:1} #pvc-parcours .cs-order-summary{padding:3px 13px 0;display:block} #pvc-parcours .cs-recap-link{display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;border-bottom:1px solid #eee;border-radius:0;padding:7px 0;width:100%;text-align:left;background:#fff;min-height:44px} #pvc-parcours .cs-recap-link>span:first-child{min-width:0} #pvc-parcours .cs-recap-link small{display:block;color:#777;font-size:11px;line-height:1.3;font-weight:400} #pvc-parcours .cs-recap-link strong{display:block;color:#222;font-size:12px;line-height:1.35;font-weight:600;margin-top:2px} #pvc-parcours .cs-modifier{font-size:11px;color:#777;font-weight:400;flex:none} #pvc-parcours .cs-recap-link:hover .cs-modifier{color:#d81f26} #pvc-parcours .cs-quantity{margin:0;padding:8px 13px;border-top:1px solid #eee;display:flex;gap:6px;font-size:12px;justify-content:space-between} #pvc-parcours .cs-quantity select{padding:4px 6px;min-width:52px} #pvc-parcours .cs-detail{border-top:1px solid #eee;padding:10px 13px;font-size:12px} #pvc-parcours .cs-detail>summary{cursor:pointer;font-weight:600} #pvc-parcours .cs-detail-body h3{font-size:12px;margin:13px 0 6px} #pvc-parcours .cs-detail-body .cs-summary-row{font-size:11px} #pvc-parcours .cs-order-bottom{padding:13px;border-top:1px solid #ddd;background:#fff;flex:none} #pvc-parcours .cs-price{font:800 29px/1.2 Arial,sans-serif;color:#d81f26;letter-spacing:-.7px} #pvc-parcours .cs-price small{font:400 11px Arial,sans-serif;color:#666} #pvc-parcours .cs-demo-label{font-size:11px;color:#777;margin:5px 0 10px} #pvc-parcours .cs-cart{width:100%;background:#d81f26;border-color:#d81f26;color:#fff;font-size:12px;font-weight:700;min-height:42px;display:flex;justify-content:center;align-items:center;gap:8px;text-transform:uppercase;padding:10px} #pvc-parcours .cs-cart:hover{background:#b5181f} #pvc-parcours .cs-validation{padding:10px 13px;border-bottom:1px solid #efb6b6;background:#fff5f5;color:#a5161c;font-size:12px;flex:none} #pvc-parcours .cs-validation button{background:transparent;border:0;color:#a5161c;text-decoration:underline;padding:5px 0;font-size:12px} #pvc-parcours .cs-status{background:#fff;border:1px solid #ddd;color:#444;margin:0 16px 14px} #pvc-parcours .cs-mobile-bar{display:none} @media(min-width:901px) and (max-width:1150px){#pvc-parcours .cs-grid{grid-template-columns:350px minmax(0,1fr) 245px;gap:13px}#pvc-parcours .cs-scene-nav{justify-content:center}#pvc-parcours .cs-nav-tools{order:2;justify-content:center;width:100%}#pvc-parcours .cs-prev,#pvc-parcours .cs-next{flex:1}#pvc-parcours .cs-drawing{height:393px}} @media(max-width:900px){#pvc-parcours .cs-grid{display:flex;flex-direction:column;gap:14px;padding:0 16px 18px}#pvc-parcours .cs-panel{width:100%;height:auto;position:static}#pvc-parcours .cs-scene{order:0}#pvc-parcours .cs-options{order:1}#pvc-parcours .cs-order{order:2}#pvc-parcours .cs-options-body,#pvc-parcours .cs-res-content{overflow:visible}#pvc-parcours .cs-drawing{height:310px}#pvc-parcours .cs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}#pvc-parcours .cs-order-summary{display:block}#pvc-parcours .cs-mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid #ddd;padding:11px 16px;box-shadow:0 -3px 12px #0001}#pvc-parcours .cs-mobile-bar strong{display:block;color:#d81f26;font-size:19px;white-space:nowrap}#pvc-parcours .cs-mobile-bar small{font-size:11px;color:#777}#pvc-parcours .cs-mobile-bar .cs-cart{width:auto;min-width:140px}#pvc-parcours .cs-step-number{display:inline}} @media(max-width:650px){#pvc-parcours .cs-head{padding:10px 13px}#pvc-parcours .cs-logo{width:139px;height:37px}#pvc-parcours .cs-heading{padding:19px 14px 17px}#pvc-parcours h1{font-size:22px}#pvc-parcours .cs-steps{margin:0 14px 14px;gap:0}#pvc-parcours .cs-step,#pvc-parcours .cs-step:first-child{min-height:44px;flex:0 0 31px;margin-left:-4px;font-size:11px;border-radius:0;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%,7px 50%);padding:0 7px 0 10px}#pvc-parcours .cs-step:first-child{margin-left:0;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%);padding-left:6px}#pvc-parcours .cs-step[aria-current=step]{flex:1;gap:4px}#pvc-parcours .cs-grid{padding:0 14px 14px}#pvc-parcours .cs-drawing{height:269px}#pvc-parcours .cs-band{font-size:11px}#pvc-parcours .cs-band small{display:none}#pvc-parcours .cs-scene-nav{gap:6px;padding:10px 11px;justify-content:center}#pvc-parcours .cs-prev,#pvc-parcours .cs-next{flex:1}#pvc-parcours .cs-nav-tools{order:2;justify-content:center;width:100%}#pvc-parcours .cs-picture{height:90px}#pvc-parcours .cs-cards:has([data-key=color]),#pvc-parcours .cs-cards:has([data-key=shape]),#pvc-parcours .cs-cards:has([data-key=finish]){grid-template-columns:repeat(2,minmax(0,1fr))}#pvc-parcours .cs-choice-title{font-size:12px}#pvc-parcours .cs-mobile-bar{gap:8px;padding:10px 14px}#pvc-parcours .cs-mobile-bar .cs-cart{font-size:11px;min-width:125px}#pvc-parcours .cs-mobile-bar strong{font-size:18px}} #onlybaie-perspective #pvc-parcours {background:var(--op-paper);--cs-paper:var(--op-paper);font-family:'DM Sans',Arial,sans-serif;padding:0 8px 26px;} #onlybaie-perspective #pvc-parcours .cs-site-breadcrumb {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px 0;color:#70716c;font-size:12px;} #onlybaie-perspective #pvc-parcours .cs-site-breadcrumb nav {display:flex;align-items:center;flex-wrap:wrap;gap:10px;} #onlybaie-perspective #pvc-parcours .cs-site-breadcrumb a:hover {text-decoration:underline;color:#d81f26;} #onlybaie-perspective #pvc-parcours .cs-site-breadcrumb .cs-help {background:transparent;border:0;padding:4px 0;} #onlybaie-perspective #pvc-parcours .cs-heading {padding:18px 18px 22px;} #onlybaie-perspective #pvc-parcours h1 {font-family:Manrope,Arial,sans-serif;font-size:26px;letter-spacing:-.8px;font-weight:700;} #onlybaie-perspective #pvc-parcours .cs-options,#onlybaie-perspective #pvc-parcours .cs-order {top:calc(var(--op-sticky-offset,144px) + 12px);} #onlybaie-perspective #pvc-parcours .cs-options {scroll-margin-top:12px;} #onlybaie-perspective #pvc-parcours .cs-drawing {height:clamp(260px,calc(100dvh - 580px),426px);} #onlybaie-perspective #pvc-parcours .cs-site-breadcrumb svg {width:16px;height:16px;} #onlybaie-perspective #pvc-parcours .cs-mobile-bar {z-index:40;} @media(max-width:900px){ #onlybaie-perspective #pvc-parcours {padding:0;} #onlybaie-perspective #pvc-parcours .cs-drawing {height:310px;} #onlybaie-perspective #pvc-parcours .cs-options,#onlybaie-perspective #pvc-parcours .cs-order {top:auto;} #onlybaie-perspective #pvc-parcours .cs-site-breadcrumb {padding:14px 16px 0;} } @media(max-width:650px){ #onlybaie-perspective #pvc-parcours .cs-site-breadcrumb {padding:13px 14px 0;font-size:11px;} #onlybaie-perspective #pvc-parcours .cs-site-breadcrumb nav {gap:6px;} #onlybaie-perspective #pvc-parcours .cs-site-breadcrumb .cs-help {display:none;} #onlybaie-perspective #pvc-parcours .cs-heading {padding:17px 14px 19px;} #onlybaie-perspective #pvc-parcours h1 {font-size:22px;} #onlybaie-perspective #pvc-parcours .cs-drawing {height:269px;} } #onlybaie-perspective .op-top, #onlybaie-perspective .op-header { font-family: DM Sans, Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: normal; } #onlybaie-perspective .op-top { color: #ccc; background: #1e1e1e; min-height: 0; padding: 7px 0; font-size: 12px; display: block; } #onlybaie-perspective .op-base-top-inner { justify-content: space-between; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; } #onlybaie-perspective .op-base-top-left, #onlybaie-perspective .op-base-top-right { align-items: center; gap: 20px; display: flex; } #onlybaie-perspective .op-base-top-right button { color: inherit; background: none; border: 0; padding: 0; font-size: 12px; } #onlybaie-perspective .op-base-rating { align-items: center; gap: 6px; display: inline-flex; } #onlybaie-perspective .op-base-rating > span:first-child { color: #fbbc04; letter-spacing: 1px; white-space: nowrap; font-size: 13px; } #onlybaie-perspective .op-base-rating > span:last-child { opacity: .85; } #onlybaie-perspective .op-base-top-right a:hover, #onlybaie-perspective .op-base-top-right button:hover { color: #fff; } #onlybaie-perspective .op-header { background: #fff; box-shadow: 0 2px 12px #00000017; } #onlybaie-perspective .op-head { grid-template-columns: 250px minmax(0, 1fr) auto; align-items: center; gap: 20px; max-width: 1280px; min-height: 0; margin: 0 auto; padding: 10px 20px; display: grid; } #onlybaie-perspective .op-logo { flex: initial; grid-area: auto; width: auto; min-width: 0; max-width: 100%; } #onlybaie-perspective .op-logo:after { display: none; } #onlybaie-perspective .op-logo img { object-fit: contain; width: auto; max-width: 100%; height: 62px; } #onlybaie-perspective .op-head .op-search { width: 100%; min-width: 0; max-width: none; box-shadow: none; background: none; border: 0; border-radius: 0; align-items: stretch; display: flex; } #onlybaie-perspective .op-search input { background: #fff; border: 2px solid #e0e0e0; border-right: 0; outline: none; flex: 1; min-width: 0; padding: 11px 14px; font-size: 14px; } #onlybaie-perspective .op-search input:focus { border-color: #d81f26; } #onlybaie-perspective .op-search button { color: #fff; background: #d81f26; border: 0; border-radius: 0 6px 6px 0; flex: none; padding: 11px 22px; font-size: 16px; font-weight: 400; } #onlybaie-perspective .op-search button:hover { background: #a8151b; } #onlybaie-perspective .op-head-tools { flex-direction: row; align-items: center; gap: 6px; width: auto; display: flex; } #onlybaie-perspective .op-base-action { color: #555; white-space: nowrap; background: none; border: 0; border-radius: 6px; flex-direction: column; align-items: center; gap: 3px; padding: 8px 12px; font-size: 11px; font-weight: 400; line-height: normal; display: flex; } #onlybaie-perspective .op-base-action:hover { color: #d81f26; background: #f5f5f5; } #onlybaie-perspective .op-base-action svg { width: 22px; height: 22px; } #onlybaie-perspective .op-base-cart { position: relative; } #onlybaie-perspective .op-base-cart-badge { color: #fff; background: #d81f26; border-radius: 50%; justify-content: center; align-items: center; width: 17px; height: 17px; font-size: 10px; font-weight: 700; display: flex; position: absolute; top: 4px; right: 8px; } #onlybaie-perspective .op-head .op-phone { white-space: nowrap; border-left: 1px solid #e0e0e0; margin-left: 6px; padding-left: 18px; display: block; } #onlybaie-perspective .op-head .op-phone small { color: #777; font-size: 10px; display: block; } #onlybaie-perspective .op-head .op-phone strong { letter-spacing: normal; color: #1e1e1e; font-size: 16px; font-weight: 700; } #onlybaie-perspective .op-head .op-base-burger { color: #1e1e1e; background: none; border: 0; min-height: 0; padding: 8px; display: none; } #onlybaie-perspective .op-base-burger svg { width: 24px; height: 24px; } #onlybaie-perspective .op-head a:focus-visible, #onlybaie-perspective .op-head button:focus-visible, #onlybaie-perspective .op-base-top-right button:focus-visible { outline-offset: 2px; outline: 2px solid #d81f26; } #onlybaie-perspective .op-nav { background: #f7f7f8; border-top: 3px solid #d81f26; border-bottom: 2px solid #d81f26; justify-content: flex-start; align-items: stretch; gap: 0; min-height: 0; padding: 0 max(20px, 50% - 620px); display: flex; } #onlybaie-perspective .op-nav > button, #onlybaie-perspective .op-nav > a { text-transform: none; letter-spacing: -.2px; white-space: nowrap; align-items: center; min-height: 0; padding: 18px 13px; font-family: Manrope, DM Sans, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; display: flex; } #onlybaie-perspective .op-nav > button:after { content: "▾"; color: inherit; margin-left: 5px; font-size: 9px; } #onlybaie-perspective .op-nav > button:hover { color: #d81f26; background: #fff; box-shadow: inset 0 -3px #d81f26; } #onlybaie-perspective .op-mega { border-top: 0; } @media (width <= 1200px) and (width >= 981px) { #onlybaie-perspective .op-nav > button, #onlybaie-perspective .op-nav > a { padding-inline: 9px; font-size: 13px; } } @media (width <= 980px) { #onlybaie-perspective .op-header .op-base-desktop { display: none !important; } #onlybaie-perspective .op-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; } #onlybaie-perspective .op-head .op-base-burger { display: inline-flex; } #onlybaie-perspective .op-nav { display: none; } #onlybaie-perspective .op-nav.op-open { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 20px; display: grid; } #onlybaie-perspective .op-nav > button, #onlybaie-perspective .op-nav > a { white-space: normal; text-align: left; padding: 13px 8px; font-size: 14px; } #onlybaie-perspective .op-base-top-left > span:last-child { display: none; } #onlybaie-perspective .op-base-top-right { gap: 12px; } #onlybaie-perspective .op-base-top-right > button { display: none; } } @media (width <= 650px) { #onlybaie-perspective .op-base-top-inner { justify-content: center; gap: 8px; } #onlybaie-perspective .op-base-top-left, #onlybaie-perspective .op-head .op-phone { display: none; } } html { scroll-behavior: smooth; } body { background: #f7f6f2; margin: 0; } #onlybaie-perspective .op-hero { background: #12221b; min-height: clamp(650px, 100svh - 210px, 820px); } #onlybaie-perspective .op-hero-image { object-position: 58% 54%; width: 81%; height: 100%; animation: none; left: auto; right: 0; mask-image: linear-gradient(90deg, #0000, #000 22%); } #onlybaie-perspective .op-hero:after { background: linear-gradient(90deg, #101e18 0%, #101e18f2 16%, #101e18b8 32%, #101e1852 49%, #101e1808 70%), linear-gradient(0deg, #101e1866, #0000 35%); } #onlybaie-perspective .op-hero-content { max-width: 900px; padding-block: 70px 150px; } #onlybaie-perspective .op-hero h1 { font-size: clamp(68px, 6.8vw, 116px); } #onlybaie-perspective .op-hero-content > p { color: #f1f3ed; } #onlybaie-perspective .op-photo-signature { border-left: 1px solid #fff6; max-width: 310px; padding-left: 19px; } #onlybaie-perspective .op-photo-signature strong { letter-spacing: .11em; text-transform: uppercase; font-size: 12px; font-weight: 500; display: block; } #onlybaie-perspective .op-photo-signature p { color: #e0e7db; margin-top: 7px; font-size: 12px; } #onlybaie-perspective .op-hero-bottom { bottom: 30px; } #onlybaie-perspective .op-editorial { background: #243128; grid-template-columns: 1.15fr 1fr; min-height: 650px; } #onlybaie-perspective .op-editorial-photo { min-height: 650px; } #onlybaie-perspective .op-editorial-photo > img { object-position: 49% 58%; } #onlybaie-perspective .op-editorial-label { padding: 11px 16px; font-size: 12px; bottom: 30px; left: 30px; } #onlybaie-perspective .op-guide { border-top: 0; flex-direction: column; padding-top: 0; display: flex; } #onlybaie-perspective .op-guide > .op-text-link { align-self: flex-start; margin-top: auto; } #onlybaie-perspective .op-guide-photo { aspect-ratio: 4 / 3; background: #e2e6de; margin-bottom: 24px; overflow: hidden; } #onlybaie-perspective .op-guide-photo img { object-fit: cover; height: 100%; transition: transform .9s cubic-bezier(.2, .6, .3, 1); } #onlybaie-perspective .op-guide:hover .op-guide-photo img { transform: scale(1.025); } #onlybaie-perspective .op-guide-photo[data-ambiance="renovation"] img { object-position: 51% 42%; } #onlybaie-perspective .op-guide h3 { max-width: 360px; } #onlybaie-perspective .op-guide > p { max-width: 370px; } @media (width >= 1700px) { #onlybaie-perspective .op-hero-image { width: 76%; } #onlybaie-perspective .op-hero:after { background: linear-gradient(90deg, #101e18 0%, #101e18f2 20%, #101e18ad 36%, #101e181c 59%, #0000 75%), linear-gradient(0deg, #101e184d, #0000 36%); } } @media (width <= 850px) { #onlybaie-perspective .op-hero { min-height: 740px; } #onlybaie-perspective .op-hero-image { object-position: 65% 50%; width: 100%; mask-image: none; } #onlybaie-perspective .op-hero:after { background: linear-gradient(90deg, #101e18d4, #101e186b 65%, #101e1833), linear-gradient(0deg, #101e18c4, #0000 60%); } #onlybaie-perspective .op-hero-content { max-width: 750px; padding-block: 62px 190px; } #onlybaie-perspective .op-editorial { grid-template-columns: 1fr; } #onlybaie-perspective .op-editorial-photo { min-height: 520px; } #onlybaie-perspective .op-guide-photo { aspect-ratio: 3 / 2; } } @media (width <= 550px) { #onlybaie-perspective .op-hero { align-items: flex-start; min-height: 795px; } #onlybaie-perspective .op-hero-image { object-position: 55% 55%; width: 100%; height: 55%; top: auto; bottom: 0; mask-image: linear-gradient(#0000, #000 22%); } #onlybaie-perspective .op-hero:after { background: linear-gradient(#101e18 0% 27%, #101e18ef 39%, #101e1899 52%, #101e1805 73%, #101e18a8 100%); } #onlybaie-perspective .op-hero-content { width: 100%; padding-block: 48px 390px; } #onlybaie-perspective .op-hero h1 { margin-block: 24px 22px; font-size: clamp(40px, 12.7vw, 69px); line-height: 1.05; } #onlybaie-perspective .op-hero-content > p { max-width: 340px; font-size: 15px; } #onlybaie-perspective .op-hero-actions { gap: 17px 25px; } #onlybaie-perspective .op-hero-actions .op-text-link { font-size: 12px; } #onlybaie-perspective .op-hero-bottom { gap: 0; bottom: 20px; } #onlybaie-perspective .op-photo-signature { display: none; } #onlybaie-perspective .op-editorial-photo { min-height: 420px; } #onlybaie-perspective .op-editorial-label { bottom: 20px; left: 20px; } #onlybaie-perspective .op-guide-photo { margin-bottom: 20px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #onlybaie-perspective .op-guide-photo img { transition: none; } } html { scroll-padding-top: var(--op-sticky-offset, 144px); } #onlybaie-perspective .op-header { transition: box-shadow .3s; position: sticky; top: 0; } #onlybaie-perspective .op-header.op-is-stuck { box-shadow: 0 8px 28px #14171424; } #onlybaie-perspective .op-menu-panel { position: relative; } #onlybaie-perspective .op-mega { max-height: calc(100vh - var(--op-sticky-offset, 144px) - 10px); max-height: calc(100dvh - var(--op-sticky-offset, 144px) - 10px); overscroll-behavior-y: contain; overflow-y: auto; } #onlybaie-perspective main [id] { scroll-margin-top: 20px; } #onlybaie-perspective [data-op-reveal-state="pending"] { opacity: 0; } @media (width <= 980px) { html { scroll-padding-top: var(--op-sticky-offset, 82px); } #onlybaie-perspective .op-menu-panel { max-height: calc(100vh - var(--op-sticky-offset, 82px)); max-height: calc(100dvh - var(--op-sticky-offset, 82px)); overscroll-behavior-y: contain; background: #fff; position: absolute; top: 100%; left: 0; right: 0; overflow-y: auto; box-shadow: 0 14px 25px #14171420; } #onlybaie-perspective .op-mega { max-height: none; position: relative; top: auto; overflow: visible; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #onlybaie-perspective [data-op-entrance] { opacity: 1 !important; clip-path: none !important; transform: none !important; } } @media print { html { scroll-padding-top: 0; } #onlybaie-perspective .op-header { box-shadow: none; position: relative; } #onlybaie-perspective [data-op-entrance] { opacity: 1 !important; clip-path: none !important; transform: none !important; } } #onlybaie-perspective .op-mega[data-family="garage"] .op-model-list { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; } #onlybaie-perspective .op-mega[data-family="garage"] .op-model-list .op-model-card { background: #fff; flex-direction: column; justify-content: flex-start; gap: 0; display: flex; } #onlybaie-perspective .op-mega[data-family="garage"] .op-model-caption { box-sizing: border-box; flex: 1; align-content: start; width: 100%; min-height: 74px; } #onlybaie-perspective .op-garage-note { color: #717569; margin: 14px 0 0; font-size: 10px; display: none; } #onlybaie-perspective .op-mega[data-family="garage"] .op-garage-note { display: block; } @media (width >= 1280px) { #onlybaie-perspective .op-mega[data-family="garage"] .op-model-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (width <= 980px) { #onlybaie-perspective .op-mega[data-family="garage"] .op-mega-content { grid-template-columns: 1fr; } #onlybaie-perspective .op-mega[data-family="garage"] .op-mega-intro { border-right: 0; padding-right: 0; } #onlybaie-perspective .op-mega[data-family="garage"] .op-menu-ranges { display: none; } #onlybaie-perspective .op-mega[data-family="garage"] .op-model-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (width <= 550px) { #onlybaie-perspective .op-mega[data-family="garage"] .op-model-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } #volet-parcours{color-scheme:light;--cs-red:#d81f26;--cs-ink:#161714;--cs-muted:#656760;--cs-paper:#f7f6f2;background:var(--cs-paper);color:var(--cs-ink);font:13px/1.5 'DM Sans',Arial,sans-serif;width:100%;isolation:isolate}#volet-parcours *{box-sizing:border-box}#volet-parcours [hidden]{display:none!important}#volet-parcours button,#volet-parcours input,#volet-parcours select{font:inherit;color:inherit}#volet-parcours button{cursor:pointer}#volet-parcours button:disabled{cursor:not-allowed;opacity:.45}#volet-parcours button{background:#fff;border:1px solid #dedfd9;border-radius:5px}#volet-parcours input,#volet-parcours select{background:#fff;border:1px solid #c9cbc4;border-radius:5px}#volet-parcours button:hover:not(:disabled){border-color:#aaa}#volet-parcours img{max-width:100%;display:block}#volet-parcours h1,#volet-parcours h2,#volet-parcours h3,#volet-parcours p{margin:0}#volet-parcours .cs-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;background:#fff;border-bottom:1px solid #e2e2dc}#volet-parcours .cs-logo{width:151px;height:40px;object-fit:contain}#volet-parcours .cs-breadcrumb{font-size:12px;color:var(--cs-muted)}#volet-parcours .cs-help{padding:9px 12px;display:flex;gap:7px;align-items:center;font-size:12px}#volet-parcours .cs-heading{padding:20px 20px 17px;display:flex;justify-content:space-between;align-items:center;gap:20px}#volet-parcours h1{font:800 24px/1.3 Manrope,sans-serif;letter-spacing:-.7px}#volet-parcours .cs-subtitle{color:var(--cs-muted);margin-top:3px;font-size:12px}#volet-parcours .cs-range{display:flex;align-items:center;gap:10px;font-size:12px}#volet-parcours .cs-range select{padding:10px;min-width:135px;font-weight:600}#volet-parcours .cs-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:0 20px 20px}#volet-parcours .cs-step{display:flex;align-items:center;justify-content:center;gap:7px;min-height:43px;padding:8px 5px;border:0;border-radius:0;background:#e6e7e2;font-size:12px;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%,10px 50%)}#volet-parcours .cs-step:first-child{clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%)}#volet-parcours .cs-step[aria-current=step]{background:var(--cs-red);color:#fff;font-weight:700}#volet-parcours .cs-step-number{font-weight:700}#volet-parcours .cs-grid{display:grid;grid-template-columns:310px minmax(0,1fr) 210px;gap:14px;align-items:start;padding:0 20px 20px}#volet-parcours .cs-panel{background:#fff;border:1px solid #dedfd9;border-radius:7px;overflow:clip;min-width:0}#volet-parcours .cs-band{background:#151613;color:#fff;padding:12px 14px;font-weight:600;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px}#volet-parcours .cs-band small{font-weight:400;font-size:11px;color:#d4d6cd}#volet-parcours .cs-options-body{padding:15px}#volet-parcours .cs-section{margin-top:24px;padding-top:19px;border-top:1px solid #e7e8e2}#volet-parcours .cs-section:first-child{margin-top:0;padding-top:0;border:0}#volet-parcours .cs-section h2{font-size:16px;line-height:1.35;font-weight:700;margin-bottom:5px;letter-spacing:-.2px}#volet-parcours .cs-section h3{font-size:13px;font-weight:600;margin-bottom:7px}#volet-parcours .cs-desc{font-size:12px;color:#66685f;line-height:1.5;margin-bottom:13px}#volet-parcours .cs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}#volet-parcours .cs-card{border:1px solid #daddd4;border-radius:6px;overflow:hidden;background:#fff;min-width:0}#volet-parcours .cs-card.is-selected{border:2px solid var(--cs-red)}#volet-parcours .cs-card.is-disabled{opacity:.5}#volet-parcours .cs-choice{border:0;border-radius:0;width:100%;height:100%;padding:9px;text-align:left;display:flex;flex-direction:column;gap:7px}#volet-parcours .cs-card:has(.cs-zoom) .cs-choice{height:auto}#volet-parcours .cs-card.is-selected .cs-choice{padding:8px}#volet-parcours .cs-picture{height:91px;display:flex;justify-content:center;align-items:center;background:#f8f9f6;width:100%;border-radius:3px}#volet-parcours .cs-picture img{width:100%;height:100%;object-fit:contain}#volet-parcours .cs-picture svg{width:100%;height:100%;max-height:91px}#volet-parcours .cs-choice-title{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:12px;font-weight:600;line-height:1.35;width:100%}#volet-parcours .cs-radio{width:12px;height:12px;border:1px solid #b7bbb0;border-radius:100%;flex:none}#volet-parcours .is-selected .cs-radio{border:4px solid var(--cs-red)}#volet-parcours .cs-choice-desc{font-size:11px;color:#61645b;line-height:1.4}#volet-parcours .cs-tag{font-size:11px;color:#ba1b22;line-height:1.3}#volet-parcours .cs-zoom{width:100%;display:flex;justify-content:center;align-items:center;gap:5px;border:0;border-top:1px solid #eceee6;border-radius:0;padding:6px;font-size:11px;color:#6a6d62}#volet-parcours .cs-tip{padding:11px 12px;background:#f5f6f0;border-left:2px solid #9ca590;margin-top:12px;font-size:12px;color:#53584c;line-height:1.5}#volet-parcours .cs-tip strong{color:#292e24}#volet-parcours .cs-included{display:flex;align-items:center;gap:12px;background:#f5f6f0;padding:12px;border-radius:5px}#volet-parcours .cs-included img{width:80px;height:75px;object-fit:contain}#volet-parcours .cs-included strong{display:block;font-size:13px}#volet-parcours .cs-included span{display:block;font-size:12px;color:#636a5b;margin-top:3px}#volet-parcours .cs-included em{font-style:normal;font-size:11px;color:#526442;display:block;margin-top:5px}#volet-parcours .cs-color{height:43px;width:100%;display:flex;overflow:hidden;border-radius:3px;border:1px solid #d5d7d0}#volet-parcours .cs-color>span{flex:1}#volet-parcours .cs-color img{width:100%;height:100%;object-fit:cover}#volet-parcours .cs-text-select{display:block;width:100%;padding:9px 10px;margin-top:6px}#volet-parcours .cs-local-label{display:block;font-size:12px;margin-top:15px;font-weight:600}#volet-parcours .cs-slider-label{display:block;font-size:12px;margin-top:14px}#volet-parcours input[type=range]{accent-color:var(--cs-red);width:100%;margin:7px 0 0}#volet-parcours .cs-scene,#volet-parcours .cs-order{position:sticky;top:12px}#volet-parcours .cs-view-tools{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:12px 12px 0;background:#fafbf8}#volet-parcours .cs-view-choice{display:flex;padding:3px;background:#e9ebe5;border-radius:5px}#volet-parcours .cs-view-choice button{border:0;background:transparent;padding:5px 9px;font-size:11px}#volet-parcours .cs-view-choice button[aria-pressed=true]{background:#fff;box-shadow:0 1px 3px #00000014}#volet-parcours .cs-enlarge{border:0;background:transparent;display:flex;align-items:center;gap:5px;font-size:11px;padding:7px}#volet-parcours .cs-drawing{height:386px;padding:9px 12px;background:#fafbf8;display:flex;align-items:center;justify-content:center}#volet-parcours .cs-drawing>svg{width:100%;height:100%;display:block}#volet-parcours .cs-drawing-empty{font-size:13px;line-height:1.6;max-width:250px;text-align:center;color:#767a70}#volet-parcours .cs-drawing-note{padding:0 14px 12px;background:#fafbf8;color:#666b61;text-align:center;font-size:11px}#volet-parcours .cs-measures{padding:13px 14px;border-bottom:1px solid #e0e4d8}#volet-parcours .cs-measure-title{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}#volet-parcours .cs-measure-title h2{font-size:15px;font-weight:700;letter-spacing:-.2px}#volet-parcours .cs-measure-title span{font-size:11px;color:#666b61;align-self:center}#volet-parcours .cs-measure-help{font-size:12px;color:#656b5b;margin-bottom:12px}#volet-parcours .cs-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#volet-parcours .cs-field label{display:block;font-size:12px;font-weight:600;margin-bottom:5px}#volet-parcours .cs-input{position:relative}#volet-parcours .cs-input input{width:100%;min-width:0;padding:9px 38px 9px 10px;font-size:19px;font-weight:500;height:45px}#volet-parcours .cs-input span{position:absolute;right:10px;top:13px;font-size:11px;pointer-events:none;color:#666b61}#volet-parcours input[aria-invalid=true]{border-color:var(--cs-red);background:#fff8f7}#volet-parcours .cs-conversion{font-size:11px;color:#666b61;margin-top:4px;display:block}#volet-parcours .cs-bounds{font-size:11px;line-height:1.4;color:#666b61;margin-top:2px}#volet-parcours .cs-error{font-size:12px;color:#b01b22;padding-top:7px;line-height:1.45}#volet-parcours .cs-extra-measures{margin-top:14px;padding-top:13px;border-top:1px solid #e8ebe2}#volet-parcours .cs-extra-measures h3{font-size:12px;font-weight:600;margin-bottom:8px}#volet-parcours .cs-mini-label{font-size:11px;color:#666b61;padding-top:10px}#volet-parcours .cs-order-body{padding:15px 13px}#volet-parcours .cs-price-label{font-size:12px;color:#666c5f}#volet-parcours .cs-price{font:800 30px/1.4 Manrope,sans-serif;letter-spacing:-1px}#volet-parcours .cs-price small{font:400 11px 'DM Sans',sans-serif;letter-spacing:0;color:#666b61}#volet-parcours .cs-demo-label{font-size:11px;color:#666b61;margin-top:1px}#volet-parcours .cs-quantity{display:flex;align-items:center;justify-content:space-between;margin:15px 0;font-size:12px}#volet-parcours .cs-quantity select{padding:5px 9px;min-width:55px}#volet-parcours .cs-order-summary{padding:0 12px 12px}#volet-parcours .cs-summary-group{border-top:1px solid #e4e8dc;padding:11px 0 0;margin-top:3px}#volet-parcours .cs-summary-group summary{font-size:12px;font-weight:600;cursor:pointer;display:list-item;list-style-position:inside;padding-bottom:9px}#volet-parcours .cs-summary-group summary span{display:block;font-size:11px;font-weight:400;color:#6d7464;padding-left:13px;margin-top:3px}#volet-parcours .cs-summary-row{display:flex;gap:8px;justify-content:space-between;padding:6px 0;font-size:11px;line-height:1.4}#volet-parcours .cs-summary-row>span{color:#717965}#volet-parcours .cs-summary-row b{font-weight:500;text-align:right;max-width:66%}#volet-parcours .cs-edit{border:0;background:transparent;font-size:11px;color:#ad151d;text-decoration:underline;padding:6px 0}#volet-parcours .cs-recap{padding:3px 0}#volet-parcours .cs-recap h3{font-size:13px;margin:20px 0 7px}#volet-parcours .cs-recap h3:first-child{margin-top:0}#volet-parcours .cs-recap .cs-summary-row{font-size:12px;padding:8px 0;border-bottom:1px solid #f0f2e9}#volet-parcours .cs-actions{position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid #d9ded0;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -4px 17px #15230008}#volet-parcours .cs-back{display:flex;gap:6px;align-items:center;padding:10px 14px;font-size:12px}#volet-parcours .cs-forward{background:var(--cs-red);border-color:var(--cs-red);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 19px;font-size:13px;min-height:44px}#volet-parcours .cs-forward:hover:not(:disabled){background:#b9181f;border-color:#b9181f}#volet-parcours .cs-action-middle{font-size:12px;color:#727a67}#volet-parcours .cs-mobile-total{display:none}#volet-parcours .cs-status{margin:0 20px 15px;background:#f0f3e9;border:1px solid #dbe3cc;padding:11px 13px;font-size:12px;color:#465738;border-radius:5px}#volet-parcours .cs-inline-feedback{margin:12px 14px 0;color:#b01b22;font-size:12px}#volet-parcours dialog{padding:0;width:min(720px,calc(100% - 28px));max-height:none;border:1px solid #cbd1c1;border-radius:8px;background:#fff;color:#171b12;box-shadow:0 16px 65px #0004}#volet-parcours dialog::backdrop{background:#171b1266}#volet-parcours .cs-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 17px;border-bottom:1px solid #e1e6d8;font-size:14px;font-weight:600}#volet-parcours .cs-dialog-close{padding:7px 10px;font-size:12px}#volet-parcours .cs-dialog-content{padding:18px;display:flex;align-items:center;justify-content:center;background:#fafbf8}#volet-parcours .cs-dialog-content>img{height:430px;max-height:100%;object-fit:contain}#volet-parcours .cs-dialog-content>svg{height:490px;max-width:100%}#volet-parcours .cs-dialog-desc{font-size:13px;line-height:1.6;color:#68725d;padding:14px 18px}#volet-parcours .cs-raw-preview{padding:40px;text-align:center} @media(min-width:1250px){#volet-parcours .cs-grid{grid-template-columns:340px minmax(0,1fr) 250px;gap:18px}#volet-parcours .cs-drawing{height:410px}#volet-parcours .cs-picture{height:104px}#volet-parcours .cs-choice-title{font-size:13px}} @media(max-width:950px){#volet-parcours .cs-grid{grid-template-columns:310px minmax(0,1fr);gap:13px;grid-template-areas:'options scene' 'options order'}#volet-parcours .cs-options{grid-area:options}#volet-parcours .cs-scene{grid-area:scene;position:static}#volet-parcours .cs-order{grid-area:order;position:static}#volet-parcours .cs-order-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}#volet-parcours .cs-order-body{display:flex;align-items:center;justify-content:space-between;gap:12px}#volet-parcours .cs-quantity{gap:12px;margin:0}#volet-parcours .cs-drawing{height:345px}#volet-parcours .cs-step{gap:4px;font-size:11px}#volet-parcours .cs-step-number{display:none}#volet-parcours .cs-breadcrumb{display:none}} @media(max-width:650px){#volet-parcours .cs-head{padding:12px 14px}#volet-parcours .cs-logo{width:130px;height:35px}#volet-parcours .cs-help{font-size:11px;padding:8px}#volet-parcours .cs-heading{padding:17px 14px;display:block}#volet-parcours h1{font-size:22px}#volet-parcours .cs-range{justify-content:space-between;margin-top:13px}#volet-parcours .cs-range select{font-size:13px;padding:8px}#volet-parcours .cs-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 14px 14px}#volet-parcours .cs-step,#volet-parcours .cs-step:first-child{clip-path:none;border-radius:4px;font-size:12px;min-height:40px}#volet-parcours .cs-step-number{display:inline}#volet-parcours .cs-grid{display:flex;flex-direction:column;padding:0 14px 15px;gap:14px}#volet-parcours .cs-panel{width:100%}#volet-parcours .cs-scene{order:0}#volet-parcours .cs-options{order:1}#volet-parcours .cs-order{order:2}#volet-parcours .cs-drawing{height:295px;padding:8px 14px}#volet-parcours .cs-measures{padding:14px}#volet-parcours .cs-picture{height:100px}#volet-parcours .cs-choice-title{font-size:13px}#volet-parcours .cs-choice-desc{font-size:12px}#volet-parcours .cs-order-summary{display:block}#volet-parcours .cs-input input{font-size:18px;padding-right:33px}#volet-parcours .cs-actions{padding:11px 14px;gap:9px;flex-wrap:wrap}#volet-parcours .cs-forward{padding:11px 12px;font-size:12px;flex:1;gap:6px}#volet-parcours .cs-back{padding:10px 7px;font-size:11px}#volet-parcours .cs-action-middle{display:none}#volet-parcours .cs-mobile-total{display:block;width:100%;font-size:11px;color:#707960}#volet-parcours .cs-mobile-total strong{font-size:17px;color:#1b2313;padding-right:6px}#volet-parcours .cs-status{margin:0 14px 14px}#volet-parcours .cs-dialog-content>img{height:300px}#volet-parcours .cs-dialog-content>svg{height:365px}#volet-parcours .cs-dialog-desc{font-size:12px}} @media(pointer:coarse){#volet-parcours .cs-zoom,#volet-parcours .cs-edit,#volet-parcours .cs-view-choice button,#volet-parcours .cs-enlarge{min-height:44px}#volet-parcours select{min-height:44px}} #volet-parcours{--cs-paper:#f3f3f3;--cs-ink:#111;--cs-muted:#666;background:#f3f3f3;font-family:Arial,sans-serif;max-width:1520px;margin:auto} #volet-parcours .cs-head{padding:13px 22px;border-bottom:3px solid #d81f26} #volet-parcours .cs-logo{width:173px;height:45px} #volet-parcours .cs-heading{padding:23px 18px 21px} #volet-parcours h1{font:700 26px/1.25 Arial,sans-serif;letter-spacing:-.5px} #volet-parcours .cs-subtitle{font-size:13px;margin-top:7px} #volet-parcours .cs-steps{display:flex;gap:0;margin:0 16px 18px;filter:drop-shadow(0 2px 3px #0003)} #volet-parcours .cs-step{flex:0 0 52px;margin-left:-7px;min-height:39px;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 34%,rgba(255,255,255,0) 35%),linear-gradient(180deg,#868c93 0%,#6e747b 55%,#5a5f66 100%);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%,13px 50%);border-radius:0;text-shadow:0 1px 1px #0004;padding:0 13px 0 20px;gap:7px} #volet-parcours .cs-step:first-child{margin-left:0;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%);padding-left:13px} #volet-parcours .cs-step[aria-current=step]{flex:1 1 auto;background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.08) 34%,rgba(0,0,0,0) 35%),linear-gradient(180deg,#e2413f 0%,#d81f26 55%,#a01218 100%)} #volet-parcours .cs-step-name{display:none;white-space:nowrap} #volet-parcours .cs-step[aria-current=step] .cs-step-name{display:inline} #volet-parcours .cs-step-number{display:inline} #volet-parcours .cs-grid{grid-template-columns:400px minmax(0,1fr) 280px;gap:16px;padding:0 16px 24px;grid-template-areas:'options scene order'} #volet-parcours .cs-options{grid-area:options} #volet-parcours .cs-scene{grid-area:scene} #volet-parcours .cs-order{grid-area:order} #volet-parcours .cs-panel{border:1px solid #ddd;border-radius:8px;overflow:hidden;background:#fff} #volet-parcours .cs-options,#volet-parcours .cs-order{display:flex;flex-direction:column;height:var(--cs-scene-height,580px);position:sticky;top:10px} #volet-parcours .cs-band{background:#111;color:#fff;min-height:41px;padding:12px 14px;font-size:12px;font-weight:700;letter-spacing:.1px;text-transform:uppercase;flex:none} #volet-parcours .cs-band small{font-size:11px;color:#bbb} #volet-parcours .cs-options-body{padding:14px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#bbb transparent;flex:1;min-height:0} #volet-parcours .cs-section{margin-top:19px;padding-top:16px;border-color:#eee} #volet-parcours .cs-section:first-child{margin:0;padding:0} #volet-parcours .cs-section h2{font-size:15px} #volet-parcours .cs-desc{font-size:12px;color:#666} #volet-parcours .cs-tip,#volet-parcours .cs-included{background:#f5f5f5;border-color:#bbb;color:#555} #volet-parcours .cs-tip strong,#volet-parcours .cs-included strong{color:#222} #volet-parcours .cs-included span,#volet-parcours .cs-included em{color:#666} #volet-parcours .cs-cards{gap:8px} #volet-parcours .cs-cards:has([data-key=color]),#volet-parcours .cs-cards:has([data-key=shape]),#volet-parcours .cs-cards:has([data-key=finish]){grid-template-columns:repeat(3,minmax(0,1fr))} #volet-parcours .cs-picture{height:94px;background:#fafafa} #volet-parcours .cs-card:has([data-key=color]) .cs-picture{height:38px} #volet-parcours .cs-color{height:38px} #volet-parcours .cs-choice-title{font-size:12px} #volet-parcours .cs-choice-desc{font-size:11px;color:#666} #volet-parcours .cs-picture svg{max-height:94px} #volet-parcours .cs-input input{font-size:16px;height:43px;padding:8px 33px 8px 10px} #volet-parcours .cs-bounds{font-size:11px;color:#666} #volet-parcours .cs-conversion{color:#555} #volet-parcours .cs-dim-guide{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid #eee;font-size:12px} #volet-parcours .cs-dim-guide button{padding:8px 10px;color:#444;font-size:12px} #volet-parcours .cs-inline-measure{margin-top:12px;padding:12px;background:#f7f7f7;border-radius:4px} #volet-parcours .cs-field-grid{gap:10px} #volet-parcours .cs-pose-directe .cs-picture{height:64px} #volet-parcours .cs-pose-directe .cs-choice{padding:7px;gap:5px} #volet-parcours .cs-pose-directe .is-selected .cs-choice{padding:6px} #volet-parcours .cs-pose-directe .cs-choice-desc{display:none} #volet-parcours .cs-pose-directe .cs-zoom{padding:4px 6px;font-size:11px} #volet-parcours .cs-pose-directe .cs-section{margin-top:15px;padding-top:12px} #volet-parcours .cs-pose-directe .cs-section:first-child{margin:0;padding:0} #volet-parcours .cs-pose-directe .cs-section h2{margin-bottom:9px} #volet-parcours .cs-pose-reference{font-size:12px;line-height:1.4;color:#555;margin-bottom:10px} #volet-parcours .cs-pose-reference strong{color:#333} #volet-parcours .cs-measure-link{font-size:12px;border:0;background:#fff;color:#555;text-decoration:underline;padding:7px 0;margin-top:4px} #volet-parcours .cs-profile-context{font-size:12px;color:#666;margin-bottom:14px} #volet-parcours .cs-profile-context+.cs-section{margin-top:0;padding-top:0;border:0} #volet-parcours .cs-view-tools{padding:9px 12px;background:#fafafa;justify-content:center} #volet-parcours .cs-view-choice{background:#e9e9e9} #volet-parcours .cs-view-choice button{font-size:11px;padding:5px 12px} #volet-parcours .cs-drawing{height:426px;padding:8px 16px;background:#fafafa} #volet-parcours .cs-drawing-note{background:#fff;padding:2px 14px 10px;font-size:11px;color:#777} #volet-parcours .cs-scene-nav{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap;padding:12px 13px 9px;border-top:1px solid #eee} #volet-parcours .cs-scene-nav button{min-height:38px;font-size:12px;font-weight:700;color:#fff;border:0;padding:9px 14px;background:linear-gradient(180deg,#9aa0a6,#6e7379)} #volet-parcours .cs-scene-nav .cs-prev{clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);padding-left:23px;border-radius:0} #volet-parcours .cs-scene-nav .cs-next{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);padding-right:23px;border-radius:0;background:linear-gradient(180deg,#e2413f,#b3161c)} #volet-parcours .cs-nav-tools{display:flex;align-items:center;gap:7px} #volet-parcours .cs-scene-nav .cs-enlarge{background:#fff;color:#555;min-width:34px;padding:5px} #volet-parcours .cs-res-content{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#bbb transparent;min-height:0;flex:1} #volet-parcours .cs-order-summary{padding:3px 13px 0;display:block} #volet-parcours .cs-recap-link{display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;border-bottom:1px solid #eee;border-radius:0;padding:7px 0;width:100%;text-align:left;background:#fff;min-height:44px} #volet-parcours .cs-recap-link>span:first-child{min-width:0} #volet-parcours .cs-recap-link small{display:block;color:#777;font-size:11px;line-height:1.3;font-weight:400} #volet-parcours .cs-recap-link strong{display:block;color:#222;font-size:12px;line-height:1.35;font-weight:600;margin-top:2px} #volet-parcours .cs-modifier{font-size:11px;color:#777;font-weight:400;flex:none} #volet-parcours .cs-recap-link:hover .cs-modifier{color:#d81f26} #volet-parcours .cs-quantity{margin:0;padding:8px 13px;border-top:1px solid #eee;display:flex;gap:6px;font-size:12px;justify-content:space-between} #volet-parcours .cs-quantity select{padding:4px 6px;min-width:52px} #volet-parcours .cs-detail{border-top:1px solid #eee;padding:10px 13px;font-size:12px} #volet-parcours .cs-detail>summary{cursor:pointer;font-weight:600} #volet-parcours .cs-detail-body h3{font-size:12px;margin:13px 0 6px} #volet-parcours .cs-detail-body .cs-summary-row{font-size:11px} #volet-parcours .cs-order-bottom{padding:13px;border-top:1px solid #ddd;background:#fff;flex:none} #volet-parcours .cs-price{font:800 29px/1.2 Arial,sans-serif;color:#d81f26;letter-spacing:-.7px} #volet-parcours .cs-price small{font:400 11px Arial,sans-serif;color:#666} #volet-parcours .cs-demo-label{font-size:11px;color:#777;margin:5px 0 10px} #volet-parcours .cs-cart{width:100%;background:#d81f26;border-color:#d81f26;color:#fff;font-size:12px;font-weight:700;min-height:42px;display:flex;justify-content:center;align-items:center;gap:8px;text-transform:uppercase;padding:10px} #volet-parcours .cs-cart:hover{background:#b5181f} #volet-parcours .cs-validation{padding:10px 13px;border-bottom:1px solid #efb6b6;background:#fff5f5;color:#a5161c;font-size:12px;flex:none} #volet-parcours .cs-validation button{background:transparent;border:0;color:#a5161c;text-decoration:underline;padding:5px 0;font-size:12px} #volet-parcours .cs-status{background:#fff;border:1px solid #ddd;color:#444;margin:0 16px 14px} #volet-parcours .cs-mobile-bar{display:none} @media(min-width:901px) and (max-width:1150px){#volet-parcours .cs-grid{grid-template-columns:350px minmax(0,1fr) 245px;gap:13px}#volet-parcours .cs-scene-nav{justify-content:center}#volet-parcours .cs-nav-tools{order:2;justify-content:center;width:100%}#volet-parcours .cs-prev,#volet-parcours .cs-next{flex:1}#volet-parcours .cs-drawing{height:393px}} @media(max-width:900px){#volet-parcours .cs-grid{display:flex;flex-direction:column;gap:14px;padding:0 16px 18px}#volet-parcours .cs-panel{width:100%;height:auto;position:static}#volet-parcours .cs-scene{order:0}#volet-parcours .cs-options{order:1}#volet-parcours .cs-order{order:2}#volet-parcours .cs-options-body,#volet-parcours .cs-res-content{overflow:visible}#volet-parcours .cs-drawing{height:310px}#volet-parcours .cs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}#volet-parcours .cs-order-summary{display:block}#volet-parcours .cs-mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid #ddd;padding:11px 16px;box-shadow:0 -3px 12px #0001}#volet-parcours .cs-mobile-bar strong{display:block;color:#d81f26;font-size:19px;white-space:nowrap}#volet-parcours .cs-mobile-bar small{font-size:11px;color:#777}#volet-parcours .cs-mobile-bar .cs-cart{width:auto;min-width:140px}#volet-parcours .cs-step-number{display:inline}} @media(max-width:650px){#volet-parcours .cs-head{padding:10px 13px}#volet-parcours .cs-logo{width:139px;height:37px}#volet-parcours .cs-heading{padding:19px 14px 17px}#volet-parcours h1{font-size:22px}#volet-parcours .cs-steps{margin:0 14px 14px;gap:0}#volet-parcours .cs-step,#volet-parcours .cs-step:first-child{min-height:44px;flex:0 0 31px;margin-left:-4px;font-size:11px;border-radius:0;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%,7px 50%);padding:0 7px 0 10px}#volet-parcours .cs-step:first-child{margin-left:0;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%);padding-left:6px}#volet-parcours .cs-step[aria-current=step]{flex:1;gap:4px}#volet-parcours .cs-grid{padding:0 14px 14px}#volet-parcours .cs-drawing{height:269px}#volet-parcours .cs-band{font-size:11px}#volet-parcours .cs-band small{display:none}#volet-parcours .cs-scene-nav{gap:6px;padding:10px 11px;justify-content:center}#volet-parcours .cs-prev,#volet-parcours .cs-next{flex:1}#volet-parcours .cs-nav-tools{order:2;justify-content:center;width:100%}#volet-parcours .cs-picture{height:90px}#volet-parcours .cs-cards:has([data-key=color]),#volet-parcours .cs-cards:has([data-key=shape]),#volet-parcours .cs-cards:has([data-key=finish]){grid-template-columns:repeat(2,minmax(0,1fr))}#volet-parcours .cs-choice-title{font-size:12px}#volet-parcours .cs-mobile-bar{gap:8px;padding:10px 14px}#volet-parcours .cs-mobile-bar .cs-cart{font-size:11px;min-width:125px}#volet-parcours .cs-mobile-bar strong{font-size:18px}} #onlybaie-perspective #volet-parcours {background:var(--op-paper);--cs-paper:var(--op-paper);font-family:'DM Sans',Arial,sans-serif;padding:0 8px 26px;} #onlybaie-perspective #volet-parcours .cs-site-breadcrumb {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px 0;color:#70716c;font-size:12px;} #onlybaie-perspective #volet-parcours .cs-site-breadcrumb nav {display:flex;align-items:center;flex-wrap:wrap;gap:10px;} #onlybaie-perspective #volet-parcours .cs-site-breadcrumb a:hover {text-decoration:underline;color:#d81f26;} #onlybaie-perspective #volet-parcours .cs-site-breadcrumb .cs-help {background:transparent;border:0;padding:4px 0;} #onlybaie-perspective #volet-parcours .cs-heading {padding:18px 18px 22px;} #onlybaie-perspective #volet-parcours h1 {font-family:Manrope,Arial,sans-serif;font-size:26px;letter-spacing:-.8px;font-weight:700;} #onlybaie-perspective #volet-parcours .cs-options,#onlybaie-perspective #volet-parcours .cs-order {top:calc(var(--op-sticky-offset,144px) + 12px);} #onlybaie-perspective #volet-parcours .cs-options {scroll-margin-top:12px;} #onlybaie-perspective #volet-parcours .cs-drawing {height:clamp(260px,calc(100dvh - 580px),426px);} #onlybaie-perspective #volet-parcours .cs-site-breadcrumb svg {width:16px;height:16px;} #onlybaie-perspective #volet-parcours .cs-mobile-bar {z-index:40;} @media(max-width:900px){ #onlybaie-perspective #volet-parcours {padding:0;} #onlybaie-perspective #volet-parcours .cs-drawing {height:310px;} #onlybaie-perspective #volet-parcours .cs-options,#onlybaie-perspective #volet-parcours .cs-order {top:auto;} #onlybaie-perspective #volet-parcours .cs-site-breadcrumb {padding:14px 16px 0;} } @media(max-width:650px){ #onlybaie-perspective #volet-parcours .cs-site-breadcrumb {padding:13px 14px 0;font-size:11px;} #onlybaie-perspective #volet-parcours .cs-site-breadcrumb nav {gap:6px;} #onlybaie-perspective #volet-parcours .cs-site-breadcrumb .cs-help {display:none;} #onlybaie-perspective #volet-parcours .cs-heading {padding:17px 14px 19px;} #onlybaie-perspective #volet-parcours h1 {font-size:22px;} #onlybaie-perspective #volet-parcours .cs-drawing {height:269px;} } #onlybaie-perspective #volet-parcours .vr-product-controls{display:flex;gap:12px;flex:none} #onlybaie-perspective #volet-parcours .vr-product-controls label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#666} #onlybaie-perspective #volet-parcours .vr-product-controls select{padding:10px 8px;font-size:12px;height:41px;max-width:205px;color:#111;font-weight:600} #onlybaie-perspective #volet-parcours .vr-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} #onlybaie-perspective #volet-parcours .vr-poses .cs-choice{padding:7px;gap:5px} #onlybaie-perspective #volet-parcours .vr-poses .is-selected .cs-choice{padding:6px} #onlybaie-perspective #volet-parcours .vr-poses .cs-choice-title{font-size:11px;min-height:30px} #onlybaie-perspective #volet-parcours .vr-poses .cs-choice-desc{font-size:11px;line-height:1.3} #onlybaie-perspective #volet-parcours .vr-poses .cs-picture{height:93px;background:#fff} #onlybaie-perspective #volet-parcours .vr-poses .cs-zoom{font-size:11px;padding:5px 0} #onlybaie-perspective #volet-parcours .vr-muted{font-size:11px;color:#666;margin-top:8px} #onlybaie-perspective #volet-parcours .vr-field{display:block;font-size:12px;font-weight:600} #onlybaie-perspective #volet-parcours .vr-field input{font-size:16px;width:100%;min-width:0;padding:10px;margin-top:7px;height:42px;font-weight:400} #onlybaie-perspective #volet-parcours .vr-number{display:block;position:relative} #onlybaie-perspective #volet-parcours .vr-number input{padding-right:32px} #onlybaie-perspective #volet-parcours .vr-number>span{position:absolute;right:10px;top:20px;font-size:11px;color:#777;font-weight:400} #onlybaie-perspective #volet-parcours .vr-field small{display:block;font-size:11px;color:#666;font-weight:400;margin-top:4px} #onlybaie-perspective #volet-parcours .vr-error{display:block;font-size:11px;color:#a5161c;font-weight:400;margin-top:4px} #onlybaie-perspective #volet-parcours input[aria-invalid=true]{border-color:#d81f26} #onlybaie-perspective #volet-parcours .vr-fab{margin-top:12px;font-size:12px;background:#f5f5f5;padding:10px;border-left:2px solid #bbb} #onlybaie-perspective #volet-parcours .vr-view-label{text-align:center;padding:8px;font-size:11px;color:#777;background:#fafafa} #onlybaie-perspective #volet-parcours .cs-drawing{height:clamp(260px,calc(100dvh - 620px),426px);padding:3px 8px;background:#fff;display:flex;align-items:center;justify-content:center} #onlybaie-perspective #volet-parcours .vr-drawing>svg{width:100%!important;height:100%!important;max-height:100%} #onlybaie-perspective #volet-parcours .vr-drawing svg text{font-weight:600} #onlybaie-perspective #volet-parcours .vr-opening{padding:7px 14px 12px;background:#fff} #onlybaie-perspective #volet-parcours .vr-opening label{display:flex;align-items:center;gap:10px;font-size:11px;color:#666} #onlybaie-perspective #volet-parcours .vr-opening input{min-width:0;flex:1;accent-color:#d81f26;order:0} #onlybaie-perspective #volet-parcours .vr-opening span{order:1;min-width:30px;text-align:right} #onlybaie-perspective #volet-parcours .vr-section-coffre{margin-top:15px} #onlybaie-perspective #volet-parcours .cs-included strong{margin-bottom:4px} #onlybaie-perspective #volet-parcours .cs-included>span{min-width:0;font-size:12px;font-weight:400} #onlybaie-perspective #volet-parcours .vr-color-block{display:block;width:100%;height:40px;min-width:50px;border:1px solid #ddd;border-radius:3px} #onlybaie-perspective #volet-parcours .cs-included>.vr-color-block{width:65px;flex:none} #onlybaie-perspective #volet-parcours .vr-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px} #onlybaie-perspective #volet-parcours .vr-swatch{padding:6px;text-align:left;min-width:0;border:1px solid #ddd} #onlybaie-perspective #volet-parcours .vr-swatch[aria-pressed=true]{border:2px solid #d81f26;padding:5px} #onlybaie-perspective #volet-parcours .vr-swatch>span{height:36px;width:100%;border-radius:3px;display:block;border:1px solid #0001} #onlybaie-perspective #volet-parcours .vr-swatch strong{display:block;font-size:11px;line-height:1.3;margin-top:5px;font-weight:500} #onlybaie-perspective #volet-parcours .vr-swatch small{font-size:10px;color:#777;overflow-wrap:anywhere;display:block;margin-top:2px} #onlybaie-perspective #volet-parcours .vr-palette{margin-top:12px;border-top:1px solid #eee;padding-top:12px} #onlybaie-perspective #volet-parcours .vr-palette summary{font-size:12px;cursor:pointer;text-decoration:underline;color:#555} #onlybaie-perspective #volet-parcours .vr-palette p{font-size:11px;margin-top:10px;color:#777} #onlybaie-perspective #volet-parcours .vr-accessory-group{margin-top:17px} #onlybaie-perspective #volet-parcours .vr-accessory-group:first-child{margin-top:0} #onlybaie-perspective #volet-parcours .vr-accessory{padding:12px 0;border-bottom:1px solid #eee} #onlybaie-perspective #volet-parcours .vr-accessory>label{display:flex;gap:10px;align-items:start} #onlybaie-perspective #volet-parcours .vr-accessory input[type=checkbox]{accent-color:#d81f26;min-width:16px;width:16px;height:16px;margin:2px 0 0} #onlybaie-perspective #volet-parcours .vr-accessory strong{font-size:12px;font-weight:600;line-height:1.4;display:block} #onlybaie-perspective #volet-parcours .vr-accessory small{font-size:11px;color:#777;display:block;margin-top:4px} #onlybaie-perspective #volet-parcours .vr-accessory .vr-option-quantity{margin:10px 0 0 26px;align-items:center;justify-content:space-between;font-size:11px} #onlybaie-perspective #volet-parcours .vr-option-quantity input,#onlybaie-perspective #volet-parcours .cs-quantity input{width:58px;padding:5px;font-size:14px} #onlybaie-perspective #volet-parcours .vr-next-shutter{width:100%;margin-top:8px;padding:8px 5px;font-size:11px;font-weight:600} #onlybaie-perspective #volet-parcours .vr-detail-button{border:0;border-top:1px solid #eee;padding:12px;text-align:left;font-size:12px;width:100%;border-radius:0} #onlybaie-perspective #volet-parcours .vr-full-recap{margin:0;text-align:left} #onlybaie-perspective #volet-parcours .vr-full-recap>div{display:grid;grid-template-columns:1fr 1.5fr;gap:15px;border-bottom:1px solid #eee;padding:10px 0;font-size:13px} #onlybaie-perspective #volet-parcours .vr-full-recap dt{color:#777} #onlybaie-perspective #volet-parcours .vr-full-recap dd{margin:0;overflow-wrap:anywhere} #onlybaie-perspective #volet-parcours .vr-demo-notice{font-size:12px;padding:15px 0;text-align:left;color:#666} @media(max-width:1150px) and (min-width:901px){#onlybaie-perspective #volet-parcours .cs-heading{align-items:start}#onlybaie-perspective #volet-parcours h1{font-size:23px}#onlybaie-perspective #volet-parcours .vr-product-controls{gap:7px}#onlybaie-perspective #volet-parcours .vr-product-controls select{max-width:160px}#onlybaie-perspective #volet-parcours .vr-three{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){#onlybaie-perspective #volet-parcours .cs-drawing{height:320px}#onlybaie-perspective #volet-parcours .cs-mobile-bar{z-index:20}#onlybaie-perspective #volet-parcours .cs-heading{flex-wrap:wrap}#onlybaie-perspective #volet-parcours .vr-product-controls{width:100%}#onlybaie-perspective #volet-parcours .vr-product-controls label{flex:1;min-width:0}#onlybaie-perspective #volet-parcours .vr-product-controls select{max-width:100%;width:100%;font-size:16px}} @media(max-width:650px){#onlybaie-perspective #volet-parcours .cs-drawing{height:280px}#onlybaie-perspective #volet-parcours .vr-three{grid-template-columns:repeat(2,minmax(0,1fr))}#onlybaie-perspective #volet-parcours .vr-poses .cs-choice-title{min-height:0}#onlybaie-perspective #volet-parcours .vr-product-controls select{font-size:13px}#onlybaie-perspective #volet-parcours .vr-product-controls label:first-child{flex:.7}#onlybaie-perspective #volet-parcours .vr-full-recap>div{font-size:12px;grid-template-columns:1fr 1fr}#onlybaie-perspective #volet-parcours .cs-scene .cs-band small{display:none}} #onlybaie-perspective #volet-parcours .cs-enlarge{font-size:24px!important;line-height:1;} /* Le bandeau d'avis s'arrête aux mêmes marges que le carrousel et que « Votre commande en 3 étapes » : plus de bande noire d'un bord à l'autre de l'écran (demande du gérant, 21/09/2026). */ #onlybaie-perspective #op-avis { width: min(2100px, 100% - 2*clamp(20px, 4vw, 80px)); margin-inline: auto; padding-inline: clamp(18px, 2.2vw, 40px); } #onlybaie-perspective #op-avis > * { max-width: none; margin-inline: 0; } /* Les deux bannières de services : largeur utile commune aux autres sections de contenu. */ #onlybaie-perspective #op-services { max-width: 1480px; margin-inline: auto; } #onlybaie-perspective .op-services-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.4vw, 36px); } /* Les classes du carrousel donnent le rendu ; seules l'échelle et le cadrage changent, la diapositive faisant deux fois cette largeur. */ #onlybaie-perspective .op-services-grille .ob-ban { flex: initial; height: auto; aspect-ratio: 16 / 9; text-decoration: none; } #onlybaie-perspective .op-services-grille .ob-ban-photo { position: absolute; inset: 0; margin: 0; clip-path: none; } #onlybaie-perspective .ob-ban-cotes .ob-ban-photo img { object-position: 50% 50%; } #onlybaie-perspective .op-services-grille .ob-ban-pose .ob-ban-photo img { object-position: 100% 38%; } #onlybaie-perspective .op-services-grille .ob-ban-panneau { flex-basis: 50%; padding: clamp(18px, 2vw, 30px); } #onlybaie-perspective .ob-ban-titre { display: block; margin: 0; font-family: Manrope, Arial, sans-serif; font-weight: 800; font-size: clamp(21px, 2.1vw, 34px); line-height: .98; letter-spacing: -.035em; text-transform: uppercase; } #onlybaie-perspective .ob-ban-titre em { display: block; font-style: normal; color: var(--op-red); } #onlybaie-perspective .op-services-grille .ob-ban-repere { margin-bottom: 12px; } #onlybaie-perspective .op-services-grille .ob-ban-texte { margin: 12px 0 0; max-width: 21ch; font-size: 13.5px; line-height: 1.5; color: #3b3d38; } #onlybaie-perspective .op-services-grille .ob-ban-avec { margin-top: 12px; font-size: 13px; } #onlybaie-perspective .op-services-grille .ob-ban-avec img { height: 24px; } #onlybaie-perspective .op-services-grille .ob-ban-actions { margin-top: 16px; } #onlybaie-perspective .op-services-grille .ob-ban-bouton { gap: 16px; min-height: 44px; padding: 11px 16px; font-size: 12.5px; } /* La foire aux questions ouvre désormais sa section : le filet et l'écart qui la séparaient des cartes retirées n'ont plus lieu d'être. */ #onlybaie-perspective #op-guides > .op-faq:first-child { border-top: 0; margin-top: 0; padding-top: 0; } @media (max-width: 900px) { #onlybaie-perspective .op-services-grille { grid-template-columns: 1fr; } } @media (max-width: 800px) { /* Sur téléphone, le carrousel empile photo puis panneau : les bannières font pareil. En revanche la bande de 176 px du carrousel rognait le haut de la tête et la main levée du poseur (gérant, 21/09/2026) : ici la photo prend le cadrage mobile de la diapositive et s'affiche en entier, sans rognage. */ #onlybaie-perspective .op-services-grille .ob-ban { aspect-ratio: auto; } /* La bannière des cotes garde son rapport d'origine : la bande de 176 px du carrousel la rognait de 10 px en haut et en bas, ce qui coupait le haut de la tête du poseur et le filet rouge sous le titre (constaté par le gérant sur son téléphone, 21/09/2026). Elle prend en plus un cadrage mobile dédié, fabriqué avec la même recette que la version large : le poseur et le titre y sont nettement plus grands. */ #onlybaie-perspective .op-services-grille .ob-ban-cotes { aspect-ratio: auto; } #onlybaie-perspective .op-services-grille .ob-ban-cotes .ob-ban-photo { position: relative; inset: auto; flex: 0 0 auto; width: 100%; aspect-ratio: 900 / 624; } #onlybaie-perspective .op-services-grille .ob-ban-pose .ob-ban-photo { position: relative; inset: auto; flex: 0 0 auto; width: 100%; aspect-ratio: 900 / 624; } #onlybaie-perspective .op-services-grille .ob-ban-pose .ob-ban-photo img { object-position: 50% 50%; } #onlybaie-perspective .op-services-grille .ob-ban-panneau { flex-basis: auto; padding: 14px 16px 18px; } #onlybaie-perspective .ob-ban-titre { font-size: 24px; } } #onlybaie-perspective .op-nav a.op-compte-mobile,#onlybaie-perspective .op-nav a.op-lien-mobile,#onlybaie-perspective .op-nav .op-recherche-mobile{display:none}@media(max-width:980px){#onlybaie-perspective .op-nav a.op-compte-mobile,#onlybaie-perspective .op-nav a.op-lien-mobile{display:flex}#onlybaie-perspective .op-nav .op-recherche-mobile{display:flex;gap:0;margin:4px 0 8px;order:-1;grid-column:1/-1;width:100%}#onlybaie-perspective .op-recherche-mobile input{flex:1;min-width:0;min-height:46px;border:1px solid #cfcfca;border-right:0;border-radius:0;padding:0 12px;font-size:16px;background:#fff;color:#111}#onlybaie-perspective .op-recherche-mobile button{min-height:46px;border:0;border-radius:0;background:#d81f26;color:#fff;padding:0 14px;font:700 14px/1 Manrope,Arial,sans-serif}}/* Téléphone : l'accès au compte reste visible à côté du panier (demande du gérant, 19/09/2026). */@media(max-width:980px){#onlybaie-perspective .op-header .op-head-tools :is(button[data-dialog="account"],a[href="/compte"]).op-base-desktop{display:flex!important;padding-inline:4px;font-size:0;cursor:pointer}#onlybaie-perspective .op-header .op-head-tools :is(button[data-dialog="account"],a[href="/compte"]).op-base-desktop:after{content:"Compte";font-size:11px}} html[data-mobile-v2] #op-produits{display:block!important;min-height:100vh!important;min-height:100svh!important;padding-top:12px!important}html[data-mobile-v2] #garage-mount:empty{min-height:100vh;min-height:100svh}html[data-mobile-v2] #op-produits .obp-heading{margin:0 0 10px!important}html[data-mobile-v2] #op-produits .obp-heading h1{font-size:22px!important;line-height:1.1!important;margin:0!important}html[data-mobile-v2] #op-produits .obp-heading p{display:none!important}html[data-mobile-v3] .op-top{display:none!important}html[data-mobile-v3] #op-produits{padding-top:0!important}html[data-mobile-v3] #op-produits .obp-heading{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;margin:0!important;padding:0!important}html[data-mobile-v3] #vr-mount:empty,html[data-mobile-v3] #tablier-mount:empty,html[data-mobile-v3] #garage-mount:empty,html[data-mobile-v3] #porte-entree-mount:empty{min-height:100vh;min-height:100svh} html[data-catalogue-route] #op-home{display:none!important} #onlybaie-perspective .op-product-image-link{position:absolute;inset:0} #onlybaie-perspective .op-product-image-link:focus-visible{outline:3px solid #d81f26;outline-offset:-4px} #onlybaie-perspective .op-product-title-link{color:inherit;text-decoration:none} #onlybaie-perspective .op-product-title-link:hover{color:#d81f26} #op-produits[hidden]{display:none!important} #onlybaie-perspective #op-produits{max-width:1480px;margin:auto;padding:0 44px 64px;color:#111;background:#f7f6f2;min-height:65vh} #op-produits *{box-sizing:border-box} #op-produits a{text-decoration:none;color:inherit} #op-produits button,#op-produits select{font:inherit} #op-produits a:focus-visible,#op-produits button:focus-visible,#op-produits select:focus-visible{outline:3px solid #D81F26;outline-offset:4px} #op-produits .obp-crumbs{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;padding:25px 0;color:#696964} #op-produits .obp-crumbs a:hover{text-decoration:underline} #op-produits .obp-heading{padding:16px 0 24px;max-width:860px} #op-produits .obp-kicker{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:700;color:#77766d;margin-bottom:14px} #op-produits h1{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.045em;line-height:1.06;margin:0 0 20px;font-weight:650} #op-produits h2{font-size:28px;line-height:1.2;letter-spacing:-.035em;font-weight:650} #op-produits h3{line-height:1.25;font-weight:650} #op-produits p{font-size:15px;line-height:1.65;color:#686861} #op-produits .obp-heading p{max-width:700px;font-size:17px} #op-produits .obp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} #op-produits .obp-card{min-width:0;background:white;border:1px solid #e5e4dc;border-radius:10px;overflow:hidden;display:flex;flex-direction:column} #op-produits .obp-card-image{display:flex;align-items:center;justify-content:center;background:#f0f0eb;height:230px;padding:22px} #op-produits .obp-card-image img{width:100%;height:100%;object-fit:contain;transition:transform .2s} #op-produits .obp-card-image:hover img{transform:scale(1.035)} #op-produits .obp-card-body{display:flex;flex-direction:column;padding:24px;flex:1} #op-produits .obp-card-body>small{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#777} #op-produits .obp-card h2,#op-produits .obp-card h3{font-size:22px;margin:12px 0 0} #op-produits .obp-card p{margin:12px 0 24px;font-size:14px} #op-produits .obp-link{display:inline-flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #d81f26;font-size:13px;font-weight:650;align-items:center;margin-top:auto} #op-produits .obp-link:hover{color:#d81f26} #op-produits .obp-link span{color:#d81f26;font-size:20px} #op-produits .obp-button{background:#d81f26;color:white;display:inline-flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #d81f26;border-radius:5px;padding:15px 20px;font-size:13px;font-weight:650;cursor:pointer;line-height:1.4} #op-produits .obp-button:hover{background:#b9171e} #op-produits .obp-button-secondary{color:#111;background:transparent;border-color:#cbc9bf} #op-produits .obp-button-secondary:hover{background:#e7e5db} #op-produits .obp-product-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr);gap:48px;align-items:center;border-bottom:1px solid #deddd5;padding-bottom:24px;margin-bottom:28px} #op-produits .obp-product-image{margin:0;background:#fff;min-height:220px;padding:16px;border:1px solid #e5e4dc;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center} #op-produits .obp-product-image img{max-width:100%;width:220px;height:180px;object-fit:contain} #op-produits .obp-product-image figcaption{color:#87877f;font-size:10px;margin-top:15px} #op-produits .obp-specs{display:flex;flex-wrap:wrap;gap:20px 30px;margin:0 0 28px} #op-produits .obp-specs>div{min-width:100px;max-width:100%} #op-produits dt{font-size:11px;color:#777;margin:0 0 7px} #op-produits dd{font-size:14px;margin:0;line-height:1.5;font-weight:550} #op-produits .obp-section-heading{margin:0 0 25px} #op-produits .obp-section-heading h2{margin:0 0 10px;font-size:32px} #op-produits .obp-section-heading p{margin:0} #op-produits .obp-grades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} #op-produits .obp-grade{border:1px solid #dcdad0;border-top:3px solid #d81f26;border-radius:7px;padding:28px;background:#fff;display:flex;flex-direction:column;min-width:0} #op-produits .obp-grade h3{font-size:23px;letter-spacing:-.025em;margin:0} #op-produits .obp-grade p{margin:12px 0} #op-produits .obp-grade ul{padding:0;list-style:none;font-size:13px;line-height:1.6;margin:0 0 24px;color:#444} #op-produits .obp-grade li{padding:13px 0;border-bottom:1px solid #eee} #op-produits .obp-grade .obp-button{margin-top:auto} #op-produits .obp-availability{background:#eeede6;border-left:3px solid #949184;padding:22px 25px;margin:24px 0} #op-produits .obp-availability strong{font-size:16px} #op-produits .obp-availability p{margin:8px 0 0;font-size:13px} #op-produits .obp-related{margin-top:60px} #op-produits .obp-related .obp-card-image{height:180px} #op-produits .obp-help{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:60px;background:#eeede5;border-radius:8px;padding:28px} #op-produits .obp-help strong{font-size:21px;letter-spacing:-.02em} #op-produits .obp-help p{margin:7px 0 0;font-size:14px} #op-produits .obp-return{margin:15px 0} #op-produits .obp-filters{display:flex;align-items:end;gap:16px;flex-wrap:wrap;padding:22px;background:#eae9e0;border-radius:7px;margin:0 0 25px} #op-produits .obp-filters label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600;min-width:200px} #op-produits .obp-filters select{padding:14px;border:1px solid #cfcec4;border-radius:4px;background:#fff;color:#111} #op-produits .obp-filters p{margin:0 0 12px auto;font-size:13px} #op-produits .obp-command{display:flex;gap:16px;align-items:center;padding:16px 0;font-size:13px;color:#777;min-height:90px} #op-produits .obp-command img{width:65px;height:60px;object-fit:contain} #op-produits .obp-card-actions{display:flex;flex-direction:column;gap:5px;margin-top:auto} #op-produits .obp-card-actions .obp-link{border-bottom:none;justify-content:center} #op-produits .obp-families{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px} #op-produits .obp-chip{border:1px solid #d8d6cc;border-radius:30px;padding:12px 18px;font-size:12px;background:#fff} #op-produits .obp-chip:hover{border-color:#d81f26} #op-produits .obp-empty{padding:40px;background:white;border-radius:10px} @media(min-width:1450px){#op-produits .obp-vr-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:1000px){#onlybaie-perspective #op-produits{padding:0 24px 40px}#op-produits .obp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#op-produits .obp-grades{grid-template-columns:repeat(2,minmax(0,1fr))}#op-produits .obp-product-hero{gap:28px;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr)}} @media(max-width:650px){#onlybaie-perspective #op-produits{padding:0 18px 32px}#op-produits .obp-heading{padding:18px 0}#op-produits .obp-grid,#op-produits .obp-grades,#op-produits .obp-product-hero{grid-template-columns:minmax(0,1fr)}#op-produits .obp-product-hero{gap:20px;padding-bottom:28px}#op-produits .obp-product-image{min-height:210px}#op-produits .obp-product-image img{height:190px}#op-produits .obp-card-image{height:210px}#op-produits .obp-help{flex-direction:column;align-items:stretch;padding:23px}#op-produits .obp-filters label{min-width:0;width:100%}#op-produits .obp-filters p{margin:0 0 12px auto}#op-produits .obp-section-heading h2{font-size:27px}#op-produits .obp-crumbs{font-size:11px;gap:8px;padding:18px 0}} #op-produits .obp-grade-config{color:inherit;text-decoration:none;cursor:pointer} #op-produits .obp-grade-config:hover{border-color:#d81f26} #op-produits .obp-grade-config:focus-visible{outline:3px solid #d81f26;outline-offset:4px} /* Fenêtres coulissantes (09/10/2026) : FAQ courte de la fiche et renvoi des baies, angles droits, sans ombre. */ #op-produits .obp-faq{max-width:900px;margin-top:32px;border-top:1px solid #deded9} #op-produits .obp-faq h2{margin:24px 0 8px;font-size:24px;line-height:1.25} #op-produits .obp-faq details{border-bottom:1px solid #deded9} #op-produits .obp-faq summary{display:flex;gap:20px;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;min-height:60px;padding:16px 0;font-size:16px;font-weight:650;line-height:1.45;color:#222} #op-produits .obp-faq summary::-webkit-details-marker{display:none} #op-produits .obp-faq summary::after{content:"+";font-size:24px;line-height:1;flex:none;color:#c61f25;font-weight:400} #op-produits .obp-faq details[open]>summary::after{content:"−"} #op-produits .obp-faq details>p{margin:0;padding:0 35px 18px 0;color:#505050;font-size:14px;line-height:1.6} #op-produits .obp-renvoi{margin:0 0 20px;padding:14px 18px;background:#f3f2ef;border-left:4px solid #d81f26;border-radius:0;box-shadow:none;font-size:15px;line-height:1.5;max-width:860px} #op-produits .obp-renvoi a{font-weight:650;color:#111;text-decoration:underline;text-underline-offset:3px} @media(max-width:650px){#op-produits .obp-faq h2{font-size:21px}#op-produits .obp-faq details>p{padding-right:0}#op-produits .obp-renvoi{font-size:14px;padding:12px 14px}} /* Panier (refait le 03/10/2026, gérant : « regarde chez Brico Fenêtre […] on a gros vide ») : étapes du tunnel en tête, articles détaillés sur toute leur hauteur, récapitulatif resserré et engagements sous les articles. Angles droits, aucune ombre, comme le tunnel de commande. */ #op-produits{--obc-rouge:#D81F26;--obc-rouge-fonce:#b5171e;--obc-noir:#111;--obc-gris:#666;--obc-filet:#e1e1e1;--obc-fond:#f4f4f4} #op-produits .obc-tete{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;margin:8px 0 16px} #op-produits .obc-tete h1{font-family:Manrope,"DM Sans",Arial,sans-serif;font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:0} #op-produits .obc-tete h1 span{margin-left:6px;font:600 15px/1 "DM Sans",Arial,sans-serif;letter-spacing:0;color:var(--obc-gris)} #op-produits #obc-status{margin:0;min-height:18px;font-size:12.5px;color:var(--obc-gris)} /* Étapes : mêmes chevrons que /commande (components/commande/tunnel.css). */ #op-produits .obc-etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0 0 22px;padding:0} #op-produits .obc-etapes li{margin:0 0 0 -10px;background:var(--obc-fond);color:#7a7a7a;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%,18px 50%)} #op-produits .obc-etapes li:first-child{margin-left:0;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%)} #op-produits .obc-etapes li>span{display:flex;align-items:center;justify-content:center;gap:11px;height:52px;padding:0 22px 0 30px;font-size:15px} #op-produits .obc-etapes li:first-child>span{padding-left:16px} #op-produits .obc-etapes svg{width:22px;height:22px;flex:0 0 22px} #op-produits .obc-etapes strong{font-weight:600} /* Plus de rouge, moins de noir (gérant, 03/10/2026) : mêmes réglages que le tunnel. */ #op-produits .obc-etapes .is-active{background:var(--obc-rouge);color:#fff} #op-produits .obc-etapes .is-active strong{font-weight:800} /* Articles à gauche, récapitulatif à droite sur deux rangées : la première suit les articles, la seconde reçoit les engagements, qui comblent la place à côté du récapitulatif. */ #op-produits .obc-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;grid-template-rows:auto 1fr;grid-template-areas:"lignes total" "plus total";gap:18px 28px;align-items:start} #op-produits .obc-lines{grid-area:lignes;display:grid;gap:12px;min-width:0} #op-produits .obc-line{display:grid;grid-template-columns:150px minmax(0,1fr) 180px;gap:24px;padding:22px 24px;background:#fff;border:1px solid var(--obc-filet);align-items:start} #op-produits .obc-line-erreur{grid-template-columns:minmax(0,1fr)} #op-produits .obc-image{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:12px;background:var(--obc-fond)} #op-produits .obc-image [data-cart-drawing]{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:11px;color:var(--obc-gris);text-align:center} #op-produits .obc-image svg{width:100%;height:100%;max-height:126px} #op-produits .obc-info{min-width:0} #op-produits .obc-titre h2{font-family:Manrope,"DM Sans",Arial,sans-serif;font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.3;margin:0} #op-produits .obc-emplacement{margin:4px 0 0;font-size:12.5px;color:var(--obc-gris)} #op-produits .obc-carac{columns:2;column-gap:28px;margin:12px 0 0;font-size:13px;line-height:1.45} #op-produits .obc-carac>div{break-inside:avoid;padding:2px 0} #op-produits .obc-carac dt{display:inline;font-size:12.5px;color:#6b6b6b} #op-produits .obc-carac dt::after{content:"\00a0: "} #op-produits .obc-carac dd{display:inline;margin:0;font-size:13.5px;color:var(--obc-noir);font-weight:500;overflow-wrap:anywhere} #op-produits .obc-detail{display:none;justify-self:start;margin:8px 0 0;padding:0;border:0;background:none;font:700 13px "DM Sans",Arial,sans-serif;color:var(--obc-noir);text-decoration:underline;text-decoration-color:var(--obc-rouge);text-underline-offset:4px;cursor:pointer} #op-produits .obc-sans{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:#6b6b6b} #op-produits .obc-sans span{color:var(--obc-noir);font-weight:600} #op-produits .obc-actions{display:flex;flex-wrap:wrap;gap:22px;margin-top:14px;font-size:13px;font-weight:650} #op-produits .obc-actions a{color:var(--obc-noir);text-decoration:underline;text-decoration-color:var(--obc-rouge);text-underline-offset:4px} #op-produits .obc-remove{border:0;background:none;padding:0;font:inherit;color:#777;text-decoration:underline;text-underline-offset:4px;cursor:pointer} #op-produits .obc-line-price{display:grid;justify-items:end;align-content:start;gap:4px;text-align:right} #op-produits .obc-line-price>strong{font-family:Manrope,"DM Sans",Arial,sans-serif;font-size:22px;font-weight:800;line-height:1.2;white-space:nowrap;color:var(--obc-rouge)} #op-produits .obc-line-price>small{font-size:12px;color:var(--obc-gris)} #op-produits .obc-qty{display:grid;justify-items:end;gap:6px;margin-top:14px;font-size:12px;color:var(--obc-gris)} #op-produits .obc-stepper{display:flex;border:1px solid #cfcfcf;background:#fff} #op-produits .obc-stepper button{width:38px;height:40px;padding:0;border:0;background:#fff;color:var(--obc-rouge);font:500 20px/1 "DM Sans",Arial,sans-serif;cursor:pointer} #op-produits .obc-stepper button:disabled{color:#c4c4c4;cursor:default} #op-produits .obc-stepper input{width:46px;height:40px;padding:0;border:0;border-left:1px solid var(--obc-filet);border-right:1px solid var(--obc-filet);background:#fff;color:var(--obc-noir);font:700 15px "DM Sans",Arial,sans-serif;text-align:center;-moz-appearance:textfield;appearance:textfield} #op-produits .obc-stepper:focus-within{border-color:var(--obc-rouge)} #op-produits .obc-stepper input:focus{outline:2px solid var(--obc-rouge);outline-offset:-2px} #op-produits .obc-stepper input::-webkit-inner-spin-button,#op-produits .obc-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} #op-produits .obc-ajout{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1.5px solid var(--obc-rouge);background:#fff5f5;color:#a9161c;font-size:14px;font-weight:700;text-decoration:none} @media(hover:hover){#op-produits .obc-ajout:hover{background:var(--obc-rouge);color:#fff}#op-produits .obc-stepper button:not(:disabled):hover{background:#fff1f1}} /* Engagements : quatre faits déjà annoncés sur le site, en deux rangées. */ #op-produits .obc-plus{grid-area:plus;display:grid;gap:14px;min-width:0} #op-produits .obc-plus .obc-pro-note{margin:0;font-size:13px;line-height:1.6;color:#555} #op-produits .obc-plus .obc-pro-note a{color:#a9161c;font-weight:700;text-decoration:underline;text-underline-offset:3px} #op-produits .obc-atouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;background:var(--obc-filet);border:1px solid var(--obc-filet)} #op-produits .obc-atouts li{display:flex;align-items:flex-start;gap:14px;margin:0;padding:18px 20px;background:#fff} #op-produits .obc-atouts svg{flex:none;color:var(--obc-rouge)} #op-produits .obc-atouts strong{display:block;margin-bottom:3px;font-family:Manrope,"DM Sans",Arial,sans-serif;font-size:15px;font-weight:800;line-height:1.3} #op-produits .obc-atouts span{display:block;font-size:13px;line-height:1.5;color:#555} #op-produits .obc-atouts a{color:var(--obc-noir);font-weight:700;white-space:nowrap} /* Récapitulatif resserré : montants, devis ou commande, moyens de paiement. */ #op-produits .obc-total{grid-area:total;position:sticky;top:125px;padding:24px;background:#fff;border:1px solid var(--obc-filet)} #op-produits .obc-total h2{font-family:Manrope,"DM Sans",Arial,sans-serif;font-size:20px;font-weight:800;margin:0 0 12px} #op-produits .obc-total dl{margin:0} #op-produits .obc-total dl>div{display:flex;justify-content:space-between;gap:15px;margin:0;padding:7px 0;font-size:14px} #op-produits .obc-total dt{font-size:13.5px;color:#555} #op-produits .obc-total dd{margin:0;white-space:nowrap;font-weight:600} #op-produits .obc-total .obc-grand-total{align-items:baseline;margin-top:8px;padding-top:14px;border-top:2px solid var(--obc-rouge)} #op-produits .obc-total .obc-grand-total dt{font-size:17px;font-weight:800;color:var(--obc-noir)} #op-produits .obc-total .obc-grand-total dd{font-family:Manrope,"DM Sans",Arial,sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--obc-rouge)} /* Devis et commande : deux choix réunis sous le montant, jamais au-dessus du récapitulatif. */ #op-produits .obc-next-actions{display:grid;gap:10px;margin:18px 0 12px} #op-produits .obc-next-action{box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:62px;width:100%;padding:11px 16px;border:1.5px solid var(--obc-rouge);text-decoration:none;text-align:left;line-height:1.35;transition:background .15s ease,border-color .15s ease} #op-produits .obc-next-quote{background:#fff5f5;color:#a9161c} #op-produits .obc-next-order{background:var(--obc-rouge);color:#fff} #op-produits .obc-next-label{flex:1;min-width:0;display:grid;gap:3px} #op-produits .obc-next-label strong{font-size:16px;font-weight:750;letter-spacing:-.2px} #op-produits .obc-next-label small{font-size:12px;font-weight:450} #op-produits .obc-next-quote small{color:#6c4243} #op-produits .obc-next-icon,#op-produits .obc-next-arrow{display:flex;flex:none;align-items:center} #op-produits .obc-next-arrow svg{width:18px;height:18px} #op-produits .obc-next-action:focus-visible{outline:3px solid var(--obc-noir);outline-offset:4px} #op-produits .obc-account-note{margin:0;font-size:12px;line-height:1.55;color:var(--obc-gris)} @media(hover:hover){#op-produits .obc-next-quote:hover{background:#ffe8e9}#op-produits .obc-next-order:hover{background:var(--obc-rouge-fonce);border-color:var(--obc-rouge-fonce)}} @media(prefers-reduced-motion:reduce){#op-produits .obc-next-action{transition:none}} /* Moyens de paiement sous les boutons (03/10/2026) ; logos stylés par footer.css. */ .obc-paiements{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #e3e3e3;color:#111} .obc-paiements .ob-paiements{gap:10px 16px} /* Place réservée pendant que panier.js lit le panier (27/09/2026) : un article et le récapitulatif, aux mesures du rendu final, pour que la page ne saute pas. */ #op-produits .obc-chargement{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:18px 28px;align-items:start} #op-produits .obc-chargement::before,#op-produits .obc-chargement::after{content:'';background:#fff;border:1px solid var(--obc-filet)} #op-produits .obc-chargement::before{height:240px} #op-produits .obc-chargement::after{height:600px} /* Une colonne : articles, récapitulatif, puis engagements. */ @media(max-width:1050px){ #op-produits .obc-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"lignes" "total" "plus"} #op-produits .obc-total{position:static} #op-produits .obc-chargement{grid-template-columns:minmax(0,1fr)} } @media(min-width:651px) and (max-width:1050px){#op-produits .obc-next-actions{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){ #op-produits .obc-etapes li>span{flex-direction:column;gap:3px;height:54px;padding:0 10px 0 22px;font-size:11px} #op-produits .obc-etapes li:first-child>span{padding-left:8px} #op-produits .obc-etapes svg{width:19px;height:19px} } /* Petits téléphones : même réglage que le tunnel (tunnel.css), « Récapitulatif » tient en entier. */ @media(max-width:420px){#op-produits .obc-etapes strong{font-size:10px}} /* Mobile : le titre à côté du dessin, les caractéristiques sur toute la largeur, puis le prix et la quantité sur une même ligne. */ @media(max-width:650px){ #op-produits .obc-tete{margin:4px 0 12px} #op-produits .obc-etapes{margin-bottom:16px} #op-produits .obc-line{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"image titre" "carac carac" "sans sans" "detail detail" "actions actions" "prix prix";gap:0 14px;padding:16px} #op-produits .obc-info{display:contents} #op-produits .obc-image{grid-area:image;aspect-ratio:auto;height:76px;padding:6px} #op-produits .obc-image svg{max-height:64px} #op-produits .obc-titre{grid-area:titre;align-self:center} #op-produits .obc-titre h2{font-size:16px} #op-produits .obc-carac{grid-area:carac;columns:1;margin-top:12px;font-size:12.5px} #op-produits .obc-sans{grid-area:sans} #op-produits .obc-detail{grid-area:detail;display:block} #op-produits .obc-line:not(.is-ouverte) .obc-carac>div:nth-child(n+7),#op-produits .obc-line:not(.is-ouverte) .obc-sans{display:none} #op-produits .obc-actions{grid-area:actions;margin-top:10px} #op-produits .obc-line-price{grid-area:prix;grid-template-columns:1fr auto;grid-template-areas:"total qty" "unite qty";justify-items:start;align-items:center;gap:2px 12px;margin-top:14px;padding-top:12px;border-top:1px solid #eee;text-align:left} #op-produits .obc-line-price>strong{grid-area:total;font-size:20px} #op-produits .obc-line-price>small{grid-area:unite} #op-produits .obc-qty{grid-area:qty;margin:0;justify-items:end} #op-produits .obc-qty>span{display:none} #op-produits .obc-line-erreur{display:block} #op-produits .obc-line-erreur .obc-info{display:block} #op-produits .obc-atouts{grid-template-columns:minmax(0,1fr)} #op-produits .obc-atouts li{padding:14px 16px} #op-produits .obc-total{padding:20px} #op-produits .obc-next-action{padding:12px;gap:10px} #op-produits .obc-next-label strong{font-size:15px} #op-produits .obc-chargement::before{height:360px} } #volet-parcours .vr-price-detail{margin:12px 0;font-size:11px}#volet-parcours .vr-price-detail summary{cursor:pointer}#volet-parcours .vr-price-detail dl>div{display:flex;justify-content:space-between;gap:12px;margin:8px 0}#volet-parcours .vr-price-detail dd{margin:0;white-space:nowrap}#volet-parcours .vr-price-error{font-size:12px;color:#a00}#volet-parcours .vr-added-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px}#volet-parcours .vr-added-links a{display:inline-block;padding:15px 24px;background:#d81f26;color:#fff;text-decoration:none;font-weight:650} /* Sauvegarde et reprise : même parcours et mêmes visuels que le panier V2. */ .obc-project-save{margin-top:22px;padding-top:18px;border-top:1px solid #ddd} .obc-project-save summary{font-weight:750;cursor:pointer;color:#D81F26;font-size:15px} .obc-project-save form{display:grid;gap:12px;margin-top:16px} .obc-project-save label{display:grid;gap:7px;font-size:13px;font-weight:600;text-align:left} .obc-project-save input:not([type=checkbox]){box-sizing:border-box;min-width:0;width:100%;padding:11px 12px;border:1px solid #ccc;background:#fff;color:#111;font:inherit} .obc-project-save .obc-project-consent{display:flex;align-items:flex-start;gap:9px;font-weight:400;line-height:1.5} .obc-project-consent input{flex-shrink:0;margin-top:4px;accent-color:#D81F26} .obc-project-note{font-size:12px!important;line-height:1.6!important;color:#666!important;font-weight:400} .obc-project-save [data-save-result]{display:grid;gap:12px;margin-top:12px;min-width:0} .obc-project-save [role=status]{font-size:13px;line-height:1.5} .obc-project-recovery{padding:24px;margin:0 0 22px;border:1px solid #edcaca;border-left:4px solid #D81F26;background:#fff9f9} .obc-project-recovery h2{font-size:24px;margin:10px 0;overflow-wrap:anywhere} .obc-project-recovery p,.obc-project-recovery li{font-size:14px;line-height:1.7} .obc-project-recovery ul{padding-left:20px;margin:14px 0} .obc-project-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0} .obc-project-save button:disabled,.obc-project-recovery button:disabled{opacity:.5;cursor:wait} #op-produits .obc-project-save{margin-top:14px;padding-top:14px} #op-produits .obc-project-save summary{color:#555;font-size:13px;font-weight:600} @media(max-width:640px){.obc-project-recovery{padding:18px}.obc-project-buttons{display:grid}.obc-project-save .obp-button{width:100%;box-sizing:border-box}} /* Modification d'une commande par le gérant (04/10/2026) : bandeau rouge en tête de page, angles droits et aucune ombre comme le reste du site. Le bloc « Terminer la modification » prend la place des boutons devis et commande (components/panier/recapitulatif.mjs) et reprend leur espacement. */ .obc-bandeau-edition{background:#D81F26;color:#fff;padding:12px 16px;font-weight:600;margin-bottom:16px} .obc-bandeau-edition a,.obc-bandeau-edition button{color:#fff;text-decoration:underline;background:none;border:0;font:inherit;cursor:pointer} /* La règle générale « #op-produits a » du site retire le soulignement des liens et l'emporte sur la précédente : « Terminer » doit rester un lien reconnaissable, comme « Abandonner ». Pas de fenêtre de confirmation avant d'abandonner (le gérant n'en veut pas) : 16 px au moins séparent les deux. La marge est à droite du lien, pas à gauche du bouton, pour qu'« Abandonner » ne soit pas décalé quand il passe à la ligne sur mobile ; le bouton n'a pas de remplissage. */ #op-produits .obc-bandeau-edition a{color:#fff;text-decoration:underline;margin-right:16px} .obc-bandeau-edition button{padding:0} #op-produits .obc-edition-actions{display:grid;gap:12px;margin:18px 0 0} /* Même trame éditoriale que presentation-aluminium.css : hero, repères, coupes légendées, listes numérotées, fiches et conclusion. Portée portes uniquement. */ #porte-entree-description{background:#fff;color:#222;padding:60px 32px 40px;font:16px/1.75 'DM Sans',sans-serif;overflow-wrap:break-word} #porte-entree-description *{box-sizing:border-box;min-width:0} #porte-entree-description .ag-wrap{max-width:1200px;margin:auto} #porte-entree-description :is(section,figure,ol,ul,dl,p){margin:0} #porte-entree-description :is(h2,h3,h4){font-family:Manrope,'DM Sans',sans-serif;letter-spacing:-.045em;color:#171717;line-height:1.12;margin:0;text-wrap:balance} #porte-entree-description h2{font-size:clamp(40px,4.4vw,59px);font-weight:800} #porte-entree-description h2>span{display:block;font-size:.66em;line-height:1.18;margin-top:18px;font-weight:650} #porte-entree-description h3{font-size:clamp(30px,3.3vw,44px);font-weight:750} #porte-entree-description h4{font-size:21px;line-height:1.35;letter-spacing:-.025em} #porte-entree-description p{color:#5a5a5a} #porte-entree-description p strong{color:#252525} #porte-entree-description img{display:block;max-width:100%;height:auto} #porte-entree-description figcaption{font-size:14px;line-height:1.6;color:#737373;margin-top:14px} #porte-entree-description figcaption :is(strong,span){display:block} #porte-entree-description a{color:inherit;text-decoration:none} #porte-entree-description :is(a,summary,[tabindex]):focus-visible{outline:3px solid #d81f26;outline-offset:5px} #porte-entree-description :is(.ag-heading,section){scroll-margin-top:150px} #porte-entree-description .ag-kicker{text-transform:uppercase;letter-spacing:.14em;font-size:12px;line-height:1.6;font-weight:750;color:#d81f26;margin-bottom:20px} #porte-entree-description .ag-nav{border-block:1px solid #e8e8e8;display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:17px 0;margin-bottom:55px} #porte-entree-description .ag-nav>span{font-size:15px;font-weight:750;margin-right:auto;padding-right:18px} #porte-entree-description .ag-nav a{padding:10px 11px;font-size:14px;border-radius:8px;min-height:44px} #porte-entree-description .ag-nav a:hover{background:#f3f3f3} #porte-entree-description .ag-hero{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:60px} #porte-entree-description .ag-hero-copy>.ag-lead{font-size:21px;line-height:1.6;color:#292929;margin:28px 0 20px} #porte-entree-description .ag-origin{display:flex;align-items:center;gap:20px;margin-top:30px} #porte-entree-description .ag-origin img{width:111px} #porte-entree-description .ag-origin span{font-size:14px;line-height:1.6;color:#707070;border-left:1px solid #ddd;padding-left:20px} #porte-entree-description .pd-photo-stage{height:550px;border-radius:22px;overflow:hidden;position:relative;background:#f3f3f1;display:flex;align-items:center;justify-content:center} #porte-entree-description .pd-photo-stage img{width:100%;height:100%;object-fit:contain;transform-origin:50% 50%} #porte-entree-description .pd-photo-stage:is(.pd-photo-produit,.pd-photo-interieur) img{width:auto;max-width:none;flex:none} #porte-entree-description .pd-photo-stage:is(.pd-photo-ambiance,.pd-photo-detail) img{object-fit:cover} #porte-entree-description .ag-signatures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:50px;padding:28px 0;border-block:1px solid #e7e7e7;gap:20px} #porte-entree-description .ag-signatures>div:not(:first-child){padding-left:28px;border-left:1px solid #e7e7e7} #porte-entree-description .ag-signatures strong{display:block;font:750 19px/1.4 Manrope,sans-serif;letter-spacing:-.03em} #porte-entree-description .ag-signatures span{font-size:14px;color:#757575;display:block;margin-top:5px} #porte-entree-description .ag-section{padding-top:90px} #porte-entree-description .ag-heading{max-width:780px;margin-bottom:38px} #porte-entree-description .ag-heading>p:not(.ag-kicker){margin-top:20px;font-size:17px;line-height:1.65} #porte-entree-description .ag-insulation-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center} #porte-entree-description .ag-cutaway{background:#f6f6f4;border-radius:22px;padding:34px} #porte-entree-description .ag-cutaway img{height:450px;width:100%;object-fit:contain} #porte-entree-description .ag-construction{padding:0;list-style:none;display:grid;gap:30px} #porte-entree-description .ag-construction li{display:grid;grid-template-columns:44px 1fr;gap:18px} #porte-entree-description .ag-construction li>span{font:650 24px/1.35 Manrope,sans-serif;color:#d81f26} #porte-entree-description .ag-construction h4{margin-bottom:12px} #porte-entree-description .pd-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;margin-top:45px} #porte-entree-description .pd-details figure{height:320px;overflow:hidden;border-radius:18px;background:#f6f6f4;margin-bottom:24px} #porte-entree-description .pd-details img{width:100%;height:100%;object-fit:contain} #porte-entree-description .pd-details p{margin-top:12px} #porte-entree-description .pd-performance{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;border-radius:22px;background:#f5f5f3;padding:40px;align-items:center} #porte-entree-description .pd-metric{border-right:1px solid #dadbd8;padding-right:35px} #porte-entree-description .pd-metric>span{display:block;font-size:15px} #porte-entree-description .pd-metric>strong{display:block;font:750 clamp(45px,5vw,70px)/1.3 Manrope,sans-serif;color:#d81f26;letter-spacing:-.06em;margin:10px 0} #porte-entree-description .pd-metric>strong small{font-size:25px;letter-spacing:0} #porte-entree-description .pd-metric p{margin-top:18px;font-size:15px} #porte-entree-description .pd-performance-copy p{margin-top:15px} #porte-entree-description .pd-performance-copy h4:not(:first-child){margin-top:25px} #porte-entree-description .ag-note{font-size:14px;line-height:1.7;color:#6c6c6c;margin-top:20px} #porte-entree-description .pd-two{display:grid;grid-template-columns:1fr 1fr;gap:45px} #porte-entree-description .pd-two p{margin-top:16px} #porte-entree-description .pd-highlight{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:center;margin-top:35px;background:#f6f6f4;padding:25px;border-radius:20px} #porte-entree-description .pd-highlight img{height:240px;width:100%;object-fit:contain;border-radius:12px} #porte-entree-description .pd-highlight p{margin-top:12px} #porte-entree-description .pd-subheading{margin:40px 0 25px} #porte-entree-description .pd-handles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px} #porte-entree-description .pd-handles article{border:1px solid #e7e7e7;border-radius:16px;overflow:hidden;padding:0 16px 20px} #porte-entree-description .pd-handles figure{height:230px;display:flex;justify-content:center;padding:10px 0 20px} #porte-entree-description .pd-handles img{height:100%;width:auto;object-fit:contain} #porte-entree-description .pd-handles h4{font-size:17px} #porte-entree-description .pd-handles p{font-size:14px;margin-top:9px} #porte-entree-description .pd-option-note{border-left:3px solid #d81f26;padding:16px 25px;margin-top:30px;background:#f6f6f4} #porte-entree-description .pd-option-note p{margin-top:8px} #porte-entree-description .pd-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;list-style:none;padding:0} #porte-entree-description .pd-palette li>span{display:block;height:75px;border-radius:12px;border:1px solid #0001;margin-bottom:12px} #porte-entree-description .pd-palette strong{display:block;font-size:15px} #porte-entree-description .pd-palette small{display:block;font-size:13px;color:#757575;margin-top:3px} #porte-entree-description .pd-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;margin-top:45px} #porte-entree-description .pd-gallery .pd-photo-stage{height:520px} #porte-entree-description .pd-gallery:has(>figure:only-child){max-width:800px;margin-inline:auto} #porte-entree-description .pd-table-scroll{margin-top:35px;overflow-x:auto;border:1px solid #e0e0e0;border-radius:16px} #porte-entree-description table{width:100%;border-collapse:collapse;text-align:left;font-size:15px} #porte-entree-description caption{text-align:left;padding:20px;font-weight:650} #porte-entree-description :is(th,td){padding:18px 22px;border-top:1px solid #e3e3e3} #porte-entree-description thead{background:#f4f4f2} #porte-entree-description td{white-space:nowrap} #porte-entree-description .pd-quality{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:35px} #porte-entree-description .pd-quality img{height:82px;width:160px;object-fit:contain;object-position:left center;margin-bottom:25px} #porte-entree-description .pd-quality p{margin-top:15px} #porte-entree-description .pd-faq{margin-top:55px} #porte-entree-description .pd-faq>h4{margin-bottom:20px} #porte-entree-description details{border-top:1px solid #e1e1e1;padding:20px 0} #porte-entree-description summary{cursor:pointer;font-weight:650;font-size:17px} #porte-entree-description details p{margin-top:16px;max-width:850px} #porte-entree-description .ag-closing{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid #ddd;margin-top:80px;padding-top:45px} #porte-entree-description .ag-closing a{background:#d81f26;color:white;border-radius:9px;padding:17px 24px;white-space:nowrap;font-weight:700;min-height:52px} @media(max-width:1000px){ #porte-entree-description{padding:45px 10px} #porte-entree-description .ag-hero{gap:30px} #porte-entree-description .ag-insulation-grid{gap:30px;grid-template-columns:1fr 1.2fr} #porte-entree-description .ag-signatures{grid-template-columns:1fr 1fr} #porte-entree-description .ag-signatures>div:nth-child(3){padding-left:0;border:0} #porte-entree-description .pd-performance{gap:28px;padding:28px} #porte-entree-description .pd-palette{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:700px){ #porte-entree-description{padding:35px 0;font-size:16px} #porte-entree-description .ag-nav{gap:4px;margin-bottom:30px} #porte-entree-description .ag-nav>span{flex-basis:100%;margin-bottom:5px} #porte-entree-description .ag-nav a{padding:10px;font-size:14px} #porte-entree-description .ag-hero{grid-template-columns:1fr;gap:30px} #porte-entree-description .ag-hero-copy>.ag-lead{font-size:19px;margin-top:24px} #porte-entree-description .pd-photo-stage{height:450px} #porte-entree-description .ag-signatures{margin-top:30px;gap:24px 16px} #porte-entree-description .ag-signatures>div:nth-child(even){padding-left:16px} #porte-entree-description .ag-section{padding-top:65px} #porte-entree-description .ag-insulation-grid{grid-template-columns:1fr;gap:30px} #porte-entree-description .ag-cutaway{padding:22px} #porte-entree-description .ag-cutaway img{height:350px} #porte-entree-description .ag-construction li{gap:12px;grid-template-columns:32px 1fr} #porte-entree-description .pd-details{grid-template-columns:1fr;gap:30px} #porte-entree-description .pd-details figure{height:300px;margin-bottom:18px} #porte-entree-description .pd-performance{grid-template-columns:1fr;gap:25px;padding:25px} #porte-entree-description .pd-metric{border:0;border-bottom:1px solid #dadbd8;padding:0 0 25px} #porte-entree-description .pd-two{grid-template-columns:1fr;gap:25px} #porte-entree-description .pd-highlight{grid-template-columns:1fr;gap:20px;padding:20px} #porte-entree-description .pd-handles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} #porte-entree-description .pd-handles article{padding:0 12px 18px} #porte-entree-description .pd-handles figure{height:210px} #porte-entree-description .pd-palette{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} #porte-entree-description .pd-gallery{grid-template-columns:1fr} #porte-entree-description .pd-gallery .pd-photo-stage{height:450px} #porte-entree-description :is(th,td){padding:16px 12px;font-size:14px} #porte-entree-description .pd-quality{grid-template-columns:1fr} #porte-entree-description .ag-closing{flex-direction:column;align-items:flex-start;margin-top:55px;padding-top:35px} #porte-entree-description .ag-closing a{white-space:normal} } /* Pilote Strate : mêmes cinq rubriques que les portes de garage validées. */ #porte-entree-description:is(.ps-strate,.ps-portes){font-size:17px;line-height:1.75} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-tabs-origin{display:block;height:0} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-tabsbar{position:sticky;top:var(--ps-header-height,144px);z-index:25;background:#fff;border-bottom:1px solid #dededb;padding:8px 0 0;margin-bottom:45px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-tabs{display:flex;gap:30px;overflow-x:auto;scrollbar-width:thin;position:relative} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-tabs a{white-space:nowrap;display:flex;align-items:center;gap:8px;flex-shrink:0;border-bottom:3px solid transparent;border-radius:0;padding:20px 3px;color:#656565;font-weight:700;font-size:17px;min-height:62px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-tabs a[aria-selected=true]{color:#151515;border-bottom-color:#d81f26} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-count{background:#f1f1ee;border-radius:30px;padding:2px 7px;font-size:12px;line-height:1.5} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-panel{outline-offset:5px;overflow-anchor:none;scroll-margin-top:230px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-panel[hidden]{display:none!important} #porte-entree-description:is(.ps-strate,.ps-portes):not(.ps-enhanced) .ps-panel+.ps-panel{margin-top:75px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-panel>.ag-heading{margin-bottom:38px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-model{height:640px;display:flex;flex-direction:column;align-items:center;justify-content:center} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-model>img{height:calc(100% - 45px);width:auto;object-fit:contain} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-model figcaption{text-align:center} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-ambiance img{width:100%;max-height:690px;object-fit:contain;border-radius:20px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-link{display:inline-flex;gap:12px;align-items:center;font-size:16px;font-weight:750;color:#b61920;border-bottom:1px solid #d81f2650;margin:22px 24px 0 0;min-height:44px;line-height:1.5} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-note{margin-top:32px;padding:25px 28px;border-left:3px solid #d81f26;border-radius:0 12px 12px 0;background:#f5f5f2;font-size:16px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-note strong{display:block;font-size:18px;color:#222} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-note p{margin-top:8px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:35px;margin-top:32px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-points article{padding-top:24px;border-top:1px solid #ddd} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-points h4{margin:15px 0} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-number{color:#d81f26;font:600 22px Manrope,sans-serif} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-measure-intro{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-measure-intro figure{padding:25px;border:1px solid #e3e3e0;border-radius:18px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-measure-intro img{width:100%;height:340px;object-fit:contain} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-poses{display:grid;grid-template-columns:1fr 1fr;gap:32px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-poses article{border:1px solid #dededa;border-radius:18px;padding:28px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-poses figure{height:210px;display:flex;align-items:center;justify-content:center;margin-bottom:25px;background:#fff} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-poses figure img{width:100%;height:100%;object-fit:contain} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-poses p{margin-top:15px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-documents{display:grid;grid-template-columns:1fr 1fr;gap:26px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-document{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;align-items:center;padding:24px;border:1px solid #ddd;border-radius:18px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-document .ag-kicker{font-size:11px;margin-bottom:10px;letter-spacing:.08em} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-document h4{font-size:21px;margin-bottom:13px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-document p{font-size:15px;line-height:1.65} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-document .ps-link{margin:14px 0 0;font-size:15px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-cover{background:#f7f7f4;border:1px solid #ddd;box-shadow:0 8px 18px #0000000d;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-cover img{max-height:165px;object-fit:contain;width:100%} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-cover span{font-size:12px;color:#555;margin-top:12px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hardware{display:grid;grid-template-columns:1fr 1fr;gap:35px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hardware article{border:1px solid #e1e1dd;border-radius:20px;overflow:hidden} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hardware article>div{padding:28px 30px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hardware h4{font-size:25px;margin:16px 0} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hardware p+p{margin-top:15px;font-size:15px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-closeup{height:420px;position:relative;overflow:hidden;background:#f5f5f4} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-closeup img{position:absolute;height:auto;max-width:none;left:50%;top:50%} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-quartz img{height:285%;width:auto;transform:translate(-24%,-69.7%)} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-badge{display:inline-flex;font-weight:700;font-size:13px;background:#ededeb;color:#222;padding:5px 12px;border-radius:20px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-option{color:#b51b21;background:#fff0f0} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hinge{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:65px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hinge figure{border:1px solid #e1e1dd;border-radius:18px;padding:25px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hinge img{height:390px;object-fit:contain;width:100%} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hinge h4{margin-bottom:15px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hinge p+h4{margin-top:30px} #porte-entree-description:is(.ps-strate,.ps-portes) td{white-space:normal} #porte-entree-description:is(.ps-strate,.ps-portes) th{width:34%} #porte-entree-description:is(.ps-strate,.ps-portes) table{font-size:16px} @media(max-width:1000px){ #porte-entree-description:is(.ps-strate,.ps-portes) .ps-tabs{gap:24px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-documents{grid-template-columns:1fr} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-measure-intro{gap:30px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hardware{gap:22px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-model{height:570px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hinge{gap:35px} } @media(max-width:700px){ #porte-entree-description:is(.ps-strate,.ps-portes){font-size:16px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-tabsbar{margin-bottom:28px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-tabs{gap:22px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-tabs a{font-size:16px;padding-block:16px;min-height:55px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-model{height:540px} #porte-entree-description:is(.ps-strate,.ps-portes) :is(.ps-measure-intro,.ps-poses,.ps-hardware,.ps-hinge){grid-template-columns:1fr;gap:30px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-measure-intro img{height:auto} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-poses article{padding:22px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-poses figure{height:180px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-note{padding:20px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-document{grid-template-columns:95px minmax(0,1fr);padding:18px;gap:18px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-document h4{font-size:19px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-cover{min-height:140px;padding:5px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-cover span{font-size:11px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-document .ag-kicker{font-size:10px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-closeup{height:340px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hardware article>div{padding:24px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hardware h4{font-size:22px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hinge img{height:330px} #porte-entree-description:is(.ps-strate,.ps-portes) :is(th,td){font-size:14px;padding:15px 11px} #porte-entree-description:is(.ps-strate,.ps-portes) th{width:40%} } #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre{height:520px;display:flex;flex-direction:column;background:#fff;padding:0 18px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hardware .ps-closeup{height:520px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre-whole{height:450px;position:relative;overflow:hidden} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre-whole img{position:absolute;max-width:none;width:auto;height:108%;left:50%;top:50%;transform:translate(-50%,-50%) rotate(25deg)} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre figcaption{text-align:center;margin:10px 0 0;font-size:14px;line-height:1.5} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre-detail{display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:center;border-top:1px solid #e6e6e3;margin-top:24px;padding-top:22px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre-detail strong{display:block;font-size:16px;line-height:1.4} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre-detail p{font-size:15px!important;line-height:1.6;margin-top:8px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre-fixing{height:132px;position:relative;overflow:hidden;border-radius:12px;background:#f4f4f1} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre-fixing img{position:absolute;max-width:none;width:auto;height:1400%;left:50%;top:50%;transform:translate(-76%,-34%)} @media(max-width:700px){ #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre{height:500px;padding:0 12px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-hardware .ps-closeup{height:340px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre-whole{height:455px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre-detail{grid-template-columns:110px 1fr;gap:16px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-nacre-fixing{height:120px} } /* Strate : repères de mesure simples et présentation des options réelles. */ #porte-entree-description:is(.ps-strate,.ps-portes) .ps-measure-intro .ps-simple-measure{padding:12px;background:#fafaf8;border:0} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-simple-measure img{height:auto;max-height:520px;width:100%} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-simple-measure figcaption{padding:0 16px 14px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-measure-details{max-width:900px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-measure-details summary{font-size:18px;padding-right:20px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-colour-story{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center;background:#f6f6f3;padding:45px;border-radius:22px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-colour-story .ag-heading{margin-bottom:25px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-face-choices{display:grid;gap:25px;margin-top:30px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-face-choices h4{font-size:19px;margin-bottom:8px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-colour-samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px 20px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-colour-samples>div>span{display:block;height:64px;border-radius:8px;border:1px solid #0002;box-shadow:0 3px 6px #0000000a} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-colour-samples strong{display:block;font-size:15px;line-height:1.3;margin-top:8px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-colour-samples small{display:block;font-size:14px;color:#666} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-colour-samples>p{grid-column:1/-1;font-size:14px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-security-story{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-security-story h4{margin:15px 0 12px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-security-story p+.ps-badge{margin-top:28px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-security-story p+h4{margin-top:28px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-lock-photos{border:1px solid #e5e5e2;border-radius:20px;padding:25px;display:grid;gap:25px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-lock-photos figure{text-align:center} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-lock-photos figure+figure{padding-top:20px;border-top:1px solid #e5e5e2} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-lock-photos img{max-height:230px;width:100%;object-fit:contain} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-lock-photos figure+figure img{max-height:185px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-electric-note{display:flex;gap:40px;align-items:center;justify-content:space-between;padding:32px;background:#f5f5f2;border-radius:18px;margin-top:35px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-electric-note>div{max-width:760px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-electric-note h4{margin:16px 0 12px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-electric-note .ps-link{flex-shrink:0;margin:0} @media(max-width:1000px){ #porte-entree-description:is(.ps-strate,.ps-portes) :is(.ps-colour-story,.ps-security-story){gap:30px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-colour-story{padding:30px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-electric-note{display:block} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-electric-note .ps-link{margin-top:18px} } @media(max-width:700px){ #porte-entree-description:is(.ps-strate,.ps-portes) :is(.ps-colour-story,.ps-security-story){grid-template-columns:1fr} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-colour-story{padding:24px 20px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-colour-samples{gap:18px 14px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-colour-samples>div>span{height:58px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-electric-note{padding:24px} #porte-entree-description:is(.ps-strate,.ps-portes) .ps-lock-photos{padding:20px} } #porte-entree-description:is(.ps-strate,.ps-portes) .ps-photo-open{display:inline-block;color:#b61920;text-decoration:underline;text-underline-offset:3px;line-height:1.6;padding:5px} /* Déclinaison commune des huit familles, selon le pilote Strate validé. */ #porte-entree-description.ps-portes .ps-product-hero .pd-photo-stage{height:620px;background:#fff} #porte-entree-description.ps-portes .ps-product-hero figcaption{text-align:center} #porte-entree-description.ps-portes .ps-hardware:has(>article:only-child){grid-template-columns:minmax(0,1fr);max-width:700px;margin-inline:auto} #porte-entree-description.ps-portes .ps-hardware-photo{height:520px;display:grid;grid-template-rows:minmax(0,1fr) auto;position:relative;overflow:hidden;background:#f5f5f3} #porte-entree-description.ps-portes .ps-hardware-stage{position:relative;min-height:0;overflow:hidden} #porte-entree-description.ps-portes .ps-photo-enlarge{position:absolute;right:12px;bottom:12px;z-index:1;background:#fff;color:#222;border:1px solid #ddd;border-radius:20px;padding:8px 12px;font-size:14px;text-decoration:none} #porte-entree-description.ps-portes .ps-hardware-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none} #porte-entree-description.ps-portes .ps-hardware-photo figcaption{position:relative;z-index:1;margin:0;padding:12px 18px;font-size:14px;text-align:center;background:#ffffffeb;color:#575757} #porte-entree-description.ps-portes .ps-security-story h4{margin-bottom:18px} #porte-entree-description.ps-portes .ps-security-text{max-width:820px} #porte-entree-description.ps-portes .ps-security-text h4{margin-bottom:18px} #porte-entree-description.ps-portes .ps-colour-samples:has(>div:only-of-type){max-width:380px;grid-template-columns:1fr} #porte-entree-description.ps-portes .ps-colour-samples:has(>div:only-of-type) span{height:180px} #porte-entree-description.ps-portes .ps-cover img{height:165px;object-fit:contain} @media(max-width:700px){ #porte-entree-description.ps-portes .ps-product-hero .pd-photo-stage{height:500px} #porte-entree-description.ps-portes .ps-hardware-photo{height:380px} } /* Les fiches publiques reprennent les titres illustrés des cinq rubriques. */ #porte-entree-description .obf-panel-title{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #porte-entree-description .obf-panel:focus{outline:none} #porte-entree-description .gt-tabs button{font-weight:800;font-size:17px} /* Parcours portes d’entrée : proportions, bandeaux et navigation Onlybaie. */ #onlybaie-perspective #op-produits:has(.pe-config){max-width:1600px;padding:22px 24px 50px;margin:auto} #onlybaie-perspective .pe-config{font:15px/1.5 'DM Sans',Arial,sans-serif;color:#25282b;scroll-margin-top:150px} #onlybaie-perspective .pe-config *{box-sizing:border-box}#onlybaie-perspective .pe-config :is(button,input,select){font:inherit}#onlybaie-perspective .pe-config button{cursor:pointer}#onlybaie-perspective .pe-config button:disabled{opacity:.45;cursor:default} #onlybaie-perspective .pe-config :is(button,input,a):focus-visible{outline:3px solid #D81F26;outline-offset:3px} #onlybaie-perspective .pe-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}#onlybaie-perspective .pe-heading h1{font:750 clamp(26px,3vw,34px)/1.2 Manrope,sans-serif;letter-spacing:-.8px;margin:0 0 8px}#onlybaie-perspective .pe-heading p{font-size:15px;color:#65696c;margin:0}#onlybaie-perspective .pe-heading>a{font-size:14px;color:#5d6266;text-underline-offset:4px} #onlybaie-perspective .pe-steps{margin-bottom:18px}#onlybaie-perspective .pe-layout{display:grid;grid-template-columns:400px minmax(0,1fr) 280px;gap:16px;align-items:stretch} #onlybaie-perspective .pe-panel{display:flex;flex-direction:column;min-width:0;height:600px;background:#fff;border:1px solid #dfe1e2;border-radius:8px;overflow:hidden;position:relative} #onlybaie-perspective .pe-panel>.ob-config-band{margin:0;padding:12px 15px;min-height:44px;font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase;flex:none} #onlybaie-perspective .pe-options-body{padding:16px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a3a8ab #f0f1f2;overscroll-behavior-y:auto} #onlybaie-perspective .pe-section{margin:0;padding:0;border:0}#onlybaie-perspective .pe-section+.pe-section{margin-top:23px;padding-top:20px;border-top:1px solid #e8eaeb} #onlybaie-perspective .pe-section h2{font-size:18px;line-height:1.3;letter-spacing:-.25px;margin:0 0 10px;font-weight:750}#onlybaie-perspective .pe-section>p{font-size:14px;line-height:1.6;color:#626970;margin:0 0 14px} #onlybaie-perspective .pe-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#onlybaie-perspective .pe-field{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:650;min-width:0}#onlybaie-perspective .pe-field small{font-size:13px;font-weight:400;color:#72777a} #onlybaie-perspective .pe-input{display:flex;align-items:center;gap:5px;border:1px solid #aeb4b8;border-radius:5px;padding-right:10px;background:#fff;color:#6a7175}#onlybaie-perspective .pe-input input{width:100%;min-width:0;border:0;border-radius:5px;background:transparent;padding:10px;color:#202629;font-size:20px;font-weight:650;height:48px}#onlybaie-perspective .pe-input:has([aria-invalid=true]){border-color:#ba2026}#onlybaie-perspective .pe-input>span{font-size:14px;font-weight:400} #onlybaie-perspective .pe-config .pe-tip{padding:13px 14px;border-radius:5px;background:#f4f5f5;color:#5f6569;font-size:14px;line-height:1.6;margin:15px 0 0} #onlybaie-perspective .pe-config .pe-tip a{color:#D81F26;text-decoration:underline;text-underline-offset:2px} #onlybaie-perspective .pe-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#onlybaie-perspective .pe-card{display:flex;flex-direction:column;align-items:stretch;gap:7px;text-align:left;border:1px solid #d5d9dc;border-radius:6px;background:white;color:#252b30;padding:10px;min-width:0;position:relative;transition:border-color .12s} #onlybaie-perspective .pe-card:hover{border-color:#80898f}#onlybaie-perspective .pe-card.selected,#onlybaie-perspective .pe-color.selected{border-color:#D81F26;box-shadow:inset 0 0 0 1px #D81F26;background:#fffafa}#onlybaie-perspective .pe-card.selected:after{content:'✓';display:grid;place-items:center;position:absolute;right:7px;top:7px;width:20px;height:20px;border-radius:50%;background:#D81F26;color:white;font-size:13px} #onlybaie-perspective .pe-card strong{font-size:15px;font-weight:700;line-height:1.35}#onlybaie-perspective .pe-card>span:not(.pe-card-image){font-size:13px;line-height:1.45;color:#636b70}#onlybaie-perspective .pe-card-image{display:flex;align-items:center;justify-content:center;height:130px;background:#f7f8f8;border-radius:3px;overflow:hidden}#onlybaie-perspective .pe-card-image>svg{display:block;width:100%;height:100%}#onlybaie-perspective .pe-compositions .pe-card-image{height:145px} #onlybaie-perspective .pe-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}#onlybaie-perspective .pe-color{min-width:0;border:1px solid #d7dbdd;border-radius:6px;padding:7px;background:#fff;text-align:left;color:#272c30}#onlybaie-perspective .pe-color>span{display:block;height:45px;border:1px solid #0002;border-radius:3px;margin-bottom:6px}#onlybaie-perspective .pe-color strong{display:block;font-size:13px;line-height:1.3}#onlybaie-perspective .pe-color small{display:block;font-size:12px;line-height:1.4;color:#6b7074;margin-top:3px} #onlybaie-perspective .pe-list{padding-left:19px;margin:0;color:#565e64;font-size:14px}#onlybaie-perspective .pe-list li+li{margin-top:8px}#onlybaie-perspective .pe-glass{display:block;width:65%;height:100px;background:linear-gradient(135deg,#b6cbd3,#f3faff 45%,#c1d6df);border:9px solid #555f67;box-shadow:inset 0 0 0 1px #a8b8be}#onlybaie-perspective .pe-glass-depoli{background:#e5eef0}#onlybaie-perspective .pe-glass-reflechissant{background:linear-gradient(155deg,#647982,#d2e0e6 45%,#8c9fa8 47%,#d9e4e8)} #onlybaie-perspective .pe-nav{padding:11px 13px;display:flex;justify-content:space-between;gap:10px;border-top:1px solid #e4e6e8;background:#fafbfb;flex:none}#onlybaie-perspective .pe-nav button{border:1px solid #d7dce0;border-radius:5px;background:#fff;padding:9px 12px;color:#3c454c;font-size:14px;font-weight:650}#onlybaie-perspective .pe-nav button:last-child{background:#333b43;color:white;border-color:#333b43} #onlybaie-perspective .pe-views{display:flex;justify-content:center;gap:6px;padding:14px 10px 0}#onlybaie-perspective .pe-views button{border:1px solid #d8dddf;border-radius:30px;background:#fff;padding:7px 12px;color:#697076;font-size:13px;white-space:nowrap}#onlybaie-perspective .pe-views button[aria-pressed=true]{color:#252c31;border-color:#41494f;background:#f1f3f4;font-weight:700} #onlybaie-perspective .pe-drawing{flex:1;min-height:0;padding:10px 8px 0;display:flex;align-items:center;justify-content:center}#onlybaie-perspective .pe-drawing>svg{max-height:460px}#onlybaie-perspective .pe-scene-tools{display:flex;align-items:center;justify-content:center;gap:18px;padding:9px 12px;color:#717a80;font-size:13px}#onlybaie-perspective .pe-scene-tools button{background:#fff;border:1px solid #d5dcdf;border-radius:5px;padding:7px 12px;font-size:13px;color:#4b575f}#onlybaie-perspective .pe-render-note{text-align:center;font-size:12px;color:#7e858b;margin:3px 8px 13px} #onlybaie-perspective .pe-summary-body{min-height:0;flex:1;overflow-y:auto;padding:16px;scrollbar-width:thin}#onlybaie-perspective .pe-summary-body h2{font-size:24px;line-height:1.2;margin:0 0 4px}#onlybaie-perspective .pe-summary-body>p{font-size:13px;color:#747d83;margin:0 0 12px}#onlybaie-perspective .pe-summary dl{margin:0}#onlybaie-perspective .pe-summary dl>div{padding:9px 0;border-bottom:1px solid #edf0f1}#onlybaie-perspective .pe-summary dt{font-size:12px;color:#80878c;margin-bottom:3px}#onlybaie-perspective .pe-summary dd{font-size:14px;line-height:1.4;margin:0;color:#363f45}#onlybaie-perspective .pe-link{font-size:13px;text-decoration:underline;text-underline-offset:3px;background:none;border:0;color:#5e6870;padding:0;margin-top:13px;display:inline-block} #onlybaie-perspective .pe-order{flex:none;border-top:1px solid #e2e5e7;background:#fafbfb;padding:15px}#onlybaie-perspective .pe-quantity{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:14px;margin-bottom:12px}#onlybaie-perspective .pe-quantity input{width:65px;border:1px solid #cfd5d9;background:#fff;border-radius:4px;padding:7px}#onlybaie-perspective .pe-price-label{font-size:12px;color:#737d83}#onlybaie-perspective .pe-price{display:block;font-size:31px;line-height:1.35;color:#111;letter-spacing:-.7px;font-weight:750;white-space:nowrap}#onlybaie-perspective .pe-price small{font-size:12px;font-weight:500;color:#6e767d;letter-spacing:0}#onlybaie-perspective .pe-order>p{font-size:12px;margin:5px 0 12px;color:#6a737a}#onlybaie-perspective .pe-config .pe-cart,#onlybaie-perspective .pe-collection .pe-cart{display:block;background:#D81F26;color:#fff;text-align:center;border:0;border-radius:5px;padding:13px 11px;font-size:15px;font-weight:750;width:100%;text-decoration:none}#onlybaie-perspective .pe-order>.pe-link{display:block;text-align:center}#onlybaie-perspective .pe-config .pe-error{color:#b01d26;font-size:13px;line-height:1.5;white-space:normal}#onlybaie-perspective .pe-error button{font-size:inherit;color:inherit;background:transparent;border:0;text-decoration:underline}#onlybaie-perspective .pe-config .pe-pending{padding:9px;background:#fff5e2;color:#805911;font-size:13px;border-radius:4px} #onlybaie-perspective .pe-mobile-bar{display:none}#onlybaie-perspective .pe-dialog{width:min(800px,95vw);padding:0;border:0;border-radius:12px;max-height:90vh;box-shadow:0 20px 80px #0005;color:#25313a;font:15px/1.5 'DM Sans',Arial,sans-serif}#onlybaie-perspective .pe-dialog::backdrop{background:#17222bbb}#onlybaie-perspective .pe-dialog header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;background:#f5f6f7;position:sticky;top:0;z-index:1}#onlybaie-perspective .pe-dialog header button{border:0;background:none;font:inherit;color:#616b72;cursor:pointer}#onlybaie-perspective .pe-dialog-content{padding:20px 25px}#onlybaie-perspective .pe-dialog-content dl{margin:0}#onlybaie-perspective .pe-dialog-content dl>div{display:grid;grid-template-columns:1fr 1.5fr;gap:25px;padding:9px 0;border-bottom:1px solid #e7ebed}#onlybaie-perspective .pe-dialog-content dt{color:#68757f}#onlybaie-perspective .pe-dialog-content dd{margin:0;text-align:right}#onlybaie-perspective .pe-dialog-content h3{font-size:18px;margin-top:24px}#onlybaie-perspective .pe-dialog-drawing{height:70vh;padding:18px} #onlybaie-perspective .pe-description{margin-top:55px;padding-top:35px;border-top:1px solid #e2e6e9;display:grid;grid-template-columns:1fr 2fr;gap:40px}#onlybaie-perspective .pe-kicker{color:#D81F26;font-size:13px;font-weight:750;text-transform:uppercase;letter-spacing:1px}#onlybaie-perspective .pe-description h2{font:750 28px/1.25 Manrope,sans-serif;margin:10px 0 15px;letter-spacing:-.5px}#onlybaie-perspective .pe-description p{font-size:14px;color:#6b767e;line-height:1.7}#onlybaie-perspective .pe-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}#onlybaie-perspective .pe-features article>strong{font-size:25px;color:#1c272e}#onlybaie-perspective .pe-features h3{font-size:16px;margin:7px 0}#onlybaie-perspective .pe-collection{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.25fr);gap:45px;align-items:center;max-width:950px;margin:40px auto}#onlybaie-perspective .pe-collection>figure{height:390px;margin:0;background:#f5f6f6;border:1px solid #e5e7e9;border-radius:10px;display:flex;align-items:center;justify-content:center}#onlybaie-perspective .pe-collection>figure img{width:100%;height:350px;object-fit:contain}#onlybaie-perspective .pe-collection h2{font:750 32px Manrope,sans-serif;margin:0 0 12px}#onlybaie-perspective .pe-collection p{font-size:16px;line-height:1.7;color:#63717b}#onlybaie-perspective .pe-collection ul{padding-left:20px;font-size:15px;color:#55636d;line-height:1.8}#onlybaie-perspective .pe-collection .pe-cart{margin-top:20px} @media(min-width:1051px) and (max-width:1280px){.pe-layout{grid-template-columns:350px minmax(0,1fr) 250px;gap:12px}#onlybaie-perspective .pe-panel{height:620px}#onlybaie-perspective .pe-price{font-size:28px}#onlybaie-perspective .pe-views button{padding:6px 9px;font-size:12px}} @media(max-width:1050px){#onlybaie-perspective #op-produits:has(.pe-config){padding:18px 18px 90px}#onlybaie-perspective .pe-heading{align-items:flex-start}#onlybaie-perspective .pe-heading h1{font-size:27px}#onlybaie-perspective .pe-heading>a{display:none}#onlybaie-perspective .pe-layout{grid-template-columns:minmax(0,1fr);gap:18px}#onlybaie-perspective .pe-panel{height:auto}#onlybaie-perspective .pe-scene{grid-row:1;height:410px}#onlybaie-perspective .pe-drawing{padding:3px 8px 0}#onlybaie-perspective .pe-scene-tools{padding:5px}#onlybaie-perspective .pe-options-body{overflow:visible;padding:18px}#onlybaie-perspective .pe-nav{padding:12px 18px}#onlybaie-perspective .pe-summary{display:block}#onlybaie-perspective .pe-summary-body{overflow:visible}#onlybaie-perspective .pe-summary dl{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}#onlybaie-perspective .pe-card-image{height:145px}#onlybaie-perspective .pe-compositions .pe-card-image{height:170px}#onlybaie-perspective .pe-mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:25;align-items:center;justify-content:space-between;gap:18px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #e2e7e9;background:#fffffff5;box-shadow:0 -4px 16px #0001}#onlybaie-perspective .pe-mobile-bar>div{min-width:0}#onlybaie-perspective .pe-mobile-bar strong{display:block;font-size:21px}#onlybaie-perspective .pe-mobile-bar small{display:block;font-size:12px;color:#63727c}#onlybaie-perspective .pe-mobile-bar .pe-cart{width:auto;min-height:44px;white-space:nowrap}#onlybaie-perspective .pe-description{grid-template-columns:1fr;gap:20px}#onlybaie-perspective .pe-features{gap:20px}#onlybaie-perspective .pe-price{font-size:32px}#onlybaie-perspective .pe-colors{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:600px){#onlybaie-perspective #op-produits:has(.pe-config){padding-inline:12px}#onlybaie-perspective .pe-heading h1{font-size:24px}#onlybaie-perspective .pe-heading p{font-size:14px}#onlybaie-perspective .pe-panel>.ob-config-band{font-size:13px}#onlybaie-perspective .pe-colors{grid-template-columns:repeat(3,minmax(0,1fr))}#onlybaie-perspective .pe-fields{gap:9px}#onlybaie-perspective .pe-field{font-size:13px}#onlybaie-perspective .pe-card{padding:8px}#onlybaie-perspective .pe-card strong{font-size:14px}#onlybaie-perspective .pe-card-image{height:120px}#onlybaie-perspective .pe-options-body{padding:14px}#onlybaie-perspective .pe-section h2{font-size:18px}#onlybaie-perspective .pe-section>p{font-size:14px}#onlybaie-perspective .pe-summary dl{display:block}#onlybaie-perspective .pe-mobile-bar{gap:8px;padding-inline:12px}#onlybaie-perspective .pe-mobile-bar strong{font-size:19px}#onlybaie-perspective .pe-mobile-bar .pe-cart{font-size:13px;padding:12px}#onlybaie-perspective .pe-features{grid-template-columns:1fr}#onlybaie-perspective .pe-description h2{font-size:25px}#onlybaie-perspective .pe-dialog-content{padding:18px 14px}#onlybaie-perspective .pe-dialog-content dl>div{grid-template-columns:1fr;gap:3px}#onlybaie-perspective .pe-dialog-content dd{text-align:left}#onlybaie-perspective .pe-collection{grid-template-columns:1fr;gap:22px}#onlybaie-perspective .pe-collection>figure{height:320px}#onlybaie-perspective .pe-collection>figure img{height:300px}} @media(prefers-reduced-motion:reduce){.pe-config *{transition:none!important;scroll-behavior:auto!important}} /* Galerie des modèles : images généreuses, accès direct au prix. */ #onlybaie-perspective #op-produits:has(.pe-gallery){max-width:1600px;margin:auto;padding:30px 32px 60px} #onlybaie-perspective .pe-gallery{font:16px/1.5 'DM Sans',Arial,sans-serif;color:#24282b} #onlybaie-perspective .pe-gallery *{box-sizing:border-box}#onlybaie-perspective .pe-gallery :is(button,input,select){font:inherit} #onlybaie-perspective .pe-gallery :is(a,button,input,select):focus-visible{outline:3px solid #D81F26;outline-offset:4px} #onlybaie-perspective .pe-gallery-intro{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:12px 0 28px} #onlybaie-perspective .pe-gallery h1{font:750 clamp(30px,3.4vw,45px)/1.16 Manrope,sans-serif;letter-spacing:-1.3px;margin:12px 0 16px} #onlybaie-perspective .pe-gallery-intro p{max-width:760px;font-size:17px;color:#656c71;margin:0;line-height:1.65} #onlybaie-perspective .pe-count{min-width:150px;display:flex;flex-direction:column;border-left:2px solid #D81F26;padding-left:25px} #onlybaie-perspective .pe-count strong{font-size:52px;font-weight:750;line-height:1.1;letter-spacing:-2px}#onlybaie-perspective .pe-count span{font-size:14px;color:#666d73;margin-top:7px} #onlybaie-perspective .pe-families{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:8px 0 32px} #onlybaie-perspective .pe-families>a{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;background:#f7f8f8;border:1px solid #e0e4e6;border-radius:9px;padding:17px 15px;min-width:0;position:relative} #onlybaie-perspective .pe-families>a:hover,#onlybaie-perspective .pe-families>a.active{border-color:#D81F26;background:#fff9f9} #onlybaie-perspective .pe-families img{width:50px;height:110px;object-fit:contain;mix-blend-mode:multiply}#onlybaie-perspective .pe-families strong{font-size:16px;line-height:1.35;display:block}#onlybaie-perspective .pe-families small{font-size:13px;color:#70777d;display:block;margin-top:8px}#onlybaie-perspective .pe-families b{position:absolute;right:12px;top:8px;font-weight:500;color:#92999f} #onlybaie-perspective .pe-filters{display:flex;align-items:flex-end;gap:18px;padding:22px;background:#f5f6f6;border:1px solid #e5e8ea;border-radius:8px;scroll-margin-top:150px} #onlybaie-perspective .pe-filters label{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}#onlybaie-perspective .pe-filters label>span{font-size:14px;font-weight:650} #onlybaie-perspective .pe-filters :is(input,select){background:white;border:1px solid #ccd2d6;border-radius:5px;padding:11px 12px;width:100%;min-height:47px;color:#35414a;font-size:15px} #onlybaie-perspective .pe-filters>a{font-size:14px;color:#505c65;text-underline-offset:3px;padding-bottom:13px} #onlybaie-perspective .pe-results{color:#6a7278;font-size:14px;margin:23px 0 16px} #onlybaie-perspective .pe-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px} #onlybaie-perspective .pe-product-card{display:flex;flex-direction:column;border:1px solid #dfe3e5;border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;background:#fff;transition:border-color .15s,box-shadow .15s} #onlybaie-perspective .pe-product-card:hover{border-color:#a3aab0;box-shadow:0 9px 24px #19232c12} #onlybaie-perspective .pe-product-photo{height:355px;display:flex;align-items:center;justify-content:center;position:relative;padding:49px 20px 20px;background:linear-gradient(150deg,#f7f8f8,#eceff0)} #onlybaie-perspective .pe-product-photo img{height:100%;width:100%;object-fit:contain;mix-blend-mode:multiply} #onlybaie-perspective .pe-model-kind{position:absolute;left:15px;top:15px;padding:5px 9px;background:#fff;border:1px solid #e2e5e7;border-radius:4px;font-size:12px;font-weight:650} #onlybaie-perspective .pe-product-info{padding:21px 20px 20px;flex:1;display:flex;flex-direction:column} #onlybaie-perspective .pe-product-info>span:first-child{text-transform:uppercase;font-size:11px;letter-spacing:1.4px;font-weight:650;color:#737d85} #onlybaie-perspective .pe-product-info h2{font:750 25px/1.2 Manrope,sans-serif;letter-spacing:-.6px;margin:5px 0 8px} #onlybaie-perspective .pe-product-info p{font-size:14px;line-height:1.5;color:#737c82;margin:0 0 15px;min-height:42px} #onlybaie-perspective .pe-product-specs{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#707b82;padding-top:12px;border-top:1px solid #e8ecee}#onlybaie-perspective .pe-product-specs>span{display:flex;justify-content:space-between;gap:10px}#onlybaie-perspective .pe-product-specs b{font-weight:600;color:#3c4851} #onlybaie-perspective .pe-product-info>small{font-size:11px;line-height:1.4;color:#818a90;margin-top:9px} #onlybaie-perspective .pe-product-color{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:17px 0 20px;color:#424b52} #onlybaie-perspective .pe-color-availability{display:flex;gap:10px;align-items:center;min-width:0} #onlybaie-perspective .pe-color-fan{width:58px;height:54px;flex:none;overflow:visible} #onlybaie-perspective .pe-color-label{display:flex;flex-direction:column;gap:3px} #onlybaie-perspective .pe-color-label strong{font:650 15px/1.35 'DM Sans',sans-serif;color:#22272b} #onlybaie-perspective .pe-color-label small{font:400 13px/1.35 'DM Sans',sans-serif;color:#626a70} #onlybaie-perspective .pe-product-color .pe-ud{margin-left:auto;font-size:13px;white-space:nowrap;color:#46535d} #onlybaie-perspective .pe-product-cta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;border-radius:5px;background:#D81F26;color:#fff;padding:12px 14px;font-size:15px;font-weight:700}#onlybaie-perspective .pe-product-cta b{font-size:20px;font-weight:500} #onlybaie-perspective .pe-pagination{display:flex;justify-content:center;gap:8px;margin:32px 0}#onlybaie-perspective .pe-gallery button{border:1px solid #d3dade;border-radius:5px;background:#fff;padding:10px 15px;color:#495762;cursor:pointer}#onlybaie-perspective .pe-pagination button[aria-current=page]{background:#252e36;color:#fff;border-color:#252e36}#onlybaie-perspective .pe-pagination button:disabled{opacity:.4;cursor:default} #onlybaie-perspective .pe-gallery-note{font-size:13px;color:#7a858d;line-height:1.65;margin:28px 0 0} #onlybaie-perspective .pe-empty{text-align:center;padding:45px 20px;background:#f7f8f9;border-radius:8px} #onlybaie-perspective .pe-composition-unique{height:270px} #onlybaie-perspective .op-mega[data-family="entree"] .op-model-image img{object-fit:contain} @media(max-width:1250px){#onlybaie-perspective .pe-products{grid-template-columns:repeat(3,minmax(0,1fr))}#onlybaie-perspective .pe-families{grid-template-columns:repeat(2,minmax(0,1fr))}#onlybaie-perspective .pe-filters{flex-wrap:wrap}#onlybaie-perspective .pe-filters>a{flex-basis:100%;padding:0}} @media(max-width:760px){#onlybaie-perspective #op-produits:has(.pe-gallery){padding:20px 16px 40px}#onlybaie-perspective .pe-count{display:none}#onlybaie-perspective .pe-gallery-intro{padding-bottom:20px}#onlybaie-perspective .pe-gallery h1{font-size:31px}#onlybaie-perspective .pe-gallery-intro p{font-size:15px}#onlybaie-perspective .pe-families{gap:8px}#onlybaie-perspective .pe-families>a{padding:14px 10px;gap:9px}#onlybaie-perspective .pe-families img{width:34px;height:90px}#onlybaie-perspective .pe-families strong{font-size:14px}#onlybaie-perspective .pe-families small{font-size:12px}#onlybaie-perspective .pe-filters{gap:14px;padding:16px}#onlybaie-perspective .pe-filters label{flex-basis:100%}#onlybaie-perspective .pe-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 10px}#onlybaie-perspective .pe-product-photo{height:270px;padding:45px 10px 15px}#onlybaie-perspective .pe-model-kind{font-size:10px;left:8px;top:10px;padding:5px}#onlybaie-perspective .pe-product-info{padding:15px 11px}#onlybaie-perspective .pe-product-info h2{font-size:21px}#onlybaie-perspective .pe-product-info p{font-size:13px;min-height:58px}#onlybaie-perspective .pe-product-specs{font-size:12px;gap:8px}#onlybaie-perspective .pe-product-specs>span{display:flex;flex-direction:column;gap:1px}#onlybaie-perspective .pe-product-cta{font-size:13px;padding:11px 8px}#onlybaie-perspective .pe-product-color .pe-ud{flex-basis:100%;margin:4px 0 0}#onlybaie-perspective .pe-pagination{gap:5px}#onlybaie-perspective .pe-pagination button{padding:9px 10px;font-size:13px}} /* L’aperçu donne la hauteur disponible à la porte, sans légendes empilées. */ #onlybaie-perspective .pe-scene-heading{display:flex;align-items:center;justify-content:space-between;gap:12px} #onlybaie-perspective .pe-scene-heading button{font:600 13px/1.3 'DM Sans',sans-serif;text-transform:none;color:inherit;background:transparent;border:1px solid #ffffff60;border-radius:4px;padding:4px 8px} #onlybaie-perspective .pe-drawing{padding:12px 14px;position:relative} #onlybaie-perspective .pe-drawing>svg{max-height:none} #onlybaie-perspective .pe-scene .pe-views{padding:0 8px 10px;flex:none} #onlybaie-perspective .pe-render-note{font-size:14px;line-height:1.5;color:#616d76;text-align:left;margin:0 0 18px} @media(max-width:1050px){#onlybaie-perspective .pe-drawing{padding:8px 12px}#onlybaie-perspective .pe-scene .pe-views{padding-bottom:8px}} #onlybaie-perspective .pe-apercu-3d{height:100%;width:100%;min-height:0;position:relative} #onlybaie-perspective .pe-canvas-3d{position:absolute;inset:0 0 23px;touch-action:pan-y;cursor:grab} #onlybaie-perspective .pe-canvas-3d:active{cursor:grabbing} #onlybaie-perspective .pe-canvas-3d canvas{display:block;width:100%;height:100%} #onlybaie-perspective .pe-3d-cotes{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:14px;line-height:20px;color:#6a747a;pointer-events:none} #onlybaie-perspective .pe-3d-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;background:white;pointer-events:none} #onlybaie-perspective .pe-3d-fallback>svg{flex:1;min-height:0} #onlybaie-perspective .pe-3d-fallback>span{font-size:13px;color:#6a747a;padding:5px} #onlybaie-perspective .pe-dialog:has(.pe-dialog-drawing){max-height:96dvh} #onlybaie-perspective .pe-dialog-drawing{height:calc(96dvh - 64px);padding:12px} /* Deux présentations légères du produit, mêmes dimensions des trois colonnes. */ #onlybaie-perspective .pe-view-modes{display:flex;justify-content:center;gap:4px;padding:7px;background:#f4f5f5;flex:none;border-bottom:1px solid #e5e8e8} #onlybaie-perspective .pe-view-modes button{border:1px solid transparent;background:none;color:#616a70;font-size:14px;font-weight:600;padding:6px 16px;border-radius:5px;min-height:34px} #onlybaie-perspective .pe-view-modes button[aria-pressed=true]{background:#fff;color:#252b30;border-color:#d8dfe1;box-shadow:0 1px 3px #16212a0d} #onlybaie-perspective .pe-apercu-2d{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;gap:6px} #onlybaie-perspective .pe-image-stage{position:relative;flex:1;min-height:0;background:#fafbfb;overflow:hidden;border-radius:4px} #onlybaie-perspective .pe-image-stage>svg{display:block;width:100%;height:100%} #onlybaie-perspective .pe-image-caption{flex:none;font-size:12px;line-height:18px;text-align:center;color:#6b7378} #onlybaie-perspective .pe-image-loading{height:100%;display:grid;place-items:center;text-align:center;font-size:14px;color:#68747c;padding:20px} #onlybaie-perspective .pe-image-fallback{height:100%;display:flex;flex-direction:column;align-items:center;font-size:13px;color:#66727a} #onlybaie-perspective .pe-image-fallback svg{flex:1;min-height:0} #onlybaie-perspective .pe-drawing:has(.pe-apercu-2d){padding:8px} #onlybaie-perspective .pe-dialog:has(.pe-dialog-drawing .pe-apercu-2d){width:min(1080px,96vw)} @media(max-width:600px){#onlybaie-perspective .pe-view-modes button{font-size:14px;padding:5px 15px}#onlybaie-perspective .pe-image-caption{font-size:12px}} /* Cotes totales : la répartition reste à l’intérieur de l’ouverture. */ #onlybaie-perspective .pe-opening-status{font-size:15px;font-weight:650;line-height:1.5;color:#333;margin:15px 0 0} #onlybaie-perspective .pe-repartition{margin:14px 0;border:1px solid #dfe1e2;border-radius:6px;padding:12px;background:#fafbfb} #onlybaie-perspective .pe-repartition svg{width:100%;height:auto;display:block} #onlybaie-perspective .pe-repartition figcaption{font-size:14px;color:#4f585f;margin-top:8px;line-height:1.5} #onlybaie-perspective .pe-repartition dl{margin:8px 0 0;font-size:14px} #onlybaie-perspective .pe-repartition dl>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid #e6e8e9} #onlybaie-perspective .pe-repartition dd{margin:0;font-weight:650} /* Porte mise en valeur : colonnes stables et même hauteur sur ordinateur. */ @media(min-width:1051px){#onlybaie-perspective .pe-config .pe-panel{height:740px}} @media(max-width:1050px){#onlybaie-perspective .pe-config .pe-scene{height:clamp(560px,72svh,680px)}} #onlybaie-perspective .pe-apercu-catalogue .pe-image-stage{background:#fff} #onlybaie-perspective .pe-apercu-catalogue .pe-image-stage>svg{padding:4px} #onlybaie-perspective .pe-total-fields{margin-top:16px} #onlybaie-perspective .pe-field-label{display:flex;align-items:flex-start;min-height:2.8em;line-height:1.4} #onlybaie-perspective .pe-repartition svg{height:180px} #onlybaie-perspective .pe-repartition-title{font-size:16px;margin:18px 0 6px} #onlybaie-perspective .pe-section>.pe-repartition-help{font-size:14px;line-height:1.5;margin-bottom:14px} #onlybaie-perspective .pe-card-image>img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:6px} /* Photos de présentation : cadrage commun, vues distinctes du configurateur. */ #onlybaie-perspective .pe-products{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px} #onlybaie-perspective .pe-product-card{border-radius:18px} #onlybaie-perspective .pe-product-photo{height:auto;display:block;padding:50px 0 0;background:#fff} #onlybaie-perspective .pe-model-kind{z-index:1;font-size:13px;border-radius:6px} #onlybaie-perspective .pe-photo-stage{display:flex;align-items:center;justify-content:center;height:400px;overflow:hidden;background:#fff;padding:12px;isolation:isolate} #onlybaie-perspective .pe-photo-stage img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;max-width:none;transform-origin:center} #onlybaie-perspective .pe-photo-produit img,#onlybaie-perspective .pe-photo-interieur img{width:auto;flex:none} #onlybaie-perspective .pe-photo-ambiance,#onlybaie-perspective .pe-photo-detail{padding:0;background:#f4f4f3} #onlybaie-perspective .pe-photo-ambiance img,#onlybaie-perspective .pe-photo-detail img{object-fit:cover} #onlybaie-perspective .pe-photo-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:14px 12px 0;min-height:58px} #onlybaie-perspective .pe-photos .pe-photo-controls button{font:600 13px/1.3 'DM Sans',sans-serif;min-height:40px;padding:9px 12px;background:#f6f6f5;border:1px solid #e4e5e4;border-radius:30px;color:#565c61;cursor:pointer} #onlybaie-perspective .pe-photos .pe-photo-controls button[aria-pressed=true]{background:#292d30;color:white;border-color:#292d30} #onlybaie-perspective .pe-photos .pe-photo-controls button:focus-visible{outline:3px solid #d81f26;outline-offset:3px} #onlybaie-perspective .pe-photo-caption{font-size:12px;line-height:1.45;color:#71787d;text-align:center;margin:9px 18px 0;min-height:35px} #onlybaie-perspective .pe-product-info{padding:18px 24px 24px} #onlybaie-perspective .pe-product-info h2{font-size:28px} #onlybaie-perspective .pe-product-info h2 a{color:inherit;text-decoration:none} #onlybaie-perspective .pe-product-info>span:first-child{font-size:12px} #onlybaie-perspective .pe-product-info>p{font-size:15px;min-height:46px} #onlybaie-perspective .pe-product-specs{font-size:14px} #onlybaie-perspective .pe-product-info>small{font-size:12px} #onlybaie-perspective .pe-product-color{font-size:14px} #onlybaie-perspective .pe-product-cta{font-size:16px;text-decoration:none;padding:14px 16px;border-radius:7px} #onlybaie-perspective .pe-families>a{padding:0;overflow:hidden;display:grid;grid-template-columns:100px 1fr;gap:14px;min-height:125px;border-radius:12px;background:#fff} #onlybaie-perspective .pe-families img{width:100px;height:145px;object-fit:cover;mix-blend-mode:normal} #onlybaie-perspective .pe-families>a>span{padding:14px 12px 14px 0} #onlybaie-perspective .pe-families b{display:none} #onlybaie-perspective .pe-real-photos{display:grid;grid-template-columns:1fr 1.5fr;gap:50px;align-items:center;margin:65px 0 20px;padding:45px;background:#f5f5f3;border-radius:18px} #onlybaie-perspective .pe-real-photos h2{font:750 clamp(25px,3vw,35px)/1.25 Manrope,sans-serif;letter-spacing:-.8px;margin:15px 0 20px} #onlybaie-perspective .pe-real-photos p{font-size:15px;line-height:1.65;color:#697076} #onlybaie-perspective .pe-photos-fiche{min-width:0;background:white;border:1px solid #e0e3e4;border-radius:12px;overflow:hidden;padding-bottom:14px} #onlybaie-perspective .pe-photos-fiche .pe-photo-stage{height:560px} #onlybaie-perspective .pe-photos-fiche .pe-photo-caption{font-size:12px;margin-bottom:0} @media(max-width:1100px){#onlybaie-perspective .pe-products{grid-template-columns:repeat(2,minmax(0,1fr))}#onlybaie-perspective .pe-real-photos{gap:25px;padding:25px}} @media(max-width:760px){#onlybaie-perspective .pe-families>a{grid-template-columns:1fr;gap:0}#onlybaie-perspective .pe-families img{width:100%;height:125px}#onlybaie-perspective .pe-families>a>span{padding:12px}#onlybaie-perspective .pe-families small{margin-top:5px}#onlybaie-perspective .pe-real-photos{grid-template-columns:1fr;padding:20px;gap:20px}#onlybaie-perspective .pe-photos-fiche .pe-photo-stage{height:440px}} @media(max-width:600px){#onlybaie-perspective .pe-products{grid-template-columns:1fr;gap:24px}#onlybaie-perspective .pe-product-photo{padding:50px 0 0}#onlybaie-perspective .pe-model-kind{left:15px;top:15px;padding:5px 9px}#onlybaie-perspective .pe-product-info{padding:18px 20px 22px}#onlybaie-perspective .pe-product-info>p{min-height:0}#onlybaie-perspective .pe-product-specs>span{flex-direction:row;gap:12px}#onlybaie-perspective .pe-product-color .pe-ud{flex-basis:auto;margin-left:auto}#onlybaie-perspective .pe-photo-stage{height:380px}#onlybaie-perspective .pe-photos-fiche .pe-photo-stage{height:400px}#onlybaie-perspective .pe-real-photos{padding:18px 12px}} /* Identité du produit lisible sans alourdir le nom du modèle. */ #onlybaie-perspective .pe-product-info h2 a{display:flex;flex-direction:column;gap:5px} #onlybaie-perspective .pe-product-info .pe-product-type{font:500 15px/1.4 'DM Sans',sans-serif;letter-spacing:0;color:#505960} #onlybaie-perspective .pe-product-info .pe-product-name{font:750 28px/1.2 Manrope,sans-serif;letter-spacing:-.6px;color:#22272b} #onlybaie-perspective .pe-image-maj{height:100%;width:100%;opacity:.82;transition:opacity .15s}#onlybaie-perspective .pe-image-maj>svg{width:100%;height:100%;display:block} /* Téléphone (18/09/2026) : titre puis présentation l'un sous l'autre, au lieu d'un titre écrasé dans une colonne étroite ; le lien sous le bouton respire. */ @media(max-width:760px){ #onlybaie-perspective .pe-heading{flex-direction:column;align-items:stretch;gap:8px} #onlybaie-perspective .pe-heading h1{margin:0} #onlybaie-perspective .ob-portail-fiche .obp-button+p{margin-top:14px} } /* Portes de service PVC et aluminium (configurateurs de menuiseries) dans la famille « Portes de service ». */ #onlybaie-perspective .pe-service-menuiseries{margin:56px 0 8px} #onlybaie-perspective .pe-service-menuiseries>header{margin:0 0 20px} #onlybaie-perspective .pe-service-menuiseries>header h2{font:750 28px/1.2 Manrope,sans-serif;letter-spacing:-.6px;margin:0 0 6px} #onlybaie-perspective .pe-service-menuiseries>header p{margin:0;max-width:62ch;color:#555} @media(max-width:600px){#onlybaie-perspective .pe-service-menuiseries{margin-top:40px}#onlybaie-perspective .pe-service-menuiseries>header h2{font-size:23px}} /* Haut de la fiche d'une porte (audit du 25/09/2026) : photos du produit et en situation à gauche, repères, prix et bouton à droite. Angles droits, comme le reste de la boutique. */ #onlybaie-perspective #op-produits .pe-fiche-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:start;margin:14px 0 26px} #onlybaie-perspective #op-produits .pe-fiche-visuels{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:12px;height:540px} #onlybaie-perspective #op-produits .pe-fiche-visuel-seul{grid-template-columns:1fr} #onlybaie-perspective #op-produits .pe-fiche-visuels figure{margin:0;overflow:hidden;background:#f4f4f2;display:flex;align-items:center;justify-content:center} #onlybaie-perspective #op-produits .pe-fiche-produit img{height:92%;width:auto;max-width:92%;object-fit:contain;mix-blend-mode:multiply} #onlybaie-perspective #op-produits .pe-fiche-ambiance img{height:100%;width:100%;object-fit:cover} #onlybaie-perspective #op-produits .pe-fiche-infos{display:flex;flex-direction:column;padding-top:6px} #onlybaie-perspective #op-produits .pe-fiche-kicker{font:700 12px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#d81f26;margin:0 0 10px} #onlybaie-perspective #op-produits .pe-fiche-infos h1{font:800 clamp(28px,2.6vw,40px)/1.12 Manrope,sans-serif;letter-spacing:-.03em;margin:0 0 12px;color:#111} #onlybaie-perspective #op-produits .pe-fiche-texte{font-size:16px;line-height:1.55;color:#4d5358;margin:0 0 14px} #onlybaie-perspective #op-produits .pe-fiche-reperes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:6px 0 18px;border-top:1px solid #e3e5e6} #onlybaie-perspective #op-produits .pe-fiche-reperes>div{padding:11px 0;border-bottom:1px solid #e3e5e6} #onlybaie-perspective #op-produits .pe-fiche-reperes dt{font-size:12px;color:#6b7176;margin:0 0 3px} #onlybaie-perspective #op-produits .pe-fiche-reperes dd{font:700 15px/1.35 Manrope,sans-serif;color:#1d2226;margin:0} #onlybaie-perspective #op-produits .pe-fiche-infos .ob-prix-collection{margin:0 0 14px} #onlybaie-perspective #op-produits .pe-fiche-infos .obp-button{align-self:flex-start;min-width:280px;justify-content:center} #onlybaie-perspective #op-produits .pe-fiche-comparer{margin:12px 0 0;font-size:14px} #onlybaie-perspective #op-produits .pe-fiche-comparer a{color:#343b40} @media(max-width:900px){ #onlybaie-perspective #op-produits .pe-fiche-hero{grid-template-columns:1fr;gap:20px} #onlybaie-perspective #op-produits .pe-fiche-visuels{height:340px} #onlybaie-perspective #op-produits .pe-fiche-infos .obp-button{align-self:stretch;min-width:0} } /* Une seule pose autorisée : une carte pleine largeur, sans colonne vide. */ #onlybaie-perspective .pe-config .pe-cards-poses:has(>.pe-pose-card:only-child){grid-template-columns:minmax(0,1fr)} /* Portails : shell et composants communs Onlybaie V2, sans styles de l'archive. */ #op-produits .ob-portail-pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:24px 0} #op-produits .ob-portail-pagination>span{font-size:13px;color:#666;margin-right:12px} #op-produits .ob-portail-pagination>a{display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid #ccc;border-radius:0;background:#fff;font-size:14px;font-weight:700} #op-produits .ob-portail-pagination>a[aria-current=page]{background:#D81F26;color:#fff;border-color:#D81F26} #op-produits .ob-portail-pagination>a:focus-visible{outline:3px solid #D81F26;outline-offset:3px} #op-produits .ob-portail-familles{grid-template-columns:repeat(3,minmax(0,1fr))} #op-produits .ob-portail-famille{display:flex;flex-direction:column} #op-produits .ob-portail-famille .obp-card-image{aspect-ratio:8/5;background:#fff} #op-produits .ob-portail-famille .obp-card-image img{width:100%;height:100%;object-fit:contain!important} #op-produits .ob-portail-famille .obp-card-body{display:flex;flex-direction:column;flex:1} #op-produits .ob-portail-famille .obp-card-body>p{font-size:15px;line-height:1.6;margin:12px 0 24px} #op-produits .ob-portail-famille .obp-card-actions{margin-top:auto} #op-produits .ob-portail-preparation{margin-top:30px} @media(max-width:800px){#op-produits .ob-portail-familles{grid-template-columns:1fr}} .ob-portail-notice{border-left:3px solid #D81F26;padding:12px 16px;background:#f5f5f5;color:#555;font-size:14px;line-height:1.6} #op-produits .ob-portail-styles{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}#op-produits .ob-portail-styles a{display:flex;gap:24px;align-items:center;padding:15px 20px;border:1px solid #ddd;border-radius:0;color:#111;text-decoration:none;font-size:16px;font-weight:700}#op-produits .ob-portail-styles a[aria-current=page]{border-color:#D81F26;background:#fff5f5;box-shadow:inset 0 -3px #D81F26}#op-produits .ob-portail-styles span{color:#777;font-size:14px} #op-produits .ob-portail-filters{display:flex;flex-wrap:wrap;gap:18px;align-items:end;margin:0 0 26px}#op-produits .ob-portail-filters label{font-size:14px;font-weight:700;display:grid;gap:8px}#op-produits .ob-portail-filters input,#op-produits .ob-portail-filters select{height:46px;border:1px solid #ccc;background:#fff;border-radius:0;font:inherit;padding:10px 12px;max-width:100%}#op-produits .ob-portail-filters p{font-size:14px;color:#666;margin-left:auto} #op-produits .ob-portail-card .obp-card-image{aspect-ratio:960/550!important;background:#f2f0eb}#op-produits .ob-portail-card .obp-card-image img{width:100%;height:100%;object-fit:contain!important}#op-produits .ob-portail-card .obp-card-body>p{font-size:14px;line-height:1.6;margin:8px 0}#op-produits .ob-portail-card .obp-card-actions small{display:block;text-align:center;font-size:12px;color:#666;line-height:1.6;margin-top:8px}#op-produits .ob-portail-dessin{font-weight:700} #op-produits .ob-portail-palette{display:flex;align-items:center;gap:6px;padding:14px 0;font-size:14px;color:#555}#op-produits .ob-portail-palette i{width:24px;height:24px;border-radius:50%;border:1px solid #ccc}#op-produits .ob-portail-palette span{margin-left:8px}#op-produits .ob-portail-footnote{font-size:14px;color:#666;line-height:1.6;margin-top:24px} #op-produits .ob-portail-fiche{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px;align-items:center;padding-bottom:50px}#op-produits .ob-portail-fiche figure{margin:0;min-width:0}#op-produits .ob-portail-fiche figure img{display:block;width:100%;height:auto;border-radius:0}#op-produits .ob-portail-fiche figcaption{font-size:14px;color:#666;text-align:center;margin-top:12px}#op-produits .ob-portail-specs{display:grid;gap:12px;margin:24px 0}#op-produits .ob-portail-specs div{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid #eee;padding-bottom:12px;font-size:14px}#op-produits .ob-portail-specs dt{color:#777}#op-produits .ob-portail-specs dd{margin:0;text-align:right;font-weight:600} #op-produits .ob-portail-config-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}#op-produits .ob-portail-config-heading h1{font:800 clamp(28px,3vw,40px)/1.15 Manrope,sans-serif;letter-spacing:-1px;margin:6px 0 10px}#op-produits .ob-portail-config-heading p{margin:0;color:#666;font-size:16px}#op-produits .ob-portail-config-heading>a{color:#555;font-size:14px;text-underline-offset:4px} /* Format panoramique comme les garages : le visuel profite de la largeur disponible. Limite sur les écrans ultralarges, sans agrandir les colonnes d'options et de résumé. Le mount est présent dès le HTML serveur : pas de saut au chargement React. */ #onlybaie-perspective #op-produits:has(#ob-portail-mount,.pb-config){max-width:1920px;margin-inline:auto;padding-inline:24px} #op-produits .ob-portail-config-heading{margin-bottom:18px} #op-produits .ob-portail-config-heading h1{font-size:32px;margin:0 0 6px} #op-produits .ob-portail-config-heading p{font-size:14px} #op-produits .pb-config{padding-bottom:20px;scroll-margin-top:150px;font-family:'DM Sans',sans-serif;color:#111} #op-produits .pb-config *{box-sizing:border-box} #op-produits .pb-config :is(button,input){font-family:inherit} #op-produits .pb-config button{cursor:pointer} #op-produits .pb-config button:disabled{opacity:.4;cursor:not-allowed} #op-produits .pb-config :is(button,a,input):focus-visible,#op-produits .ob-portail-filters :focus-visible,#op-produits .ob-portail-styles a:focus-visible{outline:3px solid #D81F26;outline-offset:3px} #op-produits .pb-steps{margin-bottom:16px} #op-produits .pb-steps .ob-stepwrap{position:relative;display:inline-flex;pointer-events:none} #op-produits .pb-steps .ob-step{pointer-events:auto} @media(hover:hover) and (min-width:651px){.pb-steps .ob-stepwrap:hover:after{content:attr(data-etape);position:absolute;left:50%;transform:translateX(-50%);top:46px;background:#D81F26;color:#fff;border-radius:0;padding:7px 10px;white-space:nowrap;font-size:12px;box-shadow:none}} /* Portails et garages : options lisibles à gauche, toute la largeur restante au dessin. À 1440 px : 400 / 680 / 280 px, au lieu d'environ 635 / 445 / 280 px. */ #op-produits .pb-layout{display:grid;grid-template-columns:400px minmax(0,1fr) 280px;gap:16px;align-items:stretch;min-width:0} #op-produits .pb-panel,#op-produits .pb-visual-panel,#op-produits .pb-summary{border:1px solid #ddd;border-radius:0;background:#fff;min-width:0;overflow:hidden;display:flex;flex-direction:column} #op-produits .pb-panel-heading{font-size:12px;line-height:1.5;letter-spacing:.2px;margin:0;font-weight:700;color:#fff;text-transform:uppercase;padding:12px 14px;min-height:42px;flex-shrink:0;scroll-margin-top:12px} #op-produits .pb-panel-heading span{font-weight:400;opacity:.7} #op-produits .pb-panel-body{padding:12px 14px;overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:#bbb transparent} #op-produits .pb-panel .pg-options-nav{display:none} #op-produits .pb-help{font-size:12px;color:#777;line-height:1.5;margin:0 0 14px} #op-produits .pb-group{border:0;margin:0 0 18px;padding:0;min-width:0} #op-produits .pb-group legend{font-size:13px;font-weight:750;margin-bottom:10px;padding:0} #op-produits .pb-choices{display:grid;gap:8px} #op-produits .pb-choice{display:flex;align-items:center;gap:10px;width:100%;min-width:0;padding:11px 12px;background:#fff;color:#111;border:1px solid #ddd;border-radius:0;text-align:left} #op-produits .pb-choice[aria-pressed=true]{border-color:#D81F26;background:#fff8f8;box-shadow:inset 0 0 0 .5px #D81F26} #op-produits .pb-choice:not(:disabled):hover{border-color:#999} #op-produits .pb-choice[aria-pressed=true]:hover{border-color:#D81F26} #op-produits .pb-choice-copy{display:block;flex:1;min-width:0} #op-produits .pb-choice strong,#op-produits .pb-accessory strong{font-size:13px;font-weight:750;line-height:1.4;display:block} #op-produits .pb-choice small,#op-produits .pb-accessory small,#op-produits .pb-check small{display:block;font-size:12px;line-height:1.5;color:#737373;margin-top:3px} #op-produits .pb-choice .pb-choice-type{font-size:10px;text-transform:uppercase;letter-spacing:.45px;color:#777;margin:0 0 4px} #op-produits .pb-choice img{width:74px;height:68px;object-fit:contain;background:#fff;border-radius:0;flex-shrink:0} #op-produits .pb-choice-check{display:grid;place-items:center;width:17px;height:17px;border:1px solid #ccc;border-radius:50%;flex-shrink:0;font-size:11px;color:#fff} #op-produits .pb-choice[aria-pressed=true] .pb-choice-check{background:#D81F26;border-color:#D81F26} #op-produits .pb-mini-vantaux{display:block;width:118px;height:39px;margin-top:3px} #op-produits .pb-choice-copy:has(.pb-mini-vantaux){display:grid;grid-template-columns:1fr 118px;gap:8px;align-items:center} /* Cotes disposées comme sur les portes de garage (gérant, 15/10/2026 : « faire comme les portes de garage en termes de disposition ») : une ligne par cote, repère et libellé à gauche (centimètres dessous), champ à droite, pastilles min / max sur toute la largeur. Deux colonnes côte à côte débordaient dans la colonne des options. */ #op-produits .pb-dimensions{display:flex;flex-direction:column;gap:14px;margin-bottom:18px} #op-produits .pb-dimensions>.pb-field{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:center;column-gap:12px;margin-bottom:0} #op-produits .pb-dimensions>.pb-field>span:first-child{min-height:0;align-items:flex-start} #op-produits .pb-dimensions>.pb-field>span:first-child>i{margin-top:1px} #op-produits .pb-dimensions .pb-mesure-texte{display:block;min-width:0;line-height:1.3} #op-produits .pb-dimensions .pb-mesure-texte .ob-cm{display:block;margin-top:2px;font-size:11px;line-height:1.3;white-space:normal} #op-produits .pb-dimensions>.pb-field>.pb-input-unit{margin-top:0} #op-produits .pb-dimensions>.pb-field>.ob-bornes,#op-produits .pb-dimensions>.pb-field>.pb-error{grid-column:1/-1} #op-produits .pb-dimensions>.pb-field>.ob-bornes{margin-top:8px} #op-produits .pb-field{display:block;margin-bottom:14px;font-size:12px;font-weight:700;min-width:0} #op-produits .pb-field>span:first-child{display:flex;gap:6px;align-items:center;min-height:30px;line-height:1.3} #op-produits .pb-field i{display:inline-grid;place-items:center;width:20px;height:20px;flex-shrink:0;font-style:normal;background:#D81F26;color:#fff;border-radius:0;font-size:12px} #op-produits .pb-input-unit{display:flex;align-items:center;margin-top:7px;border:1px solid #bbb;border-radius:0;overflow:hidden;background:#fff} #op-produits .pb-input-unit:focus-within{outline:2px solid #D81F26;outline-offset:1px} /* Cote refusée : le champ fautif se signale de lui-même. Sans cela, seul le message sous le groupe change, et l'œil ne sait pas lequel des deux champs reprendre — le cadre de saisie, lui, désigne juste le champ qui a le focus. */ #op-produits .pb-input-unit:has(input[aria-invalid="true"]),#op-produits .pb-input-unit:has(select[aria-invalid="true"]){border-color:#b31219;box-shadow:inset 0 0 0 1px #b31219} #op-produits .pb-input-unit input,#op-produits .pb-input-unit select{width:100%;min-width:0;padding:11px 10px;border:0;font:inherit;font-size:17px;font-weight:700;color:#111;background:#fff;outline:none!important} #op-produits .pb-input-unit b{font-size:12px;font-weight:500;color:#888;padding-right:10px} #op-produits .pb-field>small{display:block;font-weight:400;color:#777;font-size:11px;margin-top:6px;line-height:1.5} #op-produits .pb-check{display:flex;align-items:start;gap:9px;font-size:13px;line-height:1.5;padding:12px;border:1px solid #ddd;border-radius:0;margin:0 0 16px} #op-produits .pb-config input[type=checkbox]{accent-color:#D81F26;width:16px;height:16px;margin:2px 0 0;flex-shrink:0} #op-produits .pb-error{display:block;color:#b31219;font-size:12px;line-height:1.5;margin:5px 0 10px;font-weight:500} #op-produits .pb-text-button{display:block;border:0;background:none;color:#666;padding:4px 0;font-size:12px;text-decoration:underline;text-underline-offset:3px;text-align:left;line-height:1.5;margin:0 0 14px} #op-produits .pb-info{padding:12px;background:#f5f5f5;border-radius:0;font-size:12px;color:#555;line-height:1.6;margin:0 0 14px} #op-produits .pb-info .pb-text-button{margin:6px 0 0;color:#D81F26} #op-produits .pb-finish-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 10px} #op-produits .pb-finish-tabs button{font-size:11px;color:#666;padding:6px 9px;border:1px solid #ddd;border-radius:0;background:#fff} #op-produits .pb-finish-tabs button[aria-pressed=true]{color:#fff;background:#444;border-color:#444} #op-produits .pb-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px} #op-produits .pb-swatches button{padding:4px;border:1px solid #ddd;border-radius:0;background:#fff;min-width:0} #op-produits .pb-swatches button[aria-pressed=true]{border:2px solid #D81F26;padding:3px} #op-produits .pb-swatches button>span{display:block;height:30px;border:1px solid #0001;border-radius:0} #op-produits .pb-swatches small{display:block;font-size:11px;color:#444;padding-top:4px} #op-produits .pb-swatches em{display:block;font-style:normal;font-size:9px;color:#888} #op-produits .pb-color-label{font-size:12px;font-weight:700;line-height:1.5;margin:10px 0 0} #op-produits .pb-accessory{display:flex;align-items:center;gap:10px;border:1px solid #ddd;border-radius:0;padding:10px;cursor:pointer} #op-produits .pb-accessory:has(input:checked){background:#fff8f8;border-color:#D81F26} #op-produits .pb-accessory img{width:60px;height:60px;object-fit:contain;background:#fff} #op-produits .pb-accessory span{flex:1;min-width:0} #op-produits .pb-view-buttons{display:flex;justify-content:center;gap:5px;padding:9px 10px;flex-shrink:0} #op-produits .pb-view-buttons button{background:#fff;border:1px solid #ddd;border-radius:0;padding:6px 8px;color:#666;font-size:11px;font-weight:600} #op-produits .pb-view-buttons button[aria-pressed=true]{background:#444;border-color:#444;color:#fff} #op-produits .pb-scene{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;background:#fafaf8;overflow:hidden} #op-produits .pb-visuel{width:100%;height:100%;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;background:#fafaf8} /* Le viewBox entier doit tenir en largeur ET en hauteur, même dans une fenêtre basse. */ #op-produits .pb-visuel>svg,#op-produits .pb-scene>svg{display:block;width:100%;height:100%!important;max-height:100%;min-height:0;object-fit:contain} #op-produits .pb-visual-caption{font-size:10px;line-height:1.5;color:#888;text-align:center;padding:8px 10px} #op-produits .pb-scene-navigation{display:flex;justify-content:space-between;align-items:center;gap:8px;row-gap:8px;flex-wrap:wrap;border-top:1px solid #eee;padding:12px 14px;flex-shrink:0} #op-produits .pb-visual-tools{display:flex;align-items:center;gap:10px} #op-produits .pb-loupe{display:inline-flex;align-items:center;background:none;color:#4a4f54;border:0;padding:3px} #op-produits .pb-chevron{border:0;background:linear-gradient(180deg,#e2413f,#b3161c);color:#fff;font-size:12px;font-weight:700;padding:10px 23px 10px 13px;flex-shrink:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)} #op-produits .pb-chevron-prev{background:linear-gradient(180deg,#9aa0a6,#6e7379);padding:10px 13px 10px 23px;clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%)} #op-produits .pb-summary-body{flex:1;min-height:0;overflow:auto;padding:0 14px;scrollbar-width:thin;scrollbar-color:#ccc transparent} #op-produits .pb-recap-table{margin:0} #op-produits .pb-recap-groupes>section{padding:12px 0;border-bottom:1px solid #eee} #op-produits .pb-recap-groupes header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} #op-produits .pb-recap-groupes h3{margin:0;font-size:12px;font-weight:800;color:#222} #op-produits .pb-recap-groupes header button{border:0;background:none;color:#777;text-decoration:underline;font-size:10px;padding:4px 0} #op-produits .pb-recap-groupes dl{margin:0;display:grid;gap:7px} #op-produits .pb-recap-groupes dl>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px} #op-produits .pb-recap-groupes dt{font-size:10px;line-height:1.5;color:#777} #op-produits .pb-recap-groupes dd{margin:0;font-size:11px;line-height:1.5;font-weight:650;color:#222;overflow-wrap:anywhere} #op-produits .pb-mesures-inline{background:#fafaf8;border:1px solid #ecebe6;border-radius:0;margin-bottom:14px;overflow:hidden} #op-produits .pb-mesures-inline>svg{display:block;width:100%;height:auto;max-height:200px} #ob-portail-mount{scroll-margin-top:calc(var(--op-sticky-offset,144px) + 20px)} #op-produits .pb-quincaillerie .pb-choices{gap:6px} #op-produits .pb-quincaillerie .pb-choice{padding:8px;gap:9px;min-height:66px} #op-produits .pb-quincaillerie .pb-choice img{width:72px;height:54px;object-fit:contain} #op-produits .pb-quincaillerie .pb-choice small{line-height:1.35;margin-top:2px} #op-produits .pb-occultation{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #d8d8d8;border-radius:0;background:#fafafa;margin-bottom:12px;cursor:pointer} #op-produits .pb-occultation:has(input:checked){border-color:#d81f26;background:#fff8f8} #op-produits .pb-occultation:focus-within{outline:2px solid #d81f26;outline-offset:2px} #op-produits .pb-occultation>img{width:88px;height:66px;object-fit:contain;flex-shrink:0;border-radius:0;background:#fff} #op-produits .pb-occultation-copy{flex:1;min-width:0;font-size:12px;line-height:1.4} #op-produits .pb-occultation-copy strong{display:block;font-size:13px;margin-bottom:3px} #op-produits .pb-occultation-copy small{display:block;color:#666;font-size:11px;margin-top:3px} #op-produits .pb-occultation input{width:18px;height:18px;flex-shrink:0;accent-color:#d81f26} #op-produits .pb-occultation-disabled{opacity:.55;cursor:not-allowed} #op-produits .pb-motor-accessories{padding-top:14px;border-top:1px solid #ddd} #op-produits .pb-motor-accessories legend{padding-top:14px} #op-produits .pb-motor-accessories legend small{font-size:11px;font-weight:400;color:#777;margin-left:8px} #op-produits .pb-motor-accessories .pb-choices{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))} #op-produits .pb-motor-accessories .pb-accessory{position:relative;display:flex;flex-direction:column;align-items:start;padding:10px;font-size:11px} #op-produits .pb-motor-accessories .pb-accessory img{width:52px;height:52px} #op-produits .pb-motor-accessories input{position:absolute;right:10px;top:10px} #op-produits .pb-motor-accessories strong{font-size:12px} #op-produits .pb-motor-accessories small{font-size:11px} #op-produits .pb-recap-table>div{padding:10px 0;border-bottom:1px solid #eee} #op-produits .pb-recap-table dt{display:flex;justify-content:space-between;gap:5px;font-size:11px;line-height:1.4;color:#888} #op-produits .pb-recap-table dt button{border:0;background:none;color:#888;text-decoration:underline;font-size:10px;padding:0;flex-shrink:0} #op-produits .pb-recap-table dd{margin:4px 0 0;font-size:13px;line-height:1.45;font-weight:650;color:#222} #op-produits .pb-price{border-top:1px solid #ddd;padding:13px 14px 6px;flex-shrink:0} #op-produits .pb-price>small{display:block;color:#888;font-size:10px;line-height:1.5} #op-produits .pb-price>strong{display:block;color:#D81F26;font-size:27px;font-weight:800;letter-spacing:-.7px;line-height:1.25;margin:4px 0} #op-produits .pb-price strong span{font-size:12px;letter-spacing:0} #op-produits .pb-price p{font-size:10px;color:#888;line-height:1.45;margin:6px 0 0} #op-produits .pb-delivery{display:block;font-size:11px;color:#52715a;font-weight:700;margin-top:6px} #op-produits .pb-summary-actions{padding:9px 14px} #op-produits .pb-summary-actions .pb-text-button{margin:6px auto 0;text-align:center;font-size:10px} #op-produits .pb-primary,#op-produits .pb-secondary{width:100%;padding:12px 10px;border-radius:0;font-size:13px;font-weight:750;line-height:1.4} #op-produits .pb-primary{background:#D81F26;color:#fff;border:1px solid #D81F26} #op-produits .pb-secondary{background:#fff;color:#444;border:1px solid #ccc} #op-produits .pb-status{font-size:13px;color:#555;line-height:1.5;margin:14px 0 0} #op-produits .pb-status:empty{display:none} #op-produits .pb-local-notice{font-size:11px;line-height:1.5;color:#888;margin:12px 0 0} #op-produits .pb-mobile-action{display:none} #op-produits .pb-zoom,#op-produits .pb-panier-dialog{width:min(1200px,96vw);max-height:94dvh;margin:auto;border:0;border-radius:0;padding:0;box-shadow:0 20px 80px #0005} #op-produits .pb-zoom::backdrop,#op-produits .pb-panier-dialog::backdrop{background:#0009} #op-produits .pb-dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#292c31;color:#fff;padding:12px 16px;font-size:14px;position:sticky;top:0;z-index:1} #op-produits .pb-dialog-heading .pb-secondary{width:auto;font-size:12px;padding:7px 12px} #op-produits .pb-zoom .pb-visuel,#op-produits .pb-zoom>svg{height:min(68.75vw,75dvh)!important;max-height:75dvh;width:100%} #op-produits .pb-zoom>.pb-help{padding:12px 16px;margin:0} #op-produits .pb-panier-dialog{width:min(560px,94vw)} #op-produits .pb-panier-confirmation{padding:24px;display:grid;gap:20px} #op-produits .pb-panier-success{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;font-weight:750;line-height:1.5} #op-produits .pb-panier-success>span{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;background:#e8f5eb;color:#24743a} #op-produits .pb-panier-article{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0;border-block:1px solid #e6e6e6;font-size:14px} #op-produits .pb-panier-article p{margin:6px 0 0;color:#666;font-size:13px;line-height:1.5} #op-produits .pb-panier-total{font-size:20px;color:#d81f26} #op-produits .pb-panier-total small{font-size:11px;color:#666} #op-produits .pb-panier-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px} #op-produits .pb-panier-actions>.pb-primary,#op-produits .pb-panier-actions>.pb-secondary{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:46px;text-align:center;text-decoration:none;margin:0} @media(max-width:520px){#op-produits .pb-panier-confirmation{padding:20px;gap:16px}#op-produits .pb-panier-actions{grid-template-columns:1fr}#op-produits .pb-panier-actions>.pb-primary{grid-row:1}} #op-produits .pb-price-details{font-size:12px;line-height:1.5;color:#666;margin:12px 0 16px} #op-produits .pb-price-details summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px} #op-produits .pb-price-details dl>div{display:flex;justify-content:space-between;gap:12px;margin:8px 0} #op-produits .pb-price-details dd{margin:0;white-space:nowrap;font-weight:650} @media(min-width:981px){ #op-produits:has(.pb-config) .obp-crumbs{padding:12px 0} #op-produits .ob-portail-config-heading h1{font-size:28px;line-height:1.15;margin-bottom:4px} #op-produits .ob-portail-config-heading{margin-bottom:12px} #op-produits .pb-steps{margin-bottom:10px} /* Trois blocs à hauteur fixe comme les autres configurateurs (27/09/2026) : l'écran moins l'en-tête collant et la barre d'étapes (tout tient dans l'écran, configurateur-disposition.css), sans défilement dans les options (une question par étape). */ .pb-panel,.pb-visual-panel,.pb-summary{height:clamp(470px,calc(100vh - var(--op-sticky-offset,144px) - 64px),730px)} /* Étape avec la liste des autres teintes : la liste prend la hauteur restante et défile seule. */ #op-produits .pb-panel-body:has(>.pb-nuancier .pb-swatches-liste){display:flex;flex-direction:column} #op-produits .pb-panel-body:has(>.pb-nuancier .pb-swatches-liste)>*{flex:none} #op-produits .pb-panel-body>.pb-nuancier:has(.pb-swatches-liste){flex:0 1 auto;min-height:0;display:flex;flex-direction:column} #op-produits .pb-nuancier:has(.pb-swatches-liste)>*{flex:none} #op-produits .pb-nuancier>.pb-swatches.pb-swatches-liste{flex:0 1 auto;min-height:124px;max-height:none} #op-produits .pb-input-unit :is(input,select){padding-block:9px} #op-produits .pb-choices>.pb-choice{padding-block:8px} #op-produits .pb-field{margin-bottom:10px} } @media(min-width:981px) and (max-width:1279px){#op-produits .pb-layout{grid-template-columns:350px minmax(0,1fr) 245px;gap:13px}} /* Navigation sous le visuel, comme les fenêtres : « Précédent », « Agrandir » au milieu et « Suivant » sur une seule ligne (29/09/2026, « Recommencer » retiré). */ @media(min-width:981px){ #op-produits .pb-scene-navigation{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'prev outils next';column-gap:10px;align-items:center} #op-produits .pb-scene-navigation>.pb-chevron-prev{grid-area:prev} #op-produits .pb-scene-navigation>.ob-config-next{grid-area:next} #op-produits .pb-scene-navigation>.pb-visual-tools{grid-area:outils;justify-self:center} } @media(min-width:981px) and (max-width:1150px){#op-produits .pb-scene-navigation{padding:10px}#op-produits .pb-choice-copy:has(.pb-mini-vantaux){grid-template-columns:1fr 94px}#op-produits .pb-mini-vantaux{width:94px}} @media(max-width:980px){ #onlybaie-perspective #op-produits:has(#ob-portail-mount,.pb-config){padding-inline:16px} #op-produits .pb-config{padding-bottom:24px} /* La barre fixe (prix + boutons) cache le bas de la page : la place est réservée en fin de page, pas sous le configurateur. */ #onlybaie-perspective:has(#op-produits .pb-mobile-action){padding-bottom:120px} #op-produits .pb-layout{display:flex;flex-direction:column;gap:16px} #op-produits .pb-visual-panel{order:-1;width:100%} #op-produits .pb-panel-body{overflow:visible} #op-produits .pb-panel .pg-options-nav{display:flex} #op-produits .pb-scene-navigation{justify-content:center} #op-produits .pb-scene-navigation>.pb-chevron{display:none} /* Récapitulatif dans la page, sous les étapes (18/09/2026) : plus de fenêtre dédiée. */ #op-produits .pb-summary-body{overflow:visible} #op-produits .pb-scene{flex:none;aspect-ratio:1536/880;max-height:435px} #op-produits .pb-scene>.pb-visuel,#op-produits .pb-scene>svg{max-width:760px} #op-produits .pb-mobile-action{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:25;align-items:center;gap:14px;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #ddd;box-shadow:0 -1px 0 #e1e3e4} #op-produits .pb-mobile-action>div{flex:0 0 auto;max-width:42%} #op-produits .pb-mobile-action small{display:block;font-size:10px;color:#888} #op-produits .pb-mobile-action strong{display:block;color:#D81F26;font-size:20px;line-height:1.4} #op-produits .pb-mobile-action button{flex:1;min-width:0;font-size:12px} #op-produits .ob-portail-config-heading{align-items:start;flex-direction:column;gap:10px} #op-produits .ob-portail-config-heading h1{font-size:28px} #op-produits .ob-portail-config-heading>a{font-size:12px} #op-produits .ob-portail-fiche{grid-template-columns:1fr;gap:24px} #op-produits .ob-portail-fiche figure{grid-row:1} #op-produits .ob-portail-filters label{flex:1 1 160px} #op-produits .ob-portail-filters p{margin-left:0} #op-produits .ob-portail-styles{gap:8px} #op-produits .ob-portail-styles a{flex:1 1 40%;justify-content:space-between;padding:12px;font-size:14px} } @media(max-width:360px){.pb-choice-copy:has(.pb-mini-vantaux){grid-template-columns:1fr 84px}#op-produits .pb-mini-vantaux{width:84px}#op-produits .pb-dimensions{gap:10px}#op-produits .pb-dimensions>.pb-field{grid-template-columns:minmax(0,1fr) 104px}#op-produits .pb-field>span:first-child{font-size:11px}#op-produits .pb-mobile-action{gap:8px;padding-inline:10px}} @media(prefers-reduced-motion:reduce){.pb-config *{scroll-behavior:auto!important}} #op-produits .pb-opening-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} #op-produits .pb-opening-grid .pb-choice{position:relative;padding:10px 8px;align-items:start} #op-produits .pb-opening-grid .pb-choice-check{position:absolute;right:7px;top:10px;width:14px;height:14px} #op-produits .pb-opening-grid strong{padding-right:13px} /* Les vignettes 3D ne changent pas la disposition des schémas des autres familles. */ #op-produits .pb-opening-view{color:#555} #op-produits .pb-opening-grid--3d{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #op-produits .pb-opening-grid--3d .pb-choice{padding:10px;align-items:stretch} #op-produits .pb-opening-grid--3d .pb-choice-copy{display:flex;flex-direction:column} #op-produits .pb-opening-grid--3d .pb-choice-check{z-index:1;right:8px;top:8px;width:17px;height:17px;background:#fff} #op-produits .pb-opening-grid--3d .pb-choice[aria-pressed=true] .pb-choice-check{background:#D81F26} #op-produits .pb-opening-grid--3d strong{padding-right:0} #op-produits .pb-opening-grid--3d small{color:#596169} #op-produits .pb-opening-thumbnail{display:block;order:-1;width:100%;max-width:180px;aspect-ratio:3/2;margin:0 auto 8px;border-radius:0;background:#fff} #op-produits .pb-opening-thumbnail img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0} #op-produits .pb-opening-thumbnail .pb-opening-mirror{transform:scaleX(-1)} #op-produits .pb-mini-ouverture{display:block;width:100%;height:auto;margin:8px 0 0} @media(max-width:980px){#op-produits .pb-config[data-type-portail="portillon"] .pb-scene{aspect-ratio:1030/1050;max-height:435px}} #op-produits .pb-color-search{width:100%;border:1px solid #ccc;border-radius:0;padding:10px;font-size:14px;margin-bottom:10px} #op-produits .pb-swatches{max-height:238px;overflow:auto;padding:3px;scrollbar-width:thin} #op-produits .pb-swatches small{font-size:12px;line-height:1.25} #op-produits .pb-finitions{border:0;padding:0;margin:16px 0 0;min-width:0} #op-produits .pb-finitions legend{font-size:14px} #op-produits .pb-finitions legend span{font-weight:400;color:#777;font-size:12px} #op-produits .pb-finitions .pb-finish-tabs button{font-size:13px;min-height:38px;padding:8px 10px} #op-produits .pb-finitions .pb-finish-tabs button[aria-pressed=true]{background:#D81F26;border-color:#D81F26} #op-produits .pb-visual-caption{flex-shrink:0} /* Repère commun du nuancier sur les cartes, sans suggérer une liste fermée. */ #op-produits .ob-portail-palette{gap:12px;padding:12px 14px;background:#f5f5f2;border-radius:0;line-height:1.4} #op-produits .ob-portail-palette .ob-nuancier-icone{width:50px;height:50px;flex-shrink:0} #op-produits .ob-portail-palette strong{display:block;font-size:15px;color:#252a2d;font-weight:700} #op-produits .ob-portail-palette small{display:block;font-size:13px;color:#63676a;margin-top:3px} /* Teintes standard et saisie RAL, même contrôle sur les trois ouvertures. */ .pb-color-categories{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 16px}.pb-color-categories button{border:1px solid #ddd;border-radius:0;background:#fff;padding:12px 8px;color:#303438;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}.pb-color-categories button[aria-pressed="true"]{border-color:#D81F26;background:#fff5f5;box-shadow:inset 0 0 0 1px #D81F26}.pb-color-categories small{display:block;font-size:12px;line-height:1.6;font-weight:500}.pb-ral-personnalise{border:1px solid #ddd;border-radius:0;padding:16px;background:#faf9f6;margin-bottom:18px}.pb-ral-personnalise>label{font-size:16px;font-weight:750;display:block;margin-bottom:10px}.pb-ral-field{display:flex;align-items:center;border:1px solid #bbb;border-radius:0;overflow:hidden;background:#fff}.pb-ral-field>span{padding:10px 12px;background:#efefec;font-size:16px;font-weight:700}.pb-ral-field input{min-width:0;width:100%;border:0;padding:12px;font-size:18px;background:#fff;color:#181c1e}.pb-ral-field:focus-within{outline:2px solid #D81F26;outline-offset:2px}.pb-ral-error{font-size:14px;color:#ad1720;line-height:1.5}.pb-ral-confirmation{font-size:14px;font-weight:700;line-height:1.5}.pb-finish-tabs button small{display:block;font-size:12px;font-weight:500;line-height:1.4} /* Accès sous le visuel, hors panneau : aucune hauteur retirée à la scène. */ #op-produits .pb-construction-access{grid-column:2;grid-row:2;min-width:0;text-align:center;align-self:start} #op-produits .pb-construction-access>a{display:inline-flex;align-items:center;justify-content:center;gap:9px;max-width:100%;min-height:44px;padding:9px 14px;box-sizing:border-box;border:1px solid #ced1d1;border-radius:0;background:#fff;color:#343c40;text-decoration:none;font-size:13px;font-weight:700;line-height:1.4} #op-produits .pb-construction-access>a:hover{background:#f1f2ef;border-color:#737c80} #op-produits .pb-construction-access svg{flex-shrink:0} #op-produits .pb-construction-access>small{display:block;margin:6px 0 0;color:#687074;font-size:11px;line-height:1.5} @media(max-width:980px){#op-produits .pb-visual-panel{order:-2}#op-produits .pb-construction-access{order:-1;width:100%;margin-top:-6px}#op-produits .pb-construction-access>a{width:100%}} #op-produits .ob-portail-guide{margin:48px 0 8px;padding:32px 0 0;border-top:1px solid #e5e5e5;max-width:880px}#op-produits .ob-portail-guide h2{font-size:24px;line-height:1.25;color:#111;margin:0 0 16px}#op-produits .ob-portail-guide p{font-size:15px;line-height:1.7;color:#333;margin:0 0 14px}#op-produits .ob-portail-guide-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0}#op-produits .ob-portail-guide-points>div{border-left:3px solid #D81F26;background:#f7f7f7;padding:14px 16px;border-radius:0}#op-produits .ob-portail-guide-points dt{font-weight:700;color:#111;font-size:15px;margin:0 0 6px}#op-produits .ob-portail-guide-points dd{margin:0;font-size:14px;line-height:1.6;color:#444}@media (max-width:700px){#op-produits .ob-portail-guide{margin-top:36px;padding-top:24px}#op-produits .ob-portail-guide h2{font-size:20px}#op-produits .ob-portail-guide-points{grid-template-columns:1fr}} #op-produits .ob-portail-guide-conditions{font-size:13px;color:#666;text-decoration:underline;white-space:nowrap} /* Maillage : le même style dans les autres familles (25/09/2026). */ #op-produits .ob-portail-autres{margin-top:-4px} #op-produits .ob-portail-autres b{align-self:center;font:600 13px/1.3 'DM Sans',sans-serif;color:#5b6166;margin-right:4px;white-space:nowrap} @media(max-width:700px){#op-produits .ob-portail-autres b{grid-column:1/-1;flex-basis:100%}} /* Nuancier compact (27/09/2026) : les 20 teintes standard en entier, cinq par rangée, sans recherche ; la liste des autres teintes garde sa recherche et défile dans son cadre. */ #op-produits .pb-nuancier .pb-color-categories{gap:6px;margin:0 0 12px} #op-produits .pb-nuancier .pb-color-categories button{padding:7px 8px;font-size:13px;line-height:1.35} #op-produits .pb-nuancier .pb-color-categories small{line-height:1.35} /* Autres teintes : code RAL et recherche côte à côte, au-dessus de la liste. */ #op-produits .pb-nuancier .pb-ral-personnalise{padding:10px 12px;margin-bottom:10px} #op-produits .pb-nuancier .pb-ral-ligne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px;align-items:end} #op-produits .pb-nuancier .pb-ral-ligne label{display:block;font-size:12px;font-weight:700;line-height:1.3;margin:0 0 5px} #op-produits .pb-nuancier .pb-ral-field{height:40px} #op-produits .pb-nuancier .pb-ral-field input{padding:8px 10px;font-size:16px} #op-produits .pb-nuancier .pb-ral-field>span{padding:8px 10px;font-size:14px} #op-produits .pb-nuancier .pb-color-search{height:40px;padding:8px 10px;margin:0;font-size:14px} #op-produits .pb-nuancier .pb-ral-personnalise .pb-help{margin:6px 0 0} #op-produits .pb-nuancier .pb-ral-personnalise :is(.pb-ral-error,.pb-ral-confirmation){font-size:13px;margin:6px 0 0} #op-produits .pb-nuancier .pb-finition-unique{margin:10px 0 0;color:#555} #op-produits .pb-nuancier .pb-finition-unique strong{color:#111} #op-produits .pb-nuancier .pb-swatches{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-height:none;overflow:visible;padding:2px} #op-produits .pb-nuancier .pb-swatches button>span{height:26px} #op-produits .pb-nuancier .pb-swatches small{padding-top:3px} #op-produits .pb-nuancier .pb-swatches-liste{max-height:196px;overflow:auto} #op-produits .pb-nuancier .pb-finitions{margin-top:10px} #op-produits .pb-nuancier .pb-finitions legend{font-size:13px;margin-bottom:6px} #op-produits .pb-nuancier .pb-finish-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0} #op-produits .pb-nuancier .pb-finitions .pb-finish-tabs button{min-height:0;padding:6px 6px;font-size:13px;line-height:1.3} #op-produits .pb-nuancier .pb-finish-tabs button small{font-size:11px;line-height:1.3} #op-produits .pb-nuancier .pb-color-label{margin-top:8px} #op-produits .pb-nuancier .pb-nuancier-note{margin:6px 0 0} /* Mise en page fixe au clic sur une teinte (20/10/2026) : notes superposées dans une même case, finitions toujours présentes (grisées si non proposées), libellé de teinte sur deux lignes au plus. */ #op-produits .pb-nuancier .pb-nuancier-notes{display:grid;margin:6px 0 0} #op-produits .pb-nuancier .pb-nuancier-notes>.pb-nuancier-note{grid-area:1/1;margin:0} #op-produits .pb-nuancier .pb-finish-tabs button:disabled small{color:#888} #op-produits .pb-recap-groupes dd.pb-recap-couleur{min-height:3em} /* Une ou deux couleurs : deux cartes avec l'aperçu du portail, côte à côte. */ #op-produits .pb-bicolore{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #op-produits .pb-bicolore .pb-choice{position:relative;align-items:stretch;padding:8px} #op-produits .pb-bicolore .pb-choice-copy{display:flex;flex-direction:column;text-align:center} #op-produits .pb-bicolore .pb-apercu-couleurs{order:-1;display:block;width:100%;height:56px;margin:0 0 6px;background:#fafaf8;border-radius:0;overflow:hidden} #op-produits .pb-bicolore .pb-apercu-couleurs>.pb-visuel{height:100%} #op-produits .pb-bicolore .pb-choice-check{position:absolute;right:7px;top:7px;z-index:1;background:#fff} #op-produits .pb-bicolore .pb-choice[aria-pressed=true] .pb-choice-check{background:#D81F26} /* Deux couleurs choisies : le nuancier de la seconde prend la place des aperçus ; le grand visuel montre déjà le portail bicolore. */ #op-produits .pb-bicolore:has(.pb-choice:last-child[aria-pressed=true]) .pb-apercu-couleurs{display:none} /* Vantaux inégaux (quatre répartitions) : deux cartes par rangée, le schéma au-dessus du nom. Cartes alignées (13/10/2026) : toutes les cartes ont la même hauteur (rangées égales) et la même grille interne — schéma en haut sur toute la largeur, à hauteur fixe ; nom et coche dessous, le nom réservant deux lignes. Un nom sur deux lignes (« Largeurs personnalisées ») ne décale plus aucun schéma : ils sont tous à la même place et à la même échelle. */ #op-produits .pb-vantaux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px} #op-produits .pb-vantaux .pb-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(calc(2*1.4em),auto);align-items:start;column-gap:6px;row-gap:5px;padding:8px 10px;font-size:12px} #op-produits .pb-vantaux .pb-choice-copy:has(.pb-mini-vantaux){display:contents} #op-produits .pb-vantaux .pb-mini-vantaux{grid-column:1/-1;grid-row:1;width:100%;height:38px;margin:0} #op-produits .pb-vantaux .pb-choice strong{grid-column:1;grid-row:2;font-size:12px} #op-produits .pb-vantaux .pb-choice-check{grid-column:2;grid-row:2;align-self:start} /* Conserver et retrouver sa sélection, côte à côte sous le bouton du panier. */ #op-produits .pb-selection-actions{display:flex;justify-content:center;flex-wrap:wrap;column-gap:16px} #op-produits .pb-selection-actions .pb-text-button{margin:6px 0 0} /* Lien dans une phrase d'aide (schéma des mesures). */ #op-produits .pb-lien{display:inline;border:0;background:none;padding:0;color:#555;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer} /* Ordinateur : un cran plus compact, pour que chaque étape tienne dans des blocs à la hauteur de l'écran, barre d'étapes comprise (27/09/2026). En fin de feuille pour passer après les règles de base ci-dessus. */ @media(min-width:981px){ #op-produits .pb-vantaux{gap:6px} #op-produits .pb-vantaux .pb-choice{padding:6px 8px} #op-produits .pb-vantaux .pb-mini-vantaux{height:42px} #op-produits .pb-nuancier .pb-swatches button>span{height:22px} #op-produits .pb-nuancier .pb-finitions .pb-finish-tabs button{padding:4px 6px} #op-produits .pb-check{padding:9px 12px;margin-bottom:10px} #op-produits :is(.pb-info,.pb-help){margin-bottom:10px} } /* Écrans bas (en-tête compact, 29/09/2026) : encart et champs de cotes un cran plus serrés, pour que la largeur du vantail de service (répartition personnalisée) tienne avec les quatre répartitions. Rien ne change au-dessus de 900 px de haut. */ @media(min-width:981px) and (max-height:899px){ #op-produits .pb-info{padding:8px 12px;line-height:1.5;margin-bottom:8px} #op-produits .pb-input-unit :is(input,select){padding-block:6px} } /* Angles droits sur toutes les pages portails (décision du gérant, 13/10/2026 : « passe tout en angles droits »). Les feuilles portails sont à 0 ; ce bloc redresse aussi les éléments du socle commun (cartes, boutons, guides, bandeau du configurateur, encadré garanties) quand ils sont affichés dans une page portail, sans toucher aux autres familles. Restent ronds : pastilles de couleur, coches, repères numérotés, horloge du délai. */ #onlybaie-perspective #op-produits [data-portail-rendered] :is(.obp-card,.obp-button,.obp-garage-button,.obp-garage-comparaison-item,.obp-garage-block,.obp-garage-conseil,.ob-product-badge,.pb-panel-heading,.ob-config-band,.pb-loupe), #onlybaie-perspective #portail-description-produit :is(.ob-gar-bandeau,.ob-gar-labels,.ob-gar-labels li,.ob-gar-durees li,.ob-gar-bandeau-labels img,.ob-gar-labels img){border-radius:0} #onlybaie-perspective #op-produits [data-portail-rendered] .obp-card{box-shadow:none} /* Le bandeau commun des configurateurs impose son arrondi en !important : réponse au même niveau. */ #onlybaie-perspective #op-produits [data-portail-rendered] .ob-config-band{border-radius:0!important} /* Bandeau des pages portails (17/10/2026) : texte sur fond uni à gauche, scène réelle à droite ; angles droits, sans ombre. */ #op-produits .ob-portail-bandeau{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:center;margin:4px 0 28px} #op-produits .ob-portail-bandeau>.obp-heading{padding:0;max-width:560px} #op-produits .ob-portail-bandeau-photo{display:block;margin:0;border-radius:0;overflow:hidden;background:#e9eae6} #op-produits .ob-portail-bandeau-photo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:0;box-shadow:none} @media(max-width:760px){ #op-produits .ob-portail-bandeau{grid-template-columns:minmax(0,1fr);gap:20px;margin:0 0 20px} #op-produits .ob-portail-bandeau-photo{order:-1} #op-produits .ob-portail-bandeau-photo img{aspect-ratio:4/5;max-height:72vh} } /* Section « Design assorti » des fiches portail (19/10/2026) : le bouton rouge reste en bas de chaque carte, aligné d'une carte à l'autre quelle que soit la longueur du titre, et ne touche plus le titre : 24 px comme au-dessus des boutons des cartes familles. Sur téléphone, l'écart commun des cartes compactes (cartes-produits.css) s'applique. */ #op-produits [data-portail-assortis] .obp-card-actions{margin-top:auto;padding-top:24px} /* Photos de cette section (19/10/2026) : sur téléphone, la règle commune des cartes simples (cadre de 300 px de haut) faisait flotter la photo dans une grande zone grise. Même cadre que les cartes du catalogue portails, au format des photos de situation (960 × 550), à toutes les largeurs : battant et coulissant remplissent le cadre (cover, 50 % 30 %) ; le portillon, photo presque carrée, reste entier (contain), comme dans son catalogue. Un cadre carré en cover couperait 43 % de la largeur des photos de portails (piliers et bords des vantaux). */ #onlybaie-perspective #op-produits [data-portail-assortis] .obp-card .obp-card-image{height:auto;aspect-ratio:960/550;padding:0;background:#f2f0eb} #onlybaie-perspective #op-produits [data-portail-assortis] .obp-card .obp-card-image img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} #onlybaie-perspective #op-produits [data-portail-assortis] .obp-card .obp-card-image[href^="/portails/portillons/"] img{object-fit:contain} #op-produits .pb-check.pb-check-photo{display:grid;grid-template-columns:auto 72px minmax(0,1fr);align-items:center;gap:10px}#op-produits .pb-check-photo img{width:72px;height:54px;object-fit:contain;border:1px solid #e3e0da;background:#fff} /* Tablette en paysage (981 à 1100 px) : même mise en page que l'ordinateur, chevrons et champs un peu plus serrés (21/10/2026). */ @media(min-width:981px) and (max-width:1100px){#op-produits .pb-chevron{padding:10px 16px 10px 8px;font-size:11px}#op-produits .pb-chevron-prev{padding:10px 8px 10px 16px}#op-produits .pb-scene-navigation{gap:6px;padding:10px 8px}} /* Accès immédiat aux deux explorations depuis toutes les rubriques. */ #portail-description-produit .pd-discovery{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin:24px 0 36px;scroll-margin-top:110px} #portail-description-produit .pd-discovery a{display:flex;align-items:center;gap:18px;min-height:96px;padding:20px 24px;border-radius:0;text-decoration:none;font-size:18px;line-height:1.4} #portail-description-produit .pd-discovery-3d{background:linear-gradient(135deg,#303238,#17181b);color:#fff} #portail-description-produit .pd-discovery-3d>span:last-child{margin-left:auto;font-size:28px} #portail-description-produit .pd-discovery-icon{border:1px solid #6c6e73;border-radius:0;padding:12px;font-weight:800;font-size:24px} #portail-description-produit .pd-discovery strong{display:block;font-size:inherit} #portail-description-produit .pd-discovery small{display:block;font-size:14px;margin-top:4px;color:#e4e4e7} #portail-description-produit .pd-discovery a.pd-discovery-accessoires{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;background:#f5f4f1;color:#17181b;border:1px solid #dededb} #portail-description-produit .pd-discovery-accessoires>span{font-size:14px} #portail-description-produit .pd-discovery a:hover{box-shadow:none} #portail-description-produit .pd-discovery a:focus-visible{outline:3px solid #d81f26;outline-offset:4px} #pd-accessoires,#pd-exploration-3d,#pd-ouverture{scroll-margin-top:110px} @media(max-width:700px){#portail-description-produit .pd-discovery{grid-template-columns:1fr;gap:12px;margin:20px 0 28px}#portail-description-produit .pd-discovery a{padding:16px;min-height:84px;font-size:16px;gap:12px}#portail-description-produit .pd-discovery a.pd-discovery-accessoires{min-height:72px}} /* Descriptifs des trois ouvertures : styles isolés, même rythme que les fiches volets. */ #portail-description-produit #pd-construction{scroll-margin-top:110px} #portail-description-produit .pd-anatomie{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:38px;align-items:start} #portail-description-produit .pd-anatomie-figure{min-width:0;background:#f4f5f2;border:1px solid #e5e8e4;border-radius:0;padding:26px;position:sticky;top:110px} #portail-description-produit .pd-anatomie-entete{display:flex;justify-content:space-between;gap:14px;font-size:12px;font-weight:700;color:#576165} #portail-description-produit .pd-anatomie-entete>span:first-child{text-transform:uppercase;letter-spacing:.06em;color:#273238} #portail-description-produit .pd-anatomie-canvas{position:relative;max-width:920px;margin:46px auto 28px} #portail-description-produit .pd-anatomie-canvas img{width:100%;height:100%;object-fit:contain} #portail-description-produit .pd-anatomie-portillon{width:54%;max-width:260px} #portail-description-produit .pd-repere-point{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);width:44px;height:44px;text-decoration:none;border-radius:50%;z-index:1} #portail-description-produit .pd-repere-point span,#portail-description-produit .pd-repere-numero{display:grid;place-items:center;width:32px;height:32px;background:#fff;border:1.5px solid #c42b32;color:#ad2028;border-radius:50%;font:800 14px/1 'DM Sans',sans-serif;flex-shrink:0;box-shadow:0 2px 7px #101b2420} #portail-description-produit .pd-repere-point:hover span{background:#d81f26;color:#fff} #portail-description-produit .pd-anatomie-figure figcaption{padding:14px 0 0;text-align:left;font-size:12px} #portail-description-produit .pd-anatomie-legende{margin:0;padding:0;list-style:none;min-width:0} #portail-description-produit .pd-anatomie-legende>li{display:flex;align-items:start;gap:16px;padding:23px 0;border-top:1px solid #dfe3e3;scroll-margin-top:120px} #portail-description-produit .pd-anatomie-legende>li:first-child{padding-top:0;border-top:0} #portail-description-produit .pd-anatomie-legende>li:last-child{padding-bottom:0} #portail-description-produit .pd-anatomie-legende strong{display:block;font:800 23px/1.4 Manrope,sans-serif;color:#29363c;margin:7px 0 8px} #portail-description-produit .pd-anatomie-legende p{font-size:15px;line-height:1.7} /* Seules trois coupes autorisées : proportions natives, texte HTML et zoom partagé. */ #portail-description-produit .pd-coupes-profils{margin-top:52px;padding-top:36px;border-top:1px solid #e1e5e4} #portail-description-produit .pd-coupes-profils>header{max-width:780px;margin-bottom:28px} #portail-description-produit .pd-coupes-profils>header>p:last-child{margin-top:14px;font-size:16px;line-height:1.7} #portail-description-produit .pd-coupes-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start} #portail-description-produit .pd-coupes-unique{grid-template-columns:minmax(0,1fr);max-width:620px} #portail-description-produit .pd-coupe-profil{min-width:0;padding:24px;border:1px solid #e1e5e4;border-radius:0;background:#fff} #portail-description-produit .pd-coupe-profil>h4{font-size:19px;line-height:1.35;margin-bottom:16px} #portail-description-produit .pd-coupe-profil a{display:block;color:#313d43;text-decoration:none;cursor:zoom-in} #portail-description-produit .pd-coupe-image{display:grid;place-items:center;height:280px} #portail-description-produit .pd-coupe-image img{width:auto;height:auto;max-width:100%;max-height:280px;object-fit:contain} #portail-description-produit .pd-coupe-zoom{display:flex;align-items:center;justify-content:flex-end;min-height:44px;padding:8px 0;font-size:13px;font-weight:700} #portail-description-produit .pd-coupe-profil figcaption{padding:14px 0 0;border-top:1px solid #e7e9e8;font-size:14px;line-height:1.65;text-align:left} @media(max-width:700px){#portail-description-produit .pd-coupes-profils{margin-top:34px;padding-top:28px}#portail-description-produit .pd-coupes-grille{grid-template-columns:minmax(0,1fr);gap:20px}#portail-description-produit .pd-coupe-profil{padding:20px}#portail-description-produit .pd-coupe-image{height:auto;min-height:160px;padding:12px 0}#portail-description-produit .pd-coupe-image img{max-height:300px}#portail-description-produit .pd-coupe-profil figcaption{font-size:14px}} #portail-description-produit .pd-profils-lecture{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:42px;margin-top:52px;padding:32px;border:1px solid #e1e5e4;border-radius:0} #portail-description-produit .pd-profils-lecture figure{min-width:0} #portail-description-produit .pd-profils-lecture figcaption{font-size:12px;text-align:left;padding:8px 12px 0} #portail-description-produit .pd-profils-lecture p{font-size:16px;line-height:1.75} #portail-description-produit .pd-profils-lecture .pd-kicker{font-size:11px} #portail-description-produit .pd-profils-lecture .pd-note{font-size:13px;padding-top:16px;border-top:1px solid #e3e6e4} #portail-description-produit .pd-profil-dessin{background:#f6f7f5;border-radius:0;padding:10px} #portail-description-produit .pd-renfort{display:flex;align-items:start;gap:34px;background:#f4f5f2;padding:32px;border-radius:0;margin-top:28px} #portail-description-produit .pd-renfort p{font-size:16px;line-height:1.75} #portail-description-produit .pd-renfort .pd-kicker{font-size:11px;margin-bottom:14px} #portail-description-produit .pd-renfort-mesure{flex:0 0 230px;padding:20px 0;display:flex;flex-direction:column;gap:12px} #portail-description-produit .pd-renfort-mesure strong{font:800 42px/1.2 Manrope,sans-serif;letter-spacing:-.045em;color:#28373d} #portail-description-produit .pd-renfort-mesure span{font-size:14px;color:#657074} @media(max-width:1050px){#portail-description-produit .pd-anatomie{grid-template-columns:1fr;gap:28px}#portail-description-produit .pd-anatomie-figure{position:static}#portail-description-produit .pd-anatomie-legende{display:grid;grid-template-columns:1fr 1fr;gap:26px}#portail-description-produit .pd-anatomie-legende>li,#portail-description-produit .pd-anatomie-legende>li:first-child{border-top:1px solid #dfe3e3;padding:20px 0 0}#portail-description-produit .pd-profils-lecture{gap:26px;padding:24px}} @media(max-width:700px){#portail-description-produit .pd-anatomie-figure{padding:22px}#portail-description-produit .pd-anatomie-entete{font-size:10px}#portail-description-produit .pd-anatomie-canvas{margin:32px auto 20px}#portail-description-produit .pd-anatomie-portillon{width:68%}#portail-description-produit .pd-anatomie-legende{grid-template-columns:1fr;gap:20px}#portail-description-produit .pd-anatomie-legende>li{gap:12px}#portail-description-produit .pd-anatomie-legende strong{font-size:22px}#portail-description-produit .pd-profils-lecture{grid-template-columns:1fr;margin-top:34px;padding:20px;gap:24px}#portail-description-produit .pd-profil-dessin{padding:0}#portail-description-produit .pd-profils-lecture figcaption{padding-inline:0}#portail-description-produit .pd-renfort{flex-direction:column;padding:24px;gap:22px}#portail-description-produit .pd-renfort-mesure{flex:auto;padding:0}#portail-description-produit .pd-renfort-mesure strong{font-size:36px}} #portail-description-produit .pd-tech-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 36px;align-items:start;margin-top:40px} #portail-description-produit .pd-tech-group{min-width:0} #portail-description-produit .pd-tech-group>h4{padding:18px 0;border-top:3px solid #343b40} #portail-description-produit .pd-tech-group .pd-specs{margin:0} #portail-description-produit .pd-tech-group .pd-specs>div{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;padding:16px;font-size:15px;overflow-wrap:break-word} #portail-description-produit .pd-tech-plan{display:grid;grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr);align-items:center;gap:38px;padding:28px;background:#f8f8f6;border-radius:0} #portail-description-produit .pd-tech-figure{min-width:0} #portail-description-produit .pd-tech-figure a{display:block;background:white;padding:14px;border:1px solid #e2e4e4;border-radius:0;text-decoration:none;color:#343b40;cursor:zoom-in} #portail-description-produit .pd-tech-figure img{margin:auto;width:100%;height:auto;object-fit:contain} #portail-description-produit .pd-tech-figure a>span{display:block;text-align:right;font-size:12px;font-weight:700;margin-top:12px} #portail-description-produit .pd-tech-figure figcaption{text-align:left;padding:10px 0 0} #portail-description-produit .pd-tech-plan .pd-tech-figure img{max-height:590px} #portail-description-produit .pd-tech-keyfigures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0 34px} #portail-description-produit .pd-tech-keyfigures>div{padding:22px 24px;background:#f6f6f3;border-radius:0;display:flex;flex-direction:column;gap:10px} #portail-description-produit .pd-tech-keyfigures strong{font:800 clamp(24px,2.1vw,34px)/1.3 Manrope,sans-serif;letter-spacing:-.035em} #portail-description-produit .pd-tech-keyfigures small{font:600 15px 'DM Sans',sans-serif} #portail-description-produit .pd-tech-keyfigures span{font-size:14px;color:#596067} #portail-description-produit .pd-tech-explain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px} #portail-description-produit .pd-tech-explain article{min-width:0} #portail-description-produit .pd-tech-explain .pd-tech-figure{margin-bottom:24px} #portail-description-produit .pd-tech-explain .pd-tech-figure img{max-height:180px;width:auto} #portail-description-produit .pd-tech-large-number{min-height:255px;display:flex;flex-wrap:wrap;gap:12px;align-content:center;align-items:baseline;justify-content:center;font:800 58px/1.2 Manrope,sans-serif;margin-bottom:24px;border:1px solid #e2e4e4;border-radius:0} #portail-description-produit .pd-tech-large-number small{font-size:21px} #portail-description-produit .pd-tech-large-number span{flex-basis:100%;font:500 16px/1.6 'DM Sans',sans-serif;text-align:center;color:#596067} @media(max-width:1000px){#portail-description-produit .pd-tech-plan{grid-template-columns:1fr}#portail-description-produit .pd-tech-groups{grid-template-columns:1fr}#portail-description-produit .pd-tech-group .pd-specs>div{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}} @media(max-width:700px){#portail-description-produit .pd-tech-keyfigures,#portail-description-produit .pd-tech-explain{grid-template-columns:1fr;gap:18px}#portail-description-produit .pd-tech-keyfigures>div{padding:18px}#portail-description-produit .pd-tech-plan{padding:16px;gap:24px}#portail-description-produit .pd-tech-group .pd-specs>div{grid-template-columns:1fr;gap:7px}#portail-description-produit .pd-tech-groups{gap:30px}#portail-description-produit .pd-tech-figure a{padding:8px}#portail-description-produit .pd-tech-large-number{min-height:200px;font-size:46px;padding:15px}} /* Le cadre suit exactement le configurateur ; seule la longueur du texte est bornée. */ #ob-portail-mount>.ob-portail-config-loading{min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:28px;text-align:center;background:#f7f7f4;border-radius:0;color:#596067} @media(max-width:700px){#ob-portail-mount>.ob-portail-config-loading{min-height:600px}} /* Pilote : visuels exacts du catalogue, affichés entiers et à leur rapport natif. */ #portail-description-produit .pd-modele-heading{max-width:940px;margin-bottom:32px} #portail-description-produit .pd-modele-heading h2{font-size:clamp(32px,3.1vw,46px)} #portail-description-produit .pd-modele-heading .pd-lead{max-width:820px;margin-top:20px} #portail-description-produit .pd-modele-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:40px;align-items:start} #portail-description-produit .pd-modele-photo{min-width:0;width:100%;max-width:1000px} #portail-description-produit .pd-modele-photo a{position:relative;display:block;border-radius:0;overflow:hidden;background:#f4f4f1;cursor:zoom-in} #portail-description-produit .pd-modele-photo img{width:100%;height:auto;object-fit:contain} #portail-description-produit .pd-modele-photo figcaption{padding:12px 0 0;text-align:left} #portail-description-produit .pd-photo-zoom{position:absolute;right:12px;bottom:12px;padding:7px 12px;border-radius:0;color:#fff;background:#20272ee8;font-size:12px;font-weight:700;line-height:1.5;box-shadow:none} #portail-description-produit .pd-modele-facts{padding:26px;background:#f5f5f2;border-radius:0} #portail-description-produit .pd-modele-facts .pd-kicker{font-size:11px;line-height:1.6;margin-bottom:12px} #portail-description-produit .pd-modele-facts>div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;border-bottom:1px solid #dedfdb;padding:16px 0} #portail-description-produit .pd-modele-facts span{font-size:14px;color:var(--pd-muted)} #portail-description-produit .pd-modele-facts strong{font:800 23px/1.4 Manrope,sans-serif;letter-spacing:-.035em;text-align:right} #portail-description-produit .pd-modele-facts .pd-text-link{font-size:13px;margin-top:18px} #portail-description-produit .pd-modele-disclaimer{font-size:12px;line-height:1.6;margin-top:18px;max-width:900px;color:#757b7e} #portail-description-produit .pd-modele-details{scroll-margin-top:115px} #portail-description-produit .pd-modele-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} #portail-description-produit .pd-modele-points article{padding-top:22px;border-top:2px solid #333b40} #portail-description-produit .pd-modele-points p{font-size:16px;line-height:1.75} #portail-description-produit .pd-modele-detail-layout{display:grid;grid-template-columns:minmax(0,431px) minmax(0,1fr);align-items:center;gap:58px;margin-top:48px;padding:36px;background:#f7f7f4;border-radius:0} #portail-description-produit .pd-modele-detail-layout h3+p{margin-top:20px} #portail-description-produit .pd-modele-photo-detail img{max-width:431px} #portail-description-produit .pd-lightbox{border:0;border-radius:0;padding:18px;max-width:min(94vw,1100px);max-height:92dvh;overflow:auto;box-shadow:0 30px 100px #0006;color:#222} #portail-description-produit .pd-lightbox::backdrop{background:#14191ce8} #portail-description-produit .pd-lightbox button{display:block;margin:0 0 14px auto;border:1px solid #ddd;border-radius:0;padding:8px 15px;background:#fff;font-size:14px;font-weight:700} #portail-description-produit .pd-lightbox img{width:auto;height:auto;max-width:100%;max-height:72dvh;margin:auto;object-fit:contain} #portail-description-produit .pd-lightbox-coupe{width:min(94vw,1100px)} #portail-description-produit .pd-lightbox figcaption{padding:14px 8px 0} @media(max-width:1000px){#portail-description-produit .pd-modele-layout{grid-template-columns:minmax(0,1fr)}#portail-description-produit .pd-modele-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px;padding:20px 24px}#portail-description-produit .pd-modele-facts .pd-kicker,#portail-description-produit .pd-modele-facts .pd-text-link{grid-column:1/-1;justify-self:start}#portail-description-produit .pd-modele-facts>div{flex-direction:column;gap:2px}#portail-description-produit .pd-modele-detail-layout{gap:30px;padding:26px}} @media(max-width:700px){#portail-description-produit .pd-modele-layout{gap:20px}#portail-description-produit .pd-modele-heading{margin-bottom:24px}#portail-description-produit .pd-modele-points{grid-template-columns:1fr;gap:26px}#portail-description-produit .pd-modele-facts{gap:0 14px;padding:18px}#portail-description-produit .pd-modele-facts strong{font-size:19px;text-align:left}#portail-description-produit .pd-modele-facts span{font-size:12px}#portail-description-produit .pd-modele-detail-layout{grid-template-columns:1fr;padding:20px;margin-top:30px}#portail-description-produit .pd-modele-photo-detail{max-width:431px;margin:auto}#portail-description-produit .pd-lightbox{padding:12px}} @media(max-width:480px){#portail-description-produit .pd-modele-facts{display:block}#portail-description-produit .pd-modele-facts>div{flex-direction:row;gap:16px}#portail-description-produit .pd-modele-facts strong{max-width:60%;text-align:right}} .pd-hardware figure>div{height:80px;display:grid;place-items:center} #portail-description-produit .pd-hardware figure img{width:auto;height:auto;max-width:105px;max-height:80px} #portail-description-produit{--pd-red:#d81f26;--pd-ink:#191d20;--pd-muted:#596067;--pd-line:#e2e4e4;box-sizing:border-box;width:100%;min-width:0;margin:64px 0 0;padding:0 32px 24px;border-radius:0;color:var(--pd-ink);background:#fff;font:17px/1.7 'DM Sans',sans-serif;text-align:left;isolation:isolate;max-width:none;scroll-margin-top:110px} #portail-description-produit *{box-sizing:border-box}#portail-description-produit [hidden]{display:none!important}#portail-description-produit :is(h2,h3,h4,p,figure,dl,dd){margin:0}#portail-description-produit :is(h2,h3,h4){font-family:Manrope,'DM Sans',sans-serif;line-height:1.17;letter-spacing:-.04em;color:var(--pd-ink)}#portail-description-produit h2{font-size:clamp(34px,3.2vw,52px);font-weight:800}#portail-description-produit h3{font-size:clamp(28px,2.5vw,40px);font-weight:800}#portail-description-produit h4{font-size:21px;font-weight:750;letter-spacing:-.025em}#portail-description-produit p{color:var(--pd-muted)}#portail-description-produit p+p,#portail-description-produit h4+p{margin-top:12px}#portail-description-produit img{display:block;max-width:100%;height:auto;object-fit:contain}#portail-description-produit svg{display:block;width:100%;height:auto}#portail-description-produit button{font:inherit;cursor:pointer}#portail-description-produit :is(button,a,summary,[tabindex]):focus-visible{outline:3px solid var(--pd-red);outline-offset:4px}#portail-description-produit figcaption{font-size:13px;line-height:1.55;color:#697077;padding:14px 12px 0;text-align:center}#portail-description-produit .pd-kicker{color:#b21f26;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}#portail-description-produit .pd-note{font-size:14px;line-height:1.6;margin-top:22px;color:#697077}#portail-description-produit .pd-tabs{display:flex;align-items:center;justify-content:space-between;gap:24px;border-block:1px solid var(--pd-line);min-height:84px;margin-bottom:48px;scroll-margin-top:105px}.pd-tabs>span{font-size:18px;font-weight:750}#portail-description-produit [role=tablist]{display:flex;align-self:stretch;gap:28px}#portail-description-produit [role=tab]{font-size:16px;font-weight:700;background:transparent;border:0;border-bottom:3px solid transparent;padding:16px 0;color:#666c71;white-space:nowrap}#portail-description-produit [role=tab][aria-selected=true]{border-bottom-color:var(--pd-red);color:#191d20}#portail-description-produit [role=tabpanel]{outline:none}#portail-description-produit .pd-hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:64px}#portail-description-produit .pd-lead{font-size:20px;line-height:1.6;margin-top:24px}#portail-description-produit .pd-editorial-photo{position:relative;border-radius:0;overflow:hidden;background:#f5f5f2}#portail-description-produit .pd-editorial-photo img{width:100%;height:460px;object-fit:cover;object-position:50% 65%}#portail-description-produit .pd-editorial-photo figcaption{padding:13px 20px 16px}#portail-description-produit .pd-text-link{display:inline-block;color:#222;text-decoration:none;font-weight:750;font-size:15px;border-bottom:1px solid #bbc0c3;margin-top:24px;padding:6px 0}#portail-description-produit .pd-signatures{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--pd-line);margin-top:44px;padding:24px 0}.pd-signatures>div{display:flex;flex-direction:column;text-align:center;padding:8px 16px;border-right:1px solid var(--pd-line);gap:6px}.pd-signatures>div:last-child{border:0}.pd-signatures strong{font-size:21px;letter-spacing:-.03em}.pd-signatures span{font-size:13px;color:#666d73}#portail-description-produit .pd-section{padding:72px 0;border-bottom:1px solid var(--pd-line)}#portail-description-produit .pd-heading{max-width:800px;margin-bottom:34px}.pd-heading>p:last-child:not(.pd-kicker){margin-top:20px;font-size:18px}#portail-description-produit .pd-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}#portail-description-produit .pd-sens{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}#portail-description-produit .pd-sens button{border:1px solid #dadede;border-radius:0;background:white;color:#40484d;padding:12px;font-size:13px;line-height:1.5;font-weight:700;text-align:left}#portail-description-produit .pd-sens button[aria-pressed=true]{border-color:#d81f26;background:#fcf0f0;color:#a01820}#portail-description-produit .pd-construction{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.pd-construction>div{padding:24px 0 0;border-top:2px solid #343b40}.pd-construction p{font-size:16px}#portail-description-produit .pd-color-intro{display:flex;gap:24px;align-items:center;margin:32px 0}.pd-color-intro>strong{font:800 76px/1 Manrope,sans-serif;letter-spacing:-.065em;color:var(--pd-red)}.pd-color-intro p{font-size:15px}#portail-description-produit .pd-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;margin:32px 0}.pd-swatches>div{display:flex;flex-direction:column;gap:5px;min-width:0}.pd-swatches span{width:100%;height:78px;border:1px solid #00000012;border-radius:0;margin-bottom:8px}.pd-swatches strong{font-size:13px;line-height:1.4}.pd-swatches small{font-size:12px;color:#666}#portail-description-produit .pd-finishes{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:34px;padding-top:24px;border-top:1px solid var(--pd-line)}.pd-finishes h4{font-size:17px}.pd-finishes p{font-size:14px;line-height:1.6}#portail-description-produit .pd-callout{margin-top:32px;padding:25px 28px;border-left:3px solid var(--pd-red);background:#f7f7f5;border-radius:0}.pd-callout>strong{display:block;font-size:19px}.pd-callout p{font-size:16px;margin-top:10px}#portail-description-produit .pd-equipment{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.pd-equipment article{border:1px solid var(--pd-line);border-radius:0;padding:26px}#portail-description-produit .pd-index{display:block;color:#b51e26;font-size:13px;font-weight:800;margin-bottom:20px}.pd-equipment p{font-size:15px;line-height:1.7}#portail-description-produit .pd-hardware{display:flex;flex-wrap:wrap;gap:20px;margin:34px 0 0}.pd-hardware figure{flex:1;min-width:160px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;background:#f8f8f6;border-radius:0}#portail-description-produit .pd-hardware img{height:80px;width:110px;object-fit:contain;mix-blend-mode:multiply}.pd-hardware figcaption{font-weight:700;color:#41484e;font-size:14px}#portail-description-produit .pd-specs{border-top:1px solid var(--pd-line);margin:30px 0}.pd-specs>div{display:grid;grid-template-columns:30% 1fr;gap:24px;padding:18px 22px;border-bottom:1px solid var(--pd-line);font-size:16px}.pd-specs>div:nth-child(odd){background:#f8f8f6}.pd-specs dt{font-weight:750}.pd-specs dd{color:#586167}#portail-description-produit .pd-reperes{list-style:none;margin:0;padding:0}.pd-reperes li{display:flex;gap:18px;padding:18px 0}.pd-reperes li>span{flex:0 0 38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fcf0f0;color:#b21f26;font-size:12px;font-weight:800}.pd-reperes p{font-size:15px}#portail-description-produit .pd-faq{border-top:1px solid var(--pd-line)}.pd-faq details{padding:22px 0;border-bottom:1px solid var(--pd-line)}.pd-faq summary{display:flex;justify-content:space-between;gap:22px;cursor:pointer;font-size:18px;line-height:1.4;font-weight:700;list-style:none}.pd-faq summary::-webkit-details-marker{display:none}.pd-faq summary span{font-size:26px;font-weight:400}.pd-faq details[open] summary span{transform:rotate(45deg)}.pd-faq details p{padding-top:16px;max-width:860px;font-size:16px}#portail-description-produit .pd-closing{display:flex;justify-content:space-between;align-items:center;gap:40px;background:#f5f5f2;border-radius:0;padding:44px;margin-top:52px}.pd-closing p:not(.pd-kicker){margin-top:18px;max-width:600px}.pd-closing a{flex-shrink:0;background:#d81f26;color:white;text-decoration:none;border-radius:0;padding:16px 22px;font-size:15px;font-weight:750}#portail-description-produit [data-pd-panel]:not(:first-of-type){scroll-margin-top:110px}#portail-description-produit:not([data-enhanced]) [data-pd-panel]+[data-pd-panel]{margin-top:60px} @media(max-width:1050px){#portail-description-produit .pd-tabs{align-items:flex-start;flex-direction:column;gap:0;padding-top:20px}#portail-description-produit [role=tablist]{gap:24px;width:100%;overflow-x:auto}#portail-description-produit .pd-hero{gap:34px}#portail-description-produit .pd-editorial-photo img{height:410px}#portail-description-produit .pd-equipment{grid-template-columns:1fr 1fr}#portail-description-produit .pd-finishes{grid-template-columns:repeat(3,1fr)}#portail-description-produit .pd-split{gap:26px}#portail-description-produit .pd-closing{padding:32px;align-items:flex-start;flex-direction:column}} @media(max-width:700px){#portail-description-produit{margin-top:40px;font-size:16px;padding:0 16px 20px;border-radius:0}#portail-description-produit .pd-tabs{margin-bottom:30px}#portail-description-produit [role=tablist]{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;overflow:visible}#portail-description-produit [role=tab]{padding:14px 0;font-size:15px;line-height:1.4;white-space:normal;text-align:left;min-height:50px}#portail-description-produit .pd-hero,#portail-description-produit .pd-split{grid-template-columns:1fr;gap:28px}#portail-description-produit .pd-editorial-photo img{height:350px}#portail-description-produit .pd-lead{font-size:18px}#portail-description-produit .pd-signatures{grid-template-columns:1fr 1fr;padding:10px 0;margin-top:28px}.pd-signatures>div{padding:16px 8px}.pd-signatures>div:nth-child(2){border:0}.pd-signatures strong{font-size:18px}.pd-signatures span{font-size:12px}#portail-description-produit .pd-section{padding:46px 0}#portail-description-produit .pd-heading{margin-bottom:26px}.pd-heading>p:last-child:not(.pd-kicker){font-size:16px}#portail-description-produit .pd-construction,#portail-description-produit .pd-equipment{grid-template-columns:1fr;gap:18px}#portail-description-produit .pd-swatches{grid-template-columns:repeat(4,1fr);gap:18px 12px}.pd-swatches span{height:62px}#portail-description-produit .pd-finishes{grid-template-columns:1fr 1fr;gap:24px}#portail-description-produit .pd-specs>div{grid-template-columns:1fr;gap:5px;padding:16px}#portail-description-produit .pd-closing{padding:26px;margin-top:34px}.pd-closing a{width:100%;text-align:center;white-space:normal}#portail-description-produit .pd-callout{padding:20px}#portail-description-produit .pd-hardware{gap:12px}.pd-hardware figure{min-width:95px;padding:18px 8px}#portail-description-produit .pd-hardware img{max-width:90px}.pd-hardware figcaption{font-size:12px;padding-inline:0}#portail-description-produit .pd-measures figure{order:2}} /* Guide de relevé : même conteneur que les autres rubriques du descriptif. */ #portail-description-produit .pd-specs dt,#portail-description-produit .pd-specs dd{font-size:15px;line-height:1.65} #portail-description-produit .pd-specs dd,#portail-description-produit .pd-cotes-definitions dd,#portail-description-produit .pd-cotes-checklist dd{font-weight:400} #portail-description-produit .pd-cotes-reference{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:40px;align-items:start} #portail-description-produit .pd-cotes-reference figure{margin:0;min-width:0} #portail-description-produit .pd-cotes-reference svg{display:block;width:100%;height:auto} #portail-description-produit .pd-cotes-reference figcaption{margin:14px 0 0;color:#697078;font-size:14px;line-height:1.6} #portail-description-produit .pd-cotes-definitions{margin:0;min-width:0} #portail-description-produit .pd-cotes-definitions>div{padding:15px 0;border-bottom:1px solid #e5e5e5} #portail-description-produit .pd-cotes-definitions>div:first-child{padding-top:0} #portail-description-produit .pd-cotes-definitions dt{display:flex;gap:12px;align-items:center;font-weight:700;font-size:17px;line-height:1.4} #portail-description-produit .pd-cotes-definitions dt span{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:38px;height:34px;background:#f4f3f1;border-radius:0;font-size:17px;color:#d81f26} #portail-description-produit .pd-cotes-definitions dd{margin:8px 0 0 50px;font-size:15px;line-height:1.7;color:#555d65} #portail-description-produit .pd-cotes-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px} #portail-description-produit .pd-cotes-steps li{min-width:0;border:1px solid #e6e6e6;border-radius:0;overflow:hidden;background:#fff} #portail-description-produit .pd-cotes-steps figure{margin:0;background:#f6f5f3;aspect-ratio:1.78;display:flex;align-items:center;justify-content:center;padding:16px} #portail-description-produit .pd-cotes-steps img{display:block;width:100%;height:100%;object-fit:contain;max-width:480px} #portail-description-produit .pd-cotes-step-copy{padding:22px} #portail-description-produit .pd-cotes-step-copy .pd-index{display:block;color:#d81f26;font-weight:700;font-size:14px;margin-bottom:10px} #portail-description-produit .pd-cotes-step-copy h4{font-size:19px;line-height:1.35;margin:0 0 12px} #portail-description-produit .pd-cotes-step-copy p{font-size:15px;line-height:1.7;margin:0;color:#555d65} #portail-description-produit .pd-cotes-example{margin-top:28px;background:#f4f3f1;border-radius:0;padding:24px 28px} #portail-description-produit .pd-cotes-example strong{font-size:18px;line-height:1.4} #portail-description-produit .pd-cotes-example p{margin:10px 0 0;font-size:16px;line-height:1.7} #portail-description-produit .pd-cotes-table-wrap{margin:28px 0;min-width:0} #portail-description-produit .pd-cotes-table{border-collapse:collapse;width:100%;table-layout:fixed;text-align:left;font-size:15px;line-height:1.65} #portail-description-produit .pd-cotes-table caption{text-align:left;font-weight:700;font-size:18px;line-height:1.5;margin-bottom:16px;color:#20262c} #portail-description-produit .pd-cotes-table th,#portail-description-produit .pd-cotes-table td{border-bottom:1px solid #e5e5e5;padding:17px 20px;vertical-align:top;overflow-wrap:anywhere} #portail-description-produit .pd-cotes-table thead th{background:#f4f3f1;font-weight:700;color:#373f45} #portail-description-produit .pd-cotes-table tbody th{font-weight:600} #portail-description-produit .pd-cotes-table td{color:#555d65} @media(max-width:600px){ #portail-description-produit .pd-cotes-table{display:block;font-size:15px!important} #portail-description-produit .pd-cotes-table caption{display:block;margin-bottom:20px} #portail-description-produit .pd-cotes-table thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #portail-description-produit .pd-cotes-table tbody{display:block} #portail-description-produit .pd-cotes-table tbody tr{display:block;margin-bottom:14px;border:1px solid #e5e5e5;border-radius:0;overflow:hidden} #portail-description-produit .pd-cotes-table tbody th{display:block;width:100%!important;background:#f4f3f1;padding:14px 16px!important;border-bottom:1px solid #e5e5e5} #portail-description-produit .pd-cotes-table td{display:block;padding:12px 16px!important;border:0} #portail-description-produit .pd-cotes-table td+td{padding-top:0!important} #portail-description-produit .pd-cotes-table td::before{content:attr(data-label);display:block;color:#6c7277;font-size:12px;font-weight:600;margin-bottom:4px} } #portail-description-produit .pd-cotes-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:0} #portail-description-produit .pd-cotes-checklist>div{padding:24px 0;border-top:1px solid #e5e5e5;min-width:0} #portail-description-produit .pd-cotes-checklist dt{font-size:19px;font-weight:700;line-height:1.4} #portail-description-produit .pd-cotes-checklist dd{margin:12px 0 0;color:#555d65;font-size:16px;line-height:1.7} @media(max-width:1100px){#portail-description-produit .pd-cotes-reference{gap:28px;grid-template-columns:minmax(0,1fr)}#portail-description-produit .pd-cotes-reference figure{max-width:720px;margin:0 auto;width:100%}#portail-description-produit .pd-cotes-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}} @media(max-width:700px){#portail-description-produit .pd-cotes-steps,#portail-description-produit .pd-cotes-checklist{grid-template-columns:minmax(0,1fr)}#portail-description-produit .pd-cotes-step-copy{padding:20px}#portail-description-produit .pd-cotes-definitions dd{margin-left:0}#portail-description-produit .pd-cotes-example{padding:20px}#portail-description-produit .pd-cotes-table{font-size:13px;line-height:1.6}#portail-description-produit .pd-cotes-table th,#portail-description-produit .pd-cotes-table td{padding:12px 6px}#portail-description-produit .pd-cotes-table caption{font-size:17px}#portail-description-produit .pd-cotes-table th:first-child{width:29%}#portail-description-produit .pd-cotes-checklist>div{padding:20px 0}} /* Galeries documentées : dessin propre à chaque ouverture, photographies identifiées. */ #portail-description-produit .pd-modele-gallery{min-width:0} #portail-description-produit .pd-modele-gallery>.pd-modele-photo a{height:clamp(260px,33vw,510px);display:flex;align-items:center;justify-content:center;background:#f4f5f4} #portail-description-produit .pd-modele-gallery>.pd-modele-photo img{max-height:100%;width:100%;height:100%;object-fit:contain} #portail-description-produit .pd-modele-gallery [data-pd-genre="dessin"] a{padding:24px;background:linear-gradient(145deg,#f9faf9,#eef0ed)} #portail-description-produit .pd-modele-thumbs{display:flex;gap:12px;margin-top:16px} #portail-description-produit .pd-modele-thumbs button{flex:1;max-width:190px;min-width:0;border:1px solid #dedfdf;border-radius:0;padding:8px;background:#fff;color:#30383e;cursor:pointer;font:600 14px/1.4 'DM Sans',sans-serif} #portail-description-produit .pd-modele-thumbs img{display:block;width:100%;height:84px;object-fit:contain;border-radius:0;margin-bottom:8px} #portail-description-produit .pd-modele-thumbs button[aria-pressed="true"]{border:2px solid #d81f26;padding:7px;background:#fff8f7} #portail-description-produit .pd-modele-thumbs button:focus-visible{outline:3px solid #20272e;outline-offset:3px} #portail-description-produit .pd-modele-motif-layout{grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr);align-items:center;background:#f7f7f4;padding:32px;border-radius:0} #portail-description-produit .pd-modele-motif-layout .pd-modele-photo{max-width:260px;margin:auto} #portail-description-produit .pd-modele-motif-layout .pd-modele-photo img{max-width:240px;max-height:270px;width:auto;margin:auto} #portail-description-produit .pd-modele-motif-layout .pd-modele-photo a{padding:20px;background:white} #portail-description-produit .pd-modele-motif-layout .pd-photo-zoom{position:static;display:block;text-align:center;margin-top:14px;font-size:14px} #portail-description-produit .pd-modele-facts strong{overflow-wrap:anywhere} #portail-description-produit .pd-modele-photo a.pd-modele-cadrage{position:relative;display:block;aspect-ratio:var(--pd-crop-ratio,1);overflow:hidden;background:#f5f6f4;border:1px solid #e2e5e3} #portail-description-produit .pd-modele-photo a.pd-modele-cadrage img{position:absolute;max-width:none;max-height:none;width:var(--pd-image-width);height:var(--pd-image-height);left:var(--pd-image-left);top:var(--pd-image-top);object-fit:fill} #portail-description-produit .pd-modele-cadrage .pd-photo-zoom{font-size:14px;padding:10px 14px} @media(max-width:700px){ #portail-description-produit .pd-modele-gallery>.pd-modele-photo a{height:290px} #portail-description-produit .pd-modele-gallery [data-pd-genre="dessin"] a{padding:12px} #portail-description-produit .pd-modele-thumbs img{height:68px} #portail-description-produit .pd-modele-thumbs{gap:8px} #portail-description-produit .pd-modele-motif-layout{grid-template-columns:1fr;padding:22px;gap:24px} } /* Nuancier : teintes standard et personnalisation RAL distinguées. */ /* L'ouverture battante est montrée en perspective, avec un seul vantail ouvert. */ #portail-description-produit .pd-opening-showcase{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.65fr);gap:36px;align-items:start} #portail-description-produit .pd-opening-controls{min-width:0} #portail-description-produit .pd-opening-controls>.pd-kicker{font-size:13px;letter-spacing:.05em;margin-bottom:18px} #portail-description-produit .pd-opening-controls .pd-sens{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0} #portail-description-produit .pd-opening-controls .pd-sens button{display:flex;flex-direction:column;gap:7px;text-align:left;padding:17px 14px;min-height:102px;border:1px solid #dbdfe1;border-radius:0;background:#fff;color:#333b40;font:500 15px/1.4 'DM Sans',sans-serif;cursor:pointer} #portail-description-produit .pd-opening-controls .pd-sens button strong{font-size:16px;font-weight:750} #portail-description-produit .pd-opening-controls .pd-sens button[aria-pressed=true]{border-color:#d81f26;box-shadow:inset 0 0 0 1px #d81f26;background:#fff5f4;color:#96171d} #portail-description-produit .pd-opening-controls .pd-sens button:focus-visible{outline:3px solid #242b30;outline-offset:3px} #portail-description-produit .pd-opening-explain{padding:24px 0 0} #portail-description-produit .pd-opening-explain h4{font-size:21px;margin-bottom:12px} #portail-description-produit .pd-opening-explain p{font-size:16px;line-height:1.7;margin:0 0 14px} #portail-description-produit .pd-opening-figure{margin:0;min-width:0} #portail-description-produit .pd-opening-illustration{border:1px solid #e1e4e5;border-radius:0;overflow:hidden;background:#fff} #portail-description-produit .pd-opening-scene{position:relative;background:#fff;isolation:isolate;padding-block:24px} #portail-description-produit .pd-opening-image{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain} #portail-description-produit .pd-opening-mirror{transform:scaleX(-1)} #portail-description-produit .pd-opening-landmark{position:absolute;left:50%;transform:translateX(-50%);z-index:1;white-space:nowrap;border-radius:0;background:#fffffff2;padding:8px 14px;font-size:13px;letter-spacing:.035em;font-weight:750;color:#465157;box-shadow:none} #portail-description-produit .pd-opening-property{top:14px} #portail-description-produit .pd-opening-street{bottom:14px} #portail-description-produit .pd-opening-reading{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px;background:#f5f6f5;border-top:1px solid #e1e4e5} #portail-description-produit .pd-opening-reading>div{display:flex;gap:12px;align-items:flex-start;min-width:0} #portail-description-produit .pd-opening-number{display:grid;place-items:center;flex:0 0 32px;height:32px;background:#d81f26;color:#fff;border-radius:50%;font-size:16px;font-weight:750} #portail-description-produit .pd-opening-number-secondary{background:#3b4348} #portail-description-produit .pd-opening-reading p{margin:0;font-size:14px;line-height:1.55} #portail-description-produit .pd-opening-reading strong{display:block;font-size:16px;color:#2f383d;margin-bottom:4px} #portail-description-produit .pd-opening-figure figcaption{font-size:14px;line-height:1.65;text-align:left;padding:14px 0 0;color:#636c71} #portail-description-produit .pd-opening-note{margin-top:24px;font-size:14px;max-width:960px} @media(max-width:1000px){#portail-description-produit .pd-opening-showcase{grid-template-columns:1fr;gap:24px}#portail-description-produit .pd-opening-controls .pd-sens{grid-template-columns:repeat(4,1fr)}#portail-description-produit .pd-opening-explain{max-width:780px}#portail-description-produit .pd-opening-explain p:last-child{margin:0}} @media(max-width:700px){#portail-description-produit .pd-opening-controls .pd-sens{grid-template-columns:1fr 1fr;gap:10px}#portail-description-produit .pd-opening-controls .pd-sens button{padding:14px 12px;min-height:102px}#portail-description-produit .pd-opening-landmark{font-size:13px;padding:6px 10px}#portail-description-produit .pd-opening-property{top:7px}#portail-description-produit .pd-opening-street{bottom:7px}#portail-description-produit .pd-opening-reading{grid-template-columns:1fr;gap:16px;padding:20px}#portail-description-produit .pd-opening-explain h4{font-size:21px}} #portail-description-produit .pd-nuancier-overview{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:28px 0 32px} #portail-description-produit .pd-nuancier-overview article{padding:30px;border:1px solid #e2e4e4;border-radius:0;background:#f7f7f4} #portail-description-produit .pd-nuancier-standard{display:flex;align-items:flex-start;gap:24px} #portail-description-produit .pd-nuancier-standard .ob-nuancier-icone{width:104px;height:104px;flex-shrink:0;margin-top:10px} #portail-description-produit .pd-nuancier-number{display:block;font:800 clamp(44px,5vw,64px)/1.1 Manrope,sans-serif;letter-spacing:-2px;color:#202528} #portail-description-produit .pd-nuancier-overview h4{font:750 22px/1.3 Manrope,sans-serif;margin:8px 0 14px} #portail-description-produit .pd-nuancier-overview p{font-size:16px;line-height:1.65;margin:0 0 12px} #portail-description-produit .pd-nuancier-overview .pd-kicker{font-size:12px;margin-bottom:12px} #portail-description-produit .pd-nuancier-personnalise .pd-nuancier-number{font-size:44px;letter-spacing:-1px} #portail-description-produit .pd-nuancier-subtitle{font:700 18px/1.4 Manrope,sans-serif;margin:0 0 18px} @media(max-width:760px){#portail-description-produit .pd-nuancier-overview{grid-template-columns:1fr;gap:14px}#portail-description-produit .pd-nuancier-overview article{padding:22px}#portail-description-produit .pd-nuancier-standard{gap:18px}#portail-description-produit .pd-nuancier-standard .ob-nuancier-icone{width:72px;height:72px}} /* Photos revues : aucune petite source raster agrandie pour remplir la galerie. */ #portail-description-produit .pd-modele-gallery>.pd-modele-photo:not([data-pd-genre="dessin"]) img{width:auto;height:auto;max-width:min(100%,var(--pd-native-width));max-height:100%} #portail-description-produit .pd-modele-photo-detail:not([data-pd-genre="dessin-detail"]) img{width:auto;height:auto;max-width:min(100%,var(--pd-native-width));margin-inline:auto} #portail-description-produit .pd-modele-photo-detail[data-pd-genre="dessin-detail"]{max-width:var(--pd-crop-width,431px);margin-inline:auto} /* Accessoires : photos originales plus lisibles, rôle de chaque pièce séparé. */ #portail-description-produit .pd-hardware-readable{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;scroll-margin-top:100px} #portail-description-produit .pd-hardware-readable figure{min-width:0;display:grid;grid-template-columns:minmax(130px,.8fr) minmax(0,1fr);gap:24px;align-items:center;padding:26px;background:#f5f6f4;border:1px solid #e7e9e6;border-radius:0} #portail-description-produit .pd-hardware-readable .pd-hardware-visual{display:flex;min-width:0;min-height:234px;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-decoration:none;color:#333c40;background:white;border-radius:0;padding:14px} #portail-description-produit .pd-hardware-readable .pd-hardware-visual img{display:block;width:100%;max-width:220px;height:194px;max-height:none;object-fit:contain;mix-blend-mode:multiply} #portail-description-produit .pd-hardware-readable .pd-hardware-small img{max-width:145px;height:150px} #portail-description-produit .pd-hardware-readable .pd-hardware-visual span{font-size:12px;text-align:center;line-height:1.4;font-weight:600} #portail-description-produit .pd-hardware-readable a:focus-visible{outline:3px solid #d81f26;outline-offset:4px} #portail-description-produit .pd-hardware-readable a:hover{box-shadow:0 0 0 1px #b7bdba} #portail-description-produit .pd-hardware-readable figcaption{padding:0;text-align:left;font-weight:400;line-height:1.6} #portail-description-produit .pd-hardware-readable figcaption strong{display:block;font:750 20px/1.3 Manrope,sans-serif;color:#20272b} #portail-description-produit .pd-hardware-readable figcaption small{display:block;margin-top:10px;font-size:12px;font-weight:700;color:#69726f} #portail-description-produit .pd-hardware-readable figcaption p{font-size:15px;line-height:1.7;margin:14px 0 0;color:#4b5559} #portail-description-produit .pd-lightbox-accessoire{width:min(720px,92vw);background:#fff;color:#242b30} #portail-description-produit .pd-lightbox-accessoire figure{margin:auto;max-width:580px} #portail-description-produit .pd-lightbox-accessoire img{width:auto;max-width:min(100%,400px);height:auto;max-height:55vh;margin:24px auto;object-fit:contain} #portail-description-produit .pd-lightbox-accessoire figcaption{color:#465157;font-size:15px;line-height:1.7;text-align:left} @media(max-width:1000px){#portail-description-produit .pd-hardware-readable figure{grid-template-columns:1fr;gap:20px}#portail-description-produit .pd-hardware-readable .pd-hardware-visual{width:100%}} @media(max-width:600px){#portail-description-produit .pd-hardware-readable{grid-template-columns:1fr}#portail-description-produit .pd-hardware-readable figure{padding:22px}#portail-description-produit .pd-hardware-readable .pd-hardware-visual img{max-width:220px;height:206px}#portail-description-produit .pd-hardware-readable .pd-hardware-small img{max-width:145px;height:150px}} #portail-description-produit .pd-opening-section{scroll-margin-top:100px} /* Sur petit écran, ne pas intercaler le paragraphe entre le choix et son image. */ @media(max-width:1000px){ #portail-description-produit .pd-opening-showcase{display:flex;flex-direction:column;gap:18px} #portail-description-produit .pd-opening-controls{display:contents} #portail-description-produit .pd-opening-controls>.pd-kicker{order:0;margin:0} #portail-description-produit .pd-opening-controls .pd-sens{order:1;width:100%} #portail-description-produit .pd-opening-figure{order:2;width:100%} #portail-description-produit .pd-opening-explain{order:3;padding:0} } /* Onglets explicites : un fond rouge actif relié au trait de toute la rangée. */ #portail-description-produit .pd-tabs{flex-direction:column;align-items:stretch;gap:16px;min-height:0;padding-top:24px;border:0;margin-bottom:40px} #portail-description-produit .pd-tabs>span{font-size:18px;line-height:1.4} #portail-description-produit [role=tablist]{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;width:100%;overflow:visible;border-bottom:3px solid var(--pd-red)} #portail-description-produit [role=tab]{min-width:0;min-height:58px;padding:16px 18px;border:0;border-radius:0;background:#f4f4f2;color:#343b40;font-size:16px;line-height:1.4;text-align:center;white-space:normal;transition:background-color .15s ease,color .15s ease} #portail-description-produit [role=tab]+[role=tab]{box-shadow:inset 1px 0 #fff} #portail-description-produit [role=tab][aria-selected=true]{background:var(--pd-red);color:#fff;box-shadow:none} #portail-description-produit [role=tab][aria-selected=false]:hover{background:#fce7e8;color:#9d1720} #portail-description-produit [role=tab]:focus-visible{position:relative;z-index:1;outline:3px solid #20262c;outline-offset:3px} @media(max-width:700px){ #portail-description-produit .pd-tabs{align-items:stretch;gap:2px;padding-top:8px;margin-bottom:24px} #portail-description-produit .pd-tabs:has(>.gt-tabs-scroll){display:grid;grid-template-columns:44px minmax(0,1fr) 44px} #portail-description-produit .pd-tabs>span{display:none} #portail-description-produit [role=tablist]{display:flex;grid-template-columns:none;position:relative;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;gap:0;border-bottom:3px solid var(--pd-red)} #portail-description-produit [role=tablist]::-webkit-scrollbar{display:none} #portail-description-produit [role=tab]:last-child:nth-child(odd){grid-column:auto} #portail-description-produit [role=tab]{flex:0 0 auto;min-height:46px;padding:10px 14px;font-size:14px;white-space:nowrap;border-bottom:0;scroll-snap-align:start} #portail-description-produit [role=tab]+[role=tab]:not([aria-selected=true]){box-shadow:inset 1px 0 #fff} } @media(prefers-reduced-motion:reduce){#portail-description-produit [role=tab]{transition:none}} /* Notices de pose (onglet Pose & mesures). */ #portail-description-produit .pd-notice-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} #portail-description-produit .pd-notice-grid article{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start;padding:20px;border:1px solid var(--pd-line);border-radius:0} #portail-description-produit .pd-notice-cover{display:block;border-radius:0;overflow:hidden;box-shadow:none} #portail-description-produit .pd-notice-cover img{width:100%;height:auto} #portail-description-produit .pd-notice-grid .pd-kicker{margin-bottom:8px} #portail-description-produit .pd-notice-grid p:not(.pd-kicker){font-size:15px;margin-top:8px} #portail-description-produit .pd-notice-download{display:inline-block;margin-top:16px;padding:10px 16px;border-radius:0;background:#111;color:#fff;font-size:14px;font-weight:750;text-decoration:none} #portail-description-produit .pd-notice-download:hover{background:var(--pd-red)} #portail-description-produit .pd-notice-subtitle{margin:36px 0 14px;font-size:19px} #portail-description-produit .pd-notice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none} #portail-description-produit .pd-notice-list a{display:grid;grid-template-columns:1fr auto;gap:2px 14px;height:100%;padding:14px 16px;border:1px solid var(--pd-line);border-radius:0;color:inherit;text-decoration:none} #portail-description-produit .pd-notice-list a:hover{border-color:var(--pd-red);background:#fcf6f6} #portail-description-produit .pd-notice-list strong{font-size:15px} #portail-description-produit .pd-notice-list span{grid-column:1;color:var(--pd-muted);font-size:13px;line-height:1.5} #portail-description-produit .pd-notice-list small{grid-column:2;grid-row:1/3;align-self:center;color:#8a8f93;font-size:12px;white-space:nowrap} @media(max-width:1050px){#portail-description-produit .pd-notice-grid{grid-template-columns:1fr}} @media(max-width:700px){#portail-description-produit .pd-notice-grid article{grid-template-columns:96px 1fr;gap:14px;padding:14px}#portail-description-produit .pd-notice-list{grid-template-columns:1fr}#portail-description-produit .pd-notice-list small{grid-column:1;grid-row:auto}} /* Jeux de pose : repliés, réservés au poseur. */ #portail-description-produit .pd-cotes-pro details{border:1px solid var(--pd-line);border-radius:0;padding:0 26px;background:#f8f8f6} #portail-description-produit .pd-cotes-pro summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 20px;padding:24px 0;cursor:pointer;list-style:none} #portail-description-produit .pd-cotes-pro summary::-webkit-details-marker{display:none} #portail-description-produit .pd-cotes-pro summary b{font:750 21px/1.3 Manrope,'DM Sans',sans-serif;letter-spacing:-.025em} #portail-description-produit .pd-cotes-pro summary>:not(:last-child){grid-column:1} #portail-description-produit .pd-cotes-pro summary>span:last-child{grid-column:2;grid-row:1/4;align-self:start;font-size:26px;line-height:1;color:#8a8f93} #portail-description-produit .pd-cotes-pro details[open] summary>span:last-child{transform:rotate(45deg)} #portail-description-produit .pd-cotes-pro .pd-cotes-pro-note{color:var(--pd-muted);font-size:15px;line-height:1.55;max-width:660px} #portail-description-produit .pd-cotes-pro .pd-heading{margin-top:8px} #portail-description-produit .pd-cotes-pro details>*:last-child{margin-bottom:26px} /* Blocs repliés (construction) : même traitement que les cotes de pose. */ #portail-description-produit .pd-repli details{border:1px solid var(--pd-line);border-radius:0;padding:0 26px;background:#f8f8f6} #portail-description-produit .pd-repli summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 20px;padding:24px 0;cursor:pointer;list-style:none} #portail-description-produit .pd-repli summary::-webkit-details-marker{display:none} #portail-description-produit .pd-repli summary b{font:750 21px/1.3 Manrope,'DM Sans',sans-serif;letter-spacing:-.025em} #portail-description-produit .pd-repli summary>:not(:last-child){grid-column:1} #portail-description-produit .pd-repli summary>span:last-child{grid-column:2;grid-row:1/4;align-self:start;font-size:26px;line-height:1;color:#8a8f93} #portail-description-produit .pd-repli details[open] summary>span:last-child{transform:rotate(45deg)} #portail-description-produit .pd-repli .pd-repli-note{color:var(--pd-muted);font-size:15px;line-height:1.55;max-width:660px} #portail-description-produit .pd-repli details>*:last-child{margin-bottom:26px} #portail-description-produit .pd-repli.pd-documentation{padding-block:0} /* Rubriques collantes sous l'en-tête, même comportement et même rendu que .gt-tabsbar des autres fiches. */ #portail-description-produit .pd-tabs{position:sticky;top:var(--gt-header-height,144px);z-index:25;background:#fff;padding-top:8px;margin-bottom:45px} #portail-description-produit .pd-tabs>span{display:none} @media(max-width:700px){#portail-description-produit .pd-tabs{margin-bottom:24px}} /* Exploration 3D : règles extraites du prototype validé, limitées au descriptif. */ #portail-description-produit .ob-exploration{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(24px,4vw,52px);margin:40px 0 64px;background:#f5f4f1;border:1px solid #e6e4df;border-radius:0;overflow:hidden} #portail-description-produit .ob-exploration-poster{position:relative;min-width:0;display:grid;place-items:center;aspect-ratio:3/2;background:#f7f7f7;border-radius:0;padding:0} #portail-description-produit .ob-exploration-poster img{display:block;width:100%;height:100%;max-height:360px;min-height:0;object-fit:contain!important} #portail-description-produit .ob-exploration-poster>span{position:absolute;left:14px;bottom:12px;padding:5px 9px;background:#fff;border:1px solid #e4e2dc;border-radius:0;color:#42464a;font-size:11px;letter-spacing:.06em} #portail-description-produit .ob-exploration-copy{min-width:0} #portail-description-produit .ob-exploration-kicker{font-size:11px;font-weight:700;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#b71c23;margin:0 0 14px} #portail-description-produit .ob-exploration-copy h3{font:700 clamp(25px,3vw,40px)/1.12 Manrope,sans-serif;letter-spacing:-.035em;color:#1c2023;margin:0 0 18px} #portail-description-produit .ob-exploration-copy>p:not(.ob-exploration-kicker){font-size:16px;line-height:1.6;color:#53575a;margin:0 0 16px} #portail-description-produit p.ob-exploration-example{font-size:14px!important;line-height:1.5;font-weight:700;color:#31383c!important} #portail-description-produit p.ob-exploration-note{font-size:14px!important;line-height:1.6;color:#64696d!important} #portail-description-produit .ob-exploration-button{display:inline-flex;justify-content:center;align-items:center;gap:16px;min-height:48px;padding:13px 18px;max-width:100%;box-sizing:border-box;border:1px solid #D81F26;border-radius:0;background:#D81F26;color:#fff;text-decoration:none;font-size:16px;font-weight:700;line-height:1.45;transition:background .15s} #portail-description-produit .ob-exploration-button:hover{background:#b8171d;border-color:#b8171d} #portail-description-produit .ob-exploration-button:focus-visible{outline:3px solid #1e252a;outline-offset:4px} #portail-description-produit .ob-exploration-copy>small{display:block;color:#707579;font-size:14px;line-height:1.5;margin-top:10px} /* Dialogue natif : couche supérieure, fermeture hors du canvas enfant. */ .ob-exploration-dialog{box-sizing:border-box;width:min(1440px,calc(100vw - 32px));height:min(960px,calc(100dvh - 32px));max-width:none;max-height:none;padding:0;margin:auto;border:1px solid #d7d7d3;border-radius:0;background:#f4f3f0;color:#22282c;font-family:'DM Sans',sans-serif;box-shadow:0 24px 100px #0005;overflow:hidden} .ob-exploration-dialog[open]{display:flex;flex-direction:column} .ob-exploration-dialog::backdrop{background:#15202bbb;backdrop-filter:blur(5px)} .ob-exploration-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;padding:14px 20px;background:#fff;border-bottom:1px solid #e2e3e0} .ob-exploration-dialog h2{font:700 17px/1.35 Manrope,sans-serif;margin:0;min-width:0} .ob-exploration-dialog>header>div{display:flex;gap:8px;flex-shrink:0} .ob-exploration-dialog button{font:700 13px/1.3 'DM Sans',sans-serif;min-height:44px;padding:10px 15px;border-radius:0;border:1px solid #d7d9d8;background:#fff;color:#333a3f;cursor:pointer} .ob-exploration-dialog button.ob-exploration-close{background:#232a2e;color:#fff;border-color:#232a2e} .ob-exploration-dialog button:focus-visible{outline:3px solid #D81F26;outline-offset:2px} .ob-exploration-dialog-note{margin:0;padding:9px 20px;flex-shrink:0;font-size:14px;line-height:1.4;color:#5b6063} .ob-exploration-dialog iframe{display:block;flex:1;width:100%;min-height:0;border:0;background:#f4f3f0} .ob-exploration-dialog.ob-exploration-expanded{width:100vw;height:100dvh;border:0;border-radius:0} @media(max-width:760px){#portail-description-produit .ob-exploration{grid-template-columns:1fr;gap:22px;padding:20px;margin:30px 0 42px}#portail-description-produit .ob-exploration-poster{max-height:310px}#portail-description-produit .ob-exploration-poster img{max-height:245px}#portail-description-produit .ob-exploration-copy h3 br{display:none}.ob-exploration-dialog{width:100vw;height:100dvh;border:0;border-radius:0}.ob-exploration-dialog>header{gap:8px;padding:10px 12px}.ob-exploration-dialog h2{font-size:14px}.ob-exploration-dialog-note{font-size:14px;padding:8px 12px}.ob-exploration-dialog .ob-exploration-expand{display:none}.ob-exploration-dialog button{padding:10px 12px}} @media(prefers-reduced-motion:reduce){#portail-description-produit .ob-exploration-button{transition:none}} #portail-description-produit .pd-accessories{scroll-margin-top:110px} #portail-description-produit .pd-accessories-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} #portail-description-produit .pd-accessories-grid-1{grid-template-columns:minmax(0,640px)} #portail-description-produit .pd-accessories-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} #portail-description-produit .pd-accessory-card{min-width:0;overflow:hidden;border:1px solid #e2e2e2;border-radius:0;background:#fff} #portail-description-produit .pd-accessory-card figure{margin:0;padding:0;background:#fff;border:0;border-radius:0} #portail-description-produit .pd-accessory-media{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;height:clamp(260px,24vw,320px);padding:24px 24px 36px;background:#fff;text-decoration:none} #portail-description-produit .pd-accessory-media img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;flex:none} #portail-description-produit .pd-accessory-media:focus-visible{outline:3px solid #D81F26;outline-offset:-4px} #portail-description-produit .pd-accessory-zoom{position:absolute;right:14px;bottom:12px;padding:6px 10px;border-radius:0;background:#f2f2f2;color:#222;font-size:12px;font-weight:700;line-height:1.4} #portail-description-produit .pd-accessory-media:hover .pd-accessory-zoom{background:#111;color:#fff} #portail-description-produit .pd-accessory-card figcaption{padding:0 20px 14px;text-align:left;color:#777;font-size:12px;line-height:1.5} #portail-description-produit .pd-accessory-copy{padding:22px 24px 24px;background:#f7f7f6;border-top:1px solid #ececeb} #portail-description-produit .pd-accessory-location{margin:0 0 7px!important;font-size:12px!important;line-height:1.5;color:#777;letter-spacing:.04em;font-weight:700;text-transform:uppercase} #portail-description-produit .pd-accessory-card h4,#portail-description-produit .pd-accessories-notes h4{margin:0 0 10px;font-size:21px;line-height:1.25;letter-spacing:-.02em} #portail-description-produit .pd-accessory-copy>p:not(.pd-accessory-location),#portail-description-produit .pd-accessories-notes article>p:not(.pd-accessory-location){margin:0;font-size:15px;line-height:1.65;color:#444} #portail-description-produit .pd-accessory-copy>.pd-accessory-condition,#portail-description-produit .pd-accessories-notes article>.pd-accessory-condition{margin-top:14px!important;padding-top:13px;border-top:1px solid #dededd;font-size:14px!important;line-height:1.6;color:#656565} #portail-description-produit .pd-accessories-more{margin-top:30px} #portail-description-produit .pd-accessories-more>h4{font-size:22px;line-height:1.3;margin:0 0 18px} #portail-description-produit .pd-accessories-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} #portail-description-produit .pd-accessories-notes article{min-width:0;padding:24px;border:1px solid #e5e5e5;border-radius:0;background:#fafafa} @media(max-width:1100px){#portail-description-produit .pd-accessories-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#portail-description-produit .pd-accessories-grid-1{grid-template-columns:minmax(0,640px)}} @media(max-width:699px){#portail-description-produit .pd-accessories-grid,#portail-description-produit .pd-accessories-notes{grid-template-columns:minmax(0,1fr);gap:18px}#portail-description-produit .pd-accessory-media{height:clamp(260px,85vw,360px);padding:22px 22px 36px}#portail-description-produit .pd-accessory-copy,#portail-description-produit .pd-accessories-notes article{padding:20px}#portail-description-produit .pd-accessory-card h4{font-size:21px}} /* Un composant commun garantit une géométrie identique pour les six bulles. */ #onlybaie-perspective .op-volet-scene { display: block; position: relative; aspect-ratio: 1; background: #efeeec; } #onlybaie-perspective .op-mega[data-family="shutter"] .op-volet-scene > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #efeeec; } #onlybaie-perspective .op-volet-detail { position: absolute; display: block; width: 40%; aspect-ratio: 1; right: 3%; bottom: 5%; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; background: #efeeec; overflow: hidden; isolation: isolate; pointer-events: none; box-shadow: 0 2px 5px #0002; } #onlybaie-perspective .op-mega[data-family="shutter"] .op-volet-detail img { position: absolute; display: block; width: var(--detail-largeur); max-width: none; height: auto; left: var(--detail-x); top: var(--detail-y); transform: none; transition: none; } #onlybaie-perspective .op-mega[data-family="shutter"] .op-model-card:hover img { transform: none; } @media (min-width: 1101px) { #onlybaie-perspective .op-mega[data-family="shutter"] .op-model-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Deux rangées de matériaux : même ordre dans le menu et sur la collection. */ #onlybaie-perspective .op-model-group{min-width:0} #onlybaie-perspective .op-model-group h3{font-size:14px;font-weight:650;letter-spacing:-.02em;margin:0 0 12px;display:flex;align-items:center;gap:10px} #onlybaie-perspective .op-model-group h3:before{content:"";width:4px;height:18px;border-radius:2px;background:#d81f26;flex-shrink:0} #op-produits .obp-material-group{margin:10px 0 48px} #op-produits .obp-material-heading{border-top:1px solid #deded9;padding:24px 0 22px} #op-produits .obp-material-heading h2{margin:0;display:flex;align-items:center;gap:12px;font-size:clamp(23px,2.4vw,30px)} #op-produits .obp-material-heading h2:before{content:"";height:26px;width:4px;background:#d81f26;border-radius:2px;flex-shrink:0} #op-produits .obp-material-heading p{margin:10px 0 0;font-size:14px} #op-produits .obp-material-group .obp-card-body>h3{min-height:56px} @media(max-width:650px){ #op-produits .obp-material-group{margin-bottom:34px} #op-produits .obp-material-heading{padding-top:20px} #op-produits .obp-material-group .obp-card-body>h3{min-height:0} } /* Un même format pour toutes les familles : visuel, nom complet, action rouge. */ #onlybaie-perspective #op-mega .op-model-list, #onlybaie-perspective #op-mega .op-model-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:16px;grid-auto-rows:auto} #onlybaie-perspective #op-mega[data-family="door"] .op-model-list, #onlybaie-perspective #op-mega[data-family="shutter"] .op-model-list{display:flex;flex-direction:column;gap:24px} #onlybaie-perspective #op-mega .op-model-card{display:flex;flex-direction:column;min-width:0;padding:0;color:#111;text-decoration:none;border:1px solid #e4e4df;border-radius:10px;overflow:hidden;background:#fff;text-align:left;transition:border-color .2s,box-shadow .2s,transform .2s} #onlybaie-perspective #op-mega .op-model-card:hover{border-color:#d81f26;box-shadow:0 6px 18px #11111112;transform:translateY(-2px)} #onlybaie-perspective #op-mega .op-model-card:focus-visible{outline:3px solid #d81f26;outline-offset:3px} #onlybaie-perspective #op-mega .op-model-media{display:flex;align-items:center;justify-content:center;height:160px;width:100%;overflow:hidden;background:#f1f1ed;flex-shrink:0} #onlybaie-perspective #op-mega .op-model-media>img{display:block;width:100%;height:100%;object-fit:contain;background:transparent;transform:none} /* Le décor remplit la carte ; le calque produit conserve son échelle uniforme. Même taille de carte et même position du produit que le visuel carré validé. */ #onlybaie-perspective #op-mega .op-model-media.op-model-scene{background-size:cover;background-repeat:no-repeat;background-position:center 73.37%} /* La façade remplit la largeur ; la porte 3D reste entière, sans déformation. */ #onlybaie-perspective #op-mega .op-model-media.op-model-scene-garage{background-position:center 83.8%} /* Photos panoramiques des portes de service : le décor se recadre, la porte reste entière. */ #onlybaie-perspective #op-mega .op-model-media.op-model-photo>img{object-fit:cover;object-position:center} #onlybaie-perspective #op-mega .op-model-media>.op-volet-scene{flex-shrink:0;width:auto;max-width:100%;height:100%;aspect-ratio:1} #onlybaie-perspective #op-mega .op-model-media>.op-volet-scene>img{width:100%;height:100%;object-fit:contain} #onlybaie-perspective #op-mega .op-model-caption{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:14px;width:100%;min-height:112px;box-sizing:border-box;flex:1} #onlybaie-perspective #op-mega .op-model-caption strong{font-size:14px;line-height:1.4;font-weight:650;letter-spacing:-.02em;min-height:39px} #onlybaie-perspective #op-mega .op-model-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:10px 12px;box-sizing:border-box;border-radius:5px;background:#d81f26;color:#fff;font-size:13px;line-height:1.3;font-weight:650} #onlybaie-perspective #op-mega .op-model-cta .op-arrow{position:static;grid-area:auto;align-self:auto;color:#fff;font-size:20px;line-height:1} #onlybaie-perspective #op-mega .op-model-card:hover .op-model-cta{background:#b9171e} #onlybaie-perspective #op-mega .op-model-group h3{font-size:16px;margin-bottom:14px} @media(max-width:1279px){ #onlybaie-perspective #op-mega .op-model-media{height:150px} } @media(max-width:980px){ #onlybaie-perspective #op-mega .op-mega-content{grid-template-columns:1fr} #onlybaie-perspective #op-mega .op-mega-intro{border:0;padding:0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} #onlybaie-perspective #op-mega .op-mega-intro .op-kicker,#onlybaie-perspective #op-mega .op-mega-intro>p,#onlybaie-perspective #op-mega .op-menu-ranges{display:none} #onlybaie-perspective #op-mega .op-mega-intro h2{font-size:24px;margin:0} #onlybaie-perspective #op-mega .op-mega-intro>.op-text-link{margin:0;font-size:12px;min-height:44px} } @media(max-width:650px){ #onlybaie-perspective #op-mega .op-model-list,#onlybaie-perspective #op-mega .op-model-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #onlybaie-perspective #op-mega .op-model-media{height:140px} #onlybaie-perspective #op-mega .op-model-caption{padding:10px;gap:12px;min-height:122px} #onlybaie-perspective #op-mega .op-model-caption strong{font-size:13px;min-height:55px} #onlybaie-perspective #op-mega .op-model-cta{font-size:12px;padding:10px 8px;gap:4px} #onlybaie-perspective #op-mega .op-model-cta .op-arrow{font-size:17px} } /* Sur ordinateur, six colonnes égales pour toutes les familles : chaque carte a la même taille d'un menu à l'autre, et une famille de six modèles tient sur une ligne au lieu d'en laisser un seul sur la suivante. Les portes-fenêtres posent leurs deux groupes côte à côte sur cette même grille : 2 + 3 colonnes, avec le même écart, donc la même largeur de carte que partout ailleurs. */ @media(min-width:981px){ #onlybaie-perspective #op-mega .op-model-list, #onlybaie-perspective #op-mega[data-family="door"] .op-model-list, #onlybaie-perspective #op-mega[data-family="shutter"] .op-model-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px} #onlybaie-perspective #op-mega .op-model-group{display:flex;flex-direction:column;min-width:0} #onlybaie-perspective #op-mega .op-model-group .op-model-row{gap:14px} #onlybaie-perspective #op-mega .op-model-group:has(.op-model-card:nth-child(2):last-child){grid-column:span 2} #onlybaie-perspective #op-mega .op-model-group:has(.op-model-card:nth-child(2):last-child) .op-model-row{grid-template-columns:repeat(2,minmax(0,1fr))} #onlybaie-perspective #op-mega .op-model-group:has(.op-model-card:nth-child(3):last-child){grid-column:span 3} #onlybaie-perspective #op-mega .op-model-group:has(.op-model-card:nth-child(3):last-child) .op-model-row{grid-template-columns:repeat(3,minmax(0,1fr))} #onlybaie-perspective #op-mega .op-model-group:has(.op-model-card:nth-child(4):last-child){grid-column:span 4} #onlybaie-perspective #op-mega .op-model-group:has(.op-model-card:nth-child(4):last-child) .op-model-row{grid-template-columns:repeat(4,minmax(0,1fr))} /* Volets : les six volets complets sur toute la largeur, les deux tabliers seuls dessous. */ #onlybaie-perspective #op-mega .op-model-group:has(.op-model-card:nth-child(6):last-child){grid-column:1/-1} #onlybaie-perspective #op-mega .op-model-group:has(.op-model-card:nth-child(6):last-child) .op-model-row{grid-template-columns:repeat(6,minmax(0,1fr))} /* Six cartes par ligne : le bouton reste sur une ligne. */ #onlybaie-perspective #op-mega .op-model-cta{white-space:nowrap;font-size:12.5px;padding:10px;gap:6px} #onlybaie-perspective #op-mega .op-model-cta .op-arrow{font-size:17px} #onlybaie-perspective #op-mega .op-model-caption{padding:12px;gap:12px} } /* Écrans d'ordinateur étroits : la carte n'a plus la place de la flèche. */ @media(min-width:981px) and (max-width:1359px){ #onlybaie-perspective #op-mega .op-model-cta{justify-content:center;font-size:12px;padding:10px 6px} #onlybaie-perspective #op-mega .op-model-cta .op-arrow{display:none} } /* Petits ordinateurs et tablettes à l'horizontale : quatre colonnes, toujours la même largeur de carte d'un menu à l'autre. */ @media(min-width:981px) and (max-width:1199px){ #onlybaie-perspective #op-mega .op-model-list, #onlybaie-perspective #op-mega[data-family="door"] .op-model-list, #onlybaie-perspective #op-mega[data-family="shutter"] .op-model-list{grid-template-columns:repeat(4,minmax(0,1fr))} #onlybaie-perspective #op-mega .op-model-group:has(.op-model-card:nth-child(6):last-child) .op-model-row{grid-template-columns:repeat(4,minmax(0,1fr))} } #onlybaie-perspective #op-mega[data-family="entree"] .op-model-card .op-model-media{position:relative;height:auto;aspect-ratio:8/7} #onlybaie-perspective #op-mega[data-family="entree"] .op-model-card .op-model-media img{position:absolute;left:50%;top:50%;width:var(--porte-photo-largeur);max-width:none;height:auto;object-fit:contain;transform:translate(var(--porte-photo-x),var(--porte-photo-y));mix-blend-mode:normal;filter:none;border-radius:0;background:#f1f2f2} #onlybaie-perspective #op-mega[data-family="entree"] .op-model-card[href="/portes-entree/aluminium"]{--porte-photo-largeur:145.8333%;--porte-photo-x:-40.7143%;--porte-photo-y:-39.4737%} #onlybaie-perspective #op-mega[data-family="entree"] .op-model-card[href="/portes-entree/pvc"]{--porte-photo-largeur:156.9507%;--porte-photo-x:-68.1429%;--porte-photo-y:-49.7845%} #onlybaie-perspective #op-mega[data-family="entree"] .op-model-card[href="/portes-entree/acier"]{--porte-photo-largeur:120.5709%;--porte-photo-x:-57.4286%;--porte-photo-y:-45.8484%} #onlybaie-perspective #op-mega[data-family="entree"] .op-model-card[href="/portes-entree/service"]{--porte-photo-largeur:125.0000%;--porte-photo-x:-40.0000%;--porte-photo-y:-58.8774%} /* Fiches Onlybaie : un visuel généreux, des informations comparables et une action claire. */ #op-produits .obp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start} #op-produits .obp-card{border-radius:12px;border-color:#deded9;box-shadow:0 3px 14px #11100005;height:100%;transition:border-color .2s,box-shadow .2s} #op-produits .obp-card:focus-within,#op-produits .obp-card:hover{border-color:#c3c2ba;box-shadow:0 8px 24px #1110000c} #op-produits .obp-card-image{position:relative;height:310px;padding:38px 24px 28px;background:radial-gradient(ellipse at center,#fff 20%,#f0f1ed 100%);overflow:hidden;flex-shrink:0} #op-produits .obp-card-image img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 8px #11111110)} #op-produits .obp-origin{display:inline-flex;align-items:center;gap:8px;background:white;border:1px solid #e6e5e0;border-radius:5px;padding:7px 9px;font-size:10px;font-weight:650;line-height:1.2;color:#333} #op-produits .obp-card-image .obp-origin{position:absolute;top:14px;left:14px} #op-produits .obp-origin i{width:21px;height:14px;border:1px solid #ddd;background:linear-gradient(90deg,#173d89 33.33%,#fff 33.33%,#fff 66.66%,#d81f26 66.66%)} #op-produits .obp-card-body{padding:24px;gap:0} #op-produits .obp-card h2,#op-produits .obp-card h3{font-size:24px;letter-spacing:-.035em;line-height:1.15} #op-produits .obp-card h2{min-height:56px} #op-produits .obp-card h2 a:hover,#op-produits .obp-card h3 a:hover{color:#d81f26} #op-produits .obp-card p{font-size:13px;line-height:1.6;margin:12px 0 18px} #op-produits .obp-features{margin:0 0 20px;display:grid;gap:0} #op-produits .obp-features>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid #eeeee9;align-items:baseline} #op-produits .obp-features dt{font-size:11px;margin:0;color:#777} #op-produits .obp-features dd{font-size:12px;line-height:1.55;color:#333;font-weight:550} #op-produits .obp-colors-preview{margin:0 0 20px;display:flex;flex-direction:column;gap:9px;font-size:11px;color:#666} #op-produits .obp-swatches{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none} #op-produits .obp-swatches li{padding:0;border:0} #op-produits .obp-swatch{display:block;flex-shrink:0;width:25px;height:25px;border:1px solid #c8c8c3;border-radius:50%;background:linear-gradient(135deg,var(--ext) 50%,var(--int) 50%);box-shadow:inset 0 0 0 2px #ffffff80} #op-produits .obp-card-actions{margin-top:auto;gap:9px} #op-produits .obp-card-actions .obp-button{width:100%;min-height:49px;font-size:14px;border-radius:5px} #op-produits .obp-card-actions>small{color:#777;text-align:center;font-size:10px;line-height:1.4} #op-produits .obp-product-hero{grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:56px;padding:16px 0 36px} #op-produits .obp-product-image{position:relative;min-height:340px;padding:24px;background:radial-gradient(ellipse at center,#fff,#f0f1ed);border:0} #op-produits .obp-product-image img{width:100%;height:290px;max-width:100%;object-fit:contain} #op-produits .obp-product-image figcaption{margin-top:16px;color:#777} #op-produits .obp-grades{align-items:start;gap:24px} #op-produits .obp-grade{padding:0;border-top:3px solid #d81f26} #op-produits .obp-grade .obp-card-image{height:245px;padding:40px 36px 18px} #op-produits .obp-grade-heading{display:flex;align-items:center;justify-content:space-between;gap:12px} #op-produits .obp-grade-heading h3{margin:0} #op-produits .obp-grade-heading .obp-kicker{margin:0 0 9px;font-size:10px} #op-produits .obp-profile-logo{width:78px;height:38px;object-fit:contain;flex-shrink:0} #op-produits .obp-grade .obp-features{margin-bottom:16px;min-height:114px} #op-produits .obp-grade .obp-colors-preview{min-height:51px} #op-produits .obp-dimensions{display:flex;flex-direction:column;gap:7px;background:#f5f5f1;padding:13px 14px;border-radius:6px;font-size:11px;margin:0 0 19px} #op-produits .obp-dimensions>span{display:flex;justify-content:space-between;gap:12px} #op-produits .obp-dimensions small{color:#777;font-size:10px;line-height:1.5;margin-top:3px} #op-produits .obp-technical{margin-top:14px} #op-produits .obp-technical summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:12px;cursor:pointer;list-style:none;font-weight:550} #op-produits .obp-technical summary::-webkit-details-marker{display:none} #op-produits .obp-technical summary:focus-visible{outline:3px solid #d81f26;outline-offset:2px} #op-produits .obp-technical summary span{font-size:22px;color:#d81f26;transition:transform .2s} #op-produits .obp-technical[open] summary span{transform:rotate(45deg)} #op-produits .obp-technical-content{padding-top:8px;border-top:1px solid #e9e9e3} #op-produits .obp-technical h4{font-size:13px;margin:16px 0 12px} #op-produits .obp-technical p{font-size:11px;margin:12px 0;line-height:1.6} #op-produits .obp-color-list{list-style:none;padding:0;margin:0} #op-produits .obp-color-list li{display:flex;align-items:center;gap:10px;font-size:11px;border:0;padding:6px 0;line-height:1.5} #op-produits .obp-technical table{width:100%;border-collapse:collapse;font-size:11px;text-align:left;font-variant-numeric:tabular-nums} #op-produits .obp-technical caption{text-align:left;font-size:11px;color:#666;margin-bottom:10px} #op-produits .obp-technical th,#op-produits .obp-technical td{padding:8px 6px;border-bottom:1px solid #e8e8e3} #op-produits .obp-technical th{background:#f3f3ee;font-weight:600} #op-produits .obp-vr-card .obp-card-image{height:310px;padding:18px} #op-produits .obp-vr-card .obp-command{min-height:100px} @media(max-width:1100px){#op-produits .obp-grid,#op-produits .obp-grades{grid-template-columns:repeat(2,minmax(0,1fr))}#op-produits .obp-product-hero{gap:32px}#op-produits .obp-card-image{height:300px}} @media(max-width:650px){#op-produits .obp-grid,#op-produits .obp-grades{grid-template-columns:minmax(0,1fr);gap:22px}#op-produits .obp-card-image{height:300px;padding:42px 30px 24px}#op-produits .obp-card-body{padding:22px}#op-produits .obp-card h2{min-height:0}#op-produits .obp-product-hero{grid-template-columns:minmax(0,1fr);gap:10px}#op-produits .obp-product-image{min-height:280px;padding:18px}#op-produits .obp-product-image img{height:250px}#op-produits .obp-grade .obp-card-image{height:240px}#op-produits .obp-grade .obp-features{min-height:0}#op-produits .obp-grade .obp-colors-preview{min-height:0}} @media(prefers-reduced-motion:reduce){#op-produits .obp-card,#op-produits .obp-card-image img,#op-produits .obp-technical summary span{transition:none}#op-produits .obp-card-image:hover img{transform:none}} #op-produits .obp-card:not(.obp-grade):not(.obp-vr-card):not(.obp-vr-family) .obp-card-image{padding:0;height:auto;aspect-ratio:4/3;background:#eeeee9} #op-produits .obp-card:not(.obp-grade):not(.obp-vr-card):not(.obp-vr-family) .obp-card-image img{width:100%;height:100%;object-fit:contain;filter:none} #op-produits .obp-product-image{padding:0 0 16px;overflow:hidden} #op-produits .obp-product-image img{height:340px;max-width:100%;object-fit:contain} @media(max-width:650px){#op-produits .obp-product-image img{height:290px}} @media(max-width:650px){#op-produits .obp-card:not(.obp-grade):not(.obp-vr-card):not(.obp-vr-family) .obp-card-image{height:300px;aspect-ratio:auto}} #op-produits .obp-vr-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px} #op-produits .obp-vr-heading>small{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#777} #op-produits .obp-motor-brand{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:90px;height:44px} #op-produits .obp-motor-brand img{display:block;width:100%;height:100%;object-fit:contain} #op-produits .obp-product-hero .obp-motor-brand{margin:0 0 22px;width:110px;height:54px} /* Coupes réelles des trois gammes, extraites de leurs documents fabricant. */ #op-produits .obp-grade .obp-card-image{height:300px;padding:40px 28px 42px;background:radial-gradient(ellipse at 50% 35%,#fff 10%,#f1f1ec 90%)} #op-produits .obp-grade .obp-card-image img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(8px 10px 9px #11111112)} #op-produits .obp-profile-caption{position:absolute;bottom:14px;left:14px;right:14px;text-align:center;font-size:11px;line-height:1.4;font-weight:550;color:#57574f} @media(max-width:650px){#op-produits .obp-grade .obp-card-image{height:285px;padding-top:40px}} /* Comparatif : mêmes trois colonnes sur tous les écrans, sans défilement latéral. */ #op-produits .obp-compare-open{display:inline-flex;align-items:center;gap:20px;background:none;border:0;border-bottom:1px solid #d81f26;padding:12px 0;min-height:44px;margin-top:12px;color:#111;cursor:pointer;font-size:13px;font-weight:650} #op-produits .obp-compare-open span{color:#d81f26;font-size:20px} #op-produits .obp-comparison{margin-top:80px;scroll-margin-top:calc(var(--obp-header-height,144px) + 24px)} #op-produits .obp-compare-intro{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-bottom:28px} #op-produits .obp-compare-intro>div{max-width:680px} #op-produits .obp-compare-intro .obp-kicker{color:#d81f26} #op-produits .obp-compare-intro h2{font-size:clamp(28px,3.3vw,44px);line-height:1.1;max-width:610px;margin:0 0 18px;letter-spacing:-.045em} #op-produits .obp-compare-intro h2:focus{outline:none} #op-produits .obp-compare-intro p{font-size:14px;margin:0} #op-produits .obp-compare-index{font-size:12px;letter-spacing:.12em;border:1px solid #d4d3cc;border-radius:50%;height:92px;width:92px;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0;color:#67675f} #op-produits .obp-compare-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0 24px;border-top:1px solid #d9d8d1} #op-produits .obp-compare-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;position:relative;cursor:pointer;font-size:13px;font-weight:550} #op-produits .obp-compare-toggle input{position:absolute;width:40px;height:24px;opacity:0;margin:0;cursor:pointer} #op-produits .obp-compare-switch{width:38px;height:22px;border-radius:20px;background:#c5c5bd;padding:3px;display:block;flex-shrink:0;transition:background .15s} #op-produits .obp-compare-switch:after{content:'';display:block;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #1112;transition:transform .15s} #op-produits .obp-compare-toggle input:checked+.obp-compare-switch{background:#d81f26} #op-produits .obp-compare-toggle input:checked+.obp-compare-switch:after{transform:translateX(16px)} #op-produits .obp-compare-toggle input:focus-visible+.obp-compare-switch{outline:3px solid #d81f26;outline-offset:4px} #op-produits .obp-compare-toolbar output{font-size:11px;color:#66665e} #op-produits .obp-compare-table{display:block;width:100%;border-spacing:0;background:#fff;border:1px solid #dfded8;border-radius:10px;text-align:left;font-size:13px} #op-produits .obp-compare-table thead,#op-produits .obp-compare-table tbody,#op-produits .obp-compare-table tfoot{display:block} #op-produits .obp-compare-table tr{display:grid;grid-template-columns:1.1fr repeat(2,minmax(0,1fr))} #op-produits .obp-compare-table tr[hidden]{display:none} #op-produits .obp-compare-table th,#op-produits .obp-compare-table td{min-width:0;padding:24px;line-height:1.5;overflow-wrap:break-word} #op-produits .obp-compare-table thead{position:sticky;top:var(--obp-header-height,144px);z-index:2;background:#171717;color:white;border-radius:9px 9px 0 0;box-shadow:0 3px 8px #1111} #op-produits .obp-compare-table thead th{padding:28px 24px;border-top:3px solid #d81f26} #op-produits .obp-compare-table thead th:first-child{border-radius:9px 0 0 0} #op-produits .obp-compare-table thead th:last-child{border-radius:0 9px 0 0} #op-produits .obp-compare-table thead strong{display:block;font-size:18px;font-weight:650;letter-spacing:-.015em} #op-produits .obp-compare-table thead span{display:block;color:#bababa;font-size:11px;font-weight:400;margin-top:7px} #op-produits .obp-compare-table .obp-compare-corner{font-size:13px;font-weight:450;color:#d0d0d0} #op-produits .obp-compare-table tbody tr{border-bottom:1px solid #ecece6} #op-produits .obp-compare-table tbody tr:last-child{border-bottom:0} #op-produits .obp-compare-table tbody tr:hover{background:#fbfbf8} #op-produits .obp-compare-table tbody th{font-size:13px;font-weight:600;position:relative;background:#f8f8f4} #op-produits .obp-compare-table tbody th>span{display:block} #op-produits .obp-compare-table tbody tr[data-different=true] th:before{content:'';position:absolute;left:0;top:27px;width:3px;height:16px;background:#d81f26} #op-produits .obp-compare-table small{display:block;color:#707068;font-size:11px;font-weight:400;line-height:1.55;margin-top:7px} #op-produits .obp-compare-value{font-size:15px;font-weight:600;display:inline-flex;align-items:baseline;gap:7px} #op-produits .obp-compare-value.is-included,#op-produits .obp-compare-value.is-option{font-size:13px} #op-produits .obp-compare-value.is-included>span{color:#d81f26;font-size:15px} #op-produits .obp-compare-value.is-option>span{font-size:17px;font-weight:400} #op-produits .obp-compare-value.is-unavailable{font-size:12px;font-weight:400;color:#66665e} #op-produits .obp-compare-table .obp-swatches{margin-top:12px;gap:6px} #op-produits .obp-compare-table .obp-swatch{width:21px;height:21px} #op-produits .obp-compare-table tfoot{border-top:1px solid #dfded8;background:#f8f8f4;border-radius:0 0 9px 9px} #op-produits .obp-compare-table tfoot th{font-size:13px;font-weight:600} #op-produits .obp-compare-table tfoot td{display:flex;align-items:center} #op-produits .obp-compare-table .obp-button{width:100%;min-height:48px;font-size:13px;padding:13px 15px;gap:8px} #op-produits .obp-compare-table .obp-availability{margin:0;padding:12px;font-size:12px;font-weight:500} #op-produits .obp-compare-common{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;font-size:11px;color:#56564f} #op-produits .obp-compare-common>span{display:inline-flex;align-items:center;gap:10px} #op-produits .obp-compare-common img{object-fit:contain;width:58px;height:28px} #op-produits .obp-compare-note{font-size:11px;line-height:1.7;margin:16px 0 0;max-width:850px} @media(max-width:1000px){ #op-produits .obp-compare-table th,#op-produits .obp-compare-table td,#op-produits .obp-compare-table thead th{padding:20px 16px} #op-produits .obp-compare-table thead strong{font-size:15px} #op-produits .obp-compare-table .obp-button{font-size:12px;padding:12px 10px} } @media(max-width:650px){ #op-produits .obp-comparison{margin-top:56px} #op-produits .obp-compare-intro{gap:0;margin-bottom:20px} #op-produits .obp-compare-index{display:none} #op-produits .obp-compare-intro p{font-size:13px} #op-produits .obp-compare-toolbar{gap:0;padding:12px 0 20px} #op-produits .obp-compare-toolbar output{width:100%;padding-left:48px} #op-produits .obp-compare-table tr{grid-template-columns:repeat(2,minmax(0,1fr))} #op-produits .obp-compare-table .obp-compare-corner{display:none} #op-produits .obp-compare-table thead th{padding:18px 5px;text-align:center} #op-produits .obp-compare-table thead th:nth-child(2){border-top-left-radius:9px} #op-produits .obp-compare-table thead strong{font-size:clamp(10px,2.7vw,16px);letter-spacing:-.02em} #op-produits .obp-compare-table thead span{display:none} #op-produits .obp-compare-table tbody th,#op-produits .obp-compare-table tfoot th{grid-column:1/-1;padding:14px 16px} #op-produits .obp-compare-table tbody th{font-size:13px} #op-produits .obp-compare-table tbody th small{margin-top:3px} #op-produits .obp-compare-table tbody tr[data-different=true] th:before{top:17px} #op-produits .obp-compare-table td{padding:18px 8px;line-height:1.4} #op-produits .obp-compare-table td+td{border-left:1px solid #eeeee8} #op-produits .obp-compare-value{font-size:13px;gap:4px;display:flex;flex-wrap:wrap;align-content:start} #op-produits .obp-compare-value.is-included,#op-produits .obp-compare-value.is-option,#op-produits .obp-compare-value.is-unavailable{font-size:11px} #op-produits .obp-compare-value.is-unavailable>span{display:none} #op-produits .obp-compare-table small{font-size:10px;line-height:1.5} #op-produits .obp-compare-table .obp-swatches{gap:5px} #op-produits .obp-compare-table .obp-swatch{width:19px;height:19px} #op-produits .obp-compare-table tfoot td{padding:0 5px 16px;border-left:0} #op-produits .obp-compare-table .obp-button{font-size:11px;padding:10px 6px;text-align:center;justify-content:center;min-height:54px} #op-produits .obp-compare-table .obp-button>span{display:none} #op-produits .obp-compare-table .obp-availability{padding:8px 5px;font-size:10px} #op-produits .obp-compare-common{gap:14px;font-size:10px} } @media(prefers-reduced-motion:reduce){#op-produits .obp-compare-switch,#op-produits .obp-compare-switch:after{transition:none}} #op-produits .obp-compare-index b{font-size:27px;font-weight:550;line-height:1.2;color:#111;letter-spacing:-.05em} #op-produits .obp-compare-index>span{font-size:9px;letter-spacing:0;margin-top:4px} /* Dimensions au choix du modèle (1 vantail, 2 vantaux…), avant les gammes. */ #op-produits .obp-model-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #op-produits .obp-model-dimensions{margin:0 0 18px;padding-top:15px;border-top:1px solid #e6e6e1} #op-produits .obp-model-dimensions h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px;font-size:12px;line-height:1.5;letter-spacing:0;font-weight:650} #op-produits .obp-model-dimensions h3 span{color:#74746e;font-size:11px;font-weight:400;white-space:nowrap} #op-produits .obp-model-dimensions table{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums;text-align:right} #op-produits .obp-model-dimensions thead th{font-size:10px;font-weight:500;color:#66665f;padding:4px 0 6px;text-align:right;text-transform:uppercase;letter-spacing:.04em} #op-produits .obp-model-dimensions tbody th{text-align:left;font-size:12px;font-weight:500;color:#55554f} #op-produits .obp-model-dimensions tbody td{font-size:20px;font-weight:600;letter-spacing:-.035em;padding:5px 0;white-space:nowrap} #op-produits .obp-model-dimensions tbody tr+tr{border-top:1px solid #efefeb} #op-produits .obp-model-dimensions p{font-size:11px;line-height:1.55;margin:10px 0 0} #op-produits .obp-model-dimensions summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;list-style:none;font-size:11px;font-weight:600;padding:10px 0} #op-produits .obp-model-dimensions summary::-webkit-details-marker{display:none} #op-produits .obp-model-dimensions summary>span{font-size:20px;color:#d81f26;font-weight:400;line-height:1} #op-produits .obp-model-dimensions details[open] summary>span{transform:rotate(45deg)} #op-produits .obp-model-dimensions summary:focus-visible{outline:3px solid #d81f26;outline-offset:2px} #op-produits .obp-model-dimensions-detail{padding:3px 0 14px} #op-produits .obp-model-dimensions-detail caption{text-align:left;font-size:10px;color:#66665f;padding-bottom:12px} #op-produits .obp-model-dimensions-detail thead th{font-size:9px;text-transform:none;letter-spacing:0;padding:7px 0} #op-produits .obp-model-dimensions-detail thead th:first-child{text-align:left} #op-produits .obp-model-dimensions-detail tbody th{font-size:9px;font-weight:600} #op-produits .obp-model-dimensions-detail tbody td{font-size:10px;font-weight:500;letter-spacing:-.02em;padding:9px 0} /* Nuancier aluminium au choix du modèle : lecture tactile et au clavier. */ #op-produits .obp-alu-colors .obp-technical{margin:0;width:100%} #op-produits .obp-alu-palette summary{font-size:11px;min-height:44px} #op-produits .obp-alu-palette .obp-color-list{display:grid;gap:4px} #op-produits .obp-alu-palette .obp-color-list li{padding:5px 0;font-size:11px;line-height:1.55} #op-produits .obp-alu-palette p{font-size:11px;line-height:1.6;margin:14px 0 0} #op-produits .obp-alu-colors{margin-bottom:10px} /* Volets : repères par variante et nombre de teintes sans déployer le nuancier. */ #op-produits .obp-vr-colors{display:flex;gap:13px;align-items:center;margin:4px 0 22px;padding:16px;border:1px solid #e8e8e3;border-radius:12px;background:#fafaf8} #op-produits .obp-vr-colors svg{flex-shrink:0} #op-produits .obp-vr-colors strong{display:block;font-size:13px;line-height:1.45;color:#222} #op-produits .obp-vr-colors small{display:block;font-size:11px;line-height:1.6;color:#666;margin-top:4px} #op-produits .obp-vr-dimensions thead th{white-space:normal;font-size:9px;letter-spacing:.02em;padding:8px 4px 10px} #op-produits .obp-vr-dimensions thead th:last-child,#op-produits .obp-vr-dimensions td:last-child{text-align:right} #op-produits .obp-vr-dimensions table{width:100%} #op-produits .obp-vr-brands{margin:0 0 20px} #op-produits .obp-vr-brands>small{color:#666;font-size:11px} #op-produits .obp-vr-brands>div{display:flex;align-items:center;gap:22px;margin-top:6px} #op-produits .obp-vr-command{padding:8px 0 18px;margin-bottom:14px;gap:16px;min-height:112px;border-bottom:1px solid #eeeee9} #op-produits .obp-vr-command img{width:82px;height:82px;border-radius:8px;flex-shrink:0} #op-produits .obp-vr-command>div{min-width:0} #op-produits .obp-vr-command strong{display:block;font-size:13px;color:#333;line-height:1.45} #op-produits .obp-vr-command span{display:block;font-size:11px;line-height:1.6;margin-top:5px;color:#666} #op-produits .obp-vr-card .obp-features{margin-bottom:16px} /* Une bande dédiée au badge, puis la photo entière : aucun coffre masqué. */ #op-produits .obp-vr-card .obp-card-image,#op-produits .obp-vr-family .obp-card-image{height:auto;aspect-ratio:auto;padding:48px 0 0;display:block;background:#fff} #op-produits .obp-vr-card .obp-card-image img,#op-produits .obp-vr-family .obp-card-image img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:none;transform:none} #op-produits .obp-vr-card .obp-card-body>h3{line-height:1.35;margin-top:12px} @media(max-width:650px){#op-produits .obp-vr-colors{padding:12px;gap:10px}#op-produits .obp-vr-colors strong{font-size:12px}#op-produits .obp-vr-dimensions tbody th{font-size:11px}#op-produits .obp-vr-dimensions tbody td{font-size:22px}} /* Comparatif des gammes sur téléphone (18/09/2026) : aucun texte sous 12 px. */ @media(max-width:650px){ #onlybaie-perspective #op-produits .obp-compare-table thead strong{font-size:clamp(12px,3.3vw,16px)} #onlybaie-perspective #op-produits .obp-compare-table :is(small,.obp-availability,.obp-button),#onlybaie-perspective #op-produits :is(.obp-compare-common,.obp-compare-value.is-included,.obp-compare-value.is-option,.obp-compare-value.is-unavailable,.obp-compare-note,.obp-compare-toolbar output,.obp-compare-common .obp-origin){font-size:12px} } /* Même cadre que les autres produits ; seule la position de la photo est spécifique. */ #onlybaie-perspective #op-produits .obp-unified-card .obp-card-image img.obp-image-3d{object-position:center;filter:none;transform:none} /* Même barre pour les moteurs React et DOM historiques. Les !important sont limités à cette présentation : ils remplacent leurs styles inline / par ID. */ .ob-steps { --ob-step-width: 52px; --ob-step-cut: 13px; --ob-step-overlap: 7px; --ob-step-height: 40px; --ob-step-font: 12px; --ob-step-padding: 20px; --ob-step-gap: 7px; display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; min-width: 0; position: relative; /* Au-dessus des colonnes sticky, mais sous le menu global (z-index: 30). Remplace notamment le zIndex: 50 inline des configurateurs garage. Les infobulles restent dans cette couche, les modales hors de la barre. */ z-index: 20 !important; overflow: visible !important; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 22%)) !important; } .ob-steps > .ob-step, .ob-steps > .ob-stepwrap { flex: 0 0 var(--ob-step-width) !important; min-width: 0 !important; margin-left: calc(-1 * var(--ob-step-overlap)) !important; } .ob-steps > .ob-step:first-child, .ob-steps > .ob-stepwrap:first-child { margin-left: 0 !important; } .ob-steps > .ob-step[aria-current="step"], .ob-steps > .ob-stepwrap-on { flex: 1 1 0% !important; } .ob-steps .ob-step { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--ob-step-gap) !important; box-sizing: border-box !important; min-width: 0 !important; height: var(--ob-step-height) !important; min-height: var(--ob-step-height) !important; padding: 0 var(--ob-step-cut) 0 var(--ob-step-padding) !important; border: 0 !important; border-radius: 0 !important; color: #fff !important; background: linear-gradient(180deg, rgb(255 255 255 / 26%) 0%, rgb(255 255 255 / 6%) 34%, transparent 35%), linear-gradient(180deg, #868c93 0%, #6e747b 55%, #5a5f66 100%) !important; font-family: inherit; font-size: var(--ob-step-font) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .3px !important; text-transform: uppercase !important; white-space: nowrap !important; text-shadow: 0 1px 1px rgb(0 0 0 / 35%) !important; opacity: 1 !important; cursor: pointer; clip-path: polygon(0 0, calc(100% - var(--ob-step-cut)) 0, 100% 50%, calc(100% - var(--ob-step-cut)) 100%, 0 100%, var(--ob-step-cut) 50%) !important; } .ob-steps > .ob-step:first-child, .ob-steps > .ob-stepwrap:first-child > .ob-step { clip-path: polygon(0 0, calc(100% - var(--ob-step-cut)) 0, 100% 50%, calc(100% - var(--ob-step-cut)) 100%, 0 100%) !important; padding-left: var(--ob-step-cut) !important; } .ob-steps .ob-step[aria-current="step"] { background: linear-gradient(180deg, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 8%) 34%, transparent 35%), linear-gradient(180deg, #e2413f 0%, #D81F26 55%, #a01218 100%) !important; } .ob-steps .ob-stepwrap > .ob-step { width: 100% !important; margin: 0 !important; } .ob-steps .ob-step-number, .ob-steps .ob-step-name { font: inherit !important; } .ob-steps .ob-step-number { display: inline !important; flex: 0 0 auto; font-weight: inherit; } .ob-steps .ob-step-name { display: none !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ob-steps .ob-step[aria-current="step"] .ob-step-name { display: block !important; } .ob-steps .ob-step:focus-visible { outline: 2px solid #fff !important; outline-offset: -5px; box-shadow: inset 0 0 0 3px #111; } @media (max-width: 650px) { .ob-steps { --ob-step-width: 31px; --ob-step-cut: 7px; --ob-step-overlap: 4px; --ob-step-height: 44px; --ob-step-font: 11px; --ob-step-padding: 10px; --ob-step-gap: 4px; } .ob-steps .ob-step::before, .ob-steps .ob-step::after, .ob-steps .ob-stepwrap::before, .ob-steps .ob-stepwrap::after { display: none !important; } } @media (hover: hover) and (pointer: fine) { .ob-steps .ob-step:not([aria-current="step"]):hover { background: linear-gradient(180deg, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 8%) 34%, transparent 35%), linear-gradient(180deg, #565c63 0%, #43484e 55%, #34383d 100%) !important; } } /* Navigation commune : mêmes flèches et libellés, sans changer les actions ni les règles qui déplacent/masquent les boutons selon la largeur d'écran. Les !important remplacent les styles inline des anciens moteurs garage. */ #onlybaie-perspective :is(.ob-config-prev,.ob-config-next) { box-sizing: border-box; min-height: 44px !important; min-width: 0; max-width: 100%; border: 0 !important; border-radius: 0 !important; color: #fff !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; line-height: 18px !important; text-transform: none !important; text-align: center; white-space: normal !important; flex-shrink: 1 !important; cursor: pointer; } /* Même largeur pour « Précédent » et « Suivant » (demande du gérant, 16/10/2026) : la largeur de « Précédent » sert de minimum aux deux boutons. */ #onlybaie-perspective :is(.ob-config-prev,.ob-config-next):not(.pb-chevron) { min-width: 116px !important; } #onlybaie-perspective .ob-config-prev { background: linear-gradient(180deg,#9aa0a6,#6e7379) !important; padding: 10px 16px 10px 28px !important; clip-path: polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%) !important; } #onlybaie-perspective .ob-config-next { background: linear-gradient(180deg,#e2413f,#b3161c) !important; padding: 10px 28px 10px 16px !important; clip-path: polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%) !important; } #onlybaie-perspective :is(.ob-config-prev,.ob-config-next):disabled { opacity: .35 !important; cursor: not-allowed !important; } #onlybaie-perspective :is(.ob-config-prev,.ob-config-next):focus-visible { outline: 2px solid #fff !important; outline-offset: -5px; box-shadow: inset 0 0 0 3px #111 !important; } @media (hover: hover) and (pointer: fine) { #onlybaie-perspective :is(.ob-config-prev,.ob-config-next):enabled:hover { filter: brightness(.92); } } /* Navigation mobile sous les options : même emplacement pour chaque famille. */ #pvc-parcours .cs-options > .cs-options-nav, #volet-parcours .cs-options > .cs-options-nav, #garage-mount .pg-options-nav { display: none; } @media (max-width: 900px) { #pvc-parcours .cs-options > .cs-options-nav, #volet-parcours .cs-options > .cs-options-nav { display: flex; justify-content: space-between; } #volet-parcours .cs-scene .cs-prev, #volet-parcours .cs-scene .cs-next { display: none; } } @media (max-width: 1050px) { #garage-mount .pg-options-nav { display: flex; } #garage-mount .pg-centre .pg-chev { display: none; } } /* Même repère de défilement pour les fenêtres, volets et portes de garage. */ #onlybaie-perspective .ob-scroll-container{position:relative} #onlybaie-perspective .ob-scroll-cue[hidden]{display:none!important} #onlybaie-perspective button.ob-scroll-cue{position:absolute;bottom:0;left:0;right:10px;width:auto;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:25px 14px 12px;border:0;border-radius:0;background:linear-gradient(to bottom,#fff0,#fff 24px);color:#333;font:600 14px/1.35 'DM Sans',Arial,sans-serif;text-align:left;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal} #onlybaie-perspective .ob-scroll-cue-arrow{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#fff0f0;color:#d81f26;font-size:23px;line-height:1} #onlybaie-perspective .ob-scroll-cue:hover .ob-scroll-cue-arrow{background:#d81f26;color:#fff} #onlybaie-perspective .ob-scroll-cue:focus-visible,#onlybaie-perspective .ob-options-defilantes:focus-visible{outline:2px solid #d81f26;outline-offset:-3px} #onlybaie-perspective .ob-options-defilantes[data-ob-scrollable]{scrollbar-width:auto!important;scrollbar-color:#999 #eee!important;scrollbar-gutter:stable} #onlybaie-perspective .ob-options-defilantes[data-ob-scrollable]::-webkit-scrollbar{width:10px} #onlybaie-perspective .ob-options-defilantes[data-ob-scrollable]::-webkit-scrollbar-track{background:#eee} #onlybaie-perspective .ob-options-defilantes[data-ob-scrollable]::-webkit-scrollbar-thumb{background:#999;border:2px solid #eee;border-radius:8px} /* macOS : conserver une piste visible et utilisable, plutôt qu’une barre superposée. */ @supports selector(::-webkit-scrollbar){ #onlybaie-perspective .ob-options-defilantes[data-ob-scrollable]{scrollbar-color:auto!important} } @media(max-width:900px){ #onlybaie-perspective button.ob-scroll-cue{display:none!important} } /* Toutes les familles, sur ordinateur : 10 px entre la barre d'étapes et les trois blocs (27/09/2026). La hauteur des blocs en tient compte (écran − en-tête − 64 px, ci-dessous, garage-equilibre.css et portails.css) : barre et blocs tiennent ensemble dans l'écran. */ @media (min-width:1000px){ #onlybaie-perspective .ob-steps{margin-bottom:10px!important} /* Volets et tabliers : la grille n'a plus de retrait intérieur sur ordinateur. La barre suit les mêmes bords ; les marges mobiles restent inchangées. */ #onlybaie-perspective #volet-parcours>.cs-steps{margin-inline:0} } /* En-tête compact sur les écrans bas, pages de configurateur (29/09/2026) : une barre fine dès qu'on descend (configurateur-defilement.js pose .op-entete-compact). Le menu est rangé, il revient en haut de page ; les libellés des icônes et l'horaire du téléphone s'effacent. */ @media (min-width:981px) and (max-height:899px){ #onlybaie-perspective .op-header.op-entete-compact .op-menu-panel{display:none} #onlybaie-perspective .op-header.op-entete-compact .op-head{padding-block:4px} #onlybaie-perspective .op-header.op-entete-compact .op-logo img{height:34px} #onlybaie-perspective .op-header.op-entete-compact .op-search :is(input,button){padding-block:6px} #onlybaie-perspective .op-header.op-entete-compact .op-base-action{font-size:0;gap:0;padding:6px 10px} #onlybaie-perspective .op-header.op-entete-compact .op-base-action svg{width:20px;height:20px} #onlybaie-perspective .op-header.op-entete-compact .op-base-cart-badge{top:0;right:2px} #onlybaie-perspective .op-header.op-entete-compact .op-phone small{display:none} } /* CONFIGURATEUR PVC SUR ORDINATEUR — 25-27/09/2026. Trois colonnes de même hauteur, fixe d'une étape à l'autre : celle de la plus haute étape en configuration de départ. Le dessin remplit le panneau du milieu ; le récapitulatif s'y ajuste et fait défiler sa liste, le prix et le bouton du panier restant en bas. Sur mobile, seul le bandeau d'étapes change (fin de fichier). */ @media (min-width:1000px){ #onlybaie-perspective #pvc-parcours .cs-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1.05fr) minmax(250px,280px);gap:16px;align-items:stretch} #onlybaie-perspective #pvc-parcours .cs-options{height:auto;max-height:max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px));position:relative;top:auto} /* Filet de sécurité : une étape plus haute que l'écran défile dans sa colonne au lieu d'étirer les trois panneaux. Plafond : la hauteur visible sous l'en-tête collant (144 px), moins 64 px — la barre d'étapes (40 px, 6 au-dessus, 10 en dessous) et 8 px de marge en bas : barre et blocs tiennent ensemble dans l'écran, bouton « étape suivante » compris (demande du gérant, 27/09/2026 ; 26 px auparavant). */ #onlybaie-perspective #pvc-parcours .cs-options-body{flex:1 1 auto;min-height:0;overflow-y:auto} /* Hauteur fixe : celle de la plus haute étape en configuration de base, mesurée par le script (--ob-hauteur-options). Les trois blocs gardent la même taille à toutes les étapes ; le dessin ne bouge plus. */ #onlybaie-perspective #pvc-parcours .cs-options-body{flex:none;height:var(--ob-hauteur-options,auto);max-height:calc(max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px)) - 42px)} #onlybaie-perspective #pvc-parcours .cs-scene{height:auto;position:static;top:auto;display:flex;flex-direction:column;min-height:min(520px,max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px)))} #onlybaie-perspective #pvc-parcours .cs-drawing{flex:1 1 0;min-height:200px;display:flex;align-items:center;justify-content:center} #onlybaie-perspective #pvc-parcours .cs-drawing>svg{width:100%;height:100%} /* contain:size : la longue liste du récapitulatif ne fixe pas la hauteur de la rangée, elle s'y plie et défile à l'intérieur. */ #onlybaie-perspective #pvc-parcours .cs-order{height:auto;position:static;top:auto;contain:size;min-height:min(520px,max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px)))} #onlybaie-perspective #pvc-parcours .cs-res-content{flex:1 1 0;min-height:0;overflow-y:auto} #onlybaie-perspective #pvc-parcours .cs-options .cs-cards{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))} /* Cinq cartes (ventilation) : 3 + 2 plutôt que 4 + 1, une carte seule sur sa ligne. */ #onlybaie-perspective #pvc-parcours .cs-options .cs-cards:has(>.cs-card:nth-child(5):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} /* Pose en applique : les cinq épaisseurs de doublage tiennent sur une rangée, avec des vignettes plus basses, comme les deux dormants des autres poses — l'étape garde la hauteur commune. Colonne de moins de 500 px : 3 + 2. */ #onlybaie-perspective #pvc-parcours .cs-options .cs-cards:has(>.cs-card:nth-child(5):last-child):has([data-key=dormant]){grid-template-columns:repeat(auto-fill,minmax(clamp(calc(20% - 7.7px),calc((500px - 100%) * 999),calc(33.33% - 6.5px)),1fr))} #onlybaie-perspective #pvc-parcours .cs-options .cs-cards:has(>.cs-card:nth-child(5):last-child) .cs-choice[data-key=dormant] .cs-picture{height:44px} #onlybaie-perspective #pvc-parcours .cs-options .cs-card:has([data-key=dormant]) .cs-zoom{white-space:nowrap} /* Quatre cartes (pose, besoin, couleurs) : 4 sur une ligne si elles tiennent à 128 px (colonne d'au moins 539 px), sinon 2 + 2 plutôt que 3 + 1. clamp() choisit la largeur minimale des colonnes selon la place disponible (100 %). */ #onlybaie-perspective #pvc-parcours .cs-options .cs-cards:has(>.cs-card:nth-child(4):last-child){grid-template-columns:repeat(auto-fill,minmax(clamp(calc(25% - 7px),calc((539px - 100%) * 999),calc(50% - 5px)),1fr))} /* Aspect du vitrage : vignettes un peu moins hautes, pour que l'étape Vitrage (aspect, besoin, altitude) tienne sans défiler sur un écran de 900 px. */ /* Hauteur de départ des vignettes, volontairement basse : la hauteur commune des blocs est celle de la plus haute étape ; le script agrandit ensuite les vignettes des étapes plus courtes pour occuper la place (au plus 90 px par rangée). */ #onlybaie-perspective #pvc-parcours .cs-options .cs-picture{height:64px} /* Vignette agrandie par le script : son dessin la suit (94 px au plus sinon). */ #onlybaie-perspective #pvc-parcours .cs-options .cs-picture.ob-agrandie svg{max-height:none;height:calc(100% - 12px)} #onlybaie-perspective #pvc-parcours .cs-choice[data-key=finish] .cs-picture{height:62px} /* Nuancier : le titre du groupe dit déjà « teinté dans la masse », « intérieur blanc » ou « deux faces colorées » ; la carte garde la pastille, le nom et, le cas échéant, la mention rouge (« Profil arrondi uniquement »). */ #onlybaie-perspective #pvc-parcours .cs-choice[data-key=color] .cs-picture{height:30px} #onlybaie-perspective #pvc-parcours .cs-choice[data-key=color] .cs-choice-desc{display:none} /* Châssis fixe et soufflet : le dessin « Votre ouverture » s'étirait sur 800 px. */ #onlybaie-perspective #pvc-parcours .cs-options-body .cs-section>svg{height:240px;max-height:240px;max-width:100%} /* 4 vantaux : sa composition est imposée et déjà dessinée au centre ; la phrase suffit. */ #onlybaie-perspective #pvc-parcours[data-modele="4v"] .cs-options-body .cs-section>svg{display:none} /* Châssis fixe et soufflet : ce dessin est tout le contenu de l'étape Ouverture. */ #onlybaie-perspective #pvc-parcours:is([data-modele=fixe],[data-modele=soufflet]) .cs-options-body .cs-section>svg{height:510px;max-height:510px} /* Espacements resserrés d'un tiers (36 → 25 px entre deux questions) : chaque étape doit tenir dans la hauteur commune, 634 px sur un écran de 1440 × 900. */ #onlybaie-perspective #pvc-parcours .cs-options-body{padding-top:12px;padding-bottom:10px} #onlybaie-perspective #pvc-parcours .cs-options-body .cs-section+.cs-section{margin-top:10px;padding-top:10px} #onlybaie-perspective #pvc-parcours .cs-options-body .cs-profile-context{margin-bottom:8px} #onlybaie-perspective #pvc-parcours .cs-options-body .cs-desc{margin-bottom:9px} /* Étape « Parties fixes & volet » : trois questions ; vignettes plus basses pour qu'elle tienne dans la hauteur commune sans défiler. */ #onlybaie-perspective #pvc-parcours .cs-choice:is([data-key=shape],[data-key=vr]) .cs-picture{height:64px} /* Le texte des cotes peut déborder un peu du cadre du dessin quand il est petit : on le laisse dépasser dans la marge plutôt que de le rogner. */ #onlybaie-perspective #pvc-parcours .cs-drawing>svg{overflow:visible} #onlybaie-perspective #pvc-parcours .cs-scene-nav .cs-next,#onlybaie-perspective #pvc-parcours .cs-scene-nav .cs-prev{white-space:nowrap} } /* Barre sous le dessin : « Précédent », « Agrandir » au milieu, « Suivant » sur une seule ligne (29/09/2026, gérant : « Recommencer » retiré, une ligne de gagnée pour le dessin). */ /* Seulement la barre sous le dessin : la navigation mobile (.cs-options-nav), vide et masquée sur ordinateur, prenait sinon 30 px et faisait défiler les options. 27/09/2026 : sur tout écran d'ordinateur (et plus seulement jusqu'à 1439 px) — avec le bouton « Agrandir », la dernière étape (« Ajouter au panier ») ne tenait plus sur une ligne, et le dessin rétrécissait de 45 px à cette étape. */ @media (min-width:1000px){ #onlybaie-perspective #pvc-parcours .cs-scene-nav:not(.cs-options-nav){display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'prev outils next';column-gap:10px;align-items:center} #onlybaie-perspective #pvc-parcours .cs-scene-nav:not(.cs-options-nav) .cs-prev{grid-area:prev} #onlybaie-perspective #pvc-parcours .cs-scene-nav:not(.cs-options-nav) .cs-next{grid-area:next} #onlybaie-perspective #pvc-parcours .cs-scene-nav:not(.cs-options-nav) .cs-nav-tools{grid-area:outils;justify-self:center} } @media (min-width:1000px) and (max-width:1279px){ #onlybaie-perspective #pvc-parcours .cs-grid{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr) minmax(230px,250px)} } /* Mobile : jusqu'à 9 étapes et des noms plus longs (« Parties fixes & volet ») — le nom de l'étape en cours passe sur deux lignes au lieu d'être coupé. */ @media (max-width:650px){ #pvc-parcours .ob-steps .ob-step[aria-current="step"] .ob-step-name{display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;line-height:1.1 !important;overflow-wrap:anywhere} } /* CONFIGURATEUR ALUMINIUM SUR ORDINATEUR — 27/09/2026. Même principe que le PVC : trois blocs de hauteur fixe (la plus haute étape de départ, --ob-hauteur-options mesurée par components/configurateur/alu/interface.js), options dans la grande colonne, dessin qui remplit le bloc du milieu, récapitulatif qui défile dans le sien. Les étapes sont recomposées dans components/configurateur/alu/etapes.js pour tenir sans défiler. */ @media (min-width:1000px){ #onlybaie-perspective #alu-parcours .oa-layout{grid-template-columns:minmax(0,1.5fr) minmax(0,1.05fr) minmax(250px,280px);gap:16px;align-items:stretch} #onlybaie-perspective #alu-parcours .oa-options,#onlybaie-perspective #alu-parcours .oa-summary{height:auto;position:relative;top:auto;max-height:max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px))} #onlybaie-perspective #alu-parcours .oa-options-body{flex:none;height:var(--ob-hauteur-options,auto);max-height:calc(max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px)) - 41px);overflow-y:auto;padding-top:12px;padding-bottom:10px} #onlybaie-perspective #alu-parcours .oa-preview{height:auto;display:flex;flex-direction:column} #onlybaie-perspective #alu-parcours .oa-svg{flex:1 1 0;height:auto;min-height:200px} /* contain:size : la liste du récapitulatif ne fixe pas la hauteur de la rangée. */ #onlybaie-perspective #alu-parcours .oa-summary{contain:size;min-height:min(520px,max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px)))} #onlybaie-perspective #alu-parcours .oa-summary-body{flex:1 1 0;min-height:0} /* Espacements resserrés, comme le PVC : chaque étape tient dans la hauteur commune. */ #onlybaie-perspective #alu-parcours .oa-options-body>section{margin-top:12px;padding-top:12px} #onlybaie-perspective #alu-parcours .oa-options-body>section:first-child{margin:0;padding:0} #onlybaie-perspective #alu-parcours .oa-options-body p{margin-bottom:9px} /* Cartes : jusqu'à quatre par rangée ; cinq en 3 + 2 ; quatre en 2 + 2 plutôt que 3 + 1. */ #onlybaie-perspective #alu-parcours .oa-cards{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))} #onlybaie-perspective #alu-parcours .oa-cards:has(>.oa-choice-wrap:nth-child(5):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} #onlybaie-perspective #alu-parcours .oa-cards:has(>.oa-choice-wrap:nth-child(4):last-child){grid-template-columns:repeat(auto-fill,minmax(clamp(calc(25% - 7px),calc((539px - 100%) * 999),calc(50% - 5px)),1fr))} /* Vignettes basses au départ ; le script agrandit celles d'une étape plus courte. */ #onlybaie-perspective #alu-parcours .oa-options .oa-picture,#onlybaie-perspective #alu-parcours .oa-card[data-key=dormant] .oa-picture{height:64px} #onlybaie-perspective #alu-parcours .oa-options .ob-agrandie svg{max-height:none;height:calc(100% - 12px);width:100%} #onlybaie-perspective #alu-parcours .oa-options .ob-agrandie img{height:100%;width:100%;object-fit:contain} /* Nuancier : 17 teintes en pastilles compactes (teinte à gauche, nom à droite), quatre par rangée pour que chaque nom tienne sur une ligne ; la référence RAL reste dans le récapitulatif. */ #onlybaie-perspective #alu-parcours .oa-cards:has([data-key=couleur]){grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px} #onlybaie-perspective #alu-parcours .oa-choice-wrap .oa-card[data-key=couleur]{flex-direction:row;align-items:center;gap:7px;min-height:38px;padding:4px 8px} #onlybaie-perspective #alu-parcours .oa-choice-wrap.selected .oa-card[data-key=couleur]{padding:3px 7px} #onlybaie-perspective #alu-parcours .oa-card[data-key=couleur] .oa-picture{flex:none;width:28px;height:28px;background:none;padding:0} #onlybaie-perspective #alu-parcours .oa-card[data-key=couleur] .oa-swatch{height:28px;width:28px} #onlybaie-perspective #alu-parcours .oa-card[data-key=couleur] .oa-choice-title{font-size:11.5px;line-height:1.25} /* Code RAL sous le nom de la teinte (aperçu 28/09/2026) */ #onlybaie-perspective #alu-parcours .oa-choice-wrap .oa-card[data-key=couleur]{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;row-gap:1px;align-content:center} #onlybaie-perspective #alu-parcours .oa-card[data-key=couleur] .oa-picture{grid-row:1/span 2} #onlybaie-perspective #alu-parcours .oa-card[data-key=couleur] .oa-choice-desc{display:block;grid-column:2;font-size:10.5px;line-height:1.2;color:#6b6b6b;margin:0} #onlybaie-perspective #alu-parcours .oa-options-body .oa-color-group{margin:6px 0 4px} #onlybaie-perspective #alu-parcours .oa-options-body>section:not(:first-child){margin-top:10px;padding-top:10px} /* Titre du bloc du dessin sur une ligne : « — rendu en temps réel » s'efface en premier (baie coulissante, porte de service : le nom est plus long). */ #onlybaie-perspective #alu-parcours .oa-preview>.ob-config-band{display:flex;white-space:nowrap;overflow:hidden} #onlybaie-perspective #alu-parcours .oa-preview>.ob-config-band span{min-width:0;overflow:hidden;text-overflow:ellipsis;margin-left:.3em} /* Châssis fixe et soufflet : le dessin « Votre ouverture » est tout le contenu de l'étape. */ #onlybaie-perspective #alu-parcours .oa-included-picture{max-width:100%} } /* Boutons d'étape aux deux bords, « Agrandir » au milieu, sur une seule ligne (29/09/2026, « Recommencer » retiré). La navigation mobile n'est pas touchée. */ @media (min-width:1000px){ #onlybaie-perspective #alu-parcours .oa-preview .oa-scene-nav{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'prev outils next';column-gap:10px;align-items:center} #onlybaie-perspective #alu-parcours .oa-preview .oa-scene-nav .oa-prev{grid-area:prev} #onlybaie-perspective #alu-parcours .oa-preview .oa-scene-nav .oa-next{grid-area:next;white-space:nowrap} #onlybaie-perspective #alu-parcours .oa-preview .oa-scene-nav .oa-nav-tools{grid-area:outils;justify-self:center} } @media (max-width:650px){ #alu-parcours .ob-steps .ob-step[aria-current="step"] .ob-step-name{display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;line-height:1.1 !important;overflow-wrap:anywhere} } /* Ligne du récapitulatif sans question sur ce modèle : pas de lien « Modifier ». */ #alu-parcours .oa-recap-fixe{cursor:default} /* LOUPE DES CONFIGURATEURS (27/09/2026) — une petite icône grise sans cadre passait inaperçue. Même bouton partout, entre « Précédent » et « Suivant » : loupe + « Agrandir » dans un cadre visible. Le mot vient d'ici (::after) : un seul endroit pour les six familles ; le nom lu par les lecteurs d'écran reste leur aria-label. */ #onlybaie-perspective :is(#pvc-parcours .cs-enlarge,#alu-parcours .oa-enlarge,#volet-parcours .cs-enlarge,.pb-config .pb-loupe,.pg-loupe){display:inline-flex !important;align-items:center;justify-content:center;gap:6px;height:36px;width:auto !important;padding:0 12px 0 10px !important;border:1px solid #8a9096 !important;border-radius:4px;background:#fff !important;color:#1f2328 !important;font-family:inherit;font-size:12.5px !important;font-weight:700 !important;line-height:1 !important;letter-spacing:.2px;white-space:nowrap;cursor:pointer;flex:none;box-shadow:none} #onlybaie-perspective :is(#pvc-parcours .cs-enlarge,#alu-parcours .oa-enlarge,#volet-parcours .cs-enlarge,.pb-config .pb-loupe,.pg-loupe)::after{content:'Agrandir'} #onlybaie-perspective :is(#pvc-parcours .cs-enlarge,#alu-parcours .oa-enlarge,#volet-parcours .cs-enlarge,.pb-config .pb-loupe,.pg-loupe) svg{width:18px !important;height:18px !important;flex:none;stroke:currentColor} #onlybaie-perspective :is(#pvc-parcours .cs-enlarge,#alu-parcours .oa-enlarge,#volet-parcours .cs-enlarge,.pb-config .pb-loupe,.pg-loupe):hover:not(:disabled){border-color:#1f2328 !important;background:#f3f4f5 !important} #onlybaie-perspective :is(#pvc-parcours .cs-enlarge,#alu-parcours .oa-enlarge,#volet-parcours .cs-enlarge,.pb-config .pb-loupe,.pg-loupe):disabled{opacity:.45;cursor:not-allowed} /* TABLIER SEUL SUR ORDINATEUR — 27/09/2026 (feu vert du gérant). Même principe que le PVC et l'aluminium : page large, trois blocs de hauteur fixe (la plus haute étape de départ, --ob-hauteur-options mesurée par components/configurateur/tablier/interface.jsx), options dans la grande colonne, dessin qui remplit le bloc du milieu, récapitulatif qui défile dans le sien. Étendu aux volets roulants le même jour (data-parcours=volet) : même famille, même disposition. Les volets n'ont pas de sonde : leur hauteur commune est celle de l'écran (730 px au plus), et leurs étapes ont été resserrées pour y tenir sans défiler. */ #op-produits:has(#volet-parcours:is([data-parcours=tablier],[data-parcours=volet])){max-width:1600px;margin:auto;padding:18px 24px 38px} @media (min-width:1000px){ #onlybaie-perspective #volet-parcours[data-parcours=volet]{--ob-hauteur-options:calc(min(730px,max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px))) - 42px)} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1.05fr) minmax(250px,280px);grid-template-areas:"options scene order";gap:16px;align-items:stretch;padding:0 0 24px} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-options{height:auto;max-height:max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px));position:relative;top:auto} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-options-body{flex:none;height:var(--ob-hauteur-options,auto);max-height:calc(max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px)) - 42px);overflow-y:auto;padding-top:12px;padding-bottom:10px} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-scene{height:auto;position:static;top:auto;display:flex;flex-direction:column;min-height:min(520px,max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px)))} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-drawing{flex:1 1 0;height:auto;min-height:200px} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-order{height:auto;position:static;top:auto;contain:size;min-height:min(520px,max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px)))} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-res-content{flex:1 1 0;min-height:0;overflow-y:auto} /* Espacements resserrés, comme le PVC : chaque étape tient dans la hauteur commune. */ #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-options-body .cs-section+.cs-section{margin-top:12px;padding-top:12px} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-options-body .cs-desc{margin-bottom:9px} /* Cartes : jusqu'à quatre par rangée ; vignettes basses au départ, agrandies par le script sur une étape plus courte (.ob-agrandie). */ #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-options .cs-cards{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-options .cs-picture{height:64px} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-options .ob-agrandie img{height:100%;width:100%;object-fit:contain} /* Nuancier : pastilles compactes (teinte à gauche, nom et référence à droite), comme l'aluminium, cinq par rangée dès que la colonne le permet : 31 teintes tiennent dans l'étape sans défiler (1440 × 900, 1536 × 864, 1920 × 1080). */ #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .vr-swatches{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:7px;margin-top:6px} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .vr-swatches>.vr-swatch{display:grid;grid-row:auto;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;column-gap:6px;row-gap:1px;align-content:center;align-items:center;min-height:38px;padding:4px 7px} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .vr-swatches>.vr-swatch[aria-pressed=true]{padding:3px 6px} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .vr-swatch>span{grid-row:1/3;width:24px;height:24px} /* Mention des teintes : une ligne de texte, sans encadré (27/09/2026, blocs à la hauteur de l'écran). */ #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .vr-palette-note{background:none;border:0;padding:0;margin:8px 0 0;font-size:12px;line-height:1.45;color:#666} /* « Agrandir » posé sur la photo de la carte plutôt que sur sa propre ligne. */ #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-cards>.cs-card{position:relative} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-cards>.cs-card>.cs-zoom{position:static;width:100%;min-height:38px;padding:7px 6px;border:0;border-top:1px solid #e5e5df;border-radius:0;background:#f8f8f5;font-size:11px} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .vr-swatch strong{margin:0;font-size:11.5px;line-height:1.25;align-self:end} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .vr-swatch small{margin:0;font-size:10.5px !important;line-height:1.2;align-self:start} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .vr-swatch small:empty{display:none} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .vr-palette-label{margin:10px 0 0} /* Lame finale : gros plan sur le bas du tablier, qui prend la place restante de l'étape. */ #onlybaie-perspective #volet-parcours[data-parcours=tablier] .tb-apercu-finale{margin:14px 0 0;height:160px;padding:10px;background:#fafbf8;display:flex;align-items:center;justify-content:center} #onlybaie-perspective #volet-parcours[data-parcours=tablier] .tb-apercu-finale svg{width:100% !important;height:100% !important;max-width:none !important;max-height:none !important} /* Boutons d'étape aux deux bords, « Agrandir » au milieu, sur une seule ligne. */ #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-scene-nav:not(.cs-options-nav){display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'prev outils next';column-gap:10px;align-items:center} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-scene-nav:not(.cs-options-nav) .cs-prev{grid-area:prev} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-scene-nav:not(.cs-options-nav) .cs-next{grid-area:next;white-space:nowrap} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-scene-nav:not(.cs-options-nav) .cs-nav-tools{grid-area:outils;justify-self:center} } @media (min-width:1000px) and (max-width:1279px){ #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-grid{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr) minmax(230px,250px)} } /* Volets sur ordinateur : un cran plus serré que le tablier (étapes Couleurs et Accessoires plus chargées), pour tenir sans défiler dès 1536 × 864. */ @media (min-width:1000px){ #onlybaie-perspective #volet-parcours[data-parcours=volet] .cs-options-body .cs-section+.cs-section{margin-top:10px;padding-top:10px} #onlybaie-perspective #volet-parcours[data-parcours=volet] .vr-palette-label{margin:6px 0 0} #onlybaie-perspective #volet-parcours[data-parcours=volet] .cs-included{padding:9px 12px} #onlybaie-perspective #volet-parcours[data-parcours=volet] .cs-included img{width:64px;height:56px} #onlybaie-perspective #volet-parcours[data-parcours=volet] .cs-options-body{padding-top:10px;padding-bottom:8px} #onlybaie-perspective #volet-parcours[data-parcours=volet] .vr-swatches{gap:6px} /* Accessoires : deux par rangée (jusqu'à neuf pour les volets solaires Somfy io). */ #onlybaie-perspective #volet-parcours[data-parcours=volet] .vr-accessory-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;align-items:start} #onlybaie-perspective #volet-parcours[data-parcours=volet] .vr-accessory-group>h3{grid-column:1/-1} #onlybaie-perspective #volet-parcours[data-parcours=volet] .vr-accessory{padding:6px 0} } /* Volets : aperçu de l'armature dans ses deux choix (dessin du volet, sans décor). */ #onlybaie-perspective #volet-parcours .vr-apercu-armature{display:flex;align-items:center;justify-content:center;padding:6px} @media (min-width:1000px){ /* Lame PVC (étape Tablier, sans choix) : l'image grandit avec la place libre de l'étape. */ #onlybaie-perspective #volet-parcours .cs-included>.vr-lame-pvc{flex:none;width:45%;margin:0;display:flex;align-items:center;justify-content:center} #onlybaie-perspective #volet-parcours .cs-included>.vr-lame-pvc.ob-agrandie img{width:100%;height:100%;object-fit:contain} } #onlybaie-perspective #volet-parcours .vr-apercu-armature svg{width:100% !important;height:100% !important;max-width:none !important;max-height:100% !important;display:block} /* Repère de la fenêtre, sous les cotes : titre de question (pour son aide « ? ») mais bloc compact, sans séparateur, pour que l'étape tienne. */ #onlybaie-perspective #volet-parcours[data-parcours=tablier] .cs-options-body .cs-section.tb-repere{margin-top:10px;padding-top:0;border-top:0} #onlybaie-perspective #volet-parcours[data-parcours=tablier] .cs-section.tb-repere>h2{font-size:15px;line-height:1.3;margin:0 0 6px} #onlybaie-perspective #volet-parcours[data-parcours=tablier] .cs-section.tb-repere .vr-field{margin:0} /* Sur mobile, le dessin est déjà en haut de l'écran : pas de gros plan en double. */ @media (max-width:999px){ #volet-parcours[data-parcours=tablier] .tb-apercu-finale{display:none} } /* Rubrique d'aide des configurateurs (27/09/2026) : un « ? » à côté de chaque question ouvre une fenêtre d'explication (components/aide/aide-configurateurs.js). Rien ne change la hauteur des titres. 29/09/2026, demande explicite du gérant : rond rouge plein, léger relief (dégradé radial, reflet, petite ombre) et « ? » blanc gras — seule exception voulue aux aplats à angles droits. Un seul style pour toutes les familles, bandeaux sombres compris. */ /* Le « ? » est un élément en ligne (pas un bouton) : il reste collé au dernier mot du titre au lieu de passer seul à la ligne. Arial pour des métriques connues : 13 px de glyphe + 6 px de marge latérale et 2,5 px en hauteur donnent un rond de 20 px. Styles imposés : certains configurateurs habillent tous leurs boutons et span de titre. */ .ob-aide{display:inline !important;position:relative !important;box-sizing:content-box !important;margin:0 0 0 .4em !important;padding:2.5px 6px !important;border:0 !important;border-radius:50% !important;background:radial-gradient(circle at 32% 26%,#ff9189 0,#ec3a3f 34%,#D81F26 58%,#a3121a 100%) !important;color:#fff !important;box-shadow:0 1px 2px rgba(0,0,0,.3),inset 0 1px 1px rgba(255,255,255,.45),inset 0 -1px 2px rgba(0,0,0,.18) !important;text-shadow:0 1px 0 rgba(0,0,0,.2) !important;font-family:Arial,Helvetica,sans-serif !important;font-size:13px !important;font-weight:700 !important;font-style:normal !important;line-height:1 !important;letter-spacing:0 !important;text-transform:none !important;text-decoration:none !important;white-space:nowrap !important;vertical-align:.12em !important;cursor:pointer;-webkit-user-select:none;user-select:none} /* Zone cliquable de 26 px au moins autour du rond. */ .ob-aide::after{content:"";position:absolute;inset:-4px -3px} .ob-aide:hover,.ob-aide:focus-visible{background:radial-gradient(circle at 32% 26%,#ffb0a9 0,#f4555a 34%,#e62f36 58%,#b7161e 100%) !important;color:#fff !important} .ob-aide:focus-visible{outline:2px solid #111 !important;outline-offset:2px} .ob-config-band .ob-aide{margin-left:.4em !important} .ob-config-band .ob-aide:focus-visible{outline-color:#fff !important} .ob-aide-fenetre{box-sizing:border-box;width:min(560px,calc(100vw - 32px));max-width:none;max-height:min(86vh,700px);margin:auto;padding:0;border:0;border-radius:0;background:#fff;color:#111;box-shadow:none;overflow:hidden;font-family:inherit} .ob-aide-fenetre[open]{display:flex;flex-direction:column} .ob-aide-fenetre::backdrop{background:rgba(17,17,17,.62)} .ob-aide-tete{display:flex;align-items:stretch;background:#111;color:#fff;flex:none} .ob-aide-tete h2{flex:1;margin:0;padding:15px 12px 15px 20px;color:#fff;font-size:17px;line-height:1.3;font-weight:800;letter-spacing:0;text-transform:none} .ob-aide-fermer{flex:none;width:54px;min-height:54px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#fff;font-family:inherit;font-size:28px;line-height:1;cursor:pointer} .ob-aide-fermer:hover,.ob-aide-fermer:focus-visible{background:#D81F26} .ob-aide-corps{padding:18px 20px 6px;overflow-y:auto;font-size:15px;line-height:1.55;color:#222} .ob-aide-corps p{margin:0 0 12px} .ob-aide-corps ul{list-style:none;margin:0 0 12px;padding:0} .ob-aide-corps li{position:relative;margin:0 0 8px;padding-left:16px} .ob-aide-corps li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;background:#D81F26} .ob-aide-corps strong{color:#111;font-weight:700} .ob-aide-pied{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 20px;border-top:1px solid #EDEBE7;flex:none} .ob-aide-lien{color:#D81F26;font-size:14px;font-weight:700;line-height:1.35;text-decoration:underline;text-underline-offset:3px} .ob-aide-compris{margin:0 0 0 auto;min-width:150px;height:44px;padding:0 20px;border:0;border-radius:0;background:#D81F26;color:#fff;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer} .ob-aide-compris:hover,.ob-aide-compris:focus-visible{background:#111} @media (max-width:640px){.ob-aide-fenetre{width:calc(100vw - 24px);max-height:88vh}.ob-aide-tete h2{font-size:16px;padding-left:16px}.ob-aide-corps{padding:16px 16px 4px}.ob-aide-pied{padding:12px 16px}.ob-aide-compris{width:100%;margin:0}} /* Portes d'entrée, toutes tailles : la coche d'une carte choisie (en haut à droite) ne recouvre plus le libellé des cartes sans image. */ #onlybaie-perspective .pe-config .pe-cards-choix .pe-card{padding-right:34px} /* Sur mobile, la navigation reste la barre du bloc d'options : celle de l'aperçu est masquée. */ #onlybaie-perspective .pe-config :is(.pe-views-nav,.pe-views-nav-seule){display:none} /* PORTES D'ENTRÉE ET DE SERVICE SUR ORDINATEUR (27/09/2026) — même modèle que le PVC et l'aluminium : options dans la plus grande colonne, trois blocs de même hauteur, fixe d'une étape à l'autre (la plus haute étape de la configuration de départ, mesurée par une sonde du configurateur : --ob-hauteur-options sur .pe-config). Le dessin remplit le bloc du milieu, le récapitulatif défile dans le sien. Mobile inchangé (porte-entree.css). Étapes de départ compactées pour tenir sans défiler dès 1440 × 900 (plafond 628 px) et 1536 × 864 (592 px). */ @media (min-width:1051px){ #onlybaie-perspective .pe-config .pe-layout{grid-template-columns:minmax(0,1.5fr) minmax(0,1.05fr) minmax(250px,280px);gap:16px;align-items:stretch} #onlybaie-perspective .pe-config .pe-panel{height:auto} #onlybaie-perspective .pe-config .pe-options-body{flex:none;height:var(--ob-hauteur-options,auto);max-height:calc(max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px)) - 46px);overflow-y:auto;padding:14px 16px 12px} /* « Précédent / Suivant » sous l'aperçu, sur la ligne des vues (27/09/2026) : le bloc des options gagne la hauteur de sa barre, comme dans les autres configurateurs. */ #onlybaie-perspective .pe-config .pe-options .pe-nav{display:none} #onlybaie-perspective .pe-config .pe-scene .pe-views{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 10px 10px;border-top:1px solid #e4e6e8;background:#fafbfb} #onlybaie-perspective .pe-config .pe-views-choix{display:flex;gap:6px;min-width:0} /* Les vues restent accessibles même quand les libellés de navigation sont longs. */ #onlybaie-perspective .pe-config .pe-scene .pe-views{flex-wrap:wrap} #onlybaie-perspective .pe-config .pe-views .pe-views-nav{display:inline-block;border:1px solid #d7dce0;border-radius:5px;background:#fff;padding:8px 11px;color:#3c454c;font-size:13px;font-weight:650;white-space:nowrap} #onlybaie-perspective .pe-config .pe-views .pe-views-suivant{background:#333b43;color:#fff;border-color:#333b43} #onlybaie-perspective .pe-config .pe-views .pe-views-nav:disabled{opacity:.45;cursor:not-allowed} #onlybaie-perspective .pe-config .pe-scene{min-height:min(520px,max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px)))} #onlybaie-perspective .pe-config .pe-drawing{flex:1 1 0;min-height:200px} #onlybaie-perspective .pe-config .pe-summary{contain:size;min-height:min(520px,max(460px,calc(100vh - var(--op-sticky-offset,144px) - 64px)))} #onlybaie-perspective .pe-config .pe-section+.pe-section{margin-top:10px;padding-top:10px} #onlybaie-perspective .pe-config .pe-section h2{margin-bottom:6px} #onlybaie-perspective .pe-config .pe-section>p{margin-bottom:10px} #onlybaie-perspective .pe-config .pe-tip{margin-top:10px;padding:9px 12px} /* Formes de l'entrée : quatre par rangée. */ #onlybaie-perspective .pe-config .pe-compositions{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} #onlybaie-perspective .pe-config .pe-compositions .pe-card{padding:7px;gap:5px} #onlybaie-perspective .pe-config .pe-compositions .pe-card-image{height:78px} #onlybaie-perspective .pe-config .pe-compositions .pe-card strong{font-size:13px;line-height:1.3} /* Types de pose : quatre vignettes sur une rangée, comme les fenêtres (29/09/2026). */ #onlybaie-perspective .pe-config .pe-cards-poses{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} #onlybaie-perspective .pe-config .pe-cards-poses .pe-card{padding:8px;gap:5px} #onlybaie-perspective .pe-config .pe-cards-poses .pe-card-image{height:84px} #onlybaie-perspective .pe-config .pe-cards-poses .pe-card>span:not(.pe-card-image){font-size:12.5px;line-height:1.4} /* Choix sans image (fermeture, cylindre, options) : deux colonnes, textes sur une ou deux lignes ; trois choix (cylindres alu, panneau, paumelles) sur une rangée, libellé un cran plus petit ; quatre choix sur deux rangées ; cinq et plus (épaisseurs de dormant) : quatre colonnes. */ #onlybaie-perspective .pe-config .pe-cards-choix{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #onlybaie-perspective .pe-config .pe-cards-choix:has(>.pe-card:nth-child(3)):not(:has(>.pe-card:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))} #onlybaie-perspective .pe-config .pe-cards-choix:has(>.pe-card:nth-child(5)){grid-template-columns:repeat(4,minmax(0,1fr))} #onlybaie-perspective .pe-config .pe-cards-choix .pe-card{padding:8px 30px 8px 11px;gap:2px;justify-content:center;min-height:44px} #onlybaie-perspective .pe-config .pe-cards-choix .pe-card strong{font-size:14px;line-height:1.3} #onlybaie-perspective .pe-config .pe-cards-choix .pe-card>span:not(.pe-card-image){font-size:12.5px;line-height:1.35} #onlybaie-perspective .pe-config .pe-cards-choix:has(>.pe-card:nth-child(3)):not(:has(>.pe-card:nth-child(4))) .pe-card strong{font-size:13px} /* Position de la poignée (étape Ouverture depuis le 29/09/2026) : deux cartes côte à côte, schéma au-dessus du libellé, agrandi par le remplissage quand l'étape est courte. */ #onlybaie-perspective .pe-config .pe-cards-sens .pe-card{flex-direction:column;align-items:stretch;gap:4px;padding:8px} #onlybaie-perspective .pe-config .pe-cards-sens .pe-card-image{height:118px;width:100%;flex:none} #onlybaie-perspective .pe-config .pe-cards-sens .pe-card strong{font-size:14px;line-height:1.3} /* Vitrages des fixes : trois par rangée. */ #onlybaie-perspective .pe-config .pe-cards-vitrages{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} #onlybaie-perspective .pe-config .pe-cards-vitrages .pe-card-image{height:78px} #onlybaie-perspective .pe-config .pe-cards-vitrages .pe-glass{height:62px} /* Poignées : quatre par rangée ; cinq dès cinq poignées, soit une rangée pour cinq et deux pour les dix des portes vitrées. */ #onlybaie-perspective .pe-config .pe-cards-poignees{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} #onlybaie-perspective .pe-config .pe-cards-poignees:has(>.pe-card:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))} #onlybaie-perspective .pe-config .pe-cards-poignees .pe-card{padding:7px;gap:4px} #onlybaie-perspective .pe-config .pe-cards-poignees .pe-card-image{height:130px} /* Insert inox de la Compas : photo à gauche du libellé, les deux cartes sur une rangée. */ #onlybaie-perspective .pe-config .pe-cards-compas .pe-card{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;row-gap:4px;align-content:start;padding:8px 30px 8px 8px} #onlybaie-perspective .pe-config .pe-cards-compas .pe-card-image{grid-row:1/3;width:56px;--pe-image-compas:124px} /* Couleurs : cinq par rangée. */ #onlybaie-perspective .pe-config .pe-colors{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} #onlybaie-perspective .pe-config .pe-color{padding:6px} #onlybaie-perspective .pe-config .pe-color>span{height:38px} /* Cotes : les champs à gauche, le schéma à droite. */ #onlybaie-perspective .pe-config .pe-cotes-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:16px;align-items:start} #onlybaie-perspective .pe-config .pe-cotes-grille .pe-repartition{margin:0} #onlybaie-perspective .pe-config .pe-cotes-grille .pe-repartition svg{max-height:170px} #onlybaie-perspective .pe-config .pe-cotes-grille .pe-repartition figcaption{font-size:13px;line-height:1.4} #onlybaie-perspective .pe-config .pe-cotes-grille .pe-total-fields{grid-template-columns:minmax(0,1fr);margin-top:0} } /* Fenêtres PVC et aluminium : poignée en texte, aération en grand (28/09/2026). La photo est un principe de basculement ; la grande croix signale l'absence d'option, tandis que le cadre rouge et le bouton radio indiquent le choix du client. */ #onlybaie-perspective #pvc-parcours .cs-options .cs-cards:has([data-key=oscillo]), #onlybaie-perspective #alu-parcours .oa-options .oa-cards:has([data-key=avec_oscillo_battant]){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #onlybaie-perspective #pvc-parcours .cs-options .cs-choice[data-key=oscillo] .cs-picture, #onlybaie-perspective #alu-parcours .oa-options .oa-card[data-key=avec_oscillo_battant] .oa-picture{display:block;flex:none;width:100%;max-width:240px;height:auto;aspect-ratio:1;margin:0 auto;padding:0;background:#fff;overflow:hidden} #onlybaie-perspective :is(#pvc-parcours,#alu-parcours) .ob-oscillo-visuel{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:#fff} #onlybaie-perspective :is(#pvc-parcours,#alu-parcours) .ob-oscillo-visuel>img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 47%} #onlybaie-perspective :is(#pvc-parcours,#alu-parcours) .ob-oscillo-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;width:80%;height:80%;border:0;border-radius:0;background:none;box-shadow:none;pointer-events:none} #onlybaie-perspective :is(#pvc-parcours,#alu-parcours) .ob-oscillo-badge.sans{color:#D81F26} #onlybaie-perspective :is(#pvc-parcours,#alu-parcours) .ob-oscillo-badge>svg{display:block;width:100%;height:100%;max-height:none} #onlybaie-perspective #pvc-parcours .cs-choice[data-key=oscillo] .cs-choice-title, #onlybaie-perspective #alu-parcours .oa-card[data-key=avec_oscillo_battant] .oa-choice-title{font-size:14px;line-height:1.35;padding-top:10px;padding-bottom:10px} /* MÊMES BORDS POUR TOUS LES CONFIGURATEURS — 29/09/2026 (demande du gérant : « exactement le même format »). Référence : fenêtre PVC — barre d'étapes et trois blocs de 24 px à largeur − 24 px sur ordinateur, 14 px du bord sur mobile. Le volet (page sans retrait) et le tablier (page à 24 px + 8 px) s'en écartaient de 16 et 8 px de chaque côté. */ @media (min-width:1000px){ #onlybaie-perspective #vr-mount #volet-parcours>.cs-steps{margin-inline:16px} #onlybaie-perspective #vr-mount #volet-parcours[data-parcours=volet] .cs-grid{padding-inline:16px} #onlybaie-perspective #tablier-mount>#volet-parcours{padding-inline:0} } @media (max-width:999px){ #onlybaie-perspective #tablier-mount{margin-inline:-24px} /* Pages à 16 px (aluminium, garages, portails) ou 12 px (portes) : le configurateur seul se cale sur les 14 px de la référence. */ #onlybaie-perspective :is(#alu-parcours,#garage-mount,#ob-portail-mount){margin-inline:-2px} #onlybaie-perspective #porte-entree-mount{margin-inline:2px} } /* VIGNETTES DE POSE, TOUTES FAMILLES — 29/09/2026. Un seul pied de carte : loupe + « Voir l’image », pleine largeur, filet au-dessus, angles droits, sans ombre. Ce pied agrandit l’image ; la vue 3D, quand elle existe, s’ouvre depuis l’image agrandie ; le reste de la carte choisit la pose (components/configurateur/commun/agrandir-image.js et poses-3d.js). */ #onlybaie-perspective .ob-agrandir{position:static!important;display:flex!important;align-items:center;justify-content:center;gap:6px!important;flex:0 0 auto!important;width:100%!important;min-height:36px!important;margin:auto 0 0!important;padding:6px 8px!important;border:0!important;border-top:1px solid #e6e6e6!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;color:#444!important;font-family:inherit!important;font-size:13px!important;font-weight:500!important;line-height:1.2!important;text-align:center;white-space:nowrap;cursor:pointer;z-index:auto!important} #onlybaie-perspective .ob-agrandir .ob-loupe{display:block;width:18px;height:18px;flex:none} #onlybaie-perspective .ob-agrandir:hover{background:#f7f7f5!important;color:#111!important} #onlybaie-perspective .ob-agrandir:focus-visible{outline:3px solid #d81f26;outline-offset:-3px} @media (max-width:650px){#onlybaie-perspective .ob-agrandir{min-height:44px!important}} /* Carte de pose : cadre d’un seul tenant (image, textes, pied), rouge si choisie. */ #onlybaie-perspective .ob-vignette-pose{display:flex!important;flex-direction:column!important;min-width:0;border:1px solid #ddd!important;border-radius:0!important;background:#fff;box-shadow:none!important;overflow:hidden} #onlybaie-perspective .ob-vignette-pose:is(.is-selected,.selected,:has(>.pe-card.selected)){border-color:#d81f26!important;box-shadow:inset 0 0 0 1px #d81f26!important} #onlybaie-perspective .ob-vignette-pose>:is(.pe-card,.oa-card,.cs-choice,.ge-pose-select,button:not(.ob-agrandir)){outline-offset:-3px;flex:1 1 auto;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent} #onlybaie-perspective .ob-vignette-pose img{border-radius:0!important} /* Poses 3D des volets : portrait cadré pour distinguer coffre, coulisses et fenêtre. */ #onlybaie-perspective #volet-parcours[data-parcours=volet] .cs-options .vr-poses-3d .cs-picture{height:auto;aspect-ratio:3/4;max-height:300px;width:100%;background:#f8f7f4} #onlybaie-perspective #volet-parcours .vr-poses-3d .cs-picture img{width:100%;height:100%;max-height:none;object-fit:contain} #onlybaie-perspective #volet-parcours .vr-poses .cs-zoom{color:#333;background:#f8f8f5;font-weight:600;min-height:38px} /* Le pied commun est en flex : ses enfants utilisent leurs propres rangées, et non un subgrid sans parent grille (textes superposés sur mobile). */ #onlybaie-perspective #volet-parcours[data-parcours=volet] .vr-poses>.ob-vignette-pose>.cs-choice{grid-template-rows:auto auto auto auto;padding:7px;align-content:start} /* ÉTAPE DE POSE SANS DÉFILEMENT — 29/09/2026 (gérant). Rien ne recouvre l’image ; le pied commun « Voir l’image » (plus haut) reste sous l’image et toucher la carte, image comprise, choisit la pose. La loupe seule à côté du titre, essayée le même jour, obligeait à viser le bouton radio : retirée. Hauteurs : components/configurateur/commun/ajuster-vignettes-pose.js. */ /* Titres des battantes 3-4 vantaux : 13 px, pour tenir sur une ligne. */ #onlybaie-perspective .ob-vignette-pose .ob-titre-pose{font-size:13px!important} /* Images des vignettes de pose : fond blanc (plus de bandes grises autour d’une image carrée). */ #onlybaie-perspective .ob-vignette-pose :is(.cs-picture,.oa-picture,.pe-card-image){background:transparent!important} @media (min-width:1000px){ /* Volets : deux poses (manivelle) sur la même grille de trois que les autres volets. */ #onlybaie-perspective #volet-parcours .vr-poses.vr-poses-3d:not(.vr-three){grid-template-columns:repeat(3,minmax(0,1fr))!important} /* Portes : remarque de principe en une ligne discrète, épaisseurs d’isolation compactes. */ #onlybaie-perspective .pe-config .pe-cards-poses+.pe-tip{margin-top:6px!important;padding:0!important;background:none!important;border:0!important;font-size:12px!important;line-height:1.4!important;color:#666!important} #onlybaie-perspective .pe-config .pe-options-body:has(.pe-cards-poses) .pe-cards-choix .pe-card{padding:8px 9px!important;min-height:0!important;overflow:visible!important} #onlybaie-perspective .pe-config .pe-options-body:has(.pe-cards-poses) .pe-cards-choix .pe-card strong{white-space:nowrap;font-size:12.5px!important} #onlybaie-perspective .pe-config .pe-options-body:has(.pe-cards-poses) .pe-cards-choix .pe-card.selected:after{top:-7px;right:-7px;width:16px;height:16px;font-size:11px;z-index:1} } /* Fenêtres, portes-fenêtres et coulissants : les vignettes de pose restent sur une seule rangée, même quand la colonne des options se resserre (1000-1279 px). */ @media (min-width:1000px){ #onlybaie-perspective :is(#pvc-parcours .cs-cards,#alu-parcours .oa-cards):has(>.ob-vignette-pose){grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important} } /* Portes, écrans bas (1366 × 768, 1280 × 720) : étape Pose resserrée hors vignettes. */ @media (min-width:1051px) and (max-height:820px){ #onlybaie-perspective .pe-config .pe-options-body:has(.pe-cards-poses) .pe-section+.pe-section{margin-top:6px!important;padding-top:6px!important} #onlybaie-perspective .pe-config .pe-options-body:has(.pe-cards-poses) .pe-section>p{margin-bottom:6px!important} #onlybaie-perspective .pe-config .pe-options-body:has(.pe-cards-poses) .pe-cards-sens .pe-card{padding-block:6px!important} #onlybaie-perspective .pe-config .pe-options-body:has(.pe-cards-poses) .pe-cards-sens .pe-card-image{height:44px!important} } /* Aération : photo moins haute quand l'étape pose aussi la partie fixe ou la composition (3 et 4 vantaux) ; elle reste grande sur les fenêtres à 1 et 2 vantaux (29/09/2026). */ @media (min-width:1000px){ #onlybaie-perspective #alu-parcours .oa-options-body:has(>section:nth-of-type(3)) .oa-card[data-key=avec_oscillo_battant] .oa-picture{max-width:150px} #onlybaie-perspective #pvc-parcours .cs-options-body:has(>.cs-section:nth-of-type(3)) .cs-choice[data-key=oscillo] .cs-picture{max-width:170px} } /* Volets et alu (29/09/2026) : étapes remises dans leur bloc sans rien poser sur les photos. */ @media (min-width:1000px){ /* Accessoires : groupes un peu moins espacés (le volet solaire en a deux). */ #onlybaie-perspective #volet-parcours[data-parcours=volet] .vr-accessory-group{margin-top:10px} #onlybaie-perspective #volet-parcours[data-parcours=volet] .vr-accessory-group:first-child{margin-top:0} #onlybaie-perspective #volet-parcours[data-parcours=volet] .cs-included{padding-top:6px;padding-bottom:6px} /* Finitions de l'alu à trois questions (fenêtre 2 vantaux oscillo-battant) : cartes en ligne, photo à gauche du libellé, pied « Agrandir l’image » dessous ; la photo grandit avec la place libre. */ #onlybaie-perspective #alu-parcours .oa-options-body:has(.oa-card[data-key=avec_ripc]):has(.oa-card[data-key=petits_bois_actif]) .oa-card:is([data-key=poignee],[data-key=avec_ripc],[data-key=petits_bois_actif]){display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:10px;row-gap:2px;align-content:start;align-items:start} #onlybaie-perspective #alu-parcours .oa-options-body:has(.oa-card[data-key=avec_ripc]):has(.oa-card[data-key=petits_bois_actif]) .oa-card:is([data-key=poignee],[data-key=avec_ripc],[data-key=petits_bois_actif]) .oa-picture{grid-column:1;grid-row:1/-1;width:104px;align-self:stretch} #onlybaie-perspective #alu-parcours .oa-options-body:has(.oa-card[data-key=avec_ripc]):has(.oa-card[data-key=petits_bois_actif]) .oa-card:is([data-key=poignee],[data-key=avec_ripc],[data-key=petits_bois_actif])>:not(.oa-picture){grid-column:2} } /* Écrans bas (moins de 900 px de haut, en-tête compact) : un cran plus serré pour que les étapes tiennent aussi sur un portable de 768 px (29/09/2026). Rien ne change au-dessus. Les photos réduites ici s'agrandissent d'elles-mêmes quand il reste de la place. */ @media (min-width:1000px) and (max-height:899px){ #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .vr-swatches{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-options-body .cs-section+.cs-section{margin-top:6px;padding-top:6px} #onlybaie-perspective #volet-parcours[data-parcours=volet] .vr-accessory{padding:2px 0} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .cs-options .cs-picture{height:48px} #onlybaie-perspective #volet-parcours[data-parcours=tablier] .cs-options-body input{padding-top:8px;padding-bottom:8px} #onlybaie-perspective #volet-parcours[data-parcours=tablier] .cs-options-body .cs-tip{padding-top:6px;padding-bottom:6px} #onlybaie-perspective #alu-parcours .oa-choice-wrap .oa-card[data-key=couleur]{min-height:32px;padding:2px 8px} #onlybaie-perspective #alu-parcours .oa-choice-wrap.selected .oa-card[data-key=couleur]{padding:1px 7px} #onlybaie-perspective #alu-parcours .oa-options-body .oa-color-group{margin:4px 0 2px} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .vr-swatches>.vr-swatch{min-height:32px;padding:2px 6px} #onlybaie-perspective #volet-parcours:is([data-parcours=tablier],[data-parcours=volet]) .vr-swatches>.vr-swatch[aria-pressed=true]{padding:1px 5px} #onlybaie-perspective #alu-parcours .oa-options-body>section:not(:first-child){margin-top:6px;padding-top:6px} #onlybaie-perspective #alu-parcours .oa-options-body:has(>section:nth-of-type(3)) .oa-card[data-key=avec_oscillo_battant] .oa-picture{max-width:118px} #onlybaie-perspective #pvc-parcours .cs-options-body .cs-section+.cs-section{margin-top:6px;padding-top:6px} #onlybaie-perspective #pvc-parcours .cs-options .cs-choice[data-key=oscillo] .cs-picture{max-width:200px} #onlybaie-perspective #pvc-parcours .cs-options-body:has(>.cs-section:nth-of-type(3)) .cs-choice[data-key=oscillo] .cs-picture{max-width:150px} /* Grilles de ventilation (alu) : photos un cran plus basses. */ #onlybaie-perspective #alu-parcours .oa-card[data-key=ventilation] .oa-picture{height:56px} /* Tablier : le repère se saisit à droite de son titre ; descriptions des lames plus serrées. */ #onlybaie-perspective #volet-parcours[data-parcours=tablier] .tb-repere{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px} #onlybaie-perspective #volet-parcours[data-parcours=tablier] .tb-repere>h2{margin:0} #onlybaie-perspective #volet-parcours[data-parcours=tablier] .tb-repere input{margin-top:0} #onlybaie-perspective #volet-parcours[data-parcours=tablier] .vr-lames .cs-choice-desc{line-height:1.3} } @media (min-width:1051px) and (max-height:899px){ #onlybaie-perspective .pe-config .pe-cards-poignees .pe-card-image{height:96px} } /* POSITION DE LA POIGNÉE ET FERMETURE & OPTIONS — 29/09/2026 (gérant). Poignée vue de l'intérieur : deux cartes compactes sur une ligne, jamais agrandies par le remplissage. Fermeture : visuel, titre, prix de l'option pour cette porte ; loupe sous les photos fabricant. Angles droits. */ #onlybaie-perspective .pe-config .pe-cards-sens .pe-card-image{background:#fff} #onlybaie-perspective .pe-config .pe-cards-sens .pe-card-image svg{width:100%;height:100%} #onlybaie-perspective .pe-config .pe-card-prix{font-size:12.5px!important;font-weight:700;color:#111!important;line-height:1.3!important;margin-top:auto} #onlybaie-perspective .pe-config .pe-cards-fermeture{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #onlybaie-perspective .pe-config .pe-cards-fermeture:has(>:nth-child(3)):not(:has(>:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))} /* Vignette horizontale : visuel carré à gauche, titre, précision et prix à droite (étape sans défilement). */ #onlybaie-perspective .pe-config .pe-cards-fermeture .pe-card{display:grid!important;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:9px;row-gap:1px;align-content:start;align-items:start;padding:6px 26px 6px 6px;border-radius:0;min-height:0} #onlybaie-perspective .pe-config .pe-cards-fermeture .pe-card-image{grid-row:1/4;grid-column:1;height:58px!important;width:58px;flex:none;background:#fff;border-radius:0;align-self:center} #onlybaie-perspective .pe-config .pe-cards-fermeture .pe-card>:not(.pe-card-image){grid-column:2} #onlybaie-perspective .pe-config .pe-cards-fermeture .pe-card-image>img{padding:0;mix-blend-mode:normal} #onlybaie-perspective .pe-config .pe-cards-fermeture .pe-card-image>svg{width:100%;height:100%} #onlybaie-perspective .pe-config .pe-cards-fermeture .pe-card strong{font-size:13px;line-height:1.3} #onlybaie-perspective .pe-config .pe-cards-fermeture .pe-card>span:not(.pe-card-image){font-size:12px;line-height:1.35} #onlybaie-perspective .pe-config .pe-cards-fermeture .pe-card-prix{margin-top:2px} /* Trois choix par rangée : visuel plus petit, textes resserrés ; coche de sélection en bas à droite pour laisser la loupe à côté du titre. */ #onlybaie-perspective .pe-config .pe-cards-fermeture:has(>:nth-child(3)):not(:has(>:nth-child(4))) .pe-card{grid-template-columns:46px minmax(0,1fr);column-gap:7px} #onlybaie-perspective .pe-config .pe-cards-fermeture:has(>:nth-child(3)):not(:has(>:nth-child(4))) .pe-card-image{width:46px;height:46px!important} #onlybaie-perspective .pe-config .pe-cards-fermeture:has(>:nth-child(3)):not(:has(>:nth-child(4))) .pe-card strong{font-size:12.5px} #onlybaie-perspective .pe-config .pe-cards-fermeture .pe-card.selected:after{top:auto!important;bottom:6px} #onlybaie-perspective .pe-config .pe-options-body:has(.pe-cards-fermeture) .pe-section+.pe-section{margin-top:5px;padding-top:5px} #onlybaie-perspective .pe-config .pe-section>.pe-cards-fermeture+.pe-cards-fermeture{margin-top:6px} #onlybaie-perspective .pe-config .pe-options-body:has(.pe-cards-fermeture) .pe-section h2{margin-bottom:4px} #onlybaie-perspective .pe-config .pe-option-photo>.pe-card{flex:1 1 auto} #onlybaie-perspective .pe-config .pe-option-photo>.ob-agrandir{min-height:26px!important;padding:2px 6px!important;font-size:12px!important} #onlybaie-perspective .pe-config .pe-inclus-visuel{display:flex;align-items:center;gap:12px;margin-top:4px;padding:8px;border:1px solid #ddd;background:#fff} #onlybaie-perspective .pe-config .pe-inclus-visuel>.pe-card-image{flex:0 0 96px;height:72px;background:#fff} #onlybaie-perspective .pe-config .pe-inclus-visuel>.pe-card-image>img,#onlybaie-perspective .pe-config .pe-inclus-visuel>.pe-card-image>svg{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;padding:0} #onlybaie-perspective .pe-config .pe-inclus-visuel p{margin:0;font-size:13px;line-height:1.4;color:#636b70} #onlybaie-perspective .pe-config .pe-inclus-visuel strong{color:#111;font-size:14px} #onlybaie-perspective .pe-config .pe-inclus-visuel small{color:#111;font-weight:700} @media (max-width:650px){#onlybaie-perspective .pe-config .pe-cards-fermeture:has(>:nth-child(3)){grid-template-columns:minmax(0,1fr)}} /* Garage desktop : trois blocs, le dessin reste le plus large (une porte de garage est plus large que haute). Le seuil de 1050 px conserve intégralement le parcours mobile/tablette garage. 27/09/2026 : même hauteur que les autres configurateurs — l'écran moins l'en-tête collant et la barre d'étapes (tout tient dans l'écran, configurateur-disposition.css), 730 px au plus (au lieu de 470 à 636 px, 530 en 1440 × 900) : un dessin plus grand, et les options tiennent sans défiler (grilles élargies ci-dessous, textes resserrés dans les composants). */ @media (min-width:1051px) { #onlybaie-perspective #op-produits:has(#garage-mount) { padding-left:24px; padding-right:24px; } #garage-mount .pg-grid { --pg-panel-height:clamp(470px,calc(100vh - var(--op-sticky-offset,144px) - 64px),730px); grid-template-columns:400px minmax(0,1fr) 280px!important; gap:16px!important; } #garage-mount .pg-grid > div { min-width:0; } #garage-mount .pg-panneau, #garage-mount .pg-rescard, #garage-mount .pg-centre > div { height:var(--pg-panel-height); } #garage-mount .pg-centre > div { display:flex; flex-direction:column; } #garage-mount .pg-centre > div > div { flex-shrink:0; } #garage-mount .pg-centre .ob-config-band + div { flex:1 1 0; min-height:0; display:flex; align-items:center; justify-content:center; padding:16px!important; } #garage-mount .pg-centre .ob-config-band + div > svg { display:block; width:100%!important; height:100%!important; max-width:100%; max-height:100%; } /* Grilles d'options élargies (styles en ligne des composants, d'où !important) : hublots, motifs et couleurs de l'enroulable en trois colonnes ; portillons et commandes de l'enroulable côte à côte. */ #garage-mount .pg-g2 { grid-template-columns:repeat(2,minmax(0,1fr))!important; } #garage-mount .pg-g3 { grid-template-columns:repeat(3,minmax(0,1fr))!important; } /* Champs de cotes un cran plus bas (27/09/2026 : blocs à la hauteur de l'écran). */ #garage-mount .pg-panneau input[type=number] { padding-top:7px!important; padding-bottom:7px!important; } #garage-mount .pg-commande { grid-template-columns:repeat(2,minmax(0,1fr)); } #garage-mount .pg-commande > .pg-pleine { grid-column:1 / -1; } /* Dessin d'une vignette agrandie (remplissage-etapes.js) : il tient dans sa nouvelle hauteur. */ #garage-mount .pg-vignette.ob-agrandie > svg { width:100%!important; height:100%!important; } } @media (min-width:1051px) and (max-width:1150px) { #onlybaie-perspective #op-produits:has(#garage-mount) { padding-left:14px; padding-right:14px; } #garage-mount .pg-grid { grid-template-columns:350px minmax(0,1fr) 245px!important; gap:13px!important; } #garage-mount .pg-centre .ob-config-band span { display:none; } } /* Écrans bas (en-tête compact, 29/09/2026) : pastilles de couleur quatre par rangée, champs un cran plus bas. Rien ne change au-dessus de 900 px de haut. */ @media (min-width:1051px) and (max-height:899px) { #garage-mount .pg-g3:has(.pg-pastille) { grid-template-columns:repeat(4,minmax(0,1fr))!important; } #garage-mount .pg-panneau input[type=number] { padding-top:5px!important; padding-bottom:5px!important; } } /* Parcours volet : lames et coffre distincts. Gabarit extérieur inchangé. */ #onlybaie-perspective #volet-parcours .vr-lames .cs-picture{height:125px;overflow:hidden} #onlybaie-perspective #volet-parcours .vr-lames .cs-picture img{width:100%;height:100%;object-fit:contain;transform:scale(1.45)} #onlybaie-perspective #volet-parcours .vr-accessory>label>img{width:70px;height:70px;object-fit:contain;flex:none;border-radius:4px} #onlybaie-perspective #volet-parcours .vr-coffre-zoom{padding:0;background:#fff;border:0;flex:none} #onlybaie-perspective #volet-parcours .vr-coffre-zoom span{display:block;font-size:12px;padding:5px} #onlybaie-perspective #volet-parcours .vr-coffre-zoom img{width:110px;height:110px;object-fit:contain} @media(min-width:901px){ #onlybaie-perspective #volet-parcours .vr-section-coffre{display:flex;gap:16px;align-items:center;background:#fafafa;padding:12px} #onlybaie-perspective #volet-parcours .vr-coffre-zoom img{width:150px;height:155px;max-width:none} #onlybaie-perspective #volet-parcours .vr-section-coffre>span{flex:1;min-width:0;font-size:13px} #onlybaie-perspective #volet-parcours .vr-section-coffre strong{display:block;margin-bottom:7px;font-size:15px} } /* « Voir mon panier ↗ » sous « Ajouter et configurer le suivant » (09/10/2026) : lien en ligne, sa bordure haute et ses 12 px de marge intérieure passaient par-dessus le bas du bouton (le « trait » vu par le gérant). En bloc, il se range dessous. */ #onlybaie-perspective #volet-parcours .vr-detail-button{display:block;box-sizing:border-box;margin-top:8px} /* Confirmation de « Ajouter et configurer le suivant », au-dessus du configurateur reparti à l'étape des dimensions. */ #onlybaie-perspective #volet-parcours .vr-ajout-suivant{display:flex;align-items:center;gap:12px;margin:0 17px 14px;padding:12px 16px;border:1px solid #cfe1c4;border-left:4px solid #2f7d32;border-radius:0;background:#f1f7ee;color:#1f3d1c;font-size:15px;line-height:1.45} #onlybaie-perspective #volet-parcours .vr-ajout-suivant>span{flex:none;display:grid;place-items:center;width:24px;height:24px;background:#2f7d32;color:#fff;font-weight:700} #onlybaie-perspective #volet-parcours .vr-ajout-suivant>p{flex:1;margin:0;font-weight:600} #onlybaie-perspective #volet-parcours .vr-ajout-suivant>a{flex:none;color:#111;font-weight:700;text-decoration:underline;text-underline-offset:3px} @media(max-width:700px){#onlybaie-perspective #volet-parcours .vr-ajout-suivant{flex-wrap:wrap;margin:0 12px 12px;font-size:14px}#onlybaie-perspective #volet-parcours .vr-ajout-suivant>p{flex:1 1 calc(100% - 36px)}#onlybaie-perspective #volet-parcours .vr-ajout-suivant>a{margin-left:36px}} /* Lisibilité desktop : +2 px sur les petits textes, sans zoom du configurateur. Aucun changement de grille, d’illustration, de prix ou de parcours mobile. */ @media (min-width:901px) { #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-options-body, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-res-content { font-size:15px!important; } #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-section h2 { font-size:17px!important; } #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-desc, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-choice-title, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-pose-reference, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-measure-link, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-profile-context, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-field, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-field label, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-dim-guide, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-dim-guide button, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-detail, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-detail-body h3, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-quantity, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-cart, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-validation, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-validation button { font-size:14px!important; } #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-choice-desc, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-zoom, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-bounds, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-modifier, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-recap-link small, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-detail-body .cs-summary-row, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-demo-label, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-price small { font-size:13px!important; } #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-recap-link strong { font-size:14px!important; } #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-input input { font-size:18px!important; } #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-band { font-size:14px!important; line-height:18px; } #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-band small { font-size:13px!important; line-height:18px; } #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-scene-nav :is(.cs-prev,.cs-next) { font-size:14px!important; line-height:18px; } #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-view-choice button, #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-drawing-note { font-size:13px!important; line-height:16.5px; } #onlybaie-perspective #volet-parcours .vr-poses .cs-choice-title, #onlybaie-perspective #volet-parcours .vr-poses .cs-choice-desc, #onlybaie-perspective #volet-parcours .vr-poses .cs-zoom, #onlybaie-perspective #volet-parcours .vr-muted, #onlybaie-perspective #volet-parcours .vr-field small, #onlybaie-perspective #volet-parcours .vr-error, #onlybaie-perspective #volet-parcours .vr-number>span, #onlybaie-perspective #volet-parcours .vr-swatch strong, #onlybaie-perspective #volet-parcours .vr-palette p, #onlybaie-perspective #volet-parcours .vr-accessory small, #onlybaie-perspective #volet-parcours .vr-accessory .vr-option-quantity, #onlybaie-perspective #volet-parcours .vr-next-shutter { font-size:13px!important; } #onlybaie-perspective #volet-parcours .vr-field, #onlybaie-perspective #volet-parcours .vr-fab, #onlybaie-perspective #volet-parcours .cs-included>span, #onlybaie-perspective #volet-parcours .vr-palette summary, #onlybaie-perspective #volet-parcours .vr-accessory strong, #onlybaie-perspective #volet-parcours .vr-detail-button { font-size:14px!important; } #onlybaie-perspective #volet-parcours .vr-swatch small { font-size:12px!important; } #onlybaie-perspective #volet-parcours .vr-field input { font-size:18px!important; } #onlybaie-perspective #volet-parcours .vr-option-quantity input, #onlybaie-perspective #volet-parcours .cs-quantity input { font-size:16px!important; } #onlybaie-perspective #volet-parcours .vr-view-label, #onlybaie-perspective #volet-parcours .vr-opening label { font-size:13px!important; line-height:16.5px; } #onlybaie-perspective #alu-parcours .oa-options-body, #onlybaie-perspective #alu-parcours .oa-summary-body { font-size:15px!important; } #onlybaie-perspective #alu-parcours .oa-options-body h2 { font-size:18px!important; } #onlybaie-perspective #alu-parcours .oa-options-body p, #onlybaie-perspective #alu-parcours .oa-card, #onlybaie-perspective #alu-parcours .oa-color-group, #onlybaie-perspective #alu-parcours .oa-field, #onlybaie-perspective #alu-parcours .oa-range, #onlybaie-perspective #alu-parcours .oa-choice-title, #onlybaie-perspective #alu-parcours .oa-included, #onlybaie-perspective #alu-parcours .oa-quantity, #onlybaie-perspective #alu-parcours .oa-recap-link strong, #onlybaie-perspective #alu-parcours .oa-add, #onlybaie-perspective #alu-parcours .oa-status { font-size:14px!important; } #onlybaie-perspective #alu-parcours .oa-color-card, #onlybaie-perspective #alu-parcours .oa-choice-desc, #onlybaie-perspective #alu-parcours .oa-tag, #onlybaie-perspective #alu-parcours .oa-option-zoom, #onlybaie-perspective #alu-parcours .oa-field small, #onlybaie-perspective #alu-parcours .oa-range small, #onlybaie-perspective #alu-parcours .oa-recap-link small, #onlybaie-perspective #alu-parcours .oa-modifier, #onlybaie-perspective #alu-parcours .oa-order-bottom>small { font-size:13px!important; } #onlybaie-perspective #alu-parcours .oa-color-card small { font-size:12px!important; } #onlybaie-perspective #alu-parcours .oa-field input, #onlybaie-perspective #alu-parcours .oa-quantity input { font-size:18px!important; } #onlybaie-perspective #alu-parcours .oa-panel>.ob-config-band { font-size:14px!important; line-height:17px; } #onlybaie-perspective #alu-parcours .oa-scene-nav :is(.oa-prev,.oa-next) { font-size:14px!important; line-height:18px; } #onlybaie-perspective #alu-parcours .oa-views button, #onlybaie-perspective #alu-parcours .oa-view-caption, #onlybaie-perspective #alu-parcours .oa-note { font-size:13px!important; line-height:16.5px; } #onlybaie-perspective #alu-parcours :is(.oa-view-caption,.oa-note) { line-height:18.15px; } #onlybaie-perspective :is(#pvc-parcours,#volet-parcours,#alu-parcours) .ob-steps { --ob-step-font:14px; } } @media (min-width:1051px) { #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.56rem;"] { font-size:calc(0.56rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.58rem;"] { font-size:calc(0.58rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.6rem;"] { font-size:calc(0.6rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.62rem;"] { font-size:calc(0.62rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.64rem;"] { font-size:calc(0.64rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.65rem;"] { font-size:calc(0.65rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.66rem;"] { font-size:calc(0.66rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.67rem;"] { font-size:calc(0.67rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.68rem;"] { font-size:calc(0.68rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.7rem;"] { font-size:calc(0.7rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.71rem;"] { font-size:calc(0.71rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.72rem;"] { font-size:calc(0.72rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.73rem;"] { font-size:calc(0.73rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.74rem;"] { font-size:calc(0.74rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.75rem;"] { font-size:calc(0.75rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 12px;"] { font-size:calc(12px + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.76rem;"] { font-size:calc(0.76rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.78rem;"] { font-size:calc(0.78rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.8rem;"] { font-size:calc(0.8rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 13px;"] { font-size:calc(13px + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.82rem;"] { font-size:calc(0.82rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.83rem;"] { font-size:calc(0.83rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.84rem;"] { font-size:calc(0.84rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.85rem;"] { font-size:calc(0.85rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 14px;"] { font-size:calc(14px + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.88rem;"] { font-size:calc(0.88rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.9rem;"] { font-size:calc(0.9rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.92rem;"] { font-size:calc(0.92rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 0.95rem;"] { font-size:calc(0.95rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 16px;"] { font-size:calc(16px + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 1.05rem;"] { font-size:calc(1.05rem + 2px)!important; } #onlybaie-perspective #garage-mount :is(.pg-etapes,.pg-resume) [style*="font-size: 1.2rem;"] { font-size:calc(1.2rem + 2px)!important; } #onlybaie-perspective #garage-mount .pg-panneau input[type=number], #onlybaie-perspective #garage-mount .pg-panneau input[type=text] { font-size:18px!important; } #onlybaie-perspective #garage-mount .ob-config-band { font-size:15.6px!important; line-height:20.4px; } #onlybaie-perspective #garage-mount .pg-centre .pg-chev { font-size:14.48px!important; line-height:18.72px; } #onlybaie-perspective #garage-mount .pg-centre button[title="Repartir d’une configuration vierge"], #onlybaie-perspective #garage-mount .pg-centre button[title="Repartir d'une configuration vierge"] { font-size:13.84px!important; line-height:17.76px; } #onlybaie-perspective #garage-mount .ob-steps { --ob-step-font:14px; } } /* Conserver la rangée de commandes garage sur les petits ordinateurs. */ @media (min-width:1051px) and (max-width:1150px) { #onlybaie-perspective #garage-mount .pg-centre .pg-chev { padding-left:12.5px!important; padding-right:12.5px!important; } #onlybaie-perspective #garage-mount .pg-centre .pg-chev:first-child { padding-left:23.5px!important; } #onlybaie-perspective #garage-mount .pg-centre .pg-chev:last-child { padding-right:23.5px!important; } #onlybaie-perspective #garage-mount .pg-centre button[title="Repartir d'une configuration vierge"] { padding-left:7px!important; padding-right:7px!important; } } @media (min-width:1051px) { /* Les intitulés longs des cartes étroites restent intégralement lisibles. */ #onlybaie-perspective #garage-mount .pg-panneau button[title] > span { min-width:0; overflow-wrap:anywhere; hyphens:auto; } } /* Cartes de choix (gérant, 25/09/2026) : dans une rangée, chaque élément se place sur la même ligne que chez ses voisines — illustration, nom, description, mention (« Profil droit uniquement »), loupe. Un nom sur une, deux ou trois lignes ne décale plus « Intérieur blanc » ni la mention qui suit, et une carte sans illustration (« Sans grille ») garde son nom à la hauteur des autres. Le bouton radio suit la première ligne du nom. */ #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-choice{--cs-ecart:7px} #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) :is(.cs-pose-directe,.vr-poses) .cs-choice{--cs-ecart:5px} @supports (grid-template-rows:subgrid) { #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-cards>.cs-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0} #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-cards>.cs-card>.cs-choice{display:grid;grid-row:1/span 4;grid-template-rows:subgrid;row-gap:0;height:auto;align-content:start} #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-cards>.cs-card>.cs-choice>:not(.cs-choice-title,.cs-choice-desc,.cs-tag){grid-row:1} #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-cards>.cs-card>.cs-choice>.cs-choice-title{grid-row:2;align-self:start;align-items:flex-start} #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-cards:has(.cs-choice>:first-child:not(.cs-choice-title))>.cs-card>.cs-choice>.cs-choice-title{padding-top:var(--cs-ecart)} #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-cards>.cs-card>.cs-choice>.cs-choice-desc{grid-row:3;align-self:start;padding-top:var(--cs-ecart)} #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-cards>.cs-card>.cs-choice>.cs-tag{grid-row:4;align-self:start;padding-top:var(--cs-ecart)} #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-cards>.cs-card>.cs-zoom{grid-row:5;align-self:end} #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-cards>.cs-card>.cs-choice .cs-radio{margin-top:calc((1.35em - 12px)/2)} /* Carte sans illustration dans un groupe illustré (« Sans grille ») : un fond clair à la place de l'image. */ #onlybaie-perspective :is(#pvc-parcours,#volet-parcours) .cs-cards:has(.cs-picture)>.cs-card>.cs-choice:not(:has(>.cs-picture))::before{content:"";grid-row:1;background:#f8f9f6;border-radius:3px} /* Pastilles de couleur des volets : nom et référence RAL sur la même ligne d'une pastille à l'autre. */ #onlybaie-perspective #volet-parcours .vr-swatches>.vr-swatch{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start} } /* Volets : RAL au choix pour l'armature (26/09/2026), sous la palette d'armature. Angles droits. */ #volet-parcours .vr-ral-choix{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:14px;padding-top:12px;border-top:1px solid #eee} #volet-parcours .vr-ral-choix label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#222} #volet-parcours .vr-ral-choix input{width:96px;height:40px;padding:8px 10px;font-size:16px;border:1px solid #cfd2d4;border-radius:0;background:#fff;letter-spacing:.08em} #volet-parcours .vr-ral-choix input:focus-visible{outline:2px solid #d81f26;outline-offset:1px} #volet-parcours .vr-ral-teinte{display:inline-block;width:28px;height:28px;border:1px solid #11111126} #volet-parcours .vr-ral-choix small{flex-basis:100%;font-size:11px;color:#6d6d68} /* Nuancier immédiatement visible ; personnalisation de l'armature après le tablier. */ #onlybaie-perspective #volet-parcours .vr-palette-label{font-size:12px;font-weight:700;color:#444;margin:14px 0 10px} #onlybaie-perspective #volet-parcours .vr-palette-visible{margin-top:18px} #onlybaie-perspective #volet-parcours .vr-loupe{display:inline-block;width:19px;height:19px;flex:none;vertical-align:middle} #onlybaie-perspective #volet-parcours .cs-zoom{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px} #onlybaie-perspective #volet-parcours .cs-enlarge{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px} #onlybaie-perspective #volet-parcours dialog .cs-dialog-close{min-width:72px;min-height:44px;cursor:pointer} #onlybaie-perspective #volet-parcours .vr-dialog-svg{width:min(1100px,94vw);max-height:92vh;max-height:92dvh} #onlybaie-perspective #volet-parcours .vr-dialog-svg .cs-dialog-content{padding:8px;display:flex;justify-content:center} #onlybaie-perspective #volet-parcours .vr-dialog-svg .cs-dialog-content>svg{width:100%;height:auto!important;max-height:70vh;max-height:70dvh;object-fit:contain} #onlybaie-perspective #volet-parcours dialog .cs-dialog-content>img{width:auto;height:auto;max-width:100%;max-height:70vh;max-height:70dvh;object-fit:contain;margin:auto} /* Le conteneur de défilement commun imposait position:relative tout en conservant le top du panneau collant : cela décalait les options de la hauteur du header. */ @media (min-width:901px) { #onlybaie-perspective #volet-parcours .cs-grid>.cs-panel{position:sticky;top:calc(var(--op-sticky-offset,144px) + 12px)} } /* Tablier seul (26/09/2026) : sous-titre des teintes, schémas de mesure, présentation en onglets. Angles droits. */ #volet-parcours[data-parcours="tablier"] .tb-sous-titre{margin:16px 0 8px;font-size:13px;font-weight:600;color:#222} #volet-parcours[data-parcours="tablier"] .tb-schema svg{display:block;margin:0 auto;max-width:100%;height:auto} #volet-parcours[data-parcours="tablier"] .tb-hauteur{align-items:center;gap:14px;margin:12px 0} #volet-parcours[data-parcours="tablier"] .tb-hauteur .tb-schema{flex:none;width:120px} #volet-parcours[data-parcours="tablier"] .vr-field em{font-style:normal;font-weight:400;color:#6d6d68} .tablier-presentation .tb-points{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .tablier-presentation .tb-points li{border:1px solid #e3e4e1;padding:14px 16px;background:#fff;line-height:1.55} .tablier-presentation .tb-points strong{display:block;margin-bottom:4px;color:#111} .tablier-presentation .tb-lames{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px} .tablier-presentation .tb-lames caption{text-align:left;font-weight:600;margin-bottom:8px} .tablier-presentation .tb-lames th,.tablier-presentation .tb-lames td{border-bottom:1px solid #e3e4e1;padding:9px 10px;text-align:left} .tablier-presentation .tb-etapes{padding-left:20px;margin:14px 0;line-height:1.6} .tablier-presentation .tb-etapes li{margin-bottom:10px} .tablier-presentation .tb-etapes strong{display:block;color:#111} /* Tablier seul : présentation d'une seule page dans le style des volets (27/09/2026). */ #volet-description-produit .tablier-presentation .tb-nuancier{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 16px} #volet-description-produit .tablier-presentation .tb-nuancier li{display:flex;align-items:center;gap:10px;font-size:14px;color:#333} #volet-description-produit .tablier-presentation .tb-nuancier span{width:34px;height:34px;flex:none;border:1px solid #d8d8d4} #volet-description-produit .vd-box-photos.tb-trois{grid-template-columns:repeat(3,minmax(0,1fr))} #volet-description-produit .vd-closing .tb-closing-link{flex-shrink:0} #volet-description-produit .vd-closing .tb-closing-link a{display:inline-block;background:#d81f26;color:#fff;border:0;border-radius:9px;padding:18px 26px;font-size:17px;font-weight:750;text-decoration:none} @media(max-width:700px){#volet-description-produit .vd-box-photos.tb-trois{grid-template-columns:1fr}} /* Bandeaux communs aux options, au visuel et au résumé des configurateurs. Le !important remplace uniquement les anciens fonds noirs inline des garages. */ #pvc-parcours .cs-band, #vr-mount .cs-band, .ob-config-band { background: linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 4%) 34%, transparent 35%), linear-gradient(180deg, #45494f 0%, #292c31 55%, #16181c 100%) !important; color: #fff !important; border-radius: 8px 8px 0 0 !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), inset 0 -1px 0 rgb(0 0 0 / 45%) !important; text-shadow: 0 1px 2px rgb(0 0 0 / 50%) !important; } /* L’aluminium reprend les mêmes repères sans changer ses options ni son ordre mobile. */ #alu-parcours .ob-config-band { padding: 10px 16px; font-size: 12px; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: .2px; text-align: left; } #alu-parcours .oa-options > .ob-config-band { margin: 0 0 16px; } #alu-parcours .oa-preview > .ob-config-band { margin: -18px -18px 14px; } #alu-parcours .oa-summary > .ob-config-band { margin: -20px -20px 16px; } /* Carrousel de l'accueil, sous le film : bannières de boutique. Un panneau de couleur coupé en biais, un slogan en capitales, une grande image où les produits se voient en entier. Angles droits, pas d'ombre (choix du gérant). --biais : largeur de la coupe. */ #onlybaie-perspective .ob-carrousel-section{padding-block:28px 0} /* Titre principal de la page, sur la section des familles, au gabarit des titres de section */ #onlybaie-perspective #op-familles .op-section-head h1{margin:0;max-width:760px;font-size:clamp(34px,3.2vw,56px);line-height:1.12;letter-spacing:-.035em} #onlybaie-perspective #op-familles .op-section-head p{max-width:360px} #onlybaie-perspective .ob-carrousel{--biais:56px;--joint:6px;position:relative;background:#fff} #onlybaie-perspective .ob-carrousel-piste{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none} #onlybaie-perspective .ob-carrousel-piste::-webkit-scrollbar{display:none} /* Hauteur de la bannière : elle suit la largeur de l'écran. En 460 px fixes, une très large fenêtre coupait le bas de la maison — et donc la porte de garage (gérant, 20/09/2026). */ #onlybaie-perspective .ob-carrousel{--ob-ban-h:clamp(460px,29vw,640px);max-width:2100px;margin-inline:auto} #onlybaie-perspective .ob-ban{position:relative;flex:0 0 100%;min-width:0;display:flex;height:var(--ob-ban-h);overflow:hidden;background:#fff;scroll-snap-align:start;scroll-snap-stop:always} /* Panneau du slogan */ #onlybaie-perspective .ob-ban-panneau{position:relative;z-index:2;flex:0 0 41%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:36px calc(var(--biais) + 28px) 36px clamp(34px,4.4vw,72px);clip-path:polygon(0 0,100% 0,calc(100% - var(--biais)) 100%,0 100%);background:var(--op-red);color:#fff} /* Livraison : panneau clair, le rouge ne sert qu'à l'étiquette (le gérant trouvait le rouge plein trop violent) */ #onlybaie-perspective .ob-ban-livraison,#onlybaie-perspective .ob-ban-garantie{background:#fff} #onlybaie-perspective :is(.ob-ban-livraison,.ob-ban-garantie) .ob-ban-panneau{flex-basis:36%;padding-right:12px;clip-path:none;background:none;color:var(--op-ink)} #onlybaie-perspective :is(.ob-ban-livraison,.ob-ban-garantie) .ob-ban-photo{position:absolute;inset:0 0 0 31%;margin:0;clip-path:none} #onlybaie-perspective .ob-ban-livraison .ob-ban-panneau{flex-basis:41%} #onlybaie-perspective .ob-ban-livraison .ob-ban-photo{left:36%} #onlybaie-perspective .ob-ban-garantie .ob-ban-photo img{object-position:50% 12%} #onlybaie-perspective :is(.ob-ban-livraison,.ob-ban-garantie) .ob-ban-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0,#ffffffd9 3%,#fff0 13%)} #onlybaie-perspective :is(.ob-ban-livraison,.ob-ban-garantie) .ob-ban-panneau p{color:#3b3d38} #onlybaie-perspective .ob-ban-livraison .ob-ban-etiquette{background:var(--op-red);color:#fff} #onlybaie-perspective .ob-ban-panneau h2 a{display:block;color:inherit} #onlybaie-perspective .ob-ban-garantie .ob-ban-panneau h2{font-size:clamp(34px,3.5vw,52px)} #onlybaie-perspective .ob-ban-garantie .ob-ban-panneau h2 em{white-space:nowrap} #onlybaie-perspective .ob-ban-panneau h2{margin:0;font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:clamp(38px,4.3vw,64px);line-height:.98;letter-spacing:-.035em;text-transform:uppercase} #onlybaie-perspective .ob-ban-panneau h2 em{display:block;font-style:normal;color:var(--op-red)} #onlybaie-perspective .ob-ban-etiquette{display:table;margin-top:14px;padding:7px 12px 8px;background:#fff;color:var(--op-red);font-size:.5em;line-height:1;letter-spacing:-.01em} #onlybaie-perspective .ob-ban-repere{margin-bottom:16px;padding:6px 10px;background:var(--op-ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} #onlybaie-perspective .ob-ban-garantie .ob-ban-repere{background:var(--op-red)} #onlybaie-perspective .ob-ban-panneau p{margin:18px 0 0;max-width:40ch;font-size:15px;line-height:1.55;color:#fff} #onlybaie-perspective .ob-ban-panneau .ob-ban-mention{margin-top:14px;font-size:12px;color:#6b6e63} /* Configurateur en ligne et prix immédiat : en grand, texte noir et coche rouge, sans aplat. Le gérant a refusé les pavés noirs, sur ordinateur puis sur téléphone (19/09/2026). */ #onlybaie-perspective .ob-ban-points{display:grid;gap:12px;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--op-line);list-style:none;width:100%;max-width:400px} #onlybaie-perspective .ob-ban-points li{display:flex;align-items:center;gap:14px} #onlybaie-perspective .ob-ban-points li:before{content:"";flex:none;width:34px;height:34px;background:var(--op-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") center/34px no-repeat} #onlybaie-perspective .ob-ban-points strong{display:block;font-family:Manrope,Arial,sans-serif;font-size:clamp(19px,1.75vw,25px);font-weight:800;line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:var(--op-ink)} #onlybaie-perspective .ob-ban-points span{display:block;margin-top:3px;font-size:13px;line-height:1.3;color:#5b5e55} #onlybaie-perspective .ob-ban-livraison .ob-ban-texte{max-width:none;margin-top:14px;font-size:14px} #onlybaie-perspective .ob-ban-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px} #onlybaie-perspective .ob-ban-bouton{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-height:52px;padding:14px 22px;border:1px solid #fff;background:#fff;color:var(--op-red);font-size:13px;font-weight:700;transition:background .2s,color .2s} #onlybaie-perspective .ob-ban-bouton:hover{background:var(--op-ink);border-color:var(--op-ink);color:#fff} /* Bannière « photo » : garantie (panneau en biais + photo) et pose (photo plein cadre) */ #onlybaie-perspective .ob-ban-photo{position:relative;flex:1;min-width:0;display:block;margin-left:calc(var(--joint) - var(--biais));clip-path:polygon(var(--biais) 0,100% 0,100% 100%,0 100%);background:var(--op-paper)} #onlybaie-perspective .ob-ban-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%} /* La maison est cadrée par le bas : le pied de la porte de garage reste visible, c'est le ciel qui est rogné quand la bannière devient plus large que haute (gérant, 20/09/2026). */ #onlybaie-perspective .ob-ban-livraison .ob-ban-photo img{object-position:50% 100%} #onlybaie-perspective .ob-ban-pose .ob-ban-photo{position:absolute;inset:0;margin:0;clip-path:none} #onlybaie-perspective .ob-ban-pose .ob-ban-photo img{object-position:100% 38%} #onlybaie-perspective .ob-ban-pose .ob-ban-panneau{flex-basis:50%;clip-path:none;background:none;color:var(--op-ink)} #onlybaie-perspective .ob-ban-pose .ob-ban-panneau p{color:#3b3d38} #onlybaie-perspective .ob-ban-pose .ob-ban-avec{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:15px;font-weight:600} #onlybaie-perspective .ob-ban-avec img{display:block;width:auto;height:34px;max-width:none} #onlybaie-perspective :is(.ob-ban-pose,.ob-ban-garantie) .ob-ban-bouton{border-color:var(--op-red);background:var(--op-red);color:#fff} #onlybaie-perspective :is(.ob-ban-pose,.ob-ban-garantie) .ob-ban-bouton:hover{border-color:var(--op-ink);background:var(--op-ink)} /* Commandes : flèches carrées sur les bords, traits sous la bannière */ #onlybaie-perspective .ob-carrousel-fleche{position:absolute;z-index:3;top:calc(var(--ob-ban-h) - 44px);width:44px;height:44px;padding:0;border:0;background:#fff;color:var(--op-ink);font:600 18px/1 Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s} #onlybaie-perspective .ob-carrousel-precedent{right:45px} #onlybaie-perspective .ob-carrousel-suivant{right:0} #onlybaie-perspective .ob-carrousel-fleche:hover{background:var(--op-ink);color:#fff} #onlybaie-perspective .ob-carrousel-points{display:flex;justify-content:center;gap:6px;padding-top:6px} #onlybaie-perspective .ob-carrousel-points button{display:grid;place-items:center;width:48px;height:32px;padding:0;border:0;background:none;cursor:pointer} #onlybaie-perspective .ob-carrousel-points button span{display:block;width:36px;height:3px;background:#cfd0c8;transition:background .2s} #onlybaie-perspective .ob-carrousel-points button[aria-current="true"] span{background:var(--op-red)} #onlybaie-perspective .ob-carrousel-points button:not([aria-current="true"]):hover span{background:#8d8f86} #onlybaie-perspective .ob-carrousel button:focus-visible,#onlybaie-perspective .ob-carrousel a:focus-visible{outline:2px solid var(--op-ink);outline-offset:2px} @media(prefers-reduced-motion:reduce){ #onlybaie-perspective .ob-carrousel-piste{scroll-behavior:auto} } @media(max-width:1150px){ #onlybaie-perspective .ob-carrousel{--biais:40px} #onlybaie-perspective .ob-carrousel{--ob-ban-h:420px} #onlybaie-perspective .ob-ban-panneau{flex-basis:46%;padding-left:30px} } @media(max-width:800px){ /* Carrousel compact : photo basse, textes longs masqués, les produits arrivent vite sous le doigt */ #onlybaie-perspective .ob-carrousel-section{padding-block:12px 0} #onlybaie-perspective .ob-ban{flex-direction:column;height:auto} #onlybaie-perspective .ob-ban .ob-ban-photo{order:-1;position:relative;inset:auto;flex:0 0 176px;width:100%;margin:0;clip-path:none} #onlybaie-perspective .ob-ban-livraison .ob-ban-photo img{object-position:50% 0} #onlybaie-perspective .ob-ban-pose .ob-ban-photo img{object-position:50% 30%} #onlybaie-perspective .ob-ban-garantie .ob-ban-photo img{object-position:50% 50%} /* Téléphone : photo nette et coupe franche, comme la bannière du poseur. Le gérant n'aime plus le fondu vers le blanc sous la photo (19/09/2026). L'ordinateur garde son dégradé latéral. */ #onlybaie-perspective :is(.ob-ban-livraison,.ob-ban-garantie) .ob-ban-photo:after{display:none} #onlybaie-perspective .ob-ban .ob-ban-panneau{flex:1 1 auto;justify-content:flex-start;clip-path:none;margin-top:0;padding:10px 16px 14px;background:#fff} #onlybaie-perspective .ob-ban-repere,#onlybaie-perspective :is(.ob-ban-pose,.ob-ban-garantie) .ob-ban-texte{display:none} #onlybaie-perspective .ob-ban-panneau h2,#onlybaie-perspective .ob-ban-garantie .ob-ban-panneau h2{font-size:27px} #onlybaie-perspective .ob-ban-etiquette{margin-top:8px;padding:5px 9px 6px} #onlybaie-perspective .ob-ban-panneau .ob-ban-texte{margin-top:8px;font-size:12px} #onlybaie-perspective .ob-ban-panneau .ob-ban-mention{margin-top:8px} #onlybaie-perspective .ob-ban-suite{display:none} #onlybaie-perspective .ob-ban-points{grid-template-columns:1fr 1fr;gap:4px 10px;margin-top:12px;padding-top:10px;max-width:none} #onlybaie-perspective .ob-ban-livraison .ob-ban-photo{left:auto} #onlybaie-perspective .ob-ban-points li{gap:8px} #onlybaie-perspective .ob-ban-points li:before{width:24px;height:24px;background-size:24px} #onlybaie-perspective .ob-ban-points strong{font-size:14px;line-height:1.15} #onlybaie-perspective .ob-ban-points span{display:none} #onlybaie-perspective .ob-ban-pose .ob-ban-avec{margin-top:8px} #onlybaie-perspective .ob-ban-avec img{height:26px} #onlybaie-perspective .ob-ban-actions{width:100%;margin-top:10px} #onlybaie-perspective .ob-ban-bouton{flex:1 1 100%;min-height:46px;padding:10px 18px} #onlybaie-perspective .ob-carrousel-points{padding-top:2px} #onlybaie-perspective .ob-carrousel-points button{height:26px} #onlybaie-perspective .ob-carrousel-fleche{display:none} /* Le titre et les familles remontent */ #onlybaie-perspective #op-familles{padding-top:18px} #onlybaie-perspective #op-familles .op-section-head{margin:10px 0 16px} #onlybaie-perspective #op-familles .op-section-head h1{font-size:26px} #onlybaie-perspective #op-familles .op-section-head p{font-size:12px;line-height:1.5} } .ob-promesses { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; box-sizing: border-box; margin: 16px 0; padding: 6px 0; list-style: none; border-block: 1px solid #e5e5e5; background: #fff; color: #111; font-family: inherit; text-align: left; } .ob-promesses > li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 16px; box-sizing: border-box; } .ob-promesses > li + li { border-left: 1px solid #e5e5e5; } .ob-promesses .ob-promesses-icone { display: block; flex: 0 0 22px; width: 22px; height: 22px; color: #d81f26; background-position: center; background-size: contain; background-repeat: no-repeat; } .ob-promesses .ob-promesses-icone-configuration { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d81f26' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 17h16'/%3E%3Ccircle cx='9' cy='7' r='2.5' fill='white'/%3E%3Ccircle cx='15' cy='17' r='2.5' fill='white'/%3E%3C/svg%3E"); } .ob-promesses .ob-promesses-icone-prix { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d81f26' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 5a7 7 0 1 0 0 14M4 10h10M4 14h9'/%3E%3C/svg%3E"); } .ob-promesses .ob-promesses-icone-livraison { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d81f26' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h11v12H3zM14 9h4l3 4v4h-7M17 9v4h4'/%3E%3Ccircle cx='7' cy='18' r='2' fill='white'/%3E%3Ccircle cx='18' cy='18' r='2' fill='white'/%3E%3C/svg%3E"); } .ob-promesses .ob-promesses-texte { display: block; min-width: 0; overflow-wrap: anywhere; } .ob-promesses .ob-promesses-texte > strong { display: block; font-size: 12px; font-weight: 700; line-height: 15px; } .ob-promesses .ob-promesses-texte > span { display: block; margin-top: 2px; color: #626262; font-size: 11px; line-height: 14px; } .ob-promesses a { color: inherit; text-decoration: underline; text-decoration-color: #b8b8b8; text-underline-offset: 3px; text-decoration-thickness: 1px; } .ob-promesses a:hover { color: #d81f26; text-decoration-color: currentColor; } .ob-promesses a:focus-visible { outline: 2px solid #d81f26; outline-offset: 3px; border-radius: 2px; } .ob-promesses .ob-promesses-drapeau { display: block; flex: 0 0 22px; width: 22px; height: 15px; border-radius: 2px; box-shadow: inset 0 0 0 1px #11111114; background: linear-gradient(90deg, #153b86 0 33.333%, #fff 33.333% 66.666%, #d81f26 66.666% 100%); } .ob-promesses-accueil { margin: 0; } @media (min-width: 768px) and (max-width: 1023px) { .ob-promesses > li { gap: 8px; padding-inline: 8px; } .ob-promesses .ob-promesses-icone { flex-basis: 18px; width: 18px; height: 18px; } .ob-promesses .ob-promesses-drapeau { flex-basis: 18px; width: 18px; height: 13px; } } @media (max-width: 767px) { .ob-promesses { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; padding: 6px 0; row-gap: 8px; } .ob-promesses > li { gap: 7px; padding: 3px 9px; } .ob-promesses > li + li { border-left: 0; } .ob-promesses > li:nth-child(even) { border-left: 1px solid #e5e5e5; } .ob-promesses .ob-promesses-icone { flex-basis: 18px; width: 18px; height: 18px; } .ob-promesses .ob-promesses-drapeau { flex-basis: 18px; width: 18px; height: 13px; } .ob-promesses .ob-promesses-texte > strong { font-size: 11.5px; } .ob-promesses .ob-promesses-texte > span { font-size: 10.5px; line-height: 13px; } } @media (max-width: 359px) { .ob-promesses > li { gap: 5px; padding: 2px 4px; } .ob-promesses .ob-promesses-icone { flex-basis: 16px; width: 16px; height: 16px; } .ob-promesses .ob-promesses-drapeau { flex-basis: 16px; width: 16px; height: 12px; } .ob-promesses .ob-promesses-texte > strong { font-size: 11px; line-height: 14px; } } .ob-promesses .ob-promesses-garantie { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #d81f26; box-shadow: inset 0 0 0 2px #d81f26, inset 0 0 0 3px #fff; color: #fff; font: 800 12px/1 Manrope, 'DM Sans', sans-serif; letter-spacing: -.03em; } .ob-promesses .ob-promesses-garantie small { display: block; margin-top: -3px; font-size: 6.5px; letter-spacing: .08em; text-transform: uppercase; } .ob-promesses > li:has(.ob-promesses-garantie) strong { color: #b21f26; } @media (max-width: 767px) { .ob-promesses .ob-promesses-garantie { flex-basis: 26px; width: 26px; height: 26px; font-size: 11px; } } /* GARANTIES — bandeau de fiche et onglet « Garanties » (toutes familles). */ :is(#portail-description-produit, body) .ob-gar-sceau { display: block; width: auto; height: auto; flex-shrink: 0; filter: drop-shadow(0 8px 18px #d81f2633); } /* Taille du sceau fixée ici pour toutes les pages (18/09/2026) : sans elle, `width: auto` l'étalait sur toute la largeur de l'onglet dans le configurateur enroulable, et le texte se retrouvait dans une colonne d'une lettre. Les formats téléphone plus bas gardent la main. */ :is(#portail-description-produit, body) .ob-gar-tete .ob-gar-sceau { width: 150px; height: 150px; } :is(#portail-description-produit, body) .ob-gar-bandeau .ob-gar-sceau { width: 96px; height: 96px; } :is(#portail-description-produit, body) .ob-gar-tete > div { flex: 1 1 auto; min-width: 0; } :is(#portail-description-produit, body) .ob-gar-kicker { margin: 0 0 6px; color: #b21f26; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } :is(#portail-description-produit, body) .ob-gar-bandeau { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 28px; margin: 36px 0 0; padding: 22px 30px 22px 22px; border-radius: 20px; background: radial-gradient(120% 160% at 0% 50%, #2a1416 0%, #111 55%); color: #fff; overflow: hidden; } :is(#portail-description-produit, body) .ob-gar-bandeau .ob-gar-kicker { color: #ff8a8f; } :is(#portail-description-produit, body) .ob-gar-bandeau-texte strong { display: block; font: 800 clamp(22px, 2.2vw, 30px)/1.15 Manrope, 'DM Sans', sans-serif; letter-spacing: -.035em; color: #fff; } :is(#portail-description-produit, body) .ob-gar-bandeau-texte > span { display: block; margin-top: 6px; color: #c9cccf; font-size: 14px; line-height: 1.5; } :is(#portail-description-produit, body) .ob-gar-bandeau-labels { display: flex; gap: 10px; } :is(#portail-description-produit, body) .ob-gar-bandeau-labels img, :is(#portail-description-produit, body) .ob-gar-labels img { display: block; max-width: none; width: 92px; height: 43px; padding: 7px 10px; border-radius: 10px; background: #fff; object-fit: contain; } :is(#portail-description-produit, body) .ob-gar-lien { color: #fff; font-size: 14px; font-weight: 750; white-space: nowrap; text-decoration: none; border-bottom: 1px solid #ffffff66; padding: 4px 0; } :is(#portail-description-produit, body) .ob-gar-lien:hover { border-color: #fff; } :is(#portail-description-produit, body) .ob-gar { display: grid; gap: 48px; } :is(#portail-description-produit, body) .ob-gar h3, :is(#portail-description-produit, body) .ob-gar h4 { margin: 0; font-family: Manrope, 'DM Sans', sans-serif; color: #191d20; } :is(#portail-description-produit, body) .ob-gar p { margin: 0; } :is(#portail-description-produit, body) .ob-gar-tete { display: flex; align-items: center; gap: 40px; } :is(#portail-description-produit, body) .ob-gar-tete h3 { font-size: clamp(28px, 2.6vw, 42px); font-weight: 800; line-height: 1.15; letter-spacing: -.04em; } :is(#portail-description-produit, body) .ob-gar-tete h3 + p { margin-top: 14px; max-width: 640px; color: #596067; font-size: 17px; } :is(#portail-description-produit, body) .ob-gar-durees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; } :is(#portail-description-produit, body) .ob-gar-durees li { position: relative; padding: 26px 26px 28px; border: 1px solid #e2e4e4; border-radius: 18px; background: #fff; } :is(#portail-description-produit, body) .ob-gar-durees li:first-child { border-color: #111; background: #111; } :is(#portail-description-produit, body) .ob-gar-durees li:first-child :is(h4, :is(#portail-description-produit, body) strong) { color: #fff; } :is(#portail-description-produit, body) .ob-gar-durees li:first-child p { color: #c9cccf; } :is(#portail-description-produit, body) .ob-gar-durees strong { display: block; color: #191d20; font: 800 18px/1 Manrope, 'DM Sans', sans-serif; } :is(#portail-description-produit, body) .ob-gar-durees strong span { font-size: 64px; letter-spacing: -.06em; color: #d81f26; } :is(#portail-description-produit, body) .ob-gar-durees h4 { margin-top: 18px; font-size: 20px; letter-spacing: -.02em; } :is(#portail-description-produit, body) .ob-gar-durees p { margin-top: 8px; color: #596067; font-size: 15px; line-height: 1.6; } :is(#portail-description-produit, body) .ob-gar-labels { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; padding: 32px; border-radius: 18px; background: #f5f5f2; } :is(#portail-description-produit, body) .ob-gar-labels h4 { font-size: 24px; letter-spacing: -.03em; } :is(#portail-description-produit, body) .ob-gar-labels h4 + p { margin-top: 10px; color: #596067; font-size: 16px; } :is(#portail-description-produit, body) .ob-gar-labels ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } :is(#portail-description-produit, body) .ob-gar-labels li { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: center; padding: 14px; border-radius: 14px; background: #fff; } :is(#portail-description-produit, body) .ob-gar-labels li img { grid-row: span 2; padding: 0; } :is(#portail-description-produit, body) .ob-gar-labels li strong { font-size: 16px; color: #191d20; } :is(#portail-description-produit, body) .ob-gar-labels li span { color: #596067; font-size: 14px; line-height: 1.5; } :is(#portail-description-produit, body) .ob-gar-conditions { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } :is(#portail-description-produit, body) .ob-gar-conditions ul { margin: 14px 0 0; padding: 0; list-style: none; } :is(#portail-description-produit, body) .ob-gar-conditions li { position: relative; padding: 7px 0 7px 26px; color: #596067; font-size: 15px; line-height: 1.55; } :is(#portail-description-produit, body) .ob-gar-conditions section li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 12px; height: 7px; border: solid #d81f26; border-width: 0 0 2px 2px; transform: rotate(-45deg); } :is(#portail-description-produit, body) .ob-gar-conditions details li::before { content: "–"; position: absolute; left: 6px; color: #9aa0a4; } :is(#portail-description-produit, body) .ob-gar-conditions h4, :is(#portail-description-produit, body) .ob-gar-conditions summary { font-size: 20px; font-weight: 750; letter-spacing: -.02em; } :is(#portail-description-produit, body) .ob-gar-conditions details { align-self: start; border-top: 1px solid #e2e4e4; border-bottom: 1px solid #e2e4e4; padding: 16px 0; } :is(#portail-description-produit, body) .ob-gar-conditions summary { display: flex; justify-content: space-between; cursor: pointer; list-style: none; font-family: Manrope, 'DM Sans', sans-serif; } :is(#portail-description-produit, body) .ob-gar-conditions summary::-webkit-details-marker { display: none; } :is(#portail-description-produit, body) .ob-gar-conditions details[open] summary span { transform: rotate(45deg); } :is(#portail-description-produit, body) .ob-gar-conditions details > p { margin-top: 12px; color: #596067; font-size: 15px; } :is(#portail-description-produit, body) .ob-gar-legal { color: #697077; font-size: 13px; } @media (max-width: 1050px) { :is(#portail-description-produit, body) .ob-gar-bandeau { grid-template-columns: auto minmax(0, 1fr); row-gap: 16px; } :is(#portail-description-produit, body) .ob-gar-bandeau-labels { grid-column: 2; } :is(#portail-description-produit, body) .ob-gar-lien { grid-column: 2; justify-self: start; } :is(#portail-description-produit, body) .ob-gar-labels, :is(#portail-description-produit, body) .ob-gar-conditions { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 700px) { :is(#portail-description-produit, body) .ob-gar-bandeau { grid-template-columns: 72px minmax(0, 1fr); gap: 14px 16px; padding: 18px; margin-top: 26px; } :is(#portail-description-produit, body) .ob-gar-bandeau .ob-gar-sceau { width: 72px; height: 72px; } :is(#portail-description-produit, body) .ob-gar-bandeau-labels, :is(#portail-description-produit, body) .ob-gar-lien { grid-column: 1 / -1; } :is(#portail-description-produit, body) .ob-gar-bandeau-labels img { width: 80px; height: 38px; } :is(#portail-description-produit, body) .ob-gar { gap: 34px; } :is(#portail-description-produit, body) .ob-gar-tete { flex-direction: column; align-items: flex-start; gap: 20px; } :is(#portail-description-produit, body) .ob-gar-tete .ob-gar-sceau { width: 104px; height: 104px; } :is(#portail-description-produit, body) .ob-gar-durees { grid-template-columns: 1fr; gap: 12px; } :is(#portail-description-produit, body) .ob-gar-durees li { padding: 20px 22px; } :is(#portail-description-produit, body) .ob-gar-durees strong span { font-size: 52px; } :is(#portail-description-produit, body) .ob-gar-labels { padding: 20px; } :is(#portail-description-produit, body) .ob-gar-labels li { grid-template-columns: 76px 1fr; column-gap: 14px; } :is(#portail-description-produit, body) .ob-gar-labels li img { width: 76px; } } :is(#portail-description-produit, body) .ob-gar-conditions-seules { grid-template-columns: 1fr; } :is(#portail-description-produit, body) .ob-gar-conditions-seules ul { columns: 2; column-gap: 40px; } @media (max-width: 700px) { :is(#portail-description-produit, body) .ob-gar-conditions-seules ul { columns: 1; } } html[data-catalogue-route] #op-home{display:none!important} #onlybaie-perspective .op-product-image-link{position:absolute;inset:0} #onlybaie-perspective .op-product-image-link:focus-visible{outline:3px solid #d81f26;outline-offset:-4px} #onlybaie-perspective .op-product-title-link{color:inherit;text-decoration:none} #onlybaie-perspective .op-product-title-link:hover{color:#d81f26} #op-bestsellers[hidden]{display:none!important} #onlybaie-perspective #op-bestsellers{max-width:1480px;margin:auto;padding:0 44px 64px;color:#111;background:#f7f6f2;min-height:65vh} #op-bestsellers *{box-sizing:border-box} #op-bestsellers a{text-decoration:none;color:inherit} #op-bestsellers button,#op-bestsellers select{font:inherit} #op-bestsellers a:focus-visible,#op-bestsellers button:focus-visible,#op-bestsellers select:focus-visible{outline:3px solid #D81F26;outline-offset:4px} #op-bestsellers .obp-crumbs{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;padding:25px 0;color:#696964} #op-bestsellers .obp-crumbs a:hover{text-decoration:underline} #op-bestsellers .obp-heading{padding:16px 0 24px;max-width:860px} #op-bestsellers .obp-kicker{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:700;color:#77766d;margin-bottom:14px} #op-bestsellers h1{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.045em;line-height:1.06;margin:0 0 20px;font-weight:650} #op-bestsellers h2{font-size:28px;line-height:1.2;letter-spacing:-.035em;font-weight:650} #op-bestsellers h3{line-height:1.25;font-weight:650} #op-bestsellers p{font-size:15px;line-height:1.65;color:#686861} #op-bestsellers .obp-heading p{max-width:700px;font-size:17px} #op-bestsellers .obp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} #op-bestsellers .obp-card{min-width:0;background:white;border:1px solid #e5e4dc;border-radius:10px;overflow:hidden;display:flex;flex-direction:column} #op-bestsellers .obp-card-image{display:flex;align-items:center;justify-content:center;background:#f0f0eb;height:230px;padding:22px} #op-bestsellers .obp-card-image img{width:100%;height:100%;object-fit:contain;transition:transform .2s} #op-bestsellers .obp-card-image:hover img{transform:scale(1.035)} #op-bestsellers .obp-card-body{display:flex;flex-direction:column;padding:24px;flex:1} #op-bestsellers .obp-card-body>small{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#777} #op-bestsellers .obp-card h2,#op-bestsellers .obp-card h3{font-size:22px;margin:12px 0 0} #op-bestsellers .obp-card p{margin:12px 0 24px;font-size:14px} #op-bestsellers .obp-link{display:inline-flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #d81f26;font-size:13px;font-weight:650;align-items:center;margin-top:auto} #op-bestsellers .obp-link:hover{color:#d81f26} #op-bestsellers .obp-link span{color:#d81f26;font-size:20px} #op-bestsellers .obp-button{background:#d81f26;color:white;display:inline-flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #d81f26;border-radius:5px;padding:15px 20px;font-size:13px;font-weight:650;cursor:pointer;line-height:1.4} #op-bestsellers .obp-button:hover{background:#b9171e} #op-bestsellers .obp-button-secondary{color:#111;background:transparent;border-color:#cbc9bf} #op-bestsellers .obp-button-secondary:hover{background:#e7e5db} #op-bestsellers .obp-product-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr);gap:48px;align-items:center;border-bottom:1px solid #deddd5;padding-bottom:24px;margin-bottom:28px} #op-bestsellers .obp-product-image{margin:0;background:#fff;min-height:220px;padding:16px;border:1px solid #e5e4dc;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center} #op-bestsellers .obp-product-image img{max-width:100%;width:220px;height:180px;object-fit:contain} #op-bestsellers .obp-product-image figcaption{color:#87877f;font-size:10px;margin-top:15px} #op-bestsellers .obp-specs{display:flex;flex-wrap:wrap;gap:20px 30px;margin:0 0 28px} #op-bestsellers .obp-specs>div{min-width:100px;max-width:100%} #op-bestsellers dt{font-size:11px;color:#777;margin:0 0 7px} #op-bestsellers dd{font-size:14px;margin:0;line-height:1.5;font-weight:550} #op-bestsellers .obp-section-heading{margin:0 0 25px} #op-bestsellers .obp-section-heading h2{margin:0 0 10px;font-size:32px} #op-bestsellers .obp-section-heading p{margin:0} #op-bestsellers .obp-grades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} #op-bestsellers .obp-grade{border:1px solid #dcdad0;border-top:3px solid #d81f26;border-radius:7px;padding:28px;background:#fff;display:flex;flex-direction:column;min-width:0} #op-bestsellers .obp-grade h3{font-size:23px;letter-spacing:-.025em;margin:0} #op-bestsellers .obp-grade p{margin:12px 0} #op-bestsellers .obp-grade ul{padding:0;list-style:none;font-size:13px;line-height:1.6;margin:0 0 24px;color:#444} #op-bestsellers .obp-grade li{padding:13px 0;border-bottom:1px solid #eee} #op-bestsellers .obp-grade .obp-button{margin-top:auto} #op-bestsellers .obp-availability{background:#eeede6;border-left:3px solid #949184;padding:22px 25px;margin:24px 0} #op-bestsellers .obp-availability strong{font-size:16px} #op-bestsellers .obp-availability p{margin:8px 0 0;font-size:13px} #op-bestsellers .obp-related{margin-top:60px} #op-bestsellers .obp-related .obp-card-image{height:180px} #op-bestsellers .obp-help{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:60px;background:#eeede5;border-radius:8px;padding:28px} #op-bestsellers .obp-help strong{font-size:21px;letter-spacing:-.02em} #op-bestsellers .obp-help p{margin:7px 0 0;font-size:14px} #op-bestsellers .obp-return{margin:15px 0} #op-bestsellers .obp-filters{display:flex;align-items:end;gap:16px;flex-wrap:wrap;padding:22px;background:#eae9e0;border-radius:7px;margin:0 0 25px} #op-bestsellers .obp-filters label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600;min-width:200px} #op-bestsellers .obp-filters select{padding:14px;border:1px solid #cfcec4;border-radius:4px;background:#fff;color:#111} #op-bestsellers .obp-filters p{margin:0 0 12px auto;font-size:13px} #op-bestsellers .obp-command{display:flex;gap:16px;align-items:center;padding:16px 0;font-size:13px;color:#777;min-height:90px} #op-bestsellers .obp-command img{width:65px;height:60px;object-fit:contain} #op-bestsellers .obp-card-actions{display:flex;flex-direction:column;gap:5px;margin-top:auto} #op-bestsellers .obp-card-actions .obp-link{border-bottom:none;justify-content:center} #op-bestsellers .obp-families{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px} #op-bestsellers .obp-chip{border:1px solid #d8d6cc;border-radius:30px;padding:12px 18px;font-size:12px;background:#fff} #op-bestsellers .obp-chip:hover{border-color:#d81f26} #op-bestsellers .obp-empty{padding:40px;background:white;border-radius:10px} @media(min-width:1450px){#op-bestsellers .obp-vr-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:1000px){#onlybaie-perspective #op-bestsellers{padding:0 24px 40px}#op-bestsellers .obp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#op-bestsellers .obp-grades{grid-template-columns:repeat(2,minmax(0,1fr))}#op-bestsellers .obp-product-hero{gap:28px;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr)}} @media(max-width:650px){#onlybaie-perspective #op-bestsellers{padding:0 18px 32px}#op-bestsellers .obp-heading{padding:18px 0}#op-bestsellers .obp-grid,#op-bestsellers .obp-grades,#op-bestsellers .obp-product-hero{grid-template-columns:minmax(0,1fr)}#op-bestsellers .obp-product-hero{gap:20px;padding-bottom:28px}#op-bestsellers .obp-product-image{min-height:210px}#op-bestsellers .obp-product-image img{height:190px}#op-bestsellers .obp-card-image{height:210px}#op-bestsellers .obp-help{flex-direction:column;align-items:stretch;padding:23px}#op-bestsellers .obp-filters label{min-width:0;width:100%}#op-bestsellers .obp-filters p{margin:0 0 12px auto}#op-bestsellers .obp-section-heading h2{font-size:27px}#op-bestsellers .obp-crumbs{font-size:11px;gap:8px;padding:18px 0}} #op-bestsellers .obp-grade-config{color:inherit;text-decoration:none;cursor:pointer} #op-bestsellers .obp-grade-config:hover{border-color:#d81f26} #op-bestsellers .obp-grade-config:focus-visible{outline:3px solid #d81f26;outline-offset:4px} /* Fenêtres coulissantes (09/10/2026) : FAQ courte de la fiche et renvoi des baies, angles droits, sans ombre. */ #op-bestsellers .obp-faq{max-width:900px;margin-top:32px;border-top:1px solid #deded9} #op-bestsellers .obp-faq h2{margin:24px 0 8px;font-size:24px;line-height:1.25} #op-bestsellers .obp-faq details{border-bottom:1px solid #deded9} #op-bestsellers .obp-faq summary{display:flex;gap:20px;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;min-height:60px;padding:16px 0;font-size:16px;font-weight:650;line-height:1.45;color:#222} #op-bestsellers .obp-faq summary::-webkit-details-marker{display:none} #op-bestsellers .obp-faq summary::after{content:"+";font-size:24px;line-height:1;flex:none;color:#c61f25;font-weight:400} #op-bestsellers .obp-faq details[open]>summary::after{content:"−"} #op-bestsellers .obp-faq details>p{margin:0;padding:0 35px 18px 0;color:#505050;font-size:14px;line-height:1.6} #op-bestsellers .obp-renvoi{margin:0 0 20px;padding:14px 18px;background:#f3f2ef;border-left:4px solid #d81f26;border-radius:0;box-shadow:none;font-size:15px;line-height:1.5;max-width:860px} #op-bestsellers .obp-renvoi a{font-weight:650;color:#111;text-decoration:underline;text-underline-offset:3px} @media(max-width:650px){#op-bestsellers .obp-faq h2{font-size:21px}#op-bestsellers .obp-faq details>p{padding-right:0}#op-bestsellers .obp-renvoi{font-size:14px;padding:12px 14px}} /* Fiches Onlybaie : un visuel généreux, des informations comparables et une action claire. */ #op-bestsellers .obp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start} #op-bestsellers .obp-card{border-radius:12px;border-color:#deded9;box-shadow:0 3px 14px #11100005;height:100%;transition:border-color .2s,box-shadow .2s} #op-bestsellers .obp-card:focus-within,#op-bestsellers .obp-card:hover{border-color:#c3c2ba;box-shadow:0 8px 24px #1110000c} #op-bestsellers .obp-card-image{position:relative;height:310px;padding:38px 24px 28px;background:radial-gradient(ellipse at center,#fff 20%,#f0f1ed 100%);overflow:hidden;flex-shrink:0} #op-bestsellers .obp-card-image img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 8px #11111110)} #op-bestsellers .obp-origin{display:inline-flex;align-items:center;gap:8px;background:white;border:1px solid #e6e5e0;border-radius:5px;padding:7px 9px;font-size:10px;font-weight:650;line-height:1.2;color:#333} #op-bestsellers .obp-card-image .obp-origin{position:absolute;top:14px;left:14px} #op-bestsellers .obp-origin i{width:21px;height:14px;border:1px solid #ddd;background:linear-gradient(90deg,#173d89 33.33%,#fff 33.33%,#fff 66.66%,#d81f26 66.66%)} #op-bestsellers .obp-card-body{padding:24px;gap:0} #op-bestsellers .obp-card h2,#op-bestsellers .obp-card h3{font-size:24px;letter-spacing:-.035em;line-height:1.15} #op-bestsellers .obp-card h2{min-height:56px} #op-bestsellers .obp-card h2 a:hover,#op-bestsellers .obp-card h3 a:hover{color:#d81f26} #op-bestsellers .obp-card p{font-size:13px;line-height:1.6;margin:12px 0 18px} #op-bestsellers .obp-features{margin:0 0 20px;display:grid;gap:0} #op-bestsellers .obp-features>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:14px;padding:12px 0;border-top:1px solid #eeeee9;align-items:baseline} #op-bestsellers .obp-features dt{font-size:11px;margin:0;color:#777} #op-bestsellers .obp-features dd{font-size:12px;line-height:1.55;color:#333;font-weight:550} #op-bestsellers .obp-colors-preview{margin:0 0 20px;display:flex;flex-direction:column;gap:9px;font-size:11px;color:#666} #op-bestsellers .obp-swatches{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none} #op-bestsellers .obp-swatches li{padding:0;border:0} #op-bestsellers .obp-swatch{display:block;flex-shrink:0;width:25px;height:25px;border:1px solid #c8c8c3;border-radius:50%;background:linear-gradient(135deg,var(--ext) 50%,var(--int) 50%);box-shadow:inset 0 0 0 2px #ffffff80} #op-bestsellers .obp-card-actions{margin-top:auto;gap:9px} #op-bestsellers .obp-card-actions .obp-button{width:100%;min-height:49px;font-size:14px;border-radius:5px} #op-bestsellers .obp-card-actions>small{color:#777;text-align:center;font-size:10px;line-height:1.4} #op-bestsellers .obp-product-hero{grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:56px;padding:16px 0 36px} #op-bestsellers .obp-product-image{position:relative;min-height:340px;padding:24px;background:radial-gradient(ellipse at center,#fff,#f0f1ed);border:0} #op-bestsellers .obp-product-image img{width:100%;height:290px;max-width:100%;object-fit:contain} #op-bestsellers .obp-product-image figcaption{margin-top:16px;color:#777} #op-bestsellers .obp-grades{align-items:start;gap:24px} #op-bestsellers .obp-grade{padding:0;border-top:3px solid #d81f26} #op-bestsellers .obp-grade .obp-card-image{height:245px;padding:40px 36px 18px} #op-bestsellers .obp-grade-heading{display:flex;align-items:center;justify-content:space-between;gap:12px} #op-bestsellers .obp-grade-heading h3{margin:0} #op-bestsellers .obp-grade-heading .obp-kicker{margin:0 0 9px;font-size:10px} #op-bestsellers .obp-profile-logo{width:78px;height:38px;object-fit:contain;flex-shrink:0} #op-bestsellers .obp-grade .obp-features{margin-bottom:16px;min-height:114px} #op-bestsellers .obp-grade .obp-colors-preview{min-height:51px} #op-bestsellers .obp-dimensions{display:flex;flex-direction:column;gap:7px;background:#f5f5f1;padding:13px 14px;border-radius:6px;font-size:11px;margin:0 0 19px} #op-bestsellers .obp-dimensions>span{display:flex;justify-content:space-between;gap:12px} #op-bestsellers .obp-dimensions small{color:#777;font-size:10px;line-height:1.5;margin-top:3px} #op-bestsellers .obp-technical{margin-top:14px} #op-bestsellers .obp-technical summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:12px;cursor:pointer;list-style:none;font-weight:550} #op-bestsellers .obp-technical summary::-webkit-details-marker{display:none} #op-bestsellers .obp-technical summary:focus-visible{outline:3px solid #d81f26;outline-offset:2px} #op-bestsellers .obp-technical summary span{font-size:22px;color:#d81f26;transition:transform .2s} #op-bestsellers .obp-technical[open] summary span{transform:rotate(45deg)} #op-bestsellers .obp-technical-content{padding-top:8px;border-top:1px solid #e9e9e3} #op-bestsellers .obp-technical h4{font-size:13px;margin:16px 0 12px} #op-bestsellers .obp-technical p{font-size:11px;margin:12px 0;line-height:1.6} #op-bestsellers .obp-color-list{list-style:none;padding:0;margin:0} #op-bestsellers .obp-color-list li{display:flex;align-items:center;gap:10px;font-size:11px;border:0;padding:6px 0;line-height:1.5} #op-bestsellers .obp-technical table{width:100%;border-collapse:collapse;font-size:11px;text-align:left;font-variant-numeric:tabular-nums} #op-bestsellers .obp-technical caption{text-align:left;font-size:11px;color:#666;margin-bottom:10px} #op-bestsellers .obp-technical th,#op-bestsellers .obp-technical td{padding:8px 6px;border-bottom:1px solid #e8e8e3} #op-bestsellers .obp-technical th{background:#f3f3ee;font-weight:600} #op-bestsellers .obp-vr-card .obp-card-image{height:310px;padding:18px} #op-bestsellers .obp-vr-card .obp-command{min-height:100px} @media(max-width:1100px){#op-bestsellers .obp-grid,#op-bestsellers .obp-grades{grid-template-columns:repeat(2,minmax(0,1fr))}#op-bestsellers .obp-product-hero{gap:32px}#op-bestsellers .obp-card-image{height:300px}} @media(max-width:650px){#op-bestsellers .obp-grid,#op-bestsellers .obp-grades{grid-template-columns:minmax(0,1fr);gap:22px}#op-bestsellers .obp-card-image{height:300px;padding:42px 30px 24px}#op-bestsellers .obp-card-body{padding:22px}#op-bestsellers .obp-card h2{min-height:0}#op-bestsellers .obp-product-hero{grid-template-columns:minmax(0,1fr);gap:10px}#op-bestsellers .obp-product-image{min-height:280px;padding:18px}#op-bestsellers .obp-product-image img{height:250px}#op-bestsellers .obp-grade .obp-card-image{height:240px}#op-bestsellers .obp-grade .obp-features{min-height:0}#op-bestsellers .obp-grade .obp-colors-preview{min-height:0}} @media(prefers-reduced-motion:reduce){#op-bestsellers .obp-card,#op-bestsellers .obp-card-image img,#op-bestsellers .obp-technical summary span{transition:none}#op-bestsellers .obp-card-image:hover img{transform:none}} #op-bestsellers .obp-card:not(.obp-grade):not(.obp-vr-card):not(.obp-vr-family) .obp-card-image{padding:0;height:auto;aspect-ratio:4/3;background:#eeeee9} #op-bestsellers .obp-card:not(.obp-grade):not(.obp-vr-card):not(.obp-vr-family) .obp-card-image img{width:100%;height:100%;object-fit:contain;filter:none} #op-bestsellers .obp-product-image{padding:0 0 16px;overflow:hidden} #op-bestsellers .obp-product-image img{height:340px;max-width:100%;object-fit:contain} @media(max-width:650px){#op-bestsellers .obp-product-image img{height:290px}} @media(max-width:650px){#op-bestsellers .obp-card:not(.obp-grade):not(.obp-vr-card):not(.obp-vr-family) .obp-card-image{height:300px;aspect-ratio:auto}} #op-bestsellers .obp-vr-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px} #op-bestsellers .obp-vr-heading>small{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#777} #op-bestsellers .obp-motor-brand{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:90px;height:44px} #op-bestsellers .obp-motor-brand img{display:block;width:100%;height:100%;object-fit:contain} #op-bestsellers .obp-product-hero .obp-motor-brand{margin:0 0 22px;width:110px;height:54px} /* Coupes réelles des trois gammes, extraites de leurs documents fabricant. */ #op-bestsellers .obp-grade .obp-card-image{height:300px;padding:40px 28px 42px;background:radial-gradient(ellipse at 50% 35%,#fff 10%,#f1f1ec 90%)} #op-bestsellers .obp-grade .obp-card-image img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(8px 10px 9px #11111112)} #op-bestsellers .obp-profile-caption{position:absolute;bottom:14px;left:14px;right:14px;text-align:center;font-size:11px;line-height:1.4;font-weight:550;color:#57574f} @media(max-width:650px){#op-bestsellers .obp-grade .obp-card-image{height:285px;padding-top:40px}} /* Comparatif : mêmes trois colonnes sur tous les écrans, sans défilement latéral. */ #op-bestsellers .obp-compare-open{display:inline-flex;align-items:center;gap:20px;background:none;border:0;border-bottom:1px solid #d81f26;padding:12px 0;min-height:44px;margin-top:12px;color:#111;cursor:pointer;font-size:13px;font-weight:650} #op-bestsellers .obp-compare-open span{color:#d81f26;font-size:20px} #op-bestsellers .obp-comparison{margin-top:80px;scroll-margin-top:calc(var(--obp-header-height,144px) + 24px)} #op-bestsellers .obp-compare-intro{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-bottom:28px} #op-bestsellers .obp-compare-intro>div{max-width:680px} #op-bestsellers .obp-compare-intro .obp-kicker{color:#d81f26} #op-bestsellers .obp-compare-intro h2{font-size:clamp(28px,3.3vw,44px);line-height:1.1;max-width:610px;margin:0 0 18px;letter-spacing:-.045em} #op-bestsellers .obp-compare-intro h2:focus{outline:none} #op-bestsellers .obp-compare-intro p{font-size:14px;margin:0} #op-bestsellers .obp-compare-index{font-size:12px;letter-spacing:.12em;border:1px solid #d4d3cc;border-radius:50%;height:92px;width:92px;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0;color:#67675f} #op-bestsellers .obp-compare-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0 24px;border-top:1px solid #d9d8d1} #op-bestsellers .obp-compare-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;position:relative;cursor:pointer;font-size:13px;font-weight:550} #op-bestsellers .obp-compare-toggle input{position:absolute;width:40px;height:24px;opacity:0;margin:0;cursor:pointer} #op-bestsellers .obp-compare-switch{width:38px;height:22px;border-radius:20px;background:#c5c5bd;padding:3px;display:block;flex-shrink:0;transition:background .15s} #op-bestsellers .obp-compare-switch:after{content:'';display:block;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #1112;transition:transform .15s} #op-bestsellers .obp-compare-toggle input:checked+.obp-compare-switch{background:#d81f26} #op-bestsellers .obp-compare-toggle input:checked+.obp-compare-switch:after{transform:translateX(16px)} #op-bestsellers .obp-compare-toggle input:focus-visible+.obp-compare-switch{outline:3px solid #d81f26;outline-offset:4px} #op-bestsellers .obp-compare-toolbar output{font-size:11px;color:#66665e} #op-bestsellers .obp-compare-table{display:block;width:100%;border-spacing:0;background:#fff;border:1px solid #dfded8;border-radius:10px;text-align:left;font-size:13px} #op-bestsellers .obp-compare-table thead,#op-bestsellers .obp-compare-table tbody,#op-bestsellers .obp-compare-table tfoot{display:block} #op-bestsellers .obp-compare-table tr{display:grid;grid-template-columns:1.1fr repeat(2,minmax(0,1fr))} #op-bestsellers .obp-compare-table tr[hidden]{display:none} #op-bestsellers .obp-compare-table th,#op-bestsellers .obp-compare-table td{min-width:0;padding:24px;line-height:1.5;overflow-wrap:break-word} #op-bestsellers .obp-compare-table thead{position:sticky;top:var(--obp-header-height,144px);z-index:2;background:#171717;color:white;border-radius:9px 9px 0 0;box-shadow:0 3px 8px #1111} #op-bestsellers .obp-compare-table thead th{padding:28px 24px;border-top:3px solid #d81f26} #op-bestsellers .obp-compare-table thead th:first-child{border-radius:9px 0 0 0} #op-bestsellers .obp-compare-table thead th:last-child{border-radius:0 9px 0 0} #op-bestsellers .obp-compare-table thead strong{display:block;font-size:18px;font-weight:650;letter-spacing:-.015em} #op-bestsellers .obp-compare-table thead span{display:block;color:#bababa;font-size:11px;font-weight:400;margin-top:7px} #op-bestsellers .obp-compare-table .obp-compare-corner{font-size:13px;font-weight:450;color:#d0d0d0} #op-bestsellers .obp-compare-table tbody tr{border-bottom:1px solid #ecece6} #op-bestsellers .obp-compare-table tbody tr:last-child{border-bottom:0} #op-bestsellers .obp-compare-table tbody tr:hover{background:#fbfbf8} #op-bestsellers .obp-compare-table tbody th{font-size:13px;font-weight:600;position:relative;background:#f8f8f4} #op-bestsellers .obp-compare-table tbody th>span{display:block} #op-bestsellers .obp-compare-table tbody tr[data-different=true] th:before{content:'';position:absolute;left:0;top:27px;width:3px;height:16px;background:#d81f26} #op-bestsellers .obp-compare-table small{display:block;color:#707068;font-size:11px;font-weight:400;line-height:1.55;margin-top:7px} #op-bestsellers .obp-compare-value{font-size:15px;font-weight:600;display:inline-flex;align-items:baseline;gap:7px} #op-bestsellers .obp-compare-value.is-included,#op-bestsellers .obp-compare-value.is-option{font-size:13px} #op-bestsellers .obp-compare-value.is-included>span{color:#d81f26;font-size:15px} #op-bestsellers .obp-compare-value.is-option>span{font-size:17px;font-weight:400} #op-bestsellers .obp-compare-value.is-unavailable{font-size:12px;font-weight:400;color:#66665e} #op-bestsellers .obp-compare-table .obp-swatches{margin-top:12px;gap:6px} #op-bestsellers .obp-compare-table .obp-swatch{width:21px;height:21px} #op-bestsellers .obp-compare-table tfoot{border-top:1px solid #dfded8;background:#f8f8f4;border-radius:0 0 9px 9px} #op-bestsellers .obp-compare-table tfoot th{font-size:13px;font-weight:600} #op-bestsellers .obp-compare-table tfoot td{display:flex;align-items:center} #op-bestsellers .obp-compare-table .obp-button{width:100%;min-height:48px;font-size:13px;padding:13px 15px;gap:8px} #op-bestsellers .obp-compare-table .obp-availability{margin:0;padding:12px;font-size:12px;font-weight:500} #op-bestsellers .obp-compare-common{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;font-size:11px;color:#56564f} #op-bestsellers .obp-compare-common>span{display:inline-flex;align-items:center;gap:10px} #op-bestsellers .obp-compare-common img{object-fit:contain;width:58px;height:28px} #op-bestsellers .obp-compare-note{font-size:11px;line-height:1.7;margin:16px 0 0;max-width:850px} @media(max-width:1000px){ #op-bestsellers .obp-compare-table th,#op-bestsellers .obp-compare-table td,#op-bestsellers .obp-compare-table thead th{padding:20px 16px} #op-bestsellers .obp-compare-table thead strong{font-size:15px} #op-bestsellers .obp-compare-table .obp-button{font-size:12px;padding:12px 10px} } @media(max-width:650px){ #op-bestsellers .obp-comparison{margin-top:56px} #op-bestsellers .obp-compare-intro{gap:0;margin-bottom:20px} #op-bestsellers .obp-compare-index{display:none} #op-bestsellers .obp-compare-intro p{font-size:13px} #op-bestsellers .obp-compare-toolbar{gap:0;padding:12px 0 20px} #op-bestsellers .obp-compare-toolbar output{width:100%;padding-left:48px} #op-bestsellers .obp-compare-table tr{grid-template-columns:repeat(2,minmax(0,1fr))} #op-bestsellers .obp-compare-table .obp-compare-corner{display:none} #op-bestsellers .obp-compare-table thead th{padding:18px 5px;text-align:center} #op-bestsellers .obp-compare-table thead th:nth-child(2){border-top-left-radius:9px} #op-bestsellers .obp-compare-table thead strong{font-size:clamp(10px,2.7vw,16px);letter-spacing:-.02em} #op-bestsellers .obp-compare-table thead span{display:none} #op-bestsellers .obp-compare-table tbody th,#op-bestsellers .obp-compare-table tfoot th{grid-column:1/-1;padding:14px 16px} #op-bestsellers .obp-compare-table tbody th{font-size:13px} #op-bestsellers .obp-compare-table tbody th small{margin-top:3px} #op-bestsellers .obp-compare-table tbody tr[data-different=true] th:before{top:17px} #op-bestsellers .obp-compare-table td{padding:18px 8px;line-height:1.4} #op-bestsellers .obp-compare-table td+td{border-left:1px solid #eeeee8} #op-bestsellers .obp-compare-value{font-size:13px;gap:4px;display:flex;flex-wrap:wrap;align-content:start} #op-bestsellers .obp-compare-value.is-included,#op-bestsellers .obp-compare-value.is-option,#op-bestsellers .obp-compare-value.is-unavailable{font-size:11px} #op-bestsellers .obp-compare-value.is-unavailable>span{display:none} #op-bestsellers .obp-compare-table small{font-size:10px;line-height:1.5} #op-bestsellers .obp-compare-table .obp-swatches{gap:5px} #op-bestsellers .obp-compare-table .obp-swatch{width:19px;height:19px} #op-bestsellers .obp-compare-table tfoot td{padding:0 5px 16px;border-left:0} #op-bestsellers .obp-compare-table .obp-button{font-size:11px;padding:10px 6px;text-align:center;justify-content:center;min-height:54px} #op-bestsellers .obp-compare-table .obp-button>span{display:none} #op-bestsellers .obp-compare-table .obp-availability{padding:8px 5px;font-size:10px} #op-bestsellers .obp-compare-common{gap:14px;font-size:10px} } @media(prefers-reduced-motion:reduce){#op-bestsellers .obp-compare-switch,#op-bestsellers .obp-compare-switch:after{transition:none}} #op-bestsellers .obp-compare-index b{font-size:27px;font-weight:550;line-height:1.2;color:#111;letter-spacing:-.05em} #op-bestsellers .obp-compare-index>span{font-size:9px;letter-spacing:0;margin-top:4px} /* Dimensions au choix du modèle (1 vantail, 2 vantaux…), avant les gammes. */ #op-bestsellers .obp-model-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #op-bestsellers .obp-model-dimensions{margin:0 0 18px;padding-top:15px;border-top:1px solid #e6e6e1} #op-bestsellers .obp-model-dimensions h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px;font-size:12px;line-height:1.5;letter-spacing:0;font-weight:650} #op-bestsellers .obp-model-dimensions h3 span{color:#74746e;font-size:11px;font-weight:400;white-space:nowrap} #op-bestsellers .obp-model-dimensions table{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums;text-align:right} #op-bestsellers .obp-model-dimensions thead th{font-size:10px;font-weight:500;color:#66665f;padding:4px 0 6px;text-align:right;text-transform:uppercase;letter-spacing:.04em} #op-bestsellers .obp-model-dimensions tbody th{text-align:left;font-size:12px;font-weight:500;color:#55554f} #op-bestsellers .obp-model-dimensions tbody td{font-size:20px;font-weight:600;letter-spacing:-.035em;padding:5px 0;white-space:nowrap} #op-bestsellers .obp-model-dimensions tbody tr+tr{border-top:1px solid #efefeb} #op-bestsellers .obp-model-dimensions p{font-size:11px;line-height:1.55;margin:10px 0 0} #op-bestsellers .obp-model-dimensions summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;list-style:none;font-size:11px;font-weight:600;padding:10px 0} #op-bestsellers .obp-model-dimensions summary::-webkit-details-marker{display:none} #op-bestsellers .obp-model-dimensions summary>span{font-size:20px;color:#d81f26;font-weight:400;line-height:1} #op-bestsellers .obp-model-dimensions details[open] summary>span{transform:rotate(45deg)} #op-bestsellers .obp-model-dimensions summary:focus-visible{outline:3px solid #d81f26;outline-offset:2px} #op-bestsellers .obp-model-dimensions-detail{padding:3px 0 14px} #op-bestsellers .obp-model-dimensions-detail caption{text-align:left;font-size:10px;color:#66665f;padding-bottom:12px} #op-bestsellers .obp-model-dimensions-detail thead th{font-size:9px;text-transform:none;letter-spacing:0;padding:7px 0} #op-bestsellers .obp-model-dimensions-detail thead th:first-child{text-align:left} #op-bestsellers .obp-model-dimensions-detail tbody th{font-size:9px;font-weight:600} #op-bestsellers .obp-model-dimensions-detail tbody td{font-size:10px;font-weight:500;letter-spacing:-.02em;padding:9px 0} /* Nuancier aluminium au choix du modèle : lecture tactile et au clavier. */ #op-bestsellers .obp-alu-colors .obp-technical{margin:0;width:100%} #op-bestsellers .obp-alu-palette summary{font-size:11px;min-height:44px} #op-bestsellers .obp-alu-palette .obp-color-list{display:grid;gap:4px} #op-bestsellers .obp-alu-palette .obp-color-list li{padding:5px 0;font-size:11px;line-height:1.55} #op-bestsellers .obp-alu-palette p{font-size:11px;line-height:1.6;margin:14px 0 0} #op-bestsellers .obp-alu-colors{margin-bottom:10px} /* Volets : repères par variante et nombre de teintes sans déployer le nuancier. */ #op-bestsellers .obp-vr-colors{display:flex;gap:13px;align-items:center;margin:4px 0 22px;padding:16px;border:1px solid #e8e8e3;border-radius:12px;background:#fafaf8} #op-bestsellers .obp-vr-colors svg{flex-shrink:0} #op-bestsellers .obp-vr-colors strong{display:block;font-size:13px;line-height:1.45;color:#222} #op-bestsellers .obp-vr-colors small{display:block;font-size:11px;line-height:1.6;color:#666;margin-top:4px} #op-bestsellers .obp-vr-dimensions thead th{white-space:normal;font-size:9px;letter-spacing:.02em;padding:8px 4px 10px} #op-bestsellers .obp-vr-dimensions thead th:last-child,#op-bestsellers .obp-vr-dimensions td:last-child{text-align:right} #op-bestsellers .obp-vr-dimensions table{width:100%} #op-bestsellers .obp-vr-brands{margin:0 0 20px} #op-bestsellers .obp-vr-brands>small{color:#666;font-size:11px} #op-bestsellers .obp-vr-brands>div{display:flex;align-items:center;gap:22px;margin-top:6px} #op-bestsellers .obp-vr-command{padding:8px 0 18px;margin-bottom:14px;gap:16px;min-height:112px;border-bottom:1px solid #eeeee9} #op-bestsellers .obp-vr-command img{width:82px;height:82px;border-radius:8px;flex-shrink:0} #op-bestsellers .obp-vr-command>div{min-width:0} #op-bestsellers .obp-vr-command strong{display:block;font-size:13px;color:#333;line-height:1.45} #op-bestsellers .obp-vr-command span{display:block;font-size:11px;line-height:1.6;margin-top:5px;color:#666} #op-bestsellers .obp-vr-card .obp-features{margin-bottom:16px} /* Une bande dédiée au badge, puis la photo entière : aucun coffre masqué. */ #op-bestsellers .obp-vr-card .obp-card-image,#op-bestsellers .obp-vr-family .obp-card-image{height:auto;aspect-ratio:auto;padding:48px 0 0;display:block;background:#fff} #op-bestsellers .obp-vr-card .obp-card-image img,#op-bestsellers .obp-vr-family .obp-card-image img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:none;transform:none} #op-bestsellers .obp-vr-card .obp-card-body>h3{line-height:1.35;margin-top:12px} @media(max-width:650px){#op-bestsellers .obp-vr-colors{padding:12px;gap:10px}#op-bestsellers .obp-vr-colors strong{font-size:12px}#op-bestsellers .obp-vr-dimensions tbody th{font-size:11px}#op-bestsellers .obp-vr-dimensions tbody td{font-size:22px}} /* Comparatif des gammes sur téléphone (18/09/2026) : aucun texte sous 12 px. */ @media(max-width:650px){ #onlybaie-perspective #op-bestsellers .obp-compare-table thead strong{font-size:clamp(12px,3.3vw,16px)} #onlybaie-perspective #op-bestsellers .obp-compare-table :is(small,.obp-availability,.obp-button),#onlybaie-perspective #op-bestsellers :is(.obp-compare-common,.obp-compare-value.is-included,.obp-compare-value.is-option,.obp-compare-value.is-unavailable,.obp-compare-note,.obp-compare-toolbar output,.obp-compare-common .obp-origin){font-size:12px} } /* Même cadre que les autres produits ; seule la position de la photo est spécifique. */ #onlybaie-perspective #op-bestsellers .obp-unified-card .obp-card-image img.obp-image-3d{object-position:center;filter:none;transform:none} /* Cartes de COLLECTION seulement : aucun sélecteur du mégamenu. */ #op-bestsellers .ob-prix-collection{margin-top:auto;padding-top:18px;color:#111;min-width:0} #op-bestsellers .ob-prix-montant{display:flex;flex-direction:column;gap:3px;margin:0!important;font-size:13px!important;color:#555} #op-bestsellers .ob-prix-montant strong{font-family:Manrope,sans-serif;font-size:27px;line-height:1.25;font-weight:800;letter-spacing:-.7px;color:#111;white-space:nowrap} #op-bestsellers .ob-prix-montant small{font:600 12px/1.2 'DM Sans',sans-serif;letter-spacing:0} #op-bestsellers .ob-prix-reference{font:400 12px/1.5 'DM Sans',sans-serif!important;margin:6px 0 10px!important;color:#626262!important} #op-bestsellers .ob-prix-details{font-size:13px;border-top:1px solid #e7e7e7;margin-top:12px} #op-bestsellers .ob-prix-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;cursor:pointer;font-weight:600;list-style:none;color:#222} #op-bestsellers .ob-prix-details summary::-webkit-details-marker{display:none} #op-bestsellers .ob-prix-details summary span{font-size:19px;color:#D81F26} #op-bestsellers .ob-prix-details[open] summary span{transform:rotate(45deg)} #op-bestsellers .ob-prix-details ul{padding-left:17px;margin:0 0 10px;display:grid;gap:5px} #op-bestsellers .ob-prix-details p{font-size:12px!important;line-height:1.5;color:#666!important;margin:8px 0 12px!important} #op-bestsellers .ob-prix-attente{font-size:13px!important;min-height:45px;color:#666!important;margin:0!important} #op-bestsellers [data-prix-collection-retry]{border:0;background:none;padding:7px 0;color:#D81F26;text-decoration:underline;cursor:pointer;font:600 13px 'DM Sans',sans-serif} #op-bestsellers .ob-prix-details summary:focus-visible,#op-bestsellers [data-prix-collection-retry]:focus-visible{outline:2px solid #D81F26;outline-offset:3px} #op-bestsellers .pe-product-info{display:flex;flex-direction:column} #op-bestsellers .pe-product-info>div:has(>.ob-prix-collection){margin-top:auto} #op-bestsellers .obp-unified-card .obp-card-actions:has(>.ob-prix-collection){padding-top:0;margin-top:auto} #op-bestsellers .obp-unified-card .obp-card-actions>.ob-prix-collection{width:100%;margin-bottom:8px} #op-bestsellers .obp-unified-card .obp-card-actions{flex-wrap:wrap} @media(max-width:420px){#op-bestsellers .ob-prix-montant strong{font-size:25px}} #onlybaie-perspective #op-bestsellers{max-width:none;margin:0;padding:0;min-height:0;background:transparent} #op-bestsellers .obp-grid{align-items:stretch} #op-bestsellers .obp-card{height:100%} /* Accueil compact (demande du gérant, 19/09/2026) : les douze produits prenaient 8 200 px de haut sur téléphone, une carte par écran. Deux rangées de six cartes réduites : photo, nom, prix « à partir de » et bouton. Dimensions, teintes, options et « Ce prix comprend » restent sur la fiche et dans le configurateur. Sous 1101 px, chaque rangée se fait glisser. */ #onlybaie-perspective #op-collections{--marge:clamp(20px,4vw,80px);max-width:1480px;margin-inline:auto;padding-bottom:20px} #onlybaie-perspective #op-collections #op-bestsellers{display:grid;grid-template-columns:minmax(0,1fr);gap:30px} /* Rubrique : titre à gauche, lien vers la collection à droite, rangée, barre de progression. */ #onlybaie-perspective #op-collections .ob-best-tete{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--op-line)} #onlybaie-perspective #op-collections .ob-best-tete h3{margin:0;font-family:Manrope,Arial,sans-serif;font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.15} #onlybaie-perspective #op-collections .ob-best-tete a{flex:none;font-size:13px;font-weight:600;color:var(--op-red);white-space:nowrap} #onlybaie-perspective #op-collections .ob-best-tete a:hover{text-decoration:underline} #onlybaie-perspective #op-collections .ob-best-cadre{position:relative} #onlybaie-perspective #op-collections .ob-best-fleche{position:absolute;z-index:2;top:48px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--op-red);color:#fff;box-shadow:0 3px 10px #1112;cursor:pointer;touch-action:manipulation;transition:background .2s,box-shadow .2s} #onlybaie-perspective #op-collections .ob-best-fleche svg{display:block;width:20px;height:20px;pointer-events:none} #onlybaie-perspective #op-collections .ob-best-fleche[hidden]{display:none} #onlybaie-perspective #op-collections .ob-best-precedent{left:-12px} #onlybaie-perspective #op-collections .ob-best-suivant{right:-12px} #onlybaie-perspective #op-collections .ob-best-fleche:hover:not(:disabled){background:#b71920;box-shadow:0 4px 12px #1113} #onlybaie-perspective #op-collections .ob-best-fleche:disabled{background:#ececee;color:#919197;box-shadow:none;cursor:default} #onlybaie-perspective #op-collections .ob-best-fleche:focus-visible,#onlybaie-perspective #op-collections .ob-best-rangee:focus-visible{outline:2px solid var(--op-red);outline-offset:2px} #onlybaie-perspective #op-collections .ob-best-progression{height:3px;margin-top:12px;background:var(--op-line)} #onlybaie-perspective #op-collections .ob-best-progression[hidden]{display:none} #onlybaie-perspective #op-collections .ob-best-progression span{display:block;height:100%;background:var(--op-ink)} /* position:relative : les textes pour lecteurs d'écran, en absolu dans les cartes, restent dans la rangée qui défile au lieu d'élargir la page. */ #onlybaie-perspective #op-collections #op-bestsellers .ob-best-rangee{position:relative;min-width:0} #onlybaie-perspective #op-collections #op-bestsellers .ob-best-rangee{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none} #onlybaie-perspective #op-collections #op-bestsellers .ob-best-rangee::-webkit-scrollbar{display:none} #onlybaie-perspective #op-collections #op-bestsellers .obp-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * 14px) / 6);gap:14px;align-items:stretch} #onlybaie-perspective #op-collections #op-bestsellers .obp-card{scroll-snap-align:start} #onlybaie-perspective #op-collections #op-bestsellers .obp-unified-card :is(.obp-card-keypoints,.obp-card-options,.obp-card-more,.ob-product-badge,.ob-prix-details){display:none} #onlybaie-perspective #op-collections #op-bestsellers .obp-unified-card .obp-card-meta{min-height:24px;margin:0} #onlybaie-perspective #op-collections #op-bestsellers .obp-unified-card .obp-card-meta>:not(.obp-origin){display:none} #onlybaie-perspective #op-collections #op-bestsellers .obp-unified-card .obp-card-image{height:140px;aspect-ratio:auto;padding:0} #onlybaie-perspective #op-collections #op-bestsellers .obp-unified-card .obp-card-image img{object-fit:contain} #onlybaie-perspective #op-collections #op-bestsellers .obp-unified-card .obp-card-body{display:flex;flex-direction:column;gap:6px;padding:8px 12px 12px;min-height:0} #onlybaie-perspective #op-collections #op-bestsellers .obp-card-heading{margin:0} #onlybaie-perspective #op-collections #op-bestsellers .obp-unified-card .obp-card-title{min-height:2.5em;margin:0;font-size:15px;line-height:1.25;letter-spacing:-.01em} /* Prix alignés d'une carte à l'autre (gérant, 05/10/2026) : le prix suit le titre au lieu d'être poussé vers le bas avec la ligne « Motorisable… » ; seuls les repères de dimensions et le bouton restent en bas. !important : la marge du repère est déjà imposée en !important par prix-collections.css (6px 0 10px), qui l'emportait sur « auto » et laissait la ligne des dimensions à une hauteur différente par carte. */ #onlybaie-perspective #op-collections #op-bestsellers .obp-card-actions{display:flex;flex-direction:column;flex:1;gap:0;margin-top:0;padding:0} #onlybaie-perspective #op-collections #op-bestsellers .ob-prix-collection{display:flex;flex-direction:column;flex:1} #onlybaie-perspective #op-collections #op-bestsellers .ob-prix-reference{margin-top:auto!important} #onlybaie-perspective #op-collections #op-bestsellers .ob-prix-collection{min-height:0;padding-top:2px} #onlybaie-perspective #op-collections #op-bestsellers .ob-prix-montant span{margin-bottom:0;font-size:11px} #onlybaie-perspective #op-collections #op-bestsellers .ob-prix-montant strong{font-size:21px;letter-spacing:-.4px} #onlybaie-perspective #op-collections #op-bestsellers .ob-prix-reference{font-size:10.5px;line-height:1.35} #onlybaie-perspective #op-collections #op-bestsellers .obp-button{box-sizing:border-box;width:100%;min-height:40px;margin-top:8px;padding:9px 10px;gap:6px;font-size:12px;line-height:1.25} @media(min-width:1101px){#onlybaie-perspective #op-collections .ob-best-rubrique[data-telephone-seulement]{display:none}} /* Toujours des cartes entières, jamais une moitié : 4 visibles sur tablette, 2 sur téléphone. */ @media(max-width:1100px){ #onlybaie-perspective #op-collections #op-bestsellers .obp-grid{grid-auto-columns:calc((100% - 3 * 14px) / 4)} #onlybaie-perspective #op-collections .ob-best-precedent{left:-8px} #onlybaie-perspective #op-collections .ob-best-suivant{right:-8px} } @media(max-width:800px){ #onlybaie-perspective #op-collections #op-bestsellers .obp-grid{grid-auto-columns:calc((100% - 2 * 14px) / 3)} } @media(max-width:650px){ #onlybaie-perspective #op-familles+#op-collections{padding-block:26px 8px} #onlybaie-perspective #op-collections .op-section-head{margin:10px 0 16px} #onlybaie-perspective #op-collections .op-section-head h2{font-size:26px} #onlybaie-perspective #op-collections #op-bestsellers{gap:26px} #onlybaie-perspective #op-collections #op-bestsellers .obp-grid{gap:10px} #onlybaie-perspective #op-collections .ob-best-tete{margin-bottom:10px;padding-bottom:8px} #onlybaie-perspective #op-collections .ob-best-tete h3{font-size:19px} #onlybaie-perspective #op-collections .ob-best-tete a{font-size:12px} #onlybaie-perspective #op-collections .ob-best-fleche{top:42px} #onlybaie-perspective #op-collections #op-bestsellers .obp-unified-card .obp-card-image{height:128px} #onlybaie-perspective #op-collections #op-bestsellers .obp-unified-card .obp-card-meta,#onlybaie-perspective #op-collections #op-bestsellers .ob-prix-reference{display:none} #onlybaie-perspective #op-collections #op-bestsellers .obp-unified-card .obp-card-body{padding:8px 10px 10px} #onlybaie-perspective #op-collections #op-bestsellers .obp-unified-card .obp-card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px} #onlybaie-perspective #op-collections #op-bestsellers .ob-prix-montant strong{font-size:19px} #onlybaie-perspective #op-collections #op-bestsellers .obp-button{justify-content:center;min-height:38px;padding-inline:4px;font-size:11.5px;letter-spacing:-.01em;white-space:nowrap} #onlybaie-perspective #op-collections #op-bestsellers .obp-button>span{display:none} /* Deux cartes entières, pas de troisième entamée : les flèches et la barre disent qu'il y a une suite. */ #onlybaie-perspective #op-collections #op-bestsellers .obp-grid{grid-auto-columns:calc((100% - 10px) / 2)} } /* Variante d’accueil uniquement : le catalogue et ses cartes restent inchangés. */ #onlybaie-perspective .ob-family-section { max-width: 1480px; margin-inline: auto; } #onlybaie-perspective .ob-home-comparison { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 36px; padding-bottom:20px; border-bottom:1px solid #e7e5e2; font-size:12px; color:#646464; } #onlybaie-perspective .ob-home-comparison > div { display:flex; padding:4px; border:1px solid #e4e2df; border-radius:100px; background:#f5f4f2; } #onlybaie-perspective .ob-home-comparison a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 18px; border-radius:100px; color:#555; text-decoration:none; font-weight:650; } #onlybaie-perspective .ob-home-comparison a[aria-current] { color:#fff; background:#222; box-shadow:0 2px 5px #00000012; } #onlybaie-perspective .ob-family-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } #onlybaie-perspective .ob-family-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #e5e3df; border-radius:18px; background:#fff; color:#191919; text-decoration:none; box-shadow:0 3px 12px #16161605; transition:box-shadow .2s ease,border-color .2s ease; } #onlybaie-perspective .ob-family-photo { aspect-ratio:4/3; width:100%; overflow:hidden; background:#f3f2ef; } #onlybaie-perspective .ob-family-photo img { display:block; width:100%; height:100%; object-fit:cover; } #onlybaie-perspective .ob-family-body { display:flex; flex:1; flex-direction:column; gap:0; padding:18px 20px 20px; } #onlybaie-perspective .ob-family-repere { margin:0 0 7px; color:#74716c; font-size:10px; line-height:1.5; font-weight:650; letter-spacing:.075em; text-transform:uppercase; } #onlybaie-perspective .ob-family-card h3 { margin:0; font:650 clamp(21px,1.65vw,25px)/1.2 'Manrope',sans-serif; letter-spacing:-.025em; } #onlybaie-perspective .ob-family-copy { margin:9px 0 18px; color:#696761; font-size:13px; line-height:1.55; max-width:36ch; } #onlybaie-perspective .ob-family-cta { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; min-height:46px; border-radius:9px; background:#D81F26; color:white; font-size:13px; font-weight:700; } #onlybaie-perspective .ob-family-cta svg { flex:none; } #onlybaie-perspective .ob-family-card:hover { border-color:#bdbab4; box-shadow:0 10px 28px #1616160c; } #onlybaie-perspective .ob-family-card:hover img { transform:none; } #onlybaie-perspective .ob-family-card:hover .ob-family-cta { background:#bd181f; } #onlybaie-perspective .ob-family-card:focus-visible, #onlybaie-perspective .ob-home-comparison a:focus-visible { outline:3px solid #D81F26; outline-offset:4px; } @media(max-width:1050px){#onlybaie-perspective .ob-family-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }} @media(max-width:600px){ #onlybaie-perspective .ob-family-grid { grid-template-columns:minmax(0,1fr); gap:20px; } #onlybaie-perspective .ob-home-comparison { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:28px; } #onlybaie-perspective .ob-home-comparison > div { width:100%; } #onlybaie-perspective .ob-home-comparison a { flex:1; padding-inline:10px; } #onlybaie-perspective .ob-family-section .op-section-head { margin-bottom:26px; gap:15px; } #onlybaie-perspective .ob-family-section .op-section-head p { max-width:34ch; } #onlybaie-perspective .ob-family-body { padding:16px; } #onlybaie-perspective .ob-family-copy { margin-bottom:16px; } } @media(prefers-reduced-motion:reduce){#onlybaie-perspective .ob-family-card,#onlybaie-perspective .ob-family-photo img { transition:none; }#onlybaie-perspective .ob-family-card:hover img { transform:none; }} #onlybaie-perspective #op-collections { scroll-margin-top:150px; } #onlybaie-perspective .ob-family-section .op-section-head p { color:#676767; opacity:1; } /* Les cartes photo existantes, en deux rangées de quatre sur ordinateur. */ #onlybaie-perspective #op-familles{padding-block:48px 12px;scroll-margin-top:150px} #onlybaie-perspective #op-familles .ob-family-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} #onlybaie-perspective #op-familles .ob-family-body{padding:16px} #onlybaie-perspective #op-familles .ob-family-card h3{font-size:21px} #onlybaie-perspective #op-familles .ob-family-copy{margin:8px 0 16px} #onlybaie-perspective #op-familles+#op-collections{padding-top:58px} @media(max-width:1100px){ #onlybaie-perspective #op-familles .ob-family-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:650px){ #onlybaie-perspective #op-familles{padding-block:30px 8px;scroll-margin-top:100px} #onlybaie-perspective #op-familles .ob-family-grid{gap:12px} #onlybaie-perspective #op-familles .ob-family-body{padding:12px} #onlybaie-perspective #op-familles .ob-family-card{border-radius:12px} #onlybaie-perspective #op-familles .ob-family-card h3{font-size:17px;line-height:1.25;margin-bottom:14px} #onlybaie-perspective #op-familles .ob-family-repere{font-size:9px;letter-spacing:.025em} #onlybaie-perspective #op-familles .ob-family-copy{display:none} #onlybaie-perspective #op-familles .ob-family-cta{font-size:12px;padding:10px 8px;gap:5px;margin-top:auto;min-height:44px} #onlybaie-perspective #op-familles .ob-family-cta svg{width:16px;height:16px} #onlybaie-perspective #op-familles+#op-collections{padding-top:38px} } /* « Votre commande en 3 étapes », sous le carrousel de l'accueil. Angles droits, pas d'ombre. Le rouge sert au numéro, au filet et à l'icône : des cartes rouges pleines seraient trop violentes sur toute la largeur. */ #onlybaie-perspective #op-etapes{padding-block:44px 8px} /* Le titre seul, centré : ni surtitre ni chapeau (choix du gérant, 20/09/2026). */ #onlybaie-perspective #op-etapes .ob-etapes-head{margin-bottom:26px;text-align:center} #onlybaie-perspective #op-etapes .ob-etapes-head h2{margin:0 auto;max-width:none;font-size:clamp(28px,2.4vw,40px);line-height:1.14;letter-spacing:-.03em} #onlybaie-perspective .ob-etapes-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;counter-reset:none} /* Jamais plus large que le carrousel juste au-dessus (gérant, 01/10/2026) : même largeur maximale que .ob-carrousel (carrousel-accueil.css), centrée. Sur grand écran ou fenêtre dézoomée, la bande débordait du carrousel de 150 px de chaque côté. */ #onlybaie-perspective #op-etapes .ob-etapes-grille{max-width:2100px;margin-inline:auto} #onlybaie-perspective .ob-etape{position:relative;display:flex;flex-direction:column;padding:26px 24px 28px;background:#fff;border:1px solid var(--op-line);border-top:3px solid var(--op-red)} #onlybaie-perspective .ob-etape-numero{position:absolute;top:14px;right:18px;font-size:58px;line-height:1;font-weight:800;color:#f0bfc1;letter-spacing:-.04em} #onlybaie-perspective .ob-etape-icone{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:16px;background:var(--op-red);color:#fff} #onlybaie-perspective .ob-etape-icone svg{width:24px;height:24px} #onlybaie-perspective .ob-etape h3{position:relative;z-index:1;margin:0 0 10px;font-size:19px;line-height:1.25;letter-spacing:-.01em;color:var(--op-ink)} #onlybaie-perspective .ob-etape p{margin:0;font-size:15px;line-height:1.55;color:#4a4c46} #onlybaie-perspective .ob-etapes-points{display:none} @media(max-width:900px){ /* Une carte entière par écran, points synchronisés avec le balayage natif. */ #onlybaie-perspective .ob-etapes-grille{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none} #onlybaie-perspective .ob-etapes-grille::-webkit-scrollbar{display:none} #onlybaie-perspective .ob-etapes-points:not([hidden]){display:flex;justify-content:center;gap:2px;margin-top:6px} #onlybaie-perspective .ob-etapes-points button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer} #onlybaie-perspective .ob-etapes-points button span{display:block;width:9px;height:9px;border-radius:50%;background:#babbb7;transition:background .2s,width .2s} #onlybaie-perspective .ob-etapes-points button[aria-current="true"] span{width:26px;border-radius:8px;background:var(--op-red)} #onlybaie-perspective .ob-etapes-points button:focus-visible{outline:2px solid var(--op-red);outline-offset:-4px} #onlybaie-perspective .ob-etapes-grille:focus-visible{outline:2px solid var(--op-red);outline-offset:4px} #onlybaie-perspective .ob-etape{min-width:0;scroll-snap-align:start} /* Icône à gauche, texte à droite ; toutes les cartes gardent la même hauteur. */ #onlybaie-perspective .ob-etape{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;padding:16px 16px 18px;border-top-width:2px} #onlybaie-perspective .ob-etape-icone{width:44px;height:44px;margin:0;grid-row:span 2} #onlybaie-perspective .ob-etape-icone svg{width:22px;height:22px} #onlybaie-perspective .ob-etape-numero{position:static;grid-column:2;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--op-red)} #onlybaie-perspective .ob-etape-numero:before{content:"Étape "} #onlybaie-perspective .ob-etape h3{grid-column:2;margin:2px 0 6px;font-size:17px} #onlybaie-perspective .ob-etape p{grid-column:2;font-size:14px;line-height:1.5} #onlybaie-perspective #op-etapes{padding-block:26px 4px} #onlybaie-perspective #op-etapes .ob-etapes-head{margin-bottom:16px;text-align:left} #onlybaie-perspective #op-etapes .ob-etapes-head h2{margin:0} } @media(prefers-reduced-motion:reduce){ #onlybaie-perspective .ob-etapes-points button span{transition:none} } .ob-real-home{padding-block:70px!important;scroll-margin-top:150px}.ob-real-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}.ob-real-kicker{color:#d81f26!important;text-transform:uppercase;letter-spacing:.18em;font-size:12px!important;font-weight:800}.ob-real-heading h2,.ob-real-page h1{font-family:var(--galerie-manrope,Manrope),sans-serif;font-weight:800;letter-spacing:-.045em;font-size:clamp(30px,3.6vw,52px);line-height:1.12;margin:12px 0}.ob-real-heading p{margin:0;font-size:17px;color:#646464}.ob-real-link{display:inline-flex;gap:22px;align-items:center;justify-content:center;border:1px solid #d81f26;border-radius:30px;padding:14px 22px;color:#d81f26!important;text-decoration:none;white-space:nowrap;font-size:14px;font-weight:700}.ob-real-mosaic{display:grid;grid-template-columns:1fr 1.4fr 1fr 1fr;grid-template-rows:290px 290px;gap:14px}.ob-real-card{display:block;position:relative;overflow:hidden;border-radius:13px;background:#eeeae5;isolation:isolate}.ob-real-card img{display:block;width:100%;height:100%;object-fit:contain;transition:filter .25s}.ob-real-card:hover img{filter:brightness(1.04)}.ob-real-card:focus-visible{outline:3px solid #d81f26;outline-offset:4px}.ob-real-card-1{grid-column:1;grid-row:1/3}.ob-real-card-2{grid-column:2;grid-row:1}.ob-real-card-3{grid-column:2;grid-row:2}.ob-real-card-4{grid-column:3;grid-row:1/3}.ob-real-card-5{grid-column:4;grid-row:1}.ob-real-card-6{grid-column:4;grid-row:2}.ob-real-caption{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:end;justify-content:space-between;gap:8px;padding:36px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:white;font-size:15px;font-weight:700;line-height:1.25}.ob-real-caption small{display:block;font-size:11px;font-weight:400;margin-top:4px}.ob-real-arrow{flex:none;display:grid;place-items:center;border-radius:50%;background:white;color:#111;width:29px;height:29px}.ob-real-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px}.ob-real-bottom p{font-size:21px;font-weight:700;margin:0}.ob-real-bottom a{color:#d81f26;font-weight:700;text-decoration:none}.ob-real-page{font-family:var(--galerie-dm,'DM Sans'),sans-serif;max-width:1440px;margin:auto;padding:28px 36px 70px;color:#111}.ob-real-page a{color:inherit}.ob-real-breadcrumb{font-size:13px;color:#777;margin:12px 0 40px}.ob-real-lead{max-width:660px;color:#666;font-size:18px;line-height:1.65}.ob-real-filters{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 14px}.ob-real-filters button{font:inherit;font-size:14px;border:1px solid #ddd;border-radius:30px;padding:11px 18px;background:white;cursor:pointer}.ob-real-filters button[aria-pressed=true]{background:#111;color:#fff;border-color:#111}.ob-real-count{color:#777;font-size:13px;margin:0 0 24px}.ob-real-grid{columns:4;column-gap:18px}.ob-real-item{break-inside:avoid;margin:0 0 24px}.ob-real-item a{display:block;border-radius:12px;overflow:hidden;background:#f1efec}.ob-real-item img{display:block;width:100%;height:auto;transition:filter .25s}.ob-real-item a:hover img{filter:brightness(1.05)}.ob-real-item figcaption{padding:10px 2px;font-size:14px;font-weight:700}.ob-real-item small{display:block;margin-top:4px;font-size:12px;color:#777;font-weight:400}.ob-real-dialog{max-width:96vw;width:1200px;max-height:94dvh;padding:0;border:0;border-radius:16px;background:#131313;color:white;box-shadow:0 20px 100px #0008}.ob-real-dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.ob-real-dialog-tools{display:flex;justify-content:space-between;align-items:center;padding:14px 20px}.ob-real-dialog button{background:#fff2;color:white;border:1px solid #fff4;border-radius:30px;padding:10px 16px;font:inherit;cursor:pointer}.ob-real-dialog-photo{height:min(68dvh,800px);display:flex;align-items:center;justify-content:center;background:#080808}.ob-real-dialog-photo img{width:100%;height:100%;object-fit:contain}.ob-real-dialog-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 20px}.ob-real-dialog-footer p{margin:0}.ob-real-dialog-footer small{display:block;color:#ccc;margin-top:5px}.ob-real-dialog-footer nav{display:flex;gap:10px}.ob-real-page button:focus-visible,.ob-real-page a:focus-visible,.ob-real-dialog button:focus-visible{outline:3px solid #d81f26;outline-offset:3px} @media(max-width:1050px){.ob-real-mosaic{grid-template-columns:1fr 1.3fr 1fr;grid-template-rows:240px 240px 260px}.ob-real-card-4{grid-column:3;grid-row:1/3}.ob-real-card-5{grid-column:1/3;grid-row:3}.ob-real-card-6{grid-column:3;grid-row:3}.ob-real-grid{columns:3}.ob-real-caption{font-size:14px}} @media(max-width:700px){.ob-real-home{padding-block:38px!important}.ob-real-heading{align-items:start;flex-direction:column;gap:18px}.ob-real-heading h2{font-size:32px}.ob-real-mosaic{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px}.ob-real-card{flex:0 0 80%;height:410px;scroll-snap-align:start}.ob-real-caption{font-size:16px}.ob-real-bottom{align-items:start;flex-direction:column;gap:12px}.ob-real-bottom p{font-size:18px}.ob-real-page{padding:20px 18px 50px}.ob-real-breadcrumb{margin-bottom:28px}.ob-real-grid{columns:2;column-gap:12px}.ob-real-item{margin-bottom:16px}.ob-real-filters{flex-wrap:nowrap;overflow:auto;padding-bottom:8px}.ob-real-filters button{white-space:nowrap}.ob-real-dialog{max-width:100vw;width:100vw;max-height:100dvh;border-radius:0}.ob-real-dialog-photo{height:62dvh}.ob-real-dialog-footer{align-items:start;flex-direction:column}.ob-real-dialog-footer nav{width:100%;justify-content:space-between}.ob-real-dialog-tools{padding:12px}} /* Rapprocher la galerie des cartes produit, sans changer le reste de la page. */ #onlybaie-perspective #op-realisations{padding-top:24px!important;margin-top:0} /* Le shell historique impose cover aux images : garder ici les produits entiers. */ #onlybaie-perspective .ob-real-photo{display:block;width:100%;height:100%;overflow:hidden} #onlybaie-perspective .ob-real-card img{object-fit:contain;width:100%;height:100%} #onlybaie-perspective .ob-real-dialog-photo img{object-fit:contain;width:100%;height:100%} #onlybaie-perspective .ob-real-item img{height:auto;object-fit:contain} #onlybaie-perspective .ob-real-link,#onlybaie-perspective .ob-real-bottom>a{color:#d81f26} #onlybaie-perspective .ob-real-filters button[aria-pressed=true]{color:white;background:#111} #onlybaie-perspective .ob-real-dialog button{color:white} @media(prefers-reduced-motion:reduce){.ob-real-card img,.ob-real-item img{transition:none}} /* Cartes garage : cadrage produit constant, sans crop automatique ni zoom au survol. */ #onlybaie-perspective .pe-families .pe-family-frame{position:relative;align-self:center;aspect-ratio:3/4;width:100%;overflow:hidden;background:#f5f5f3} #onlybaie-perspective .pe-families .pe-family-frame img{position:absolute;display:block;max-width:none;width:var(--photo-w);height:var(--photo-h);left:var(--photo-x);top:var(--photo-y);object-fit:fill;transform:none;padding:0} #onlybaie-perspective #op-produits .obp-garage-card-media{aspect-ratio:4/3} #onlybaie-perspective #op-produits .obp-garage-card-frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:#f5f5f3} #onlybaie-perspective #op-produits .obp-garage-card-frame img{position:absolute;display:block;max-width:none;width:var(--photo-w);height:var(--photo-h);left:var(--photo-x);top:var(--photo-y);object-fit:fill;transform:none;padding:0} /* Le minimum et sa configuration ne doivent pas se retrouver séparés sur mobile. */ #onlybaie-perspective #op-produits .ob-prix-configuration{font-size:12px;line-height:1.45;color:#454545;margin:6px 0} /* Un seul format pour les modèles, les volets et la sélection de l'accueil. */ #onlybaie-perspective .ob-product-badge{display:inline-flex;align-items:center;align-self:flex-start;justify-self:start;width:fit-content;padding:5px 10px;border:1px solid transparent;border-radius:999px;background:#f0f2f3;color:#454d54;font:500 13px/1.4 'DM Sans',sans-serif;letter-spacing:0;white-space:nowrap} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-heading{margin-bottom:10px;min-width:0} #onlybaie-perspective .obp-grade-heading .ob-product-badge{margin-top:8px} #onlybaie-perspective .pe-product-info>.ob-product-badge{margin-bottom:10px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-grid{gap:20px;align-items:stretch} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card{display:flex;height:auto;border-radius:12px;background:#fff;min-width:0} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-card-image{display:block;height:auto;min-height:0;aspect-ratio:1;padding:0;background:#f7f7f5} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-card-image img{display:block;height:100%;width:100%;aspect-ratio:auto;object-fit:cover;filter:none;transform:none} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-origin{position:static;white-space:nowrap;padding:5px 7px;font-size:9px;gap:6px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-origin i{width:18px;height:12px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-card-body{padding:10px 16px 14px;gap:0;min-width:0} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:27px;margin-bottom:5px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-meta>small{font-size:9px;line-height:1.4;letter-spacing:.05em;text-transform:uppercase;color:#70706b} /* Logo VEKA lisible (25/09/2026) : le losange faisait 24 px et ses lettres étaient illisibles. */ #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-profile{width:40px;height:44px;object-fit:contain;flex-shrink:0} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-meta .obp-motor-brand{width:53px;height:26px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-meta .obp-vr-brands{margin:0;flex-shrink:0} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-meta .obp-vr-brands>small{display:none} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-meta .obp-vr-brands>div{margin:0;gap:8px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-card-title{font-size:20px;line-height:1.2;letter-spacing:-.025em;margin:0 0 8px;min-height:0;overflow-wrap:anywhere} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-card-copy{font-size:12px;line-height:1.5;margin:0 0 12px;color:#686863} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-keypoints{padding:8px 0 6px;border-top:1px solid #eeeee9} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-keypoints dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-keypoints dt{font-size:10px;color:#6d6d68;margin-bottom:4px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-keypoints dd{font-size:15px;font-weight:650;line-height:1.3;margin:0;color:#222;white-space:nowrap} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-keypoints dd span{font-size:10px;font-weight:400;color:#777} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-keypoints>small{display:block;font-size:9px;line-height:1.45;color:#777;margin-top:6px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-options{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:35px;font-size:11px;padding:3px 0 8px;color:#666} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-options>strong{font-weight:550;color:#333;text-align:right} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-swatches{display:flex;align-items:center;gap:4px;flex-shrink:0} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-swatches .obp-swatches{gap:3px;margin:0;flex-wrap:nowrap} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-swatches .obp-swatch{width:16px;height:16px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-swatches>small{font-size:10px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-options .obp-vr-colors{padding:0;margin:0;border:0;background:none;gap:8px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-options .obp-vr-colors svg{width:25px;height:25px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-options .obp-vr-colors strong{font-size:11px;font-weight:550} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-more{border-top:1px solid #eeeee9;min-width:0} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-more>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;list-style:none;cursor:pointer;font-size:11px;font-weight:550;color:#444} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-more>summary::-webkit-details-marker{display:none} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-more>summary>span{color:#d81f26;font-size:18px;line-height:1} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-more[open]>summary>span{transform:rotate(45deg)} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-more>div{padding:2px 0 12px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-more .obp-features{margin:0 0 12px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-more p{font-size:11px;line-height:1.55} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-card-actions{padding-top:2px;gap:6px;margin-top:auto} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-card-actions .obp-button{min-height:46px;font-size:13px;padding:12px 15px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-card-actions>small{font-size:9px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-more>summary:focus-visible{outline:2px solid #d81f26;outline-offset:2px;border-radius:3px} /* Les lignes suivent le contenu le plus long, sans masquer ni tronquer les textes. */ @supports(grid-template-rows:subgrid){ #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-card-body{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0} } @media(max-width:650px){ #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card{display:flex;grid-row:auto} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-card-body{display:flex;padding:10px 16px 14px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-card-title{font-size:19px} } /* Le repère de commande reste visible sur les variantes de volet. */ #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-options .obp-vr-command{padding:0;margin:0;min-height:44px;gap:7px;border:0} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-options .obp-vr-command img{width:40px;height:40px;object-fit:contain} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-options .obp-vr-command strong{font-size:10px} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-options .obp-vr-command span{display:none} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-vr-card .obp-card-options .obp-vr-colors svg{display:none} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-vr-card .obp-card-options .obp-vr-colors strong{font-size:10px;text-align:right} /* Ces photos très verticales montrent la menuiserie entière, du haut au seuil, sans la recadrer (portes de service ajoutées le 25/09/2026 : le cadre carré leur coupait le bas). */ #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card:is([data-model="porte-fenetre-1-vantail"],[data-model="porte-fenetre-1-vantail-alu"],[data-model="porte-service"],[data-model="porte-service-alu"]) .obp-card-image img{object-fit:contain} #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-card-more .obp-card-copy{margin:4px 0 14px} /* Collections : quatre cartes par ligne sur ordinateur, à la même largeur pour toutes les familles — fenêtres, baies, portes-fenêtres, volets, portails, garages et portes d'entrée (décision du gérant, 18/09/2026). En dessous de 1200 px, chaque famille garde ses colonnes actuelles. */ @media(min-width:1200px){ #onlybaie-perspective #op-produits :is(.obp-grid,.obp-garage-cards,.obg-grid){grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} /* Une sélection de garage à un ou deux modèles garde sa mise en page large. */ #onlybaie-perspective #op-produits .obp-garage-selection[data-model-count="1"]>.obp-grid{grid-template-columns:minmax(0,1fr)} #onlybaie-perspective #op-produits .obp-garage-selection[data-model-count="2"]>.obp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Portes d'entrée : leurs trois vues (produit, situation, intérieur) demandent un peu plus de largeur, d'où quatre colonnes à partir de 1300 px seulement. */ @media(min-width:1300px){ #onlybaie-perspective #op-produits .pe-products{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} #onlybaie-perspective #op-produits .pe-products .pe-photo-stage{height:240px;padding:6px} #onlybaie-perspective #op-produits .pe-products .pe-product-info{padding:16px 18px 18px} #onlybaie-perspective #op-produits .pe-products .pe-product-info h2{font-size:23px} /* Les trois vues (produit, situation, intérieur) tiennent sur une ligne : cartes alignées. */ #onlybaie-perspective #op-produits .pe-products .pe-photo-controls{flex-wrap:nowrap;gap:5px;padding:12px 8px 0} #onlybaie-perspective #op-produits .pe-products .pe-photo-controls button{font-size:12px;padding:8px 9px;min-height:38px;white-space:nowrap} } /* Téléphone : cartes compactes, deux par ligne (choix du gérant, 18/09/2026). Photo, nom, prix « à partir de » et bouton ; dimensions, teintes, options et « Ce prix comprend » restent dans le configurateur et sur la fiche. La carte large du configurateur libre (sélection garage à un seul modèle) est gardée. */ @media(max-width:650px){ #onlybaie-perspective #op-produits :is(.obp-grid,.obp-garage-cards,.obg-grid,.pe-products){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #onlybaie-perspective #op-produits .obp-garage-selection[data-model-count="1"]>.obp-grid{grid-template-columns:minmax(0,1fr)} #onlybaie-perspective #op-produits :is(.obp-grid,.obp-garage-cards,.obg-grid,.pe-products):not(.obp-garage-selection[data-model-count="1"]>.obp-grid)>* :is(.obp-card-meta,.obp-card-keypoints,.obp-card-options,.obp-card-more,.ob-product-badge,.ob-prix-reference,.ob-prix-details,.ob-portail-dessin,.ob-portail-palette,.ob-product-leadtime,.ob-product-price-dimensions,.ob-product-price-details,.obp-kicker,.obg-kicker,.obg-dimensions,.obg-coloris,.obg-equipment,.obg-button-secondary,.obp-garage-eyebrow,.obp-garage-card-body>p,.ob-portail-famille .obp-card-body>p,.obp-model-sr,.pe-model-kind,.pe-photo-controls,.pe-photo-caption,.pe-product-info>p,.pe-product-info>small,.pe-product-specs,.pe-product-color){display:none} /* Photos : carrées pour les menuiseries, cadre réduit pour les portes. */ #onlybaie-perspective #op-produits .obp-grid:not(.obp-garage-selection[data-model-count="1"]>.obp-grid)>.obp-unified-card:not(.ob-portail-card) .obp-card-image{height:auto;aspect-ratio:1/1;padding:0} #onlybaie-perspective #op-produits .pe-products .pe-product-photo{padding:0} #onlybaie-perspective #op-produits .ob-portail-familles>.ob-portail-famille .obp-card-image{height:auto;aspect-ratio:4/3} #onlybaie-perspective #op-produits .pe-products .pe-photo-stage{height:170px;padding:4px} #onlybaie-perspective #op-produits .obg-grid .obg-card-image{padding:8px} /* Corps de carte resserré, titres et prix à l'échelle. */ #onlybaie-perspective #op-produits :is(.obp-grid,.obp-garage-cards,.obg-grid,.pe-products):not(.obp-garage-selection[data-model-count="1"]>.obp-grid)>* :is(.obp-card-body,.obp-garage-card-body,.obg-card-body,.pe-product-info){display:flex;flex-direction:column;gap:6px;padding:10px 10px 12px;min-height:0} #onlybaie-perspective #op-produits :is(.obp-grid,.obp-garage-cards,.obg-grid,.pe-products):not(.obp-garage-selection[data-model-count="1"]>.obp-grid)>* :is(.obp-card-title,.obp-garage-card-body h3,.obg-card-body h3,.pe-product-info h2){font-size:14px;line-height:1.25;letter-spacing:-.01em;min-height:0;margin:0} #onlybaie-perspective #op-produits .pe-products .pe-product-info h2 .pe-product-type{font-size:11px;line-height:1.3} #onlybaie-perspective #op-produits .pe-products .pe-product-info h2 .pe-product-name{font-size:17px} #onlybaie-perspective #op-produits :is(.obp-grid,.obp-garage-cards,.obg-grid,.pe-products):not(.obp-garage-selection[data-model-count="1"]>.obp-grid)>* :is(.ob-prix-collection,.ob-product-price-slot){margin-top:auto;padding-top:2px;min-height:0} #onlybaie-perspective #op-produits :is(.obp-grid,.obp-garage-cards,.obg-grid,.pe-products):not(.obp-garage-selection[data-model-count="1"]>.obp-grid)>* :is(.ob-prix-montant strong,.ob-product-price>strong){font-size:19px;letter-spacing:-.4px} #onlybaie-perspective #op-produits :is(.obp-grid,.obp-garage-cards,.obg-grid,.pe-products):not(.obp-garage-selection[data-model-count="1"]>.obp-grid)>* :is(.ob-prix-montant span,.ob-product-price>span:first-child){font-size:11px;margin-bottom:0} /* Bouton sur deux lignes au besoin, jamais rogné. */ #onlybaie-perspective #op-produits :is(.obp-grid,.obp-garage-cards,.obg-grid,.pe-products):not(.obp-garage-selection[data-model-count="1"]>.obp-grid)>* :is(.obp-button,.obg-button,.obp-garage-card-action,.pe-product-cta){font-size:12px;line-height:1.25;padding:9px 10px;min-height:38px;gap:6px;margin-top:6px;width:100%;box-sizing:border-box} #onlybaie-perspective #op-produits :is(.obp-grid,.obp-garage-cards,.obg-grid,.pe-products):not(.obp-garage-selection[data-model-count="1"]>.obp-grid)>* :is(.obp-card-actions,.ob-product-purchase){gap:0;padding:0;margin-top:auto} } /* Fiches (18/09/2026) : le prix « à partir de » sous les caractéristiques, comme sur la carte de la collection. */ @media(max-width:650px){ #onlybaie-perspective #op-produits :is(.obp-grid,.obp-garage-cards,.obg-grid,.pe-products) .ob-prix-collection .ob-prix-reference{display:block!important;font-size:10px;line-height:1.4;margin:5px 0} #onlybaie-perspective #op-produits :is(.obp-grid,.obp-garage-cards,.obg-grid,.pe-products) .ob-prix-collection .ob-prix-details{display:block!important;font-size:11px} #onlybaie-perspective #op-produits .ob-prix-configuration{font-size:11px} #onlybaie-perspective #op-produits .ob-prix-details summary{min-height:36px;padding:8px 0;font-size:11px} } #onlybaie-perspective #op-produits .obp-product-hero .ob-prix-collection{margin:18px 0 14px;padding-top:0;max-width:420px} /* Fiches sur téléphone (18/09/2026) : le titre, puis la photo du produit, puis les caractéristiques, le prix et le bouton — comme les fiches des portes d'entrée. Ordinateur et tablette inchangés (photo à droite du texte). */ @media(max-width:650px){ #onlybaie-perspective #op-produits .obp-product-hero>div:first-child{display:contents} #onlybaie-perspective #op-produits .obp-product-hero>div:first-child>.obp-heading{order:0} #onlybaie-perspective #op-produits .obp-product-hero>.obp-product-image{order:1} #onlybaie-perspective #op-produits .obp-product-hero>div:first-child>*{order:5} #onlybaie-perspective #op-produits .obp-product-hero>div:first-child>.ob-prix-collection{order:2;margin:4px 0 0} #onlybaie-perspective #op-produits .obp-product-hero>div:first-child>.obp-specs{order:3} #onlybaie-perspective #op-produits .obp-product-hero>div:first-child>.obp-button{order:4;justify-self:start} #onlybaie-perspective #op-produits .obp-product-hero>div:first-child>.obp-motor-brand{order:6;margin:0} /* Photo contenue : le produit, sa photo et son prix dans le premier écran. */ #onlybaie-perspective #op-produits .obp-product-hero>.obp-product-image{padding:8px} #onlybaie-perspective #op-produits .obp-product-hero>.obp-product-image img{max-height:220px;width:auto;max-width:100%;margin:0 auto;object-fit:contain} } /* Cartes compactes des portes d'entrée (gérant, 25/09/2026) : une carte faisait 1 117 px de haut, plus qu'un écran. Sur la liste restent la photo, le nom, le décor, les coloris, le prix et le bouton ; les autres vues, leur légende et les dimensions sont sur la fiche du modèle. */ #onlybaie-perspective #op-produits .pe-products .pe-product-photo{padding-top:38px} #onlybaie-perspective #op-produits .pe-products .pe-product-info>p{min-height:0;margin:6px 0 4px} #onlybaie-perspective #op-produits .pe-products .pe-product-color{margin:8px 0 10px} #onlybaie-perspective #op-produits .pe-products .ob-prix-collection{padding-top:10px} #onlybaie-perspective #op-produits .pe-products .ob-prix-reference{margin:4px 0 6px} #onlybaie-perspective #op-produits .pe-products .ob-prix-details{margin-top:6px} @media(max-width:650px){#onlybaie-perspective #op-produits .pe-products .pe-product-photo{padding-top:0}} /* Photos des cartes (25/09/2026) : cadre carré. Le 4/3 essayé le même jour rognait jusqu'à 40 % des photos en portrait et coupait le haut des menuiseries. Dans ces photos, la menuiserie occupe le haut de l'image et le sol le bas : le cadrage part du haut plutôt que du centre. */ #onlybaie-perspective :is(#op-produits,#op-bestsellers) .obp-unified-card .obp-card-image img{object-position:50% 30%} /* Portes d'entrée : « Fabriqué en France » sur la ligne du badge « Sur mesure », sans hauteur en plus (25/09/2026). */ #onlybaie-perspective .pe-card-labels{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} #onlybaie-perspective .pe-card-labels>.ob-product-badge{margin:0} #onlybaie-perspective .pe-card-origin{display:inline-flex;align-items:center;gap:6px;font:500 12px/1.4 'DM Sans',sans-serif;color:#454d54;white-space:nowrap} #onlybaie-perspective .pe-card-origin i{width:18px;height:12px;flex:none;background:linear-gradient(90deg,#002395 0 33.3%,#fff 33.3% 66.6%,#ed2939 66.6%);box-shadow:0 0 0 1px #0000001f} @media(max-width:650px){#onlybaie-perspective #op-produits .pe-products .pe-card-labels{display:none}} /* Portes de service PVC et aluminium : même hauteur de photo que les autres cartes de porte (25/09/2026). */ #onlybaie-perspective #op-produits .pe-product-card[data-porte-service-menuiserie] .pe-product-photo{height:278px;padding:38px 6px 6px;display:flex;align-items:center;justify-content:center} #onlybaie-perspective #op-produits .pe-product-card[data-porte-service-menuiserie] .pe-product-photo>img{height:100%;width:100%;object-fit:contain} @media(max-width:650px){#onlybaie-perspective #op-produits .pe-product-card[data-porte-service-menuiserie] .pe-product-photo{height:170px;padding:4px}} /* Offre portail : adaptation du socle commun des cartes, sans modifier les autres familles. */ #onlybaie-perspective #op-produits .ob-product-card{border-radius:0} #onlybaie-perspective #op-produits .obp-card.ob-portail-card.ob-product-card .obp-card-image{height:auto;aspect-ratio:960/550;padding:0;background:#eeeee9} #onlybaie-perspective #op-produits .ob-product-card .obp-card-body{padding:22px} #onlybaie-perspective #op-produits .ob-product-card .obp-card-title{font-size:22px;line-height:1.2;min-height:54px;margin:10px 0 8px} #onlybaie-perspective #op-produits .ob-product-card .obp-card-meta>small{font-size:11px} #onlybaie-perspective #op-produits .ob-product-card .ob-portail-dessin{font-size:14px;margin:8px 0 16px;color:#62686c} #onlybaie-perspective #op-produits .ob-product-card .ob-portail-palette{margin:0 0 20px;padding:10px 12px;gap:10px} #onlybaie-perspective #op-produits .ob-product-card .ob-portail-palette .ob-nuancier-icone{width:38px;height:38px} #onlybaie-perspective #op-produits .ob-product-card .ob-portail-palette strong{font-size:13px} #onlybaie-perspective #op-produits .ob-product-card .ob-portail-palette small{font-size:12px} #onlybaie-perspective #op-produits .ob-product-purchase{margin-top:auto;padding-top:20px;border-top:1px solid #e6e5df} #onlybaie-perspective #op-produits .ob-product-price-slot{min-height:123px} #onlybaie-perspective #op-produits :is(.ob-product-card,.ob-portail-famille) .ob-product-price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:7px;row-gap:2px;margin:0;color:#111;line-height:1.2} #onlybaie-perspective #op-produits .ob-product-price>span:first-child{flex-basis:100%;color:#62686c;font-size:13px;margin-bottom:5px} #onlybaie-perspective #op-produits .ob-product-price>strong{font-size:30px;font-weight:800;letter-spacing:-.035em;white-space:nowrap} #onlybaie-perspective #op-produits .ob-product-price>span:last-child{font-size:12px;font-weight:600;color:#62686c} #onlybaie-perspective #op-produits :is(.ob-product-card,.ob-portail-famille) .ob-product-price-dimensions{margin:6px 0 0;font-size:12px;color:#62686c} #onlybaie-perspective #op-produits .ob-product-price-details{font-size:12px;margin-top:6px;color:#62686c} #onlybaie-perspective #op-produits .ob-product-price-details summary{display:list-item;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px 0;min-height:28px} #onlybaie-perspective #op-produits .ob-product-price-details summary:hover{color:#d81f26} #onlybaie-perspective #op-produits .ob-product-price-details p{font-size:12px;line-height:1.55;margin:8px 0} #onlybaie-perspective #op-produits .ob-product-card .ob-product-leadtime{display:flex;gap:7px;align-items:center;margin:16px 0;font-size:12px;line-height:1.4;color:#61676a} #onlybaie-perspective #op-produits .ob-product-clock{display:inline-block;position:relative;flex-shrink:0;width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%} #onlybaie-perspective #op-produits .ob-product-clock::after{content:"";position:absolute;width:4px;height:5px;top:3px;left:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor} #onlybaie-perspective #op-produits .ob-product-leadtime strong{font-weight:700;color:#353b3e} #onlybaie-perspective #op-produits .ob-product-card .obp-button{background:#d81f26;border:1px solid #d81f26;color:#fff;min-height:48px;padding:12px 10px;font-size:14px;line-height:1.4;width:100%;justify-content:center} #onlybaie-perspective #op-produits .ob-product-card .obp-button:hover{background:#b81821;border-color:#b81821} #onlybaie-perspective #op-produits :is(.ob-product-card,.ob-portail-famille) .ob-product-price-loading,#onlybaie-perspective #op-produits :is(.ob-product-card,.ob-portail-famille) .ob-product-price-unavailable{font-size:16px;font-weight:700;margin:0 0 8px} #onlybaie-perspective #op-produits .ob-product-price-slot>small{font-size:12px;line-height:1.5;color:#62686c;display:block} #onlybaie-perspective #op-produits .ob-product-price-retry{border:0;background:none;color:#b81821;font:inherit;font-size:12px;text-decoration:underline;padding:8px 0;cursor:pointer} #onlybaie-perspective #op-produits .ob-product-card :is(a,button,summary):focus-visible{outline:3px solid #20262c;outline-offset:3px} @media(max-width:650px){#onlybaie-perspective #op-produits .ob-product-card .obp-card-title{min-height:0}#onlybaie-perspective #op-produits .ob-product-card .obp-card-body{padding:20px}} #onlybaie-perspective #op-produits .ob-product-card{display:flex;grid-row:auto} #onlybaie-perspective #op-produits .ob-product-card .obp-card-body{display:flex;grid-row:auto} #onlybaie-perspective .op-top{padding-block:0} #onlybaie-perspective .op-pro-access{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 12px;color:#fff;background:#d81f26;font-size:12px;font-weight:700;white-space:nowrap;text-decoration:none;flex:none} #onlybaie-perspective .op-pro-access:hover{background:#b71820} #onlybaie-perspective .op-pro-access:focus-visible{outline:2px solid #fff;outline-offset:-4px} #onlybaie-perspective .op-pro-access svg{flex:none} @media(max-width:1100px){#onlybaie-perspective .op-base-top-left>span:last-child{display:none}} @media(max-width:650px){ #onlybaie-perspective .op-base-top-inner{justify-content:space-between;padding:0 16px;gap:12px} #onlybaie-perspective .op-base-top-left{display:flex} #onlybaie-perspective .op-base-top-left>span,#onlybaie-perspective .op-base-rating{display:none} #onlybaie-perspective .op-pro-access{min-height:44px;padding-inline:12px;font-size:12px} #onlybaie-perspective .op-base-top-right>a{display:inline-flex;align-items:center;min-height:44px} #onlybaie-perspective .op-base-top-right>.op-base-rating{display:none} } /* Footer public partagé : boutique, panier, comptes et pages légales. */ .ob-footer{font-family:"DM Sans",Arial,sans-serif;background:#171819;color:#f5f5f5;margin:0;border-top:3px solid #D81F26;text-align:left} .ob-footer *{box-sizing:border-box}.ob-footer-inner{max-width:1440px;margin:auto;padding:48px clamp(22px,5vw,80px) 24px} .ob-footer a{color:inherit;text-decoration:none;touch-action:manipulation}.ob-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}.ob-footer a:focus-visible{outline:2px solid #fff;outline-offset:5px;border-radius:2px} .ob-footer-intro{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-bottom:32px;border-bottom:1px solid #3a3c3e}.ob-footer-intro>div{display:flex;align-items:center;gap:28px}.ob-footer a.ob-footer-logo{font-family:Manrope,"DM Sans",Arial,sans-serif;font-size:46px;line-height:1.1;letter-spacing:-3px;font-weight:800;text-decoration:none}.ob-footer-logo span{color:#ef333a}.ob-footer-intro p{font-size:15px;line-height:1.5;color:#c3c5c7;margin:0}.ob-footer-contact>span{display:block;font-size:13px;color:#c3c5c7;margin-bottom:9px}.ob-footer-contact strong{font-size:clamp(17px,2vw,22px);font-weight:600;overflow-wrap:anywhere}.ob-footer-contact strong span{color:#f0444a;margin-left:8px} .ob-footer-grid{display:grid;grid-template-columns:1fr 1.15fr 1.2fr 1.15fr;gap:32px;padding:32px 0}.ob-footer h2{font-size:12px!important;letter-spacing:1.1px!important;text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:700;line-height:1.5}.ob-footer ul{list-style:none;margin:0;padding:0}.ob-footer li{margin:0}.ob-footer li a{display:inline-block;padding:5px 0;font-size:13px;line-height:1.6;color:#c9cbcd}.ob-footer-address{font-size:13px;line-height:1.7}.ob-footer a.ob-footer-phone{display:inline-block;font-size:19px;font-weight:700;margin-bottom:14px}.ob-footer address{font-style:normal;color:#c9cbcd}.ob-footer-address p{color:#b1b5b8;line-height:1.7;margin:16px 0}.ob-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #3a3c3e;padding-top:22px;font-size:11px;line-height:1.8;color:#b1b5b8}.ob-footer-bottom p{margin:0}.ob-footer-bottom>a{font-size:12px;white-space:nowrap} @media(max-width:1000px){.ob-footer-grid{grid-template-columns:1fr 1fr;gap:28px 40px}.ob-footer-bottom{align-items:flex-start;flex-direction:column;gap:12px}.ob-footer-intro>div{gap:18px}.ob-footer-intro p{font-size:13px}} @media(max-width:600px){.ob-footer-inner{padding:32px 22px 25px}.ob-footer-intro{align-items:flex-start;flex-direction:column;gap:24px;padding-bottom:26px}.ob-footer a.ob-footer-logo{font-size:39px}.ob-footer-grid{gap:28px 22px;padding:28px 0}.ob-footer-grid>nav:nth-child(3),.ob-footer-address{grid-column:1/-1}.ob-footer-grid>nav:nth-child(3) ul{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.ob-footer li a{font-size:12px;padding:6px 0;line-height:1.6}.ob-footer h2{font-size:11px!important;margin-bottom:10px}.ob-footer-address{border-top:1px solid #3a3c3e;padding-top:24px}.ob-footer-address p{margin:10px 0}.ob-footer-bottom>a{white-space:normal}} @media print{.ob-footer{display:none!important}} /* Moyens de paiement (03/10/2026, proposition B « cases fines » retenue par le gérant) : cases blanches identiques, logos officiels à leur taille exacte en px (Safari étire les largeurs automatiques ; charte CB 52,2 × 37,8 px minimum), « Paiement sécurisé par CIC » à droite, lien vers /paiement-securise. */ .ob-paiement-rangee{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap} .ob-paiements{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0} .ob-paiements li{display:flex;align-items:center;justify-content:center;gap:5px;width:66px;height:44px;margin:0;padding:0;background:#fff;border:1px solid #e3e3e3;overflow:hidden;color:#333;flex:none} .ob-paiements li.ob-paiement-paypal{width:96px} .ob-paiements li.ob-paiement-texte{width:auto;padding:0 12px;gap:7px;font:700 12.5px/1 "DM Sans",Arial,sans-serif} .ob-paiements img{display:block;flex:none;max-width:none;max-height:none;object-fit:contain} .ob-paiements svg{flex:none} .ob-paiement-cic{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none} .ob-paiement-cic:hover strong{text-decoration:underline;text-underline-offset:3px} .ob-paiement-cadenas{display:grid;place-items:center;width:40px;height:40px;background:#D81F26;color:#fff;flex:none} .ob-paiement-cic-texte strong{display:block;font-size:14px;font-weight:700;line-height:1.3} .ob-paiement-cic-texte small{display:block;font-size:12px;line-height:1.4;opacity:.72;margin-top:2px} .ob-paiement-cic-logo{display:grid;place-items:center;background:#fff;padding:5px 7px;flex:none} .ob-paiement-cic-logo img{display:block;max-width:none} .ob-footer-paiement{display:grid;gap:16px;border-top:1px solid #3a3c3e;padding:24px 0} .ob-footer-paiement h2{margin-bottom:6px} .ob-footer-paiement p{margin:0;font-size:13px;line-height:1.6;color:#c9cbcd;max-width:640px} .ob-footer .ob-paiements li{border-color:#fff} .ob-footer a.ob-paiement-cic:hover{text-decoration:none} /* Pied de page : logos détourés, sans cases blanches (gérant, 04/10/2026). Visa et le nom PayPal en versions blanches officielles ; CB, Mastercard, le « P » PayPal et le cartouche CIC en couleurs. Écart de 22 px entre marques : au moins la zone de protection CB (un quart de sa hauteur). */ .ob-footer .ob-paiements-sombre{gap:12px 22px} .ob-footer .ob-paiements-sombre li{width:auto;height:48px;padding:0;background:transparent;border:0} .ob-footer .ob-paiements-sombre li.ob-paiement-paypal{width:auto;gap:6px} .ob-footer .ob-paiements-sombre li.ob-paiement-texte{padding:0;gap:8px;color:#fff;font-size:13.5px} .ob-footer .ob-paiement-cic-logo{background:transparent;padding:0} .ob-paiements li.ob-paiement-cofidis{width:auto;padding:0 12px;gap:8px} .ob-paiements li.ob-paiement-cofidis b{font:800 15px Manrope,"DM Sans",Arial,sans-serif;color:#111} /* Fond clair (accueil, panier) : logos détourés eux aussi, sans cases (gérant, 06/10/2026 : « les petits rectangles autour des logos, ça ne fait pas beau »). Écart d'au moins un quart de la hauteur du logo CB. */ .ob-paiement-accueil .ob-paiements,.obc-paiements .ob-paiements{gap:12px 22px} .ob-paiement-accueil .ob-paiements li,.obc-paiements .ob-paiements li{width:auto;background:transparent;border:0} .ob-paiement-accueil .ob-paiements li.ob-paiement-texte,.obc-paiements .ob-paiements li.ob-paiement-texte{padding:0} .ob-paiement-mention{margin:12px 0 0;font-size:11.5px;line-height:1.5;opacity:.72;max-width:900px} /* Accueil : section « Un paiement simple et sécurisé », juste avant les certifications (03/10/2026). */ .ob-paiement-accueil{background:#fff;color:#171717;padding:64px 24px;border-top:1px solid #e9e6e2;font-family:"DM Sans",Arial,sans-serif} .ob-paiement-accueil *{box-sizing:border-box} .ob-paiement-accueil-cadre{max-width:1320px;margin:0 auto;display:grid;gap:30px} .ob-paiement-accueil-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap} .ob-paiement-accueil-surtitre{color:#b91c24;font-size:12px;font-weight:800;letter-spacing:.12em;margin:0 0 16px} .ob-paiement-accueil h2{font-family:Manrope,"DM Sans",Arial,sans-serif;font-size:clamp(30px,3.4vw,48px);line-height:1.13;letter-spacing:-.04em;margin:0;font-weight:800} .ob-paiement-accueil h2 span{color:#77716c} .ob-paiement-accueil-tete>p{font-size:17px;line-height:1.65;max-width:470px;color:#605c57;margin:0} .ob-paiement-accueil-tete a{color:#111;font-weight:700;text-underline-offset:4px} @media(max-width:700px){.ob-paiement-accueil{padding:44px 16px}.ob-paiement-accueil-tete>p{font-size:15.5px}} /* Réseaux sociaux (04/10/2026) : sous « À votre écoute », dans l'espace libre de la colonne. Carrés de 44 px (cible tactile minimale), angles droits comme le reste du site, logo blanc ; au survol, le carré prend la couleur officielle de la marque. */ .ob-footer-reseaux{margin-top:26px;padding-top:22px;border-top:1px solid #3a3c3e} .ob-footer-reseaux h2{margin-bottom:14px} .ob-reseaux{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0} .ob-reseaux li{margin:0} .ob-footer a.ob-reseau{display:grid;place-items:center;width:44px;height:44px;border:1px solid #4a4d50;color:#fff;background:transparent;transition:background-color .18s ease,border-color .18s ease} .ob-reseau svg{display:block;flex:none} .ob-footer a.ob-reseau:hover{text-decoration:none;border-color:transparent} .ob-footer a.ob-reseau-instagram:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)} .ob-footer a.ob-reseau-pinterest:hover{background:#e60023} .ob-footer a.ob-reseau-facebook:hover{background:#0866ff} .ob-footer a.ob-reseau-youtube:hover{background:#ff0000} .ob-footer a.ob-reseau:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:0} @media(prefers-reduced-motion:reduce){.ob-footer a.ob-reseau{transition:none}} @media(max-width:600px){.ob-footer-reseaux{margin-top:20px;padding-top:20px}} @media (max-width: 980px) { #onlybaie-perspective .op-header .op-head .op-phone { display: inline-flex; flex: 0 0 auto; order: 9; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px; background: var(--op-red, #d81f26); color: #fff; text-decoration: none; } #onlybaie-perspective .op-header .op-head .op-phone small { display: none; } #onlybaie-perspective .op-header .op-head .op-phone strong { color: #fff; font: 700 13px/1 Manrope, Arial, sans-serif; white-space: nowrap; } } @media (max-width: 620px) { #onlybaie-perspective .op-header .op-head { gap: 10px; padding-inline: 12px; } #onlybaie-perspective .op-header .op-head .op-logo { flex: 0 0 112px; } #onlybaie-perspective .op-header .op-head-tools { gap: 10px; } #onlybaie-perspective .op-header .op-head .op-phone { padding: 6px 8px; } #onlybaie-perspective .op-header .op-head .op-phone strong { font-size: 12px; } #onlybaie-perspective .op-header .op-head-tools :is(button[data-dialog="account"], a[href="/compte"]).op-base-desktop.op-base-action { display: none !important; } } @media (max-width: 860px) { #onlybaie-perspective input:is([type="text"], [type="number"], [type="search"], [type="tel"], [type="email"], [type="password"]), #onlybaie-perspective select, #onlybaie-perspective textarea { font-size: 16px !important; } /* Les cotes des parcours PVC et volet gardent le corps plus grand voulu à la maquette. */ #onlybaie-perspective .cs-input input { font-size: 18px !important; } } /* Cartes de COLLECTION seulement : aucun sélecteur du mégamenu. */ #op-produits .ob-prix-collection{margin-top:auto;padding-top:18px;color:#111;min-width:0} #op-produits .ob-prix-montant{display:flex;flex-direction:column;gap:3px;margin:0!important;font-size:13px!important;color:#555} #op-produits .ob-prix-montant strong{font-family:Manrope,sans-serif;font-size:27px;line-height:1.25;font-weight:800;letter-spacing:-.7px;color:#111;white-space:nowrap} #op-produits .ob-prix-montant small{font:600 12px/1.2 'DM Sans',sans-serif;letter-spacing:0} #op-produits .ob-prix-reference{font:400 12px/1.5 'DM Sans',sans-serif!important;margin:6px 0 10px!important;color:#626262!important} #op-produits .ob-prix-details{font-size:13px;border-top:1px solid #e7e7e7;margin-top:12px} #op-produits .ob-prix-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;cursor:pointer;font-weight:600;list-style:none;color:#222} #op-produits .ob-prix-details summary::-webkit-details-marker{display:none} #op-produits .ob-prix-details summary span{font-size:19px;color:#D81F26} #op-produits .ob-prix-details[open] summary span{transform:rotate(45deg)} #op-produits .ob-prix-details ul{padding-left:17px;margin:0 0 10px;display:grid;gap:5px} #op-produits .ob-prix-details p{font-size:12px!important;line-height:1.5;color:#666!important;margin:8px 0 12px!important} #op-produits .ob-prix-attente{font-size:13px!important;min-height:45px;color:#666!important;margin:0!important} #op-produits [data-prix-collection-retry]{border:0;background:none;padding:7px 0;color:#D81F26;text-decoration:underline;cursor:pointer;font:600 13px 'DM Sans',sans-serif} #op-produits .ob-prix-details summary:focus-visible,#op-produits [data-prix-collection-retry]:focus-visible{outline:2px solid #D81F26;outline-offset:3px} #op-produits .pe-product-info{display:flex;flex-direction:column} #op-produits .pe-product-info>div:has(>.ob-prix-collection){margin-top:auto} #op-produits .obp-unified-card .obp-card-actions:has(>.ob-prix-collection){padding-top:0;margin-top:auto} #op-produits .obp-unified-card .obp-card-actions>.ob-prix-collection{width:100%;margin-bottom:8px} #op-produits .obp-unified-card .obp-card-actions{flex-wrap:wrap} @media(max-width:420px){#op-produits .ob-prix-montant strong{font-size:25px}} #nos-certifications{background:#f6f5f3;color:#171717;padding:76px 24px;border-top:1px solid #e9e6e2}#nos-certifications *{box-sizing:border-box}#nos-certifications .ob-certifications-inner{max-width:1320px;margin:auto}#nos-certifications .ob-certifications-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:36px}#nos-certifications .ob-certifications-eyebrow{color:#b91c24;font-size:12px;font-weight:800;letter-spacing:.12em;margin:0 0 16px}#nos-certifications h2{font-size:clamp(30px,3.4vw,48px);line-height:1.13;letter-spacing:-.04em;margin:0;font-weight:800}#nos-certifications h2 span{color:#77716c}#nos-certifications .ob-certifications-heading>p{font-size:17px;line-height:1.65;max-width:410px;color:#605c57;margin:0}#nos-certifications .ob-certifications-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}#nos-certifications .ob-certifications-card{background:white;border:1px solid #e8e5e1;border-radius:18px;padding:28px;display:flex;flex-direction:column}#nos-certifications .ob-certifications-logos{height:86px;display:flex;align-items:center;gap:16px;margin-bottom:22px}#nos-certifications img{display:block;max-width:46%;width:150px;height:76px;object-fit:contain;object-position:left center}#nos-certifications h3{font-size:20px;line-height:1.3;margin:0 0 12px;letter-spacing:-.02em}#nos-certifications article p{font-size:16px;line-height:1.65;color:#605c57;margin:0 0 24px}#nos-certifications small{display:block;margin-top:auto;padding-top:16px;border-top:1px solid #eee;font-size:13px;line-height:1.5;color:#746f6a}#nos-certifications .ob-certifications-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:28px}#nos-certifications .ob-certifications-bottom p{max-width:830px;font-size:14px;line-height:1.6;color:#6c6761;margin:0}#nos-certifications a{color:#171717;font-size:15px;font-weight:750;text-decoration:none;border-bottom:1px solid #d81f26;padding:10px 0;white-space:nowrap}#nos-certifications a:focus-visible{outline:2px solid #d81f26;outline-offset:5px}@media(max-width:850px){#nos-certifications .ob-certifications-heading{display:block}#nos-certifications .ob-certifications-heading>p{margin-top:22px;max-width:none}#nos-certifications .ob-certifications-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#nos-certifications .ob-certifications-bottom{align-items:flex-start;flex-direction:column;gap:12px}}@media(max-width:520px){#nos-certifications{padding:44px 18px}#nos-certifications .ob-certifications-grid{grid-template-columns:1fr;gap:12px}#nos-certifications .ob-certifications-card{padding:24px}#nos-certifications .ob-certifications-logos{height:72px;margin-bottom:16px}#nos-certifications img{height:66px}#nos-certifications .ob-certifications-eyebrow{font-size:11px;letter-spacing:.09em}} /* Menu compact (maquette E validée par le gérant, 18/10/2026) : lib/navigation/menu-compact.mjs. Chargée en dernier : elle l'emporte sur les feuilles précédentes du menu. Police hébergée par le site (lib/navigation/polices-locales.mjs). Ordinateur au-dessus de 980 px, mobile en dessous. */ #onlybaie-perspective .op-header.op-menu-compact .op-menu-ligne{display:none} /* Burger : la croix (deux traits droits, sans arrondi) n'apparaît que tiroir ouvert, dans le bloc mobile. */ #onlybaie-perspective .op-header.op-menu-compact .op-menu-toggle .op-croix{display:none} /* Nom du modèle : la partie qui le distingue de ses voisins est soulignée en rouge, le mot reste noir (variante B choisie par le gérant le 19/10/2026 ; table dans lib/navigation/menu-difference.mjs). */ #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-caption strong .op-menu-diff{color:inherit;text-decoration:underline;text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#d81f26;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-skip-ink:none} /* ---------- Ordinateur ---------- */ @media (min-width:981px){ /* Ordinateur (gérant, 20/10/2026) : l'en-tête n'est plus collant, il défile avec la page ; le panneau ouvert, placé sous lui, part avec lui. Le script de mesure met alors --op-sticky-offset à 0. */ #onlybaie-perspective .op-header.op-menu-compact{position:relative} #onlybaie-perspective .op-header.op-menu-compact .op-nav{justify-content:center;min-height:0} #onlybaie-perspective .op-header.op-menu-compact .op-nav>button{position:relative;display:flex;align-items:center;height:63px;margin:-3px 0 -2px;min-height:0;padding:0 15px;background:none;box-shadow:none;color:#111;font:700 15px/1 'Barlow Semi Condensed','Arial Narrow',Manrope,Arial,sans-serif;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap} #onlybaie-perspective .op-header.op-menu-compact .op-nav>button+button:before{content:"";position:absolute;left:0;top:50%;width:1px;height:22px;margin-top:-11px;background:#d6d6d0} #onlybaie-perspective .op-header.op-menu-compact .op-nav>button:after{display:none} #onlybaie-perspective .op-header.op-menu-compact .op-nav>button:hover,#onlybaie-perspective .op-header.op-menu-compact .op-nav>button[aria-expanded="true"]{background:#d81f26;color:#fff;box-shadow:none} #onlybaie-perspective .op-header.op-menu-compact .op-nav>button:hover:before,#onlybaie-perspective .op-header.op-menu-compact .op-nav>button[aria-expanded="true"]:before,#onlybaie-perspective .op-header.op-menu-compact .op-nav>button:hover+button:before,#onlybaie-perspective .op-header.op-menu-compact .op-nav>button[aria-expanded="true"]+button:before{opacity:0} #onlybaie-perspective .op-header.op-menu-compact .op-nav>button:focus-visible{outline:2px solid #111;outline-offset:-4px} #onlybaie-perspective .op-header.op-menu-compact #op-mega{left:var(--op-menu-gauche,0px);right:auto;width:var(--op-menu-largeur,100%);max-height:none!important;overflow:visible!important;overscroll-behavior:auto;background:#fff;border:1px solid #dcdcd6;border-top:0;box-shadow:0 10px 18px -12px rgba(17,17,17,.18)} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-mega-content{display:block;max-width:none;margin:0;padding:0 22px 18px} #onlybaie-perspective .op-header.op-menu-compact #op-mega :is(.op-mega-intro,.op-model-heading,.op-garage-note,.op-menu-bottom){display:none!important} #onlybaie-perspective .op-header.op-menu-compact .op-menu-ligne{display:flex;align-items:center;gap:16px;min-height:50px;margin:0 0 16px;padding:10px 0;border-bottom:1px solid #e4e4df} #onlybaie-perspective .op-header.op-menu-compact .op-menu-ligne-titre{position:relative;padding-left:13px;font:700 19px/1.1 'Barlow Semi Condensed','Arial Narrow',Manrope,Arial,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#111} #onlybaie-perspective .op-header.op-menu-compact .op-menu-ligne-titre:before{content:"";position:absolute;left:0;top:1px;bottom:1px;width:4px;background:#d81f26} #onlybaie-perspective .op-header.op-menu-compact .op-menu-ligne-nombre{font:700 14px/1.2 'Barlow Semi Condensed','Arial Narrow',Manrope,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#6b6f64} #onlybaie-perspective .op-header.op-menu-compact .op-menu-ligne-note{font:400 12px/1.2 'DM Sans',Arial,sans-serif;color:#8b8d82} #onlybaie-perspective .op-header.op-menu-compact .op-menu-ligne-note[hidden]{display:none} #onlybaie-perspective .op-header.op-menu-compact .op-menu-ligne-collection{display:inline-flex;align-items:center;gap:7px;margin-left:auto;color:#d81f26;font:700 15px/1 'Barlow Semi Condensed','Arial Narrow',Manrope,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap} #onlybaie-perspective .op-header.op-menu-compact .op-menu-ligne-collection span{font-size:17px} #onlybaie-perspective .op-header.op-menu-compact .op-menu-ligne-collection:hover{color:#b9171e} #onlybaie-perspective .op-header.op-menu-compact .op-menu-ligne-collection:focus-visible{outline:2px solid #d81f26;outline-offset:3px} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;column-gap:26px!important;row-gap:12px!important;grid-auto-rows:auto} #onlybaie-perspective .op-header.op-menu-compact #op-mega:is([data-family="door"],[data-family="shutter"]) .op-model-list{display:flex!important;flex-direction:column;gap:16px!important} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-group{display:block;grid-column:auto} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-group h3{display:block;position:relative;margin:0 0 10px;padding:0 0 0 11px;font:700 13.5px/1.2 'Barlow Semi Condensed','Arial Narrow',Manrope,Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#51564b} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-group h3:before{position:absolute;left:0;top:0;bottom:0;width:3px;height:auto;border-radius:0;background:#d81f26} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;column-gap:26px!important;row-gap:12px!important} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-card{display:flex!important;flex-direction:row;align-items:stretch;gap:14px;min-width:0;min-height:0;margin:-6px;padding:6px;border:0;border-radius:0;background:transparent;box-shadow:none!important;transform:none!important;color:#111;text-decoration:none} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-card:hover{background:#f4f4f1} /* Survol : fond gris clair seulement, le nom reste noir (gérant, 19/10/2026). */ #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-card:hover strong{color:#111} /* Pas de zoom au survol ; les portes d'entrée gardent leur recadrage (translate), sinon la photo saute. */ #onlybaie-perspective .op-header.op-menu-compact #op-mega:not([data-family="entree"]) .op-model-card:hover img{transform:none} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-card:focus-visible{outline:2px solid #d81f26;outline-offset:0} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-card .op-model-media{width:92px;height:92px;flex:none;aspect-ratio:auto} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-caption{display:flex;flex-direction:column;justify-content:flex-start;gap:7px;flex:1;min-width:0;min-height:0;padding:4px 0 10px;border-bottom:1px solid #e4e4df;background:none} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-caption strong{min-height:0;font:700 15px/1.15 'Barlow Semi Condensed','Arial Narrow',Manrope,Arial,sans-serif;letter-spacing:.01em;text-transform:uppercase;color:#111} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-cta{display:inline-flex;justify-content:flex-start;align-items:center;gap:5px;width:auto;min-height:0;padding:0;border-radius:0;background:none!important;color:#d81f26;font:700 12.5px/1.2 'DM Sans',Arial,sans-serif;white-space:nowrap} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-cta .op-arrow{display:inline;color:#d81f26;font-size:14px} } @media (min-width:1440px){ #onlybaie-perspective .op-header.op-menu-compact .op-nav>button{font-size:16px;padding:0 19px} } @media (min-width:981px) and (max-width:1200px){ #onlybaie-perspective .op-header.op-menu-compact .op-nav>button{font-size:13px;padding:0 8px} #onlybaie-perspective .op-header.op-menu-compact #op-mega :is(.op-model-list,.op-model-row){grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:18px!important} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-card .op-model-media{width:76px;height:76px} #onlybaie-perspective .op-header.op-menu-compact #op-mega .op-model-caption strong{font-size:13.5px} #onlybaie-perspective .op-header.op-menu-compact .op-menu-ligne-note{display:none} } /* ---------- Mobile et tablette en hauteur (≤ 980 px) : le tiroir, en majuscules ---------- */ @media (max-width:980px){ /* Tiroir ouvert (19/10/2026) : la page ne défile plus dessous et le tiroir garde ses gestes pour lui ; il ne se referme jamais en défilant (lib/navigation/menu-defilement.mjs). Sur html seulement : un overflow sur body ferait perdre à l'en-tête sa position collante. */ html.op-tiroir-ouvert{overflow:hidden} #onlybaie-perspective .op-header.op-menu-compact .op-menu-panel{overscroll-behavior:contain} /* Tiroir ouvert (19/10/2026) : les trois traits du burger deviennent une croix, même taille et même couleur ; retour aux trois traits à la fermeture. Bascule nette, sans animation. */ #onlybaie-perspective .op-header.op-menu-compact .op-menu-toggle[aria-expanded="true"] .op-traits{display:none} #onlybaie-perspective .op-header.op-menu-compact .op-menu-toggle[aria-expanded="true"] .op-croix{display:inline} #onlybaie-perspective .op-header.op-menu-compact .op-nav>button,#onlybaie-perspective .op-header.op-menu-compact .op-nav>a.op-compte-mobile,#onlybaie-perspective .op-header.op-menu-compact .op-nav>a.op-lien-mobile{font-family:'Barlow Semi Condensed','Arial Narrow',Manrope,Arial,sans-serif;font-weight:700;font-size:15px;line-height:19.6px;letter-spacing:.02em;text-transform:uppercase} /* Chaque rubrique mène directement à sa collection (gérant, 19/10/2026) : chevron « › » rouge à droite au lieu du ▾ qui annonçait un sous-menu. Dessiné (deux bords tournés) plutôt que tiré de la police : même taille et centré sur la ligne partout, et rien à lire pour les lecteurs d'écran. Le panneau de cartes ne s'ouvre plus dans le tiroir : ses styles mobiles sont retirés. 11 px de large, comme l'ancien ▾ : « FENÊTRES ALUMINIUM » reste sur une ligne dès 375 px d'écran. */ #onlybaie-perspective .op-header.op-menu-compact .op-nav>button{gap:2px} #onlybaie-perspective .op-header.op-menu-compact .op-nav>button:after{content:"";float:none;flex:none;box-sizing:border-box;width:9px;height:9px;margin:0 0 0 auto;border:solid #d81f26;border-width:2px 2px 0 0;transform:rotate(45deg)} } html[data-onlybaie-page="produits"] #op-home,html[data-onlybaie-page="configuration"] #op-home{display:none!important} #op-produits .obp-card-actions{gap:8px}