.product-spec-chips .product-spec-chip { min-width: 0; } .product-spec-chip__text { min-width: 0; line-height: 1.5; } .product-spec-chip__inner--stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; width: 100%; } .product-spec-chip__block { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; width: 100%; } .product-spec-chip__label { display: block; color: #fff; font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; } .product-spec-chip__body { display: block; color: #d1d5db; font-weight: 400; } .product-spec-chip__sep { display: block; width: 100%; height: 1px; margin: 0; background: var(--brand-darkBorder); opacity: 0.85; } .product-anchor-descriptif { transition: opacity 0.2s, color 0.2s; } .product-anchor-descriptif:hover { opacity: 0.92; color: #ffb366 !important; } #descriptif-detaille { scroll-margin-top: 6rem; } #options { scroll-margin-top: 5rem; } #realisations { scroll-margin-top: 5rem; } .product-situation-section { padding: 4rem 0; background-color: var(--brand-dark); } .product-situation__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 1.5rem; margin-bottom: 2.5rem; } .product-situation__eyebrow { color: var(--brand-orange); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; display: block; margin-bottom: 0.5rem; } .product-situation__title { font-weight: 700; font-size: 1.875rem; color: #fff; text-transform: uppercase; margin: 0; line-height: 1.15; } .product-situation__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.2rem; border-radius: 0.25rem; border: 1px solid var(--brand-darkBorder); background: rgba(255, 255, 255, 0.03); color: #fff; font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; transition: border-color 0.2s, color 0.2s, background-color 0.2s; white-space: nowrap; } .product-situation__cta:hover { border-color: var(--brand-orange); color: var(--brand-orange); background: rgba(255, 144, 42, 0.06); } .product-situation__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .product-situation__hero, .product-situation__tile { position: relative; overflow: hidden; border-radius: 0.5rem; } .product-situation__hero .real-situation-img, .product-situation__tile .real-situation-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .product-situation__hero { aspect-ratio: 16 / 9; cursor: default; } .product-situation__tile { aspect-ratio: 1; cursor: default; } .product-situation__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .product-situation__empty { margin: 0; max-width: 40rem; color: #9ca3af; font-size: 0.9375rem; line-height: 1.65; } .product-options-section { padding: 4rem 0; background-color: var(--brand-light); border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; } .product-options-layout { display: grid; gap: 2.5rem; align-items: start; } .product-options-intro__title { font-weight: 700; font-size: 1.75rem; color: var(--brand-textLight); text-transform: uppercase; margin: 0 0 1rem; line-height: 1.12; } .product-options-intro__text { color: #4b5563; margin: 0 0 1.5rem; line-height: 1.625; font-size: 1rem; max-width: 42rem; } .product-options-intro__link { color: var(--brand-orange); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 0.375rem; transition: color 0.2s, text-decoration 0.2s; } .product-options-intro__link:hover { color: var(--brand-orangeHover, #e57e1d); text-decoration: underline; } .product-options-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; min-width: 0; } .product-options-card { display: flex; align-items: flex-start; gap: 1rem; margin: 0; padding: 1.25rem 1.35rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); transition: border-color 0.2s, box-shadow 0.2s; } .product-options-card:hover { border-color: rgba(255, 144, 42, 0.4); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07); } .product-options-card__icon { width: 3rem; height: 3rem; border-radius: 0.375rem; background: var(--brand-light); border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; color: var(--brand-orange); font-size: 1.25rem; flex-shrink: 0; } .product-options-card__title { font-weight: 700; color: var(--brand-textLight); font-size: 1.0625rem; margin: 0 0 0.35rem; line-height: 1.25; } .product-options-card__desc { font-size: 0.875rem; color: #4b5563; line-height: 1.6; margin: 0; } @media (min-width: 640px) { .product-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; } } @media (min-width: 960px) { .product-options-layout { grid-template-columns: minmax(240px, 32%) minmax(0, 1fr); gap: 2.5rem 3rem; } .product-options-intro__text { max-width: none; } } @media (min-width: 1200px) { .product-options-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 2.5rem 3.5rem; } .product-options-intro__title { font-size: 1.875rem; } .product-options-grid { gap: 1.25rem; } } .product-descriptif-panel { width: 100%; margin-top: 0.25rem; padding: 1.75rem 1.5rem 2rem; background-color: var(--brand-darkCard); border: 1px solid var(--brand-darkBorder); border-radius: 0.5rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } .product-descriptif-panel__head { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--brand-darkBorder); } .product-descriptif-panel__title { font-weight: 700; font-size: 1.125rem; color: var(--brand-orange); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.35rem; } .product-descriptif-panel__subtitle { margin: 0; font-size: 0.8125rem; color: #6b7280; line-height: 1.5; max-width: 40rem; } .product-descriptif-panel__body { color: #d1d5db; font-size: 1rem; line-height: 1.65; display: grid; grid-template-columns: 1fr; column-gap: 2rem; row-gap: 0; } .product-descriptif-panel__placeholder { margin: 0; color: #6b7280; font-size: 0.9375rem; } @media (min-width: 768px) { .product-descriptif-panel__body { grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr); align-items: start; } .product-descriptif-panel__body > h3.product-desc__heading { grid-column: 1; margin: 0; padding: 1.1rem 0 0.4rem; border-top: 1px solid var(--brand-darkBorder); } .product-descriptif-panel__body > p { grid-column: 2; margin: 0; padding: 1.1rem 0 0.4rem; border-top: 1px solid var(--brand-darkBorder); } .product-descriptif-panel__body > h3.product-desc__heading:first-child, .product-descriptif-panel__body > h3.product-desc__heading:first-child + p { border-top: none; padding-top: 0; } .product-descriptif-panel__body > p:first-child { grid-column: 1 / -1; border-top: none; padding: 0 0 1.1rem; margin: 0 0 0.15rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .product-descriptif-panel__body > p:first-child + h3.product-desc__heading, .product-descriptif-panel__body > p:first-child + h3.product-desc__heading + p { border-top: none; padding-top: 0.35rem; } .product-descriptif-panel__body > p:first-child + p { border-top: none; padding-top: 0.35rem; } .product-descriptif-panel__body > .product-descriptif-panel__lead-wrap, .product-descriptif-panel__body > .product-descriptif-panel__body-only-wrap { grid-column: 1 / -1; border-top: none; padding: 0 0 1.1rem; margin: 0 0 0.15rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .product-descriptif-panel__lead-wrap p:last-child, .product-descriptif-panel__body-only-wrap p:last-child { margin-bottom: 0; } .product-descriptif-panel__body > .product-descriptif-panel__lead-wrap + h3.product-desc__heading, .product-descriptif-panel__body > .product-descriptif-panel__lead-wrap + h3.product-desc__heading + p, .product-descriptif-panel__body > .product-descriptif-panel__body-only-wrap + h3.product-desc__heading, .product-descriptif-panel__body > .product-descriptif-panel__body-only-wrap + h3.product-desc__heading + p { border-top: none; padding-top: 0.35rem; } } .product-desc p { margin: 0 0 1em; } .product-descriptif-panel__body > p:last-child { margin-bottom: 0; } @media (max-width: 767px) { .product-descriptif-panel__body > p:last-child { margin-bottom: 0; } } .product-desc__heading { font-family: inherit; font-weight: 700; font-size: 0.9375rem; color: #fff; text-transform: capitalize; margin: 1.25rem 0 0.5rem; line-height: 1.3; border-left: 3px solid var(--brand-orange); padding-left: 0.65rem; } @media (min-width: 768px) { .product-desc__heading { border-left: none; padding-left: 0; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8125rem; color: #9ca3af; } } .product-descriptif-panel__body > h3.product-desc__heading:first-child { margin-top: 0; } @media (min-width: 1024px) { .product-columns { flex-direction: row !important; } .product-gallery-col { width: 58%; } .product-info-col { width: 42%; } .product-gallery-col--sticky { position: sticky; top: 5.5rem; align-self: flex-start; } .product-main-img-wrap { height: 550px !important; } .real-situation-large { aspect-ratio: auto !important; height: 300px !important; } .real-situation-item { aspect-ratio: auto !important; height: 195px; } .cross-sell-inner-grid { grid-template-columns: 1fr 1fr !important; } } @media (min-width: 768px) { .cross-sell-card > div { padding: 2rem !important; } .cross-sell-inner-grid { grid-template-columns: 1fr 1fr !important; } .real-situation-large { height: 350px; } .real-situation-item { height: 220px; } } .product-main-img-wrap:hover .product-main-img { transform: scale(1.05); } .real-situation-large:hover .real-situation-img, .real-situation-item:hover .real-situation-img, .product-situation__hero:hover .real-situation-img, .product-situation__tile:hover .real-situation-img { transform: scale(1.05); } .cross-sell-card:hover > div { background-color: var(--brand-darkCard) !important; } .cross-sell-card:hover .cross-sell-arrow { opacity: 1 !important; transform: translateX(0) !important; } .cross-sell-arrow { transform: translateX(-0.5rem); } @media (min-width: 768px) { .cross-sell-grid { grid-template-columns: 1fr 1fr !important; } }