:root { --color-green: #eaff41; --color-green-deep: #c9df1b; --color-green-ink: #1d2700; --color-white: #fffef9; --color-ivory: #f2f1e8; --color-ink: #12140f; --color-black: #090a08; --color-orange: #e86821; --color-line: rgba(18, 20, 15, .17); --color-line-light: rgba(255,255,255,.26); --font-display: "Playfair Display", Georgia, serif; --font-body: "DM Sans", Arial, sans-serif; --container: min(92vw, 1440px); --space-xxl: clamp(7rem, 15vw, 15rem); --space-xl: clamp(4rem, 9vw, 9rem); --space-lg: clamp(2.5rem, 6vw, 6rem); --radius-large: 2.25rem; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-inout: cubic-bezier(.76, 0, .24, 1); --shadow-float: 0 32px 70px rgba(10, 11, 8, .2); --glow-green: 0 0 38px rgba(234, 255, 65, .66), 0 0 95px rgba(234, 255, 65, .22); } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--color-ivory); } body { margin: 0; background: var(--color-ivory); color: var(--color-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; overflow-x: hidden; } body.menu-is-open, body.modal-is-open { overflow: hidden; } img { display: block; width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { color: inherit; font: inherit; cursor: pointer; } button, a { -webkit-tap-highlight-color: transparent; } ::selection { background: var(--color-green); color: var(--color-black); } .container { width: var(--container); margin: 0 auto; } .screen-reader-text, .skip-link:not(:focus) { position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; width: 1px; white-space: nowrap; } .skip-link:focus { position: fixed; z-index: 1000; top: 1rem; left: 1rem; background: var(--color-green); color: var(--color-black); padding: .75rem 1rem; } .eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.5rem; color: currentColor; font-size: .65rem; font-weight: 600; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; } .eyebrow span { width: 2.4rem; height: 1px; display: inline-block; background: currentColor; } .product-number { margin: 0; font-size: .65rem; font-weight: 600; letter-spacing: .14em; opacity: .7; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { font-weight: 500; letter-spacing: -.055em; line-height: .9; } h1 em, h2 em, .site-footer h2 em, .maison__statement em { font-weight: 500; } .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 3.55rem; padding: .9rem 1.1rem 1rem 1.35rem; border: 1px solid transparent; border-radius: 99px; font-size: .71rem; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; transition: transform .45s var(--ease-out), background .35s, color .35s, border-color .35s; } .button span { font-size: 1.2rem; font-weight: 400; line-height: 1; } .button:hover { transform: translateY(-3px); } .button--light { background: var(--color-white); color: var(--color-black); } .button--light:hover { background: var(--color-green); } .button--dark { background: var(--color-black); color: var(--color-white); } .button--dark:hover { background: var(--color-green); color: var(--color-black); } .button--green { background: var(--color-green); color: var(--color-black); } .button--green:hover { background: var(--color-black); color: var(--color-white); } .text-link { display: inline-flex; align-items: center; gap: 1.2rem; position: relative; padding: 0 0 .55rem; background: none; border: 0; border-bottom: 1px solid currentColor; font-size: .69rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; transition: color .3s, gap .4s var(--ease-out); } .text-link:hover { gap: 1.8rem; color: var(--color-green); } .text-link i { font-size: 1.05rem; font-style: normal; } /* Header */ .site-header { position: fixed; z-index: 80; top: 0; left: 0; width: 100%; color: var(--color-white); transition: color .45s, background .45s, backdrop-filter .45s, border-color .45s; } .site-header::after { position: absolute; inset: 0; z-index: -1; border-bottom: 1px solid transparent; background: rgba(9,10,8,0); content: ""; transition: background .45s, border-color .45s, backdrop-filter .45s; } .site-header.is-scrolled::after { border-color: rgba(255,255,255,.15); background: rgba(9,10,8,.62); backdrop-filter: blur(16px); } .site-header.is-light { color: var(--color-ink); } .site-header.is-light.is-scrolled::after { border-color: rgba(18,20,15,.14); background: rgba(255,254,249,.69); } .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: var(--container); min-height: 6.8rem; margin: auto; transition: min-height .45s var(--ease-out); } .site-header.is-scrolled .site-header__inner { min-height: 5.15rem; } .brand { display: inline-flex; align-items: center; gap: .58rem; justify-self: start; width: max-content; } .brand__symbol { flex: 0 0 auto; width: 1.65rem; height: 1.65rem; object-fit: contain; } .brand__name { font-family: var(--font-display); font-size: .94rem; letter-spacing: -.06em; line-height: .72; } .brand__name em { display: block; font-style: italic; } .site-nav { justify-self: center; } .nav-list { display: flex; align-items: center; gap: clamp(.8rem, 1.65vw, 2rem); margin: 0; padding: 0; list-style: none; } .nav-list a { position: relative; padding: .6rem 0; font-size: .64rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap; } .nav-list a::after { position: absolute; bottom: .28rem; left: 0; width: 100%; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform .42s var(--ease-out); } .nav-list a:hover::after { transform: scaleX(1); transform-origin: left; } .header-actions { display: flex; align-items: center; gap: 1rem; justify-self: end; } .header-whatsapp { position: relative; display: inline-flex; gap: .4rem; align-items: center; font-size: .63rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .header-whatsapp::before { width: .48rem; height: .48rem; border-radius: 50%; background: var(--color-green); box-shadow: var(--glow-green); content: ""; } .menu-toggle, .mobile-menu { display: none; } /* LDM progressive light bulb */ .ldm-bulb { position: relative; width: clamp(6rem, 12vw, 9rem); height: clamp(8rem, 16vw, 12rem); margin: 0 auto; filter: drop-shadow(0 0 calc(1rem + var(--bulb-progress, 0%) * .12) rgba(234,255,65,.12)); transition: filter .35s ease; } .ldm-bulb svg { display: block; width: 100%; height: 100%; overflow: visible; } .ldm-bulb__halo { opacity: calc(.02 + (var(--bulb-progress, 0%) * .007)); transform-origin: 60px 66px; transform: scale(calc(.72 + var(--bulb-progress, 0%) * .003)); transition: opacity .15s linear, transform .2s ease-out; } .ldm-bulb__glass { fill: rgba(255,255,255,.025); stroke: rgba(255,255,255,.62); stroke-width: 1; transition: fill .35s ease, stroke .35s ease, filter .35s ease; } .ldm-bulb__filament { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: none; transition: stroke .15s linear, filter .25s ease; } .ldm-bulb__base { fill: none; stroke: rgba(255,255,255,.42); stroke-width: 1.3; stroke-linecap: round; transition: stroke .3s ease; } .ldm-bulb.is-warm .ldm-bulb__filament { stroke: rgba(255,231,120,.9); filter: drop-shadow(0 0 .2rem rgba(255,222,100,.8)); } .ldm-bulb.is-lit { filter: drop-shadow(0 0 1.6rem rgba(234,255,65,.28)); } .ldm-bulb.is-lit .ldm-bulb__glass { fill: rgba(234,255,65,.055); stroke: rgba(234,255,65,.88); filter: drop-shadow(0 0 .8rem rgba(234,255,65,.2)); } .ldm-bulb.is-lit .ldm-bulb__filament { stroke: #eaff41; filter: drop-shadow(0 0 .25rem rgba(234,255,65,.95)) drop-shadow(0 0 .7rem rgba(234,255,65,.55)); } .ldm-bulb.is-full .ldm-bulb__halo { opacity: .95; transform: scale(1); } .ldm-bulb.is-full .ldm-bulb__glass { fill: rgba(234,255,65,.1); } .ldm-bulb--preloader { margin-bottom: 1.5rem; } .ldm-bulb--transition { width: clamp(7rem, 14vw, 10rem); height: clamp(9rem, 18vw, 13rem); margin-bottom: 1.4rem; } /* Preloader */ .preloader { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; overflow: hidden; background: var(--color-black); color: var(--color-white); transition: clip-path 1.1s var(--ease-inout), visibility 1.1s; } .preloader::before { position: absolute; width: 1px; height: 140vh; background: rgba(255,255,255,.18); content: ""; transform: rotate(27deg); } .preloader.is-finished { clip-path: circle(0% at 50% 50%); pointer-events: none; visibility: hidden; } .preloader__content { position: relative; width: min(24rem, 78vw); } .preloader__symbol { width: clamp(3.6rem, 9vw, 5.4rem); height: clamp(3.6rem, 9vw, 5.4rem); margin: 0 0 1.15rem; object-fit: contain; } .preloader__wordmark { margin: 0 0 2rem; font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 4.6rem); letter-spacing: -.07em; line-height: .8; } .preloader__wordmark em { display: block; color: var(--color-green); font-style: italic; } .preloader__orb { position: relative; width: 4.5rem; height: 4.5rem; margin: 0 0 2.2rem; border: 1px solid rgba(234,255,65,.65); border-radius: 50%; animation: pulse-orb 2.3s ease-in-out infinite; } .preloader__orb span { position: absolute; inset: 35%; border-radius: 50%; background: var(--color-green); box-shadow: var(--glow-green); animation: bloom 1.8s ease-in-out infinite alternate; } .preloader__meter { height: 1px; overflow: hidden; background: rgba(255,255,255,.25); } .preloader__meter span { display: block; width: 0; height: 100%; background: var(--color-green); box-shadow: var(--glow-green); transition: width .12s linear; } .preloader__meta { display: flex; justify-content: space-between; margin-top: .65rem; color: rgba(255,255,255,.68); font-size: .59rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .preloader__meta b { color: var(--color-green); font-weight: 600; } @keyframes pulse-orb { 50% { transform: scale(1.13); border-color: var(--color-green); } } @keyframes bloom { to { transform: scale(2.8); box-shadow: 0 0 40px 16px rgba(234,255,65,.44); } } /* Cursor */ .cursor { position: fixed; z-index: 120; top: 0; left: 0; display: none; width: 1rem; height: 1rem; border: 1px solid var(--color-green); border-radius: 50%; background: rgba(234,255,65,.1); mix-blend-mode: normal; pointer-events: none; transform: translate(-50%, -50%); transition: width .28s var(--ease-out), height .28s var(--ease-out), background .28s, border .28s, opacity .28s; } .cursor__label { display: block; opacity: 0; color: var(--color-black); font-size: .48rem; font-weight: 700; letter-spacing: .08em; text-align: center; text-transform: uppercase; transition: opacity .2s; } .cursor.is-active { width: 4.8rem; height: 4.8rem; border-color: var(--color-green); background: var(--color-green); box-shadow: var(--glow-green); } .cursor.is-active .cursor__label { opacity: 1; } /* Hero */ .hero { position: relative; min-height: max(47rem, 100svh); overflow: hidden; color: var(--color-white); isolation: isolate; } .hero__image { position: absolute; z-index: -3; inset: -4%; background-position: center; background-size: cover; transform: scale(1.06); will-change: transform; } .hero__veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(4,5,4,.8) 0%, rgba(4,5,4,.3) 40%, rgba(4,5,4,.1) 68%, rgba(4,5,4,.45) 100%), linear-gradient(0deg, rgba(4,5,4,.72), transparent 55%); } .hero__grain { position: absolute; z-index: -1; inset: 0; opacity: .3; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; pointer-events: none; } .hero__content { display: flex; flex-direction: column; justify-content: space-between; min-height: max(47rem, 100svh); padding-top: clamp(10rem, 20vh, 14rem); padding-bottom: 4.8rem; } .hero h1 { max-width: 10ch; margin: 0; font-size: clamp(4.8rem, 12.5vw, 13.5rem); line-height: .75; text-shadow: 0 8px 30px rgba(0,0,0,.16); } .hero h1 em { display: block; padding-left: .2em; color: var(--color-green); font-style: italic; } .hero__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .hero__bottom > p { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 1.65vw, 1.65rem); letter-spacing: -.04em; line-height: 1.05; } .scroll-prompt { position: absolute; right: max(4vw, 2rem); bottom: 4.8rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; color: rgba(255,255,255,.8); font-size: .56rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-rl; } .scroll-prompt i { width: 1px; height: 3rem; background: var(--color-green); animation: scroll-line 1.8s ease-in-out infinite; } @keyframes scroll-line { 50% { transform: scaleY(.42); transform-origin: top; } } .hero__index { position: absolute; top: 50%; right: max(4vw, 2rem); display: flex; align-items: center; gap: .55rem; font-size: .58rem; font-weight: 600; letter-spacing: .08em; transform: rotate(90deg) translateY(-50%); transform-origin: right; } .hero__index i { width: 3.7rem; height: 1px; background: rgba(255,255,255,.65); } /* Universal section intro */ .universes { overflow: hidden; padding: var(--space-xl) 0 var(--space-lg); background: var(--color-ivory); } .universes__intro { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 3rem; padding-bottom: var(--space-lg); } .universes__intro .eyebrow { grid-column: 1 / -1; } .universes h2, .chapter-intro h2, .maison h2, .abidjan h2, .contact-interlude h2 { margin: 0; font-size: clamp(3.2rem, 7vw, 7.6rem); } .universes h2 em, .chapter-intro h2 em, .maison h2 em, .abidjan h2 em, .contact-interlude h2 em { color: var(--color-green-deep); font-style: italic; } .universes__lead { max-width: 26rem; margin: 0 0 .3rem; font-size: 1rem; line-height: 1.65; } .universe-split { display: grid; grid-template-columns: 1fr 1fr; min-height: min(65vw, 45rem); padding: 0 4vw; } .universe { position: relative; display: block; overflow: hidden; min-height: 34rem; color: var(--color-white); isolation: isolate; transition: flex-basis .75s var(--ease-out); } .universe img { position: absolute; z-index: -2; inset: 0; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .7s; } .universe__shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.1) 60%); transition: background .5s; } .universe__number { position: absolute; top: 1.8rem; left: 1.8rem; font-size: .6rem; font-weight: 600; letter-spacing: .1em; } .universe__label { position: absolute; right: 2rem; bottom: 1.9rem; left: 2rem; display: grid; grid-template-columns: 1fr auto; align-items: end; } .universe__label small { grid-column: 1/-1; margin-bottom: .5rem; font-size: .57rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; opacity: .7; } .universe__label strong { font-family: var(--font-display); font-size: clamp(2.7rem, 5vw, 5.8rem); font-weight: 500; letter-spacing: -.07em; line-height: .85; } .universe__label i { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; font-size: 1.3rem; font-style: normal; transition: background .3s, color .3s, transform .4s var(--ease-out); } .universe:hover img, .universe.is-active img { transform: scale(1.08); } .universe:hover .universe__label i, .universe.is-active .universe__label i { background: var(--color-green); color: var(--color-black); transform: rotate(-45deg); } .universe-split:hover .universe:not(:hover) img { filter: brightness(.65); } .universes__hint { display: flex; gap: .5rem; align-items: center; justify-content: center; margin: 1.5rem 0 0; color: rgba(18,20,15,.62); font-size: .58rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; } .universes__hint span { width: 1.7rem; height: 1px; background: currentColor; } /* Dark luminaires chapter */ .product-chapter { position: relative; overflow: hidden; padding: var(--space-xl) 0 0; background: var(--color-black); color: var(--color-white); } .product-chapter::before { position: absolute; top: 6rem; right: -9rem; width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(circle, rgba(234,255,65,.16), transparent 66%); content: ""; filter: blur(12px); pointer-events: none; } .chapter-intro { display: grid; grid-template-columns: 1fr .48fr; align-items: end; gap: 4rem; padding-bottom: var(--space-lg); } .chapter-intro h2 em { color: var(--color-green); } .chapter-intro > p { max-width: 27rem; margin: 0 0 .3rem; color: rgba(255,255,255,.72); font-size: .96rem; line-height: 1.75; } .product-stories { width: min(100%, 1680px); margin: 0 auto; } .story-card { position: relative; display: flex; min-height: min(70vw, 56rem); overflow: hidden; align-items: center; padding: clamp(2rem, 7vw, 7rem); isolation: isolate; } .story-card__media { position: absolute; z-index: -2; inset: 0; overflow: hidden; } .story-card__media::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.05) 68%), linear-gradient(0deg, rgba(0,0,0,.45), transparent 60%); content: ""; } .story-card__media img { height: 100%; object-fit: cover; object-position: center; transition: transform 1.2s var(--ease-out); } .story-card__glow { position: absolute; right: 23%; bottom: 12%; width: 16rem; height: 16rem; border-radius: 50%; background: rgba(234,255,65,.2); filter: blur(50px); mix-blend-mode: screen; } .story-card:nth-child(even) { justify-content: flex-end; text-align: right; } .story-card:nth-child(even) .story-card__media::after { background: linear-gradient(-90deg, rgba(0,0,0,.78), rgba(0,0,0,.03) 68%), linear-gradient(0deg, rgba(0,0,0,.45), transparent 60%); } .story-card:nth-child(even) .story-card__panel { align-items: flex-end; } .story-card:hover .story-card__media img { transform: scale(1.06); } .story-card__panel { display: flex; flex-direction: column; align-items: flex-start; width: min(29rem, 45vw); } .story-card__panel .eyebrow { margin: .8rem 0 1.25rem; color: var(--color-green); } .story-card h3 { margin: 0; font-size: clamp(4.2rem, 8vw, 9rem); } .story-card__tagline { margin: .7rem 0 2.2rem; font-family: var(--font-display); font-size: 1.2rem; font-style: italic; letter-spacing: -.04em; } .story-card__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: 2rem; color: rgba(255,255,255,.76); font-size: .64rem; letter-spacing: .06em; } .story-card__meta span + span { color: var(--color-green); } .story-card--opale { min-height: min(75vw, 60rem); }.story-card--opale .story-card__media img{object-position:center}.story-card--alba .story-card__media img{object-position:center 42%}.story-card--naya .story-card__media img{object-position:center 58%}.story-card--sillage .story-card__media img{object-position:center 36%}.story-card--orbit .story-card__media img{object-position:center 43%}.story-card--kora .story-card__media img{object-position:center 40%} /* Tableware */ .table-chapter { overflow: hidden; padding: 0 0 var(--space-xl); background: var(--color-white); } .table-transition { position: relative; display: flex; min-height: 41rem; overflow: hidden; align-items: center; justify-content: center; background: var(--color-green); color: var(--color-black); } .table-transition::before { position: absolute; width: 120vw; height: 120vw; border: 1px solid rgba(18,20,15,.24); border-radius: 50%; content: ""; transform: translateX(-45%); } .table-transition::after { position: absolute; width: 66vw; height: 66vw; border: 1px solid rgba(18,20,15,.24); border-radius: 50%; content: ""; transform: translateX(52%); } .table-transition__line { position: absolute; width: 1px; height: 100%; background: var(--color-black); animation: table-line 3s var(--ease-inout) infinite; } .table-transition p { position: relative; z-index: 2; margin: 0; font-family: var(--font-display); font-size: clamp(3.2rem, 8vw, 8rem); letter-spacing: -.07em; line-height: .86; text-align: center; } .table-transition__count { position: absolute; right: 4vw; bottom: 2.2rem; z-index: 2; font-size: .65rem; font-weight: 600; letter-spacing: .13em; } @keyframes table-line { 0%, 100% { transform: scaleY(.15); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } } .chapter-intro--table { padding-top: var(--space-xl); color: var(--color-ink); } .chapter-intro--table > p { color: rgba(18,20,15,.72); }.chapter-intro--table h2 em { color: #71a501; } .table-showcase { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 44rem; background: var(--color-ink); color: var(--color-white); } .table-showcase__image { position: relative; overflow: hidden; }.table-showcase__image img { height: 100%; object-fit: cover; } .table-showcase__mask { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(9,10,8,.62)); } .table-showcase__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 6rem); } .table-showcase__copy h3 { margin: 0 0 1.6rem; font-size: clamp(3rem, 5vw, 5.5rem); }.table-showcase__copy > p:not(.eyebrow) { max-width: 23rem; margin-bottom: 2.2rem; color: rgba(255,255,255,.72); line-height: 1.7; }.table-showcase__copy .text-link:hover { color: var(--color-green); } .table-products { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.3rem; padding-top: var(--space-xl); } .table-product { grid-column: span 4; }.table-product:nth-child(2), .table-product:nth-child(5) { margin-top: 7rem; }.table-product:nth-child(3) { margin-top: 15rem; }.table-product:nth-child(4) { grid-column: 2 / span 4; }.table-product:nth-child(6) { grid-column: 8 / span 4; margin-top: 7rem; } .table-product__image { position: relative; display: block; width: 100%; overflow: hidden; padding: 0; border: 0; background: var(--color-black); }.table-product__image img { aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s var(--ease-out), opacity .5s; }.table-product__image::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 55%); content: ""; opacity: 0; transition: opacity .4s; }.table-product__image span { position: absolute; z-index: 2; bottom: 1.2rem; left: 1.2rem; color: var(--color-white); font-size: .6rem; font-weight: 600; letter-spacing: .12em; opacity: 0; text-transform: uppercase; transform: translateY(8px); transition: opacity .35s, transform .4s var(--ease-out); }.table-product__image:hover img { transform: scale(1.07); }.table-product__image:hover::after, .table-product__image:hover span { opacity: 1; }.table-product__image:hover span { transform: translateY(0); } .table-product__copy { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; padding: 1rem 0 .3rem; border-bottom: 1px solid var(--color-line); }.table-product__copy h3 { margin: .35rem 0 0; font-family: var(--font-display); font-size: 2rem; }.table-product__copy > p { margin: .45rem 0 0; font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-align: right; text-transform: uppercase; }.table-product__copy > span { grid-column: 1/-1; color: rgba(18,20,15,.6); font-size: .65rem; } /* Compact digital showrooms */ .showroom { position: relative; overflow: hidden; padding: var(--space-xl) 0 var(--space-lg); } .showroom--luminaires { background: var(--color-black); color: var(--color-white); } .showroom--luminaires::before { position: absolute; top: 7rem; right: -13rem; width: 38rem; height: 38rem; border-radius: 50%; background: radial-gradient(circle, rgba(234,255,65,.2), transparent 68%); content: ""; filter: blur(18px); pointer-events: none; } .showroom--tableware { background: var(--color-white); color: var(--color-ink); } .showroom__intro { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .46fr; align-items: end; gap: 4rem; padding-bottom: clamp(3.5rem, 6vw, 6rem); } .showroom__intro h2 { margin: 0; font-size: clamp(3.6rem, 7vw, 7.6rem); } .showroom__intro h2 em { color: var(--color-green); font-style: italic; } .showroom--tableware .showroom__intro h2 em { color: #71a501; } .showroom__intro > p { max-width: 27rem; margin: 0 0 .3rem; color: rgba(255,255,255,.7); font-size: .96rem; line-height: 1.75; } .showroom--tableware .showroom__intro > p { color: rgba(18,20,15,.7); } .showroom__stage { position: relative; } .showroom__orb { position: absolute; top: -4rem; right: 2%; width: min(32vw, 28rem); height: min(32vw, 28rem); border: 1px solid rgba(234,255,65,.24); border-radius: 50%; transform: translateY(calc(var(--scroll-shift, 0px) * -.18)); pointer-events: none; } .showroom-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 2rem); align-items: start; } .showroom-card { position: relative; min-width: 0; transform: translateY(var(--card-shift, 0px)); transition: transform .7s var(--ease-out); } .showroom-card:nth-child(1), .showroom-card:nth-child(4) { grid-column: span 5; } .showroom-card:nth-child(2), .showroom-card:nth-child(3), .showroom-card:nth-child(5), .showroom-card:nth-child(6) { grid-column: span 3; } .showroom-card:nth-child(2), .showroom-card:nth-child(5) { margin-top: clamp(3rem, 7vw, 7rem); } .showroom-card:nth-child(3), .showroom-card:nth-child(6) { margin-top: clamp(6rem, 13vw, 13rem); } .showroom-card__visual { position: relative; display: block; width: 100%; overflow: hidden; padding: 0; border: 0; background: var(--color-ink); color: inherit; isolation: isolate; transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .65s var(--ease-out), box-shadow .5s, background .5s; } .showroom-card__visual::after { position: absolute; inset: 0; background: linear-gradient(145deg, rgba(234,255,65,.26), transparent 35%), linear-gradient(0deg, rgba(0,0,0,.7), transparent 58%); content: ""; opacity: 0; transition: opacity .5s; pointer-events: none; } .showroom-card__visual img { width: 100%; aspect-ratio: .9; object-fit: cover; transition: transform 1s var(--ease-out), filter .6s; } .showroom-card:nth-child(1) .showroom-card__visual img, .showroom-card:nth-child(4) .showroom-card__visual img { aspect-ratio: 1.12; } .showroom-card__number { position: absolute; z-index: 2; top: 1rem; left: 1rem; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(234,255,65,.7); border-radius: 50%; background: rgba(9,10,8,.3); color: var(--color-green); font-size: .55rem; font-weight: 700; } .showroom-card__reveal { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; left: 1rem; display: flex; align-items: center; justify-content: space-between; color: var(--color-white); font-size: .6rem; font-weight: 600; letter-spacing: .12em; opacity: 0; text-transform: uppercase; transform: translateY(.6rem); transition: opacity .4s, transform .5s var(--ease-out); } .showroom-card__reveal i { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; font-size: 1rem; font-style: normal; } .showroom-card:hover { z-index: 2; transform: translateY(calc(var(--card-shift, 0px) - .45rem)); } .showroom-card:hover .showroom-card__visual { box-shadow: 0 1.5rem 4rem rgba(0,0,0,.28); } .showroom-card:hover .showroom-card__visual::after, .showroom-card:hover .showroom-card__reveal { opacity: 1; transform: none; } .showroom-card:hover .showroom-card__visual img { filter: saturate(1.08); transform: scale(1.055); } .showroom-card__caption { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: end; padding: .9rem .1rem 0; border-top: 1px solid rgba(255,255,255,.24); } .showroom--tableware .showroom-card__caption { border-color: var(--color-line); } .showroom-card__caption .product-number { grid-row: span 2; color: var(--color-green); } .showroom--tableware .showroom-card__caption .product-number { color: #71a501; } .showroom-card__caption h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 2.5vw, 2.35rem); letter-spacing: -.06em; line-height: .9; } .showroom-card__caption > p:last-child { grid-column: 2; margin: .1rem 0 0; color: rgba(255,255,255,.58); font-size: .62rem; letter-spacing: .04em; } .showroom--tableware .showroom-card__caption > p:last-child { color: rgba(18,20,15,.58); } .showroom-transition { position: relative; display: grid; min-height: clamp(22rem, 43vw, 39rem); place-items: center; overflow: hidden; background: var(--color-green); color: var(--color-black); } .showroom-transition::before { position: absolute; inset: -35%; border: 1px solid rgba(18,20,15,.24); border-radius: 50%; content: ""; transform: translateX(calc(var(--scroll-shift, 0px) * .12)) rotate(-8deg); } .showroom-transition::after { position: absolute; inset: -10% 28%; border: 1px solid rgba(18,20,15,.24); border-radius: 50%; content: ""; transform: translateX(calc(var(--scroll-shift, 0px) * -.2)) rotate(11deg); } .showroom-transition__rings { position: absolute; width: 10rem; height: 10rem; border: 1px solid var(--color-black); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(18,20,15,.05), 0 0 0 4rem rgba(18,20,15,.04); transform: translate(calc(var(--mouse-x, 0px) * .08), calc(var(--mouse-y, 0px) * .08)); } .showroom-transition p { position: relative; z-index: 1; margin: 0; font-family: var(--font-display); font-size: clamp(3rem, 7vw, 7rem); letter-spacing: -.07em; line-height: .86; clip-path: inset(0 0 0 0); text-align: center; } .showroom-transition p em { font-style: italic; } .showroom-transition span { position: absolute; right: 4vw; bottom: 2rem; font-size: .65rem; font-weight: 600; letter-spacing: .13em; } /* Maison */ .maison { overflow: hidden; padding: var(--space-xl) 0 0; background: var(--color-ivory); }.maison__opening { padding-bottom: var(--space-lg); }.maison__opening h2 em { color: #71a501; }.maison__editorial { display: grid; grid-template-columns: 1fr .72fr; gap: 0; width: var(--container); margin: auto; }.maison__figure { margin: 0; }.maison__figure img { height: 100%; object-fit: cover; }.maison__figure--first { position: relative; min-height: 46rem; }.maison__figure--first figcaption { position: absolute; right: 1.5rem; bottom: 1.5rem; max-width: 14rem; margin: 0; color: var(--color-white); font-family: var(--font-display); font-size: 1.15rem; font-style: italic; letter-spacing: -.04em; line-height: 1; }.maison__manifesto { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 5vw, 5rem); background: var(--color-black); color: var(--color-white); }.maison__manifesto p { max-width: 30rem; margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.7rem); letter-spacing: -.06em; line-height: 1.02; }.maison__manifesto span { color: var(--color-green); font-size: .62rem; font-weight: 600; letter-spacing: .12em; line-height: 1.6; text-transform: uppercase; }.maison__figure--second { grid-column: 2; min-height: 35rem; }.maison__statement { position: relative; display: flex; min-height: 35rem; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 5vw, 5rem); background: var(--color-green); color: var(--color-black); }.maison__statement p { margin: 0; font-family: var(--font-display); font-size: clamp(3rem, 5.6vw, 6rem); letter-spacing: -.075em; line-height: .84; }.round-link { display: grid; width: 4rem; height: 4rem; place-items: center; border: 1px solid var(--color-black); border-radius: 50%; align-self: flex-end; font-size: 2rem; transition: background .35s, transform .45s var(--ease-out); }.round-link:hover { background: var(--color-black); color: var(--color-green); transform: rotate(-45deg); } /* Abidjan */ .abidjan { position: relative; overflow: hidden; padding: var(--space-xl) 0 0; background: var(--color-black); color: var(--color-white); }.abidjan__glow { position: absolute; top: -16rem; right: -12rem; width: 44rem; height: 44rem; border-radius: 50%; background: radial-gradient(circle, rgba(234,255,65,.34), rgba(234,255,65,0) 66%); filter: blur(12px); }.abidjan__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr .7fr; gap: 6rem; align-items: end; padding-bottom: var(--space-lg); }.abidjan h2 em { color: var(--color-green); }.abidjan__title > p:last-child { max-width: 30rem; margin: 2rem 0 0; color: rgba(255,255,255,.72); line-height: 1.7; }.abidjan__details { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }.abidjan__details > div span { display: block; margin-bottom: .6rem; color: var(--color-green); font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }.abidjan__details p, .abidjan__details a:not(.button) { display: block; margin: 0; color: rgba(255,255,255,.8); font-size: .87rem; line-height: 1.6; }.abidjan__details .button { grid-column: 1/-1; justify-self: start; margin-top: .5rem; }.abidjan__map { position: relative; height: 28rem; overflow: hidden; }.abidjan__map iframe { width: 100%; height: 100%; border: 0; pointer-events: auto; }.abidjan__map::after { display: none; }.abidjan__map-mask { position: absolute; z-index: 2; right: 4vw; bottom: 2rem; color: var(--color-green); font-size: .62rem; font-weight: 600; letter-spacing: .12em; line-height: 1.5; text-align: right; text-transform: uppercase; } /* Contact & footer */ .contact-interlude { padding: var(--space-xl) 0; background: var(--color-white); }.contact-interlude__inner { text-align: center; }.contact-interlude__inner .eyebrow { justify-content: center; }.contact-interlude__inner h2 { margin-bottom: 2.6rem; }.contact-interlude__inner h2 em { color: #71a501; }.site-footer { padding: var(--space-lg) 4vw 1.3rem; background: var(--color-green); color: var(--color-black); }.footer-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(18,20,15,.35); }.site-footer h2 { margin: 0; font-size: clamp(3.5rem, 8vw, 8rem); }.site-footer h2 em { color: var(--color-white); }.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr .75fr; gap: 2rem; padding: 2.3rem 0 4rem; }.footer-grid p { margin-bottom: 0; font-size: .78rem; line-height: 1.7; }.footer-grid a { display: table; font-size: .78rem; line-height: 1.7; }.footer-grid a:hover { text-decoration: underline; }.footer-label { margin: 0 0 .7rem !important; font-size: .57rem !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(18,20,15,.35); font-size: .55rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } /* Modal & light transition */ .product-modal { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: 3vw; opacity: 0; pointer-events: none; transition: opacity .45s; }.product-modal.is-open { opacity: 1; pointer-events: auto; }.product-modal__backdrop { position: absolute; inset: 0; background: rgba(9,10,8,.84); backdrop-filter: blur(7px); }.product-modal__sheet { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; width: min(72rem, 100%); max-height: min(47rem, 91vh); overflow: auto; background: var(--color-ivory); box-shadow: var(--shadow-float); transform: translateY(2.5rem) scale(.98); transition: transform .6s var(--ease-out); }.product-modal.is-open .product-modal__sheet { transform: translateY(0) scale(1); }.product-modal__image-wrap { min-height: 33rem; background: var(--color-black); }.product-modal__image-wrap img { height: 100%; object-fit: cover; }.product-modal__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(2rem, 5vw, 5rem); }.product-modal__content .eyebrow { margin: .7rem 0 1rem; color: #6f9700; }.product-modal__content h2 { margin: 0 0 1rem; font-size: clamp(3.8rem, 5vw, 5.6rem); }.product-modal__description { max-width: 27rem; margin: 0 0 2rem; font-size: .95rem; line-height: 1.7; }.product-modal__content dl { display: flex; gap: 2.2rem; width: 100%; margin: 0 0 2rem; padding: 1.15rem 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }.product-modal__content dl div { flex: 1; }.product-modal__content dt { margin-bottom: .5rem; color: rgba(18,20,15,.6); font-size: .56rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }.product-modal__content dd { margin: 0; font-size: .73rem; line-height: 1.35; }.product-modal__close { position: absolute; z-index: 2; top: 1rem; right: 1rem; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 0; border-radius: 50%; background: var(--color-white); font-size: 1.8rem; line-height: 1; transition: transform .35s var(--ease-out), background .3s; }.product-modal__close:hover { background: var(--color-green); transform: rotate(90deg); }.light-transition { position: fixed; z-index: 105; inset: 0; display: grid; place-items: center; background: var(--color-green); color: var(--color-black); clip-path: inset(100% 0 0 0); pointer-events: none; }.light-transition.is-active { animation: light-wipe .9s var(--ease-inout) forwards; }.light-transition p { margin: 0; font-family: var(--font-display); font-size: clamp(3rem, 9vw, 8rem); letter-spacing: -.07em; }.light-transition span { position: absolute; bottom: 18%; width: min(19rem, 56vw); height: 1px; background: rgba(18,20,15,.32); }.light-transition span i { display: block; width: 100%; height: 100%; background: var(--color-black); transform-origin: left; animation: progress-wipe .7s var(--ease-inout) infinite; }.light-transition b { position: absolute; right: max(5vw, 2rem); bottom: 16%; font-size: .65rem; letter-spacing: .12em; }.light-transition:not(.is-active) span, .light-transition:not(.is-active) b { display: none; } @keyframes light-wipe { 0% { clip-path: inset(100% 0 0 0); } 45%, 65% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } }@keyframes progress-wipe { 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} } /* ============================================================ LIGHT TRANSITION — PROGRESSIVE BULB ============================================================ */ .light-transition { position: fixed; z-index: 105; inset: 0; display: grid; place-items: center; overflow: hidden; background: var(--color-green); color: var(--color-black); clip-path: inset(100% 0 0 0); pointer-events: none; } .light-transition.is-active { animation: light-wipe 2.1s var(--ease-inout) forwards; } .light-transition .ldm-bulb--transition { position: relative; z-index: 3; display: block; opacity: 1; visibility: visible; } .light-transition .ldm-bulb__glass { stroke: rgba(18,20,15,.5); } .light-transition .ldm-bulb__filament { stroke: rgba(18,20,15,.24); } .light-transition .ldm-bulb__base { stroke: rgba(18,20,15,.42); } .light-transition .ldm-bulb.is-warm .ldm-bulb__filament { stroke: rgba(75,88,12,.95); filter: drop-shadow(0 0 .25rem rgba(234,255,65,.8)); } .light-transition .ldm-bulb.is-lit { filter: drop-shadow(0 0 2rem rgba(234,255,65,.45)); } .light-transition .ldm-bulb.is-lit .ldm-bulb__glass { fill: rgba(234,255,65,.08); stroke: rgba(18,20,15,.72); } .light-transition .ldm-bulb.is-lit .ldm-bulb__filament { stroke: #eaff41; filter: drop-shadow(0 0 .25rem rgba(234,255,65,1)) drop-shadow(0 0 .8rem rgba(234,255,65,.7)); } .light-transition .ldm-bulb.is-full { filter: drop-shadow(0 0 1rem rgba(234,255,65,.6)) drop-shadow(0 0 3rem rgba(234,255,65,.45)); } .light-transition .ldm-bulb.is-full .ldm-bulb__halo { opacity: 1; transform: scale(1.08); } .light-transition p { position: absolute; z-index: 2; left: max(5vw, 2rem); bottom: 15%; margin: 0; font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 6rem); letter-spacing: -.07em; } .light-transition > span { position: absolute; z-index: 2; right: max(5vw, 2rem); bottom: 18%; width: min(19rem, 56vw); height: 1px; background: rgba(18,20,15,.28); } .light-transition > span i { display: block; width: 100%; height: 100%; background: var(--color-black); transform-origin: left; animation: progress-wipe .7s var(--ease-inout) infinite; } .light-transition > b { position: absolute; z-index: 2; right: max(5vw, 2rem); bottom: 15%; font-size: .65rem; letter-spacing: .12em; } .light-transition:not(.is-active) > span, .light-transition:not(.is-active) > b { display: none; } .light-transition[data-mode="table"] { background: var(--color-ivory); color: var(--color-ink); } .light-transition[data-mode="table"] .ldm-bulb__glass { stroke: rgba(18,20,15,.5); } .light-transition[data-mode="table"] .ldm-bulb__filament { stroke: rgba(18,20,15,.24); } /* Scroll reveals */ [data-reveal], [data-split] { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }.js [data-reveal], .js [data-split] { opacity: 0; transform: translateY(2rem); }.js [data-reveal].is-revealed, .js [data-split].is-revealed { opacity: 1; transform: none; }.js .story-card__panel { opacity: .2; transform: translateY(2rem); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }.js .story-card.is-in-view .story-card__panel { opacity: 1; transform: none; } .simple-page { min-height: 60vh; padding: 10rem 0 7rem; }.simple-page__hero, .simple-page__content, .simple-page__media { width: min(86vw, 840px); margin: 0 auto; }.simple-page__hero { margin-bottom: 4rem; }.simple-page__hero h1 { font-size: clamp(4rem, 9vw, 8rem); }.simple-page__content { font-size: 1.1rem; line-height: 1.8; }.simple-page__media { margin-bottom: 3rem; }.simple-page__article { padding: 2rem 0; border-top: 1px solid var(--color-line); }.simple-page__article h2 { font-size: 3rem; } @media (hover: hover) and (pointer: fine) { .cursor { display: block; } body, body a, body button { cursor: none; } } @media (max-width: 980px) { .site-header__inner { grid-template-columns: 1fr auto; min-height: 5.4rem; }.site-nav, .header-whatsapp { display: none; }.menu-toggle { display: flex; width: 2.4rem; height: 2.4rem; flex-direction: column; align-items: center; justify-content: center; gap: .34rem; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: none; }.menu-toggle span:not(.screen-reader-text) { display: block; width: .8rem; height: 1px; background: currentColor; transition: transform .3s, margin .3s; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(2.5px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }.mobile-menu { position: fixed; top: 5.4rem; right: 4vw; left: 4vw; display: flex; flex-direction: column; gap: .4rem; padding: 1.5rem; background: var(--color-white); color: var(--color-black); opacity: 0; pointer-events: none; transform: translateY(-1rem); transition: opacity .35s, transform .35s var(--ease-out); box-shadow: var(--shadow-float); }.mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: none; }.mobile-menu a { padding: .62rem 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-display); font-size: 2rem; letter-spacing: -.05em; } .universes__intro, .chapter-intro, .abidjan__inner { grid-template-columns: 1fr; gap: 2rem; }.universes__intro .eyebrow { grid-column: auto; }.universe-split { padding: 0; }.story-card { min-height: 41rem; }.table-showcase { min-height: 37rem; }.maison__editorial { grid-template-columns: 1fr 1fr; }.abidjan__inner { gap: 3rem; }.footer-grid { grid-template-columns: 1fr 1fr; }.product-modal__sheet { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { :root { --container: min(89vw, 1440px); }.site-header__inner { min-height: 4.8rem; }.site-header.is-scrolled .site-header__inner { min-height: 4.5rem; }.mobile-menu { top: 4.8rem; }.hero { min-height: 44rem; }.hero__content { min-height: 44rem; padding-top: 8rem; padding-bottom: 3rem; }.hero h1 { font-size: clamp(4.4rem, 20.5vw, 6.7rem); }.hero__bottom { align-items: flex-start; flex-direction: column; }.hero__bottom > p { font-size: 1.1rem; }.hero .button { width: 100%; }.scroll-prompt, .hero__index { display: none; } .universes { padding-top: 5rem; }.universes h2, .chapter-intro h2, .maison h2, .abidjan h2, .contact-interlude h2 { font-size: clamp(3.1rem, 15vw, 5.2rem); }.universe-split { display: block; }.universe { min-height: 31rem; }.universe__label strong { font-size: 3.5rem; }.universes__hint { display: none; } .chapter-intro { padding-top: 5rem; }.chapter-intro > p { font-size: .9rem; }.story-card, .story-card:nth-child(even) { min-height: 39rem; align-items: flex-end; padding: 1.6rem; text-align: left; }.story-card__media::after, .story-card:nth-child(even) .story-card__media::after { background: linear-gradient(0deg, rgba(0,0,0,.84), rgba(0,0,0,.02) 75%); }.story-card:nth-child(even) .story-card__panel { align-items: flex-start; }.story-card__panel { width: 100%; }.story-card h3 { font-size: 4.4rem; }.story-card__tagline { margin-bottom: 1.2rem; }.story-card__meta { margin-bottom: 1.25rem; }.table-transition { min-height: 25rem; }.table-transition p { font-size: 3.5rem; }.table-showcase { grid-template-columns: 1fr; min-height: 0; }.table-showcase__image { min-height: 25rem; }.table-showcase__copy { min-height: 26rem; }.table-products { display: block; padding-top: 4rem; }.table-product, .table-product:nth-child(2), .table-product:nth-child(3), .table-product:nth-child(4), .table-product:nth-child(5), .table-product:nth-child(6) { margin: 0 0 3.2rem; }.table-product:nth-child(3), .table-product:nth-child(4), .table-product:nth-child(6) { grid-column: auto; }.table-product__image img { aspect-ratio: .95; } .maison { padding-top: 5rem; }.maison__editorial { display: flex; width: 100%; flex-direction: column; }.maison__figure--first, .maison__figure--second, .maison__statement { min-height: 31rem; }.maison__manifesto { min-height: 24rem; }.maison__figure--second { order: 3; }.maison__statement { order: 4; }.abidjan { padding-top: 5rem; }.abidjan__details { grid-template-columns: 1fr; gap: 1.6rem; }.abidjan__map { height: 21rem; }.abidjan__map-mask { right: 1.2rem; bottom: 1.2rem; }.contact-interlude { padding: 5rem 0; }.contact-interlude .button { width: 100%; }.footer-top { align-items: flex-start; flex-direction: column; }.footer-top .button { width: 100%; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }.footer-bottom { display: block; }.footer-bottom span { display: block; margin-bottom: .5rem; }.product-modal { padding: 1rem; }.product-modal__sheet { display: block; max-height: 92vh; }.product-modal__image-wrap { min-height: 17rem; max-height: 35vh; }.product-modal__content { padding: 2rem 1.5rem; }.product-modal__content h2 { font-size: 4rem; }.product-modal__content dl { gap: 1rem; }.product-modal__content .button { width: 100%; }.simple-page { padding-top: 8rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .cursor { display: none !important; } } /* V2 cursor refinement */ .cursor { width: .82rem; height: .82rem; background: rgba(234,255,65,.12); } .cursor.is-active { width: 1.07rem; height: 1.07rem; background: var(--color-green); box-shadow: var(--glow-green); } .cursor__label { display: none !important; } .showroom-card.is-in-view { animation: showroom-card-in .85s var(--ease-out) both; } .showroom-card:nth-child(2).is-in-view, .showroom-card:nth-child(5).is-in-view { animation-delay: .08s; } .showroom-card:nth-child(3).is-in-view, .showroom-card:nth-child(6).is-in-view { animation-delay: .16s; } @keyframes showroom-card-in { from { opacity: 0; transform: translateY(calc(var(--card-shift, 0px) + 1.6rem)); } to { opacity: 1; transform: translateY(var(--card-shift, 0px)); } } .button, .text-link, .round-link { transform: translate(var(--mag-x, 0px), var(--mag-y, 0px)); } @media (max-width: 680px) { .showroom { padding-top: 5rem; } .showroom__intro { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 3rem; } .showroom__intro h2 { font-size: clamp(3.1rem, 15vw, 5.2rem); } .showroom__intro > p { font-size: .9rem; } .showroom__orb { top: -2rem; right: -5rem; width: 15rem; height: 15rem; } .showroom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .75rem; } .showroom-card:nth-child(n) { grid-column: span 1; margin-top: 0; } .showroom-card:nth-child(1), .showroom-card:nth-child(4) { grid-column: span 2; } .showroom-card:nth-child(2), .showroom-card:nth-child(5) { margin-top: 1.7rem; } .showroom-card:nth-child(3), .showroom-card:nth-child(6) { margin-top: 3rem; } .showroom-card__visual img { aspect-ratio: .88; } .showroom-card:nth-child(1) .showroom-card__visual img, .showroom-card:nth-child(4) .showroom-card__visual img { aspect-ratio: 1.14; } .showroom-card__number { top: .6rem; left: .6rem; width: 1.65rem; height: 1.65rem; } .showroom-card__caption { gap: .15rem .45rem; padding-top: .65rem; } .showroom-card__caption h3 { font-size: 1.45rem; } .showroom-card__caption > p:last-child { font-size: .54rem; } .showroom-card__reveal { right: .65rem; bottom: .65rem; left: .65rem; } .showroom-transition { min-height: 24rem; } .showroom-transition p { font-size: 3.4rem; } } @media (prefers-reduced-motion: reduce) { .showroom-card.is-in-view { animation: none; } .button, .text-link, .round-link { transform: none; } } /* V3 premium interaction layer */ .icon { display: inline-block; width: 1rem; height: 1rem; fill: currentColor; flex: 0 0 auto; } .icon--pin { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .button, .header-whatsapp, .text-link, .round-link, .showroom-card__visual { outline: none; } .button:focus-visible, .header-whatsapp:focus-visible, .text-link:focus-visible, .round-link:focus-visible, .showroom-card__visual:focus-visible, .whatsapp-float:focus-visible { outline: 2px solid var(--color-green); outline-offset: 5px; } .button:active, .header-whatsapp:active, .whatsapp-float:active { transform: translate(var(--mag-x, 0px), var(--mag-y, 0px)) scale(.97); } .button { position: relative; overflow: hidden; box-shadow: 0 0 0 rgba(0,0,0,0); } .button::before { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.27), transparent 70%); content: ""; transform: translateX(-120%); transition: transform .7s var(--ease-out); } .button:hover::before { transform: translateX(120%); } .button > * { position: relative; z-index: 1; } .whatsapp-cta .icon--whatsapp { width: 1.1rem; height: 1.1rem; } .header-whatsapp { transition: transform .45s var(--ease-out), color .35s; } .header-whatsapp::before { display: none; } .header-whatsapp .icon--whatsapp { width: .9rem; height: .9rem; transition: transform .35s var(--ease-out); } .header-whatsapp:hover .icon--whatsapp, .whatsapp-cta:hover .icon--whatsapp { transform: translateY(-2px) rotate(-7deg); } .cursor { width: .72rem; height: .72rem; border: 1px solid var(--color-green); background: var(--color-green); mix-blend-mode: normal; } .cursor.is-active { width: .95rem; height: .95rem; border-color: var(--color-green); background: var(--color-green); box-shadow: var(--glow-green); } .cursor.is-image { width: 1.2rem; height: 1.2rem; border-color: var(--color-white); background: transparent; box-shadow: 0 0 0 5px rgba(255,255,255,.13); } .cursor.is-contrast { border-color: var(--color-ink); background: var(--color-ink); box-shadow: 0 0 0 4px rgba(18,20,15,.08); } .cursor.is-contrast.is-active { background: var(--color-ink); border-color: var(--color-ink); box-shadow: 0 0 0 5px rgba(18,20,15,.1); } .cursor__label { display: none !important; } .scroll-progress { position: fixed; z-index: 79; right: 1.35rem; bottom: 1.5rem; display: grid; gap: .55rem; justify-items: end; color: currentColor; font-size: .53rem; font-weight: 600; letter-spacing: .12em; pointer-events: none; text-transform: uppercase; } .scroll-progress i { position: relative; display: block; width: 4.5rem; height: 1px; overflow: hidden; background: rgba(255,255,255,.35); } .scroll-progress i::after { position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); background: var(--color-green); content: ""; transition: width .3s var(--ease-out); } .site-header.is-light ~ .scroll-progress { color: var(--color-ink); } .showroom-card__visual::after { background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(234,255,65,.23), transparent 30%), linear-gradient(0deg, rgba(0,0,0,.7), transparent 58%); } .showroom--tableware .showroom-card__visual::after { background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(80,100,80,.16), transparent 32%), linear-gradient(0deg, rgba(0,0,0,.62), transparent 58%); } .showroom-card__caption h3 { transition: transform .55s var(--ease-out), color .35s; } .showroom-card:hover .showroom-card__caption h3 { color: var(--color-green); transform: translateX(.35rem); } .showroom--tableware .showroom-card:hover .showroom-card__caption h3 { color: #71a501; } .showroom-card__number { transition: transform .45s var(--ease-out), background .35s, color .35s; } .showroom-card:hover .showroom-card__number { background: var(--color-green); color: var(--color-black); transform: rotate(-10deg) scale(1.08); } .product-modal__sheet { transform: translateY(1.5rem) scale(.98); transition: transform .65s var(--ease-out); } .product-modal.is-open .product-modal__sheet { transform: none; } .product-modal__image-wrap img { transform: scale(1.05); transition: transform 1s var(--ease-out); } .product-modal.is-open .product-modal__image-wrap img { transform: scale(1); } .product-modal__content > * { opacity: 0; transform: translateY(1rem); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); } .product-modal.is-open .product-modal__content > * { opacity: 1; transform: none; } .product-modal.is-open .product-modal__content > *:nth-child(2) { transition-delay: .06s; }.product-modal.is-open .product-modal__content > *:nth-child(3) { transition-delay: .1s; }.product-modal.is-open .product-modal__content > *:nth-child(4) { transition-delay: .14s; }.product-modal.is-open .product-modal__content > *:nth-child(5) { transition-delay: .18s; }.product-modal.is-open .product-modal__content > *:nth-child(6) { transition-delay: .22s; } .product-modal__close { transition: transform .4s var(--ease-out), background .3s; }.product-modal__close:hover { transform: rotate(90deg); } .whatsapp-float { position: fixed; z-index: 95; left: 1.25rem; bottom: 1.25rem; display: flex; width: 3.2rem; height: 3.2rem; align-items: center; gap: .7rem; overflow: hidden; border: 1px solid rgba(18,20,15,.16); border-radius: 99px; background: var(--color-green); color: var(--color-black); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.18); transition: width .6s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s; } .whatsapp-float::before { position: absolute; inset: -.4rem; z-index: -1; border: 1px solid rgba(234,255,65,.45); border-radius: inherit; content: ""; animation: whatsapp-breathe 3s ease-in-out infinite; } .whatsapp-float .icon--whatsapp { width: 1.25rem; height: 1.25rem; margin-left: .95rem; } .whatsapp-float span { width: 13rem; font-size: .61rem; font-weight: 700; letter-spacing: .08em; opacity: 0; text-transform: uppercase; transform: translateX(-.5rem); transition: opacity .35s .08s, transform .45s var(--ease-out); white-space: nowrap; } .whatsapp-float:hover { width: 15.5rem; box-shadow: var(--glow-green); transform: translateY(-3px); } .whatsapp-float:hover span { opacity: 1; transform: none; } @keyframes whatsapp-breathe { 50% { transform: scale(1.08); opacity: .35; } } .abidjan__map { isolation: isolate; } .abidjan__map-pin { display: none; pointer-events: none; position: absolute; z-index: 3; top: 50%; left: 50%; display: block; width: 1rem; height: 1rem; border: 3px solid var(--color-green); border-radius: 50% 50% 50% 0; background: var(--color-black); box-shadow: var(--glow-green); transform: translate(-50%, -65%) rotate(-45deg); } .abidjan__map-pin::after { position: absolute; top: 50%; left: 50%; width: .22rem; height: .22rem; border-radius: 50%; background: var(--color-green); content: ""; transform: translate(-50%, -50%); } .abidjan__map-card { display: none; pointer-events: none; position: absolute; z-index: 3; top: calc(50% - 5rem); left: calc(50% + 1.4rem); display: grid; gap: .15rem; padding: .8rem 1rem; background: var(--color-green); color: var(--color-black); box-shadow: 0 1rem 2rem rgba(0,0,0,.28); font-size: .62rem; } .abidjan__map-card strong { font-size: .68rem; }.abidjan__map-card span { opacity: .7; } .map-cta .icon--pin { transition: transform .4s var(--ease-out); }.map-cta:hover .icon--pin { transform: translateY(-2px) rotate(-8deg); } @media (max-width: 680px) { .scroll-progress { right: .75rem; bottom: .85rem; } .whatsapp-float { left: .75rem; bottom: .75rem; width: 2.9rem; height: 2.9rem; } .whatsapp-float .icon--whatsapp { margin-left: .82rem; } .whatsapp-float:hover, .whatsapp-float:focus-visible { width: 2.9rem; transform: none; } .whatsapp-float span { display: none; } .abidjan__map-card { top: calc(50% - 4.5rem); left: 1rem; } } @media (prefers-reduced-motion: reduce) { .button::before, .whatsapp-float::before { animation: none; transition: none; } .product-modal__sheet, .product-modal__image-wrap img, .product-modal__content > *, .showroom-card__caption h3 { transition: none; } .cursor { transition: none; } } .maison__figure--first img { transform: translateY(calc(var(--scroll-shift, 0px) * -.16)); transition: transform .2s linear; } .maison__figure--second img { transform: translateY(calc(var(--scroll-shift, 0px) * .11)); transition: transform .2s linear; } .maison__manifesto, .maison__statement { position: relative; } .maison__manifesto::before, .maison__statement::before { position: absolute; top: 1.5rem; right: 1.5rem; color: currentColor; content: "05 / 06"; font-size: .54rem; font-weight: 600; letter-spacing: .13em; opacity: .45; } .hero::after, .showroom--luminaires::after, .maison::after { position: absolute; z-index: 0; top: var(--light-y, 50%); left: var(--light-x, 50%); width: 25rem; height: 25rem; border-radius: 50%; background: radial-gradient(circle, rgba(234,255,65,.11), transparent 68%); content: ""; filter: blur(20px); opacity: .72; pointer-events: none; transform: translate(-50%, -50%); transition: top .7s var(--ease-out), left .7s var(--ease-out); } .hero::after { z-index: -1; opacity: .42; } .showroom--luminaires::after { z-index: 0; } .maison::after { background: radial-gradient(circle, rgba(125,140,103,.08), transparent 68%); } .showroom__intro, .showroom__stage, .maison__opening, .maison__editorial { position: relative; z-index: 1; } /* V4 editorial refinement */ .exploration-cta .icon--compass { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; transition: transform .55s var(--ease-out); } .exploration-cta:hover .icon--compass { transform: rotate(45deg) scale(1.08); } .light-transition { min-height: 100%; background: var(--color-green); } .light-transition[data-mode="table"] { background: var(--color-ivory); color: var(--color-ink); } .light-transition[data-mode="table"] span i { background: #6f9700; } .light-transition.is-active { animation-duration: 2.1s; } @keyframes light-wipe { 0% { clip-path: inset(100% 0 0 0); } 32%, 72% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } } .universe-split { gap: clamp(1rem, 3vw, 3.5rem); } .universe { box-shadow: 0 1.5rem 4rem rgba(18,20,15,.12); transform: perspective(1300px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--universe-y, 0px)); transition: transform .7s var(--ease-out), box-shadow .6s var(--ease-out); } .universe::after { position: absolute; inset: 0; background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(234,255,65,.18), transparent 34%), linear-gradient(0deg, rgba(0,0,0,.35), transparent 58%); content: ""; opacity: 0; transition: opacity .55s; pointer-events: none; } .universe:hover { z-index: 2; box-shadow: 0 2rem 5rem rgba(18,20,15,.25); transform: perspective(1300px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-.5rem) scale(1.01); } .universe:hover::after, .universe.is-active::after { opacity: 1; } .universe img { transform: translate(var(--image-x, 0px), var(--image-y, 0px)); } .universe:hover img, .universe.is-active img { transform: translate(var(--image-x, 0px), var(--image-y, 0px)) scale(1.08); } .universe__label strong { transition: transform .55s var(--ease-out); }.universe:hover .universe__label strong { transform: translateX(.35rem); } .universe__label i { transition: background .3s, color .3s, transform .5s var(--ease-out); } .maison__manifesto { gap: 1.8rem; }.maison__manifesto-lead { max-width: 32rem !important; font-size: clamp(1.9rem, 3vw, 3.2rem) !important; }.maison__manifesto-support { max-width: 24rem !important; color: rgba(255,255,255,.66); font-family: var(--font-body) !important; font-size: .82rem !important; letter-spacing: .01em !important; line-height: 1.7 !important; } .maison__cards { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: var(--space-xl); } .maison-card { position: relative; min-height: 14rem; padding: clamp(1.4rem, 2.5vw, 2.5rem); overflow: hidden; border: 1px solid var(--color-line); background: rgba(255,255,255,.3); box-shadow: 0 1rem 2.5rem rgba(18,20,15,.06); transform: translateY(var(--card-y, 0px)) rotate(var(--card-rotate, 0deg)); transition: transform .65s var(--ease-out), box-shadow .45s, background .45s; } .maison-card:nth-child(1) { grid-column: span 4; --card-y: 1rem; }.maison-card:nth-child(2) { grid-column: span 3; --card-y: 4rem; }.maison-card:nth-child(3) { grid-column: span 5; --card-y: 0rem; }.maison-card:nth-child(4) { grid-column: 3 / span 4; --card-y: 3rem; }.maison-card:nth-child(5) { grid-column: 8 / span 5; --card-y: -1rem; background: var(--color-black); color: var(--color-white); } .maison-card:hover { z-index: 2; box-shadow: 0 1.6rem 3.5rem rgba(18,20,15,.14); transform: translateY(calc(var(--card-y, 0px) - .45rem)) rotate(0deg); } .maison-card::after { position: absolute; inset: 0; background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(113,151,0,.12), transparent 38%); content: ""; opacity: 0; transition: opacity .4s; pointer-events: none; }.maison-card:hover::after { opacity: 1; } .maison-card__index { display: block; margin-bottom: 2.5rem; color: #6f9700; font-size: .58rem; font-weight: 700; letter-spacing: .12em; }.maison-card h3 { position: relative; z-index: 1; margin: 0 0 .8rem; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.7rem); letter-spacing: -.06em; line-height: .9; }.maison-card p { position: relative; z-index: 1; max-width: 20rem; margin: 0; color: rgba(18,20,15,.7); font-size: .78rem; line-height: 1.65; }.maison-card--manifesto p { color: rgba(255,255,255,.67); }.maison-card__origin { display: block; margin: -2.1rem 0 2.2rem; color: #6f9700; font-size: .55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .scroll-progress { left: 50%; right: auto; bottom: 1.5rem; grid-template-columns: auto 4.5rem; align-items: center; gap: .7rem; transform: translateX(-50%); }.scroll-progress i { width: 4.5rem; }.scroll-progress.is-light { color: var(--color-ink); }.scroll-progress.is-light i { background: rgba(18,20,15,.2); }.scroll-progress.is-light i::after, .scroll-progress.is-green i::after { background: var(--color-ink); }.scroll-progress.is-green { color: var(--color-ink); } .whatsapp-float { left: calc(50% - 8.5rem); bottom: 1.25rem; }.whatsapp-float:hover { width: 15.5rem; } .footer-social-note { max-width: 11rem; opacity: .62; } @media (max-width: 680px) { .universe-split { gap: 1rem; padding: 0 4.5vw; }.universe { min-height: 27rem; }.scroll-progress { left: auto; right: .75rem; bottom: .85rem; transform: none; grid-template-columns: auto 3rem; gap: .45rem; }.scroll-progress i { width: 3rem; }.whatsapp-float { left: .75rem; bottom: .75rem; }.maison__cards { display: flex; flex-direction: column; gap: .8rem; padding-top: 3rem; padding-bottom: 5rem; }.maison-card:nth-child(n) { min-height: 13rem; transform: none; }.maison-card h3 { font-size: 2rem; }.maison-card__index { margin-bottom: 1.7rem; }.maison__manifesto-lead { font-size: 2rem !important; } } .js .maison-card { opacity: 0; transform: translateY(calc(var(--card-y, 0px) + 1.4rem)); } .js .maison-card.is-in-view { opacity: 1; transform: translateY(var(--card-y, 0px)) rotate(var(--card-rotate, 0deg)); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), box-shadow .45s, background .45s; } .maison-card:nth-child(2).is-in-view { transition-delay: .08s; }.maison-card:nth-child(3).is-in-view { transition-delay: .14s; }.maison-card:nth-child(4).is-in-view { transition-delay: .2s; }.maison-card:nth-child(5).is-in-view { transition-delay: .26s; } @media (prefers-reduced-motion: reduce) { .js .maison-card, .js .maison-card.is-in-view { opacity: 1; transform: none; } } .footer-social-note { display: flex; align-items: flex-start; gap: .5rem; max-width: 13rem; }.icon--facebook { width: .9rem; height: .9rem; margin-top: .15rem; } /* ============================================================ LEGAL MODAL — Premium ============================================================ */ .footer-legal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .7rem 1.5rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.13); } .footer-legal__link { appearance: none; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.62); font: inherit; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; transition: color .3s var(--ease-out), transform .3s var(--ease-out); } .footer-legal__link:hover { color: var(--color-white); transform: translateY(-2px); } .legal-modal { position: fixed; z-index: 115; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 3vw, 3rem); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-out); } .legal-modal.is-open { opacity: 1; pointer-events: auto; } .legal-modal__backdrop { position: absolute; inset: 0; background: rgba(9,10,8,.88); backdrop-filter: blur(10px); } .legal-modal__sheet { position: relative; z-index: 1; width: min(58rem, 100%); max-height: min(84vh, 52rem); overflow: auto; padding: clamp(2rem, 5vw, 5rem); background: var(--color-ivory); box-shadow: var(--shadow-float); transform: translateY(2rem) scale(.975); transition: transform .6s var(--ease-out); scrollbar-width: thin; } .legal-modal.is-open .legal-modal__sheet { transform: translateY(0) scale(1); } .legal-modal__close { position: absolute; z-index: 3; top: 1.2rem; right: 1.2rem; display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 0; border-radius: 50%; background: var(--color-white); color: var(--color-black); font-size: 1.8rem; line-height: 1; cursor: none; transition: transform .4s var(--ease-out), background .3s, color .3s; } .legal-modal__close:hover { background: var(--color-green); color: var(--color-black); transform: rotate(90deg); } .legal-modal__header { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .legal-modal__header .eyebrow { margin: 0 0 .8rem; color: #6f9700; } .legal-modal__header h2 { margin: 0; max-width: 38rem; font-size: clamp(3rem, 6vw, 6rem); line-height: .92; letter-spacing: -.055em; } .legal-modal__line { width: 4rem; height: 2px; margin-top: 1.8rem; background: var(--color-green); } .legal-modal__body { max-width: 48rem; } .legal-block { display: grid; grid-template-columns: 3rem 1fr; gap: 1.5rem; padding: 1.8rem 0; border-top: 1px solid var(--color-line); } .legal-block:first-child { border-top: 0; padding-top: 0; } .legal-block__number { padding-top: .15rem; color: rgba(18,20,15,.4); font-size: .6rem; font-weight: 700; letter-spacing: .12em; } .legal-block h3 { margin: 0 0 .65rem; font-size: 1.05rem; letter-spacing: -.02em; } .legal-block p { max-width: 38rem; margin: 0; color: rgba(18,20,15,.68); font-size: .9rem; line-height: 1.75; } .legal-block strong { color: var(--color-black); } .legal-modal__body [hidden] { display: none; } @media (max-width: 700px) { .footer-legal { align-items: flex-start; justify-content: flex-start; flex-direction: column; } .legal-modal { padding: .75rem; } .legal-modal__sheet { max-height: 91vh; padding: 3.5rem 1.35rem 2rem; } .legal-modal__close { top: .8rem; right: .8rem; } .legal-modal__header h2 { font-size: clamp(2.7rem, 13vw, 4.2rem); } .legal-block { grid-template-columns: 2rem 1fr; gap: .8rem; } .legal-block p { font-size: .85rem; } } /* LEGAL FOOTER — visibility fix */ .footer-legal { position: relative !important; z-index: 5 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: .75rem 1.5rem !important; width: 100% !important; margin: 2rem 0 0 !important; padding: 1.25rem 0 !important; border-top: 1px solid rgba(255,255,255,.16) !important; } .footer-legal__link { position: relative !important; z-index: 6 !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; appearance: none !important; padding: .35rem .1rem !important; border: 0 !important; background: transparent !important; color: var(--color-black) !important; font-family: inherit !important; font-size: .62rem !important; line-height: 1.4 !important; letter-spacing: .08em !important; text-transform: uppercase !important; cursor: none !important; } .footer-legal__link:hover { color: var(--color-black) !important; } /* ============================================================ COLLECTION EXPANSION ============================================================ */ .showroom-card--collection-extra { opacity: 0; transform: translateY(28px); max-height: 0; overflow: hidden; pointer-events: none; margin-top: 0 !important; margin-bottom: 0 !important; transition: opacity .55s ease, transform .65s cubic-bezier(.22,1,.36,1), max-height .7s ease, margin .7s ease; } .showroom-grid.is-expanded .showroom-card--collection-extra { opacity: 1; transform: translateY(0); max-height: 700px; pointer-events: auto; margin-top: initial !important; margin-bottom: initial !important; } .collection-toggle { display: flex; justify-content: center; margin: 54px auto 0; position: relative; z-index: 5; } .collection-toggle__button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-width: 270px; padding: 16px 24px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: none !important; transition: background-color .3s ease, color .3s ease, transform .3s ease; } .collection-toggle__button:hover { background: var(--color-black); color: var(--color-white); transform: translateY(-2px); } .collection-toggle__icon { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; transition: transform .45s cubic-bezier(.22,1,.36,1); } .showroom-grid.is-expanded + .collection-toggle__wrap .collection-toggle__icon { transform: rotate(180deg); } .collection-toggle__button[aria-expanded="true"] .collection-toggle__icon { transform: rotate(180deg); } .showroom--luminaires .collection-toggle__button { color: var(--color-white); border-color: rgba(255,255,255,.5); } .showroom--luminaires .collection-toggle__button:hover { color: var(--color-black); background: var(--color-white); } .showroom--tableware .collection-toggle__button { color: var(--color-black); border-color: rgba(18,20,15,.35); } .showroom--tableware .collection-toggle__button:hover { color: var(--color-white); background: var(--color-black); } @media (max-width: 700px) { .collection-toggle { margin-top: 36px; } .collection-toggle__button { width: 100%; min-width: 0; } } /* Cursor noir dans les popups légaux */ body.legal-modal-is-open .cursor, body.legal-modal-is-open .cursor.is-active, body.legal-modal-is-open .cursor.is-image, body.legal-modal-is-open .cursor.is-contrast, body.legal-modal-is-open .cursor.is-contrast.is-active { border-color: var(--color-black) !important; background: var(--color-black) !important; box-shadow: 0 0 0 4px rgba(18,20,15,.08) !important; } /* EXTRA PRODUCTS DISPLAY SIZE */ /* Uniquement les 6 produits supplémentaires */ .showroom-grid.is-expanded .showroom-card--collection-extra { transform: scale(1.04); transform-origin: center top; margin-bottom: 12px; } .showroom-grid.is-expanded .showroom-card--collection-extra .showroom-card__image, .showroom-grid.is-expanded .showroom-card--collection-extra .showroom-card__image img { min-height: 370px; } .showroom-grid.is-expanded .showroom-card--collection-extra .showroom-card__body { min-height: 205px; padding: 26px; } .showroom-grid.is-expanded .showroom-card--collection-extra h3 { font-size: clamp(1.2rem, 1.45vw, 1.5rem); line-height: 1.15; min-height: 2.3em; white-space: normal; overflow: visible; text-overflow: clip; } /* Sur mobile, on évite que l'agrandissement déborde */ @media (max-width: 700px) { .showroom-grid.is-expanded .showroom-card--collection-extra { transform: none; } .showroom-grid.is-expanded .showroom-card--collection-extra .showroom-card__image, .showroom-grid.is-expanded .showroom-card--collection-extra .showroom-card__image img { min-height: 320px; } } /* ============================================================ MAISON — MOBILE : CARTES SANS CHEVAUCHEMENT ============================================================ */ @media (max-width: 700px) { .maison__cards { display: flex !important; flex-direction: column !important; gap: 18px !important; height: auto !important; } .maison-card { position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; transform: none !important; display: block !important; box-sizing: border-box !important; } .maison-card h3 { position: relative !important; margin: 10px 0 12px !important; } .maison-card p { position: relative !important; margin: 0 !important; } .maison-card__index { display: block !important; position: relative !important; margin-bottom: 8px !important; } .maison-card__origin { display: block !important; position: relative !important; margin-bottom: 8px !important; } } /* ============================================================ MOBILE — ORGANISATION DE LA TRANSITION ============================================================ */ @media (max-width: 700px) { .light-transition { padding: 24px; box-sizing: border-box; } /* Texte / pourcentage : zone centrale propre */ .light-transition p { position: relative; z-index: 2; margin: 0; text-align: center; line-height: 1; max-width: 90vw; } /* Ampoule : reste au centre */ .light-transition .ldm-bulb--transition { position: relative; z-index: 2; } /* Barre : complètement indépendante du texte */ .light-transition > span { position: absolute; left: 12vw; right: 12vw; bottom: 12%; width: auto; height: 2px; margin: 0; } .light-transition > span i { height: 100%; } /* Pourcentage : sous la barre, jamais dessus */ .light-transition > b { position: absolute; left: 0; right: 0; bottom: calc(12% - 2rem); width: 100%; margin: 0; text-align: center; font-size: .65rem; line-height: 1; letter-spacing: .14em; } .light-transition:not(.is-active) > span, .light-transition:not(.is-active) > b { display: none; } } /* ============================================================ MAISON — CARTE 06 : INSTALLATION & SAVOIR-FAIRE ============================================================ */ .maison-card:nth-child(6) { grid-column: 2 / span 5; --card-y: 1.5rem; background: var(--color-ivory); } .maison-card--installation p { max-width: 24rem; } .maison-card--installation h3 { max-width: 18rem; } @media (max-width: 680px) { .maison-card:nth-child(6) { grid-column: auto; --card-y: 0; min-height: 15rem; } .maison-card--installation h3 { max-width: none; } .maison-card--installation p { max-width: 100%; } } /* ============================================================ MAISON — FLÈCHE 3D ============================================================ */ .maison__3d-arrow { position: relative; display: grid; width: 4.8rem; height: 4.8rem; place-items: center; overflow: visible; } .maison__3d-arrow svg { width: 100%; height: 100%; overflow: visible; transform: rotate(0deg); } .maison__3d-arrow .arrow-shadow { fill: none; stroke: rgba(18, 20, 15, .28); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; transform: translate(4px, 5px); } .maison__3d-arrow .arrow-main { fill: none; stroke: var(--color-black); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out), stroke-width .3s; } .maison__3d-arrow:hover .arrow-main { transform: translate(2px, 2px); stroke-width: 6; } .maison__3d-arrow:hover .arrow-shadow { transform: translate(6px, 7px); } @media (max-width: 680px) { .maison__3d-arrow { width: 4.2rem; height: 4.2rem; } } /* LDM_MODAL_CURSOR_BLACK_V1 */ [data-product-modal], [data-product-modal] *, .product-modal, .product-modal * { cursor: default; } [data-product-modal] a, [data-product-modal] button, .product-modal a, .product-modal button { cursor: pointer; } /* LDM_PRODUCT_MODAL_CART_V2 */ .product-modal__cart-controls { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; margin-top: 2rem; } .product-modal__cart-button { width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: #000; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: transform .25s ease, background-color .25s ease; } .product-modal__cart-button:hover { background: #111; transform: scale(1.08); } .product-modal__cart-button:active { transform: scale(.94); } .product-modal__cart-quantity { min-width: 1.5rem; text-align: center; font-size: 1rem; font-weight: 600; color: #000; } /* ============================================================ LDM_CART_CSS_V2 ============================================================ */ html.is-loading .ldm-cart, html.is-loading .ldm-cart-trigger, body.is-loading .ldm-cart, body.is-loading .ldm-cart-trigger { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .product-modal .cart-cursor-black, .product-modal__cart-controls button, .ldm-cart .cart-cursor-black, .ldm-cart-trigger { cursor: pointer; } .product-modal__cart-controls { display: flex; align-items: center; gap: 10px; margin-top: 24px; } .product-modal__cart-button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #000; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1; } .product-modal__cart-quantity { min-width: 28px; text-align: center; color: #000; } .product-modal__cart-add { margin-left: 8px; background: #000; color: #fff; border-color: #000; } .ldm-cart-trigger { position: fixed; right: 28px; bottom: 28px; z-index: 900; border: 0; border-radius: 999px; background: #000; color: #fff; padding: 14px 20px; display: flex; align-items: center; gap: 12px; font: inherit; } .ldm-cart-trigger b { min-width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #000; display: inline-flex; align-items: center; justify-content: center; } .ldm-cart { position: fixed; top: 0; right: 0; width: min(430px, 92vw); height: 100vh; z-index: 1000; background: #fff; color: #000; transform: translateX(105%); transition: transform .4s ease; box-shadow: -20px 0 60px rgba(0,0,0,.12); } .ldm-cart.is-open { transform: translateX(0); } .ldm-cart__inner { padding: 50px 32px; height: 100%; overflow-y: auto; } .ldm-cart__close { position: absolute; top: 18px; right: 20px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #000; color: #fff; font-size: 1.3rem; } .ldm-cart__items { margin: 30px 0; } .ldm-cart__item { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid #ddd; } .ldm-cart__footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; } @media (max-width: 600px) { .ldm-cart-trigger { right: 16px; bottom: 16px; } .product-modal__cart-controls { flex-wrap: wrap; } .product-modal__cart-add { width: 100%; margin-left: 0; } } .ldm-cart-trigger__icon { width: 20px; height: 20px; flex: 0 0 20px; } /* LDM_CART_PRELOADER_FIX */ .ldm-cart-trigger, .ldm-cart { opacity: 0; visibility: hidden; } body.is-loaded .ldm-cart-trigger, body.is-loaded .ldm-cart { opacity: 1; visibility: visible; } html.is-loading .ldm-cart-trigger, html.is-loading .ldm-cart { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* LDM CART VISIBILITY FIX */ [data-cart-drawer], .cart-drawer, [data-cart-panel], .cart-panel { display: none; } body.cart-is-open [data-cart-drawer], body.cart-is-open .cart-drawer, body.cart-is-open [data-cart-panel], body.cart-is-open .cart-panel { display: block; } /* Le panier reste invisible pendant le préchargement */ body.is-loading [data-cart-drawer], body.is-loading .cart-drawer, body.is-loading [data-cart-panel], body.is-loading .cart-panel { display: none !important; } /* LDM CART LOADING BUTTON FIX */ /* Le bouton panier flottant est totalement invisible pendant le préchargement */ html.is-loading .cart-button, html.is-loading .cart-toggle, html.is-loading [data-cart-open], html.is-loading .floating-cart, body.is-loading .cart-button, body.is-loading .cart-toggle, body.is-loading [data-cart-open], body.is-loading .floating-cart, .is-preloading .cart-button, .is-preloading .cart-toggle, .is-preloading [data-cart-open], .is-preloading .floating-cart { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* LDM FINAL CART MOTION */ /* Le bouton panier est caché uniquement pendant le préchargement */ html.is-loading .cart-button, html.is-loading .cart-toggle, html.is-loading [data-cart-open], html.is-loading .floating-cart, body.is-loading .cart-button, body.is-loading .cart-toggle, body.is-loading [data-cart-open], body.is-loading .floating-cart, .is-preloading .cart-button, .is-preloading .cart-toggle, .is-preloading [data-cart-open], .is-preloading .floating-cart { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Le tiroir panier est fermé par défaut */ [data-cart-drawer], .cart-drawer, [data-cart-panel], .cart-panel { transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease, visibility 0s linear .45s; } /* Ouverture : droite -> gauche */ body.cart-is-open [data-cart-drawer], body.cart-is-open .cart-drawer, body.cart-is-open [data-cart-panel], body.cart-is-open .cart-panel { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease, visibility 0s; } /* Le panier reste fermé pendant le préchargement */ html.is-loading [data-cart-drawer], html.is-loading .cart-drawer, html.is-loading [data-cart-panel], html.is-loading .cart-panel, body.is-loading [data-cart-drawer], body.is-loading .cart-drawer, body.is-loading [data-cart-panel], body.is-loading .cart-panel, .is-preloading [data-cart-drawer], .is-preloading .cart-drawer, .is-preloading [data-cart-panel], .is-preloading .cart-panel { transform: translateX(100%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* LDM CART RIGHT PANEL + CURSOR */ /* Bouton flottant panier */ .cart-button, .cart-toggle, [data-cart-open], .floating-cart { cursor: none !important; } /* Curseur personnalisé noir sur le bouton panier */ .cart-button:hover::after, .cart-toggle:hover::after, [data-cart-open]:hover::after, .floating-cart:hover::after { content: "→"; position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 99999; } /* Desktop : panneau panier fixé à droite */ @media (min-width: 769px) { [data-cart-drawer], .cart-drawer, [data-cart-panel], .cart-panel { position: fixed !important; top: 0; right: 0; bottom: 0; left: auto !important; width: min(460px, 42vw); max-width: 460px; height: 100vh; transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; z-index: 10000; transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .3s ease, visibility 0s linear .5s; } body.cart-is-open [data-cart-drawer], body.cart-is-open .cart-drawer, body.cart-is-open [data-cart-panel], body.cart-is-open .cart-panel { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .3s ease, visibility 0s; } } /* Mobile */ @media (max-width: 768px) { [data-cart-drawer], .cart-drawer, [data-cart-panel], .cart-panel { position: fixed !important; inset: 0; width: 100%; height: 100dvh; transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .25s ease; } body.cart-is-open [data-cart-drawer], body.cart-is-open .cart-drawer, body.cart-is-open [data-cart-panel], body.cart-is-open .cart-panel { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; } } /* Préchargement : panier totalement invisible */ html.is-loading [data-cart-open], html.is-loading .cart-button, html.is-loading .cart-toggle, html.is-loading .floating-cart, body.is-loading [data-cart-open], body.is-loading .cart-button, body.is-loading .cart-toggle, body.is-loading .floating-cart { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* LDM CART CURSOR TOP LAYER */ /* Le bouton reste sous le curseur personnalisé */ .cart-button, .cart-toggle, [data-cart-open], .floating-cart { position: relative; z-index: 9000 !important; } /* Le curseur global passe toujours au-dessus du bouton panier */ [data-cursor-root], .custom-cursor, .cursor { z-index: 999999 !important; pointer-events: none !important; } /* État spécial du curseur au-dessus du panier */ .cursor.is-cart, [data-cursor-root].is-cart, .custom-cursor.is-cart { z-index: 1000000 !important; pointer-events: none !important; } /* Petit cercle noir bien visible */ .cursor.is-cart::before, [data-cursor-root].is-cart::before, .custom-cursor.is-cart::before { background: #000 !important; border-color: #000 !important; color: #fff !important; opacity: 1 !important; } /* LDM CART FLOATING RESTORE FINAL */ /* Bouton panier flottant : visible normalement */ .cart-button, .cart-toggle, [data-cart-open], .floating-cart { position: fixed; z-index: 9000; opacity: 1; visibility: visible; pointer-events: auto; } /* Seulement pendant le préchargement */ html.is-loading .cart-button, html.is-loading .cart-toggle, html.is-loading [data-cart-open], html.is-loading .floating-cart, body.is-loading .cart-button, body.is-loading .cart-toggle, body.is-loading [data-cart-open], body.is-loading .floating-cart, .is-preloading .cart-button, .is-preloading .cart-toggle, .is-preloading [data-cart-open], .is-preloading .floating-cart { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Curseur personnalisé au-dessus du bouton */ [data-cursor-root], .custom-cursor, .cursor { z-index: 999999 !important; pointer-events: none !important; } [data-cursor-root].is-cart, .custom-cursor.is-cart, .cursor.is-cart { z-index: 1000000 !important; pointer-events: none !important; } /* LDM SIMPLE CART ITEMS */ .cart-simple-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(0,0,0,.14); } .cart-simple-item__info { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .cart-simple-item__name { font-size: 1rem; line-height: 1.2; } .cart-simple-item__number { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; } .cart-simple-item__quantity { flex: 0 0 auto; font-weight: 600; white-space: nowrap; } .cart-empty { margin: 0; opacity: .6; } /* Curseur noir dans le panneau panier */ body.cart-is-open [data-cursor-root], body.cart-is-open .custom-cursor, body.cart-is-open .cursor { color: #000 !important; } /* Curseur vert sur la croix */ body.cart-is-open [data-cursor-root].is-cart-close, body.cart-is-open .custom-cursor.is-cart-close, body.cart-is-open .cursor.is-cart-close { color: #00843D !important; } body.cart-is-open [data-cursor-root].is-cart-close::before, body.cart-is-open .custom-cursor.is-cart-close::before, body.cart-is-open .cursor.is-cart-close::before { background: #00843D !important; border-color: #00843D !important; color: #fff !important; } /* ============================================================ PANIER — CURSEUR NOIR ============================================================ */ .ldm-cart, .ldm-cart * { --cart-cursor-color: #000; } .ldm-cart .cart-cursor-black, .ldm-cart .cart-qty__button, .ldm-cart__close { cursor: none; } .ldm-cart .cart-cursor-black:hover, .ldm-cart .cart-qty__button:hover { color: #000; } .ldm-cart__item-info { display: flex; flex-direction: column; gap: .25rem; } .ldm-cart__item-name { color: #000; } .ldm-cart__item-number { color: rgba(0,0,0,.55); font-size: .8rem; letter-spacing: .08em; } .ldm-cart__item-quantity { display: flex; align-items: center; gap: .65rem; } .ldm-cart__item-quantity .cart-qty__button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #000; background: #000; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .ldm-cart__item-quantity > span { min-width: 1.5rem; text-align: center; color: #000; } /* ============================================================ LDM CART OPEN/CLOSE CSS FIX ============================================================ */ .ldm-cart[hidden] { } .ldm-cart { transform: translateX(100%); visibility: hidden; opacity: 0; pointer-events: none; transition: transform 450ms cubic-bezier(.22, .61, .36, 1), opacity 250ms ease, visibility 0s linear 450ms; } .ldm-cart.is-open, .ldm-cart.is-visible { transform: translateX(0); visibility: visible; opacity: 1; pointer-events: auto; transition: transform 450ms cubic-bezier(.22, .61, .36, 1), opacity 250ms ease, visibility 0s linear 0s; } /* ============================================================ LDM CART DRAWER — OPEN/CLOSE ANIMATION ============================================================ */ .ldm-cart[hidden] { } .ldm-cart { transform: translateX(100%); visibility: hidden; opacity: 0; pointer-events: none; transition: transform 420ms cubic-bezier(.22, .61, .36, 1), opacity 250ms ease, visibility 0s linear 420ms; } .ldm-cart.is-visible, .ldm-cart.is-open { transform: translateX(0); visibility: visible; opacity: 1; pointer-events: auto; transition: transform 420ms cubic-bezier(.22, .61, .36, 1), opacity 250ms ease, visibility 0s linear 0s; } @media (min-width: 769px) { .ldm-cart { } } .product-modal__quantity { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; } .product-modal__qty-btn { width: 44px; height: 44px; border: none; border-radius: 50%; background: #000; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; cursor: pointer; transition: transform .2s ease, opacity .2s ease; } .product-modal__qty-btn:hover { transform: scale(1.08); } .product-modal__qty-btn:active { transform: scale(.94); } .product-modal__qty-value { min-width: 24px; text-align: center; font-size: 18px; font-weight: 600; } .ldm-cart-trigger::after, .ldm-cart-trigger:hover::after { content: none !important; display: none !important; } .ldm-cart-trigger { transition: background .25s ease, color .25s ease, transform .25s ease; } .ldm-cart-trigger:hover { background: #fff; color: #000; box-shadow: 0 8px 30px rgba(0,0,0,.15); } .ldm-cart-trigger:hover b { background: #000; color: #fff; } /* LDM CART CURSOR CONTRAST FIX */ .ldm-cart, .ldm-cart * { cursor: none !important; } /* Curseur personnalisé : noir dans le panier */ body.cart-is-open .cursor, body.cart-is-open [data-cursor-root], body.cart-is-open .custom-cursor { color: #000 !important; border-color: #000 !important; background-color: transparent; } /* Curseur noir plein pour les zones claires du panier */ body.cart-is-open .cursor::before, body.cart-is-open [data-cursor-root]::before, body.cart-is-open .custom-cursor::before { background: #000 !important; border-color: #000 !important; color: #fff !important; } /* Boutons du panier : curseur noir */ .ldm-cart .cart-cursor-black, .ldm-cart button, .ldm-cart a { cursor: none !important; } /* Si le curseur possède un état "cart-close" */ body.cart-is-open .cursor.is-cart-close, body.cart-is-open [data-cursor-root].is-cart-close, body.cart-is-open .custom-cursor.is-cart-close { color: #000 !important; border-color: #000 !important; } /* ============================================================ LDM PRODUCT MODAL — MOBILE FIX ============================================================ */ @media (max-width: 767px) { .product-modal { position: fixed; inset: 0; z-index: 110; display: flex; align-items: flex-end; justify-content: center; padding: 0; overflow: hidden; } .product-modal__sheet { position: relative; display: flex; flex-direction: column; width: 100%; max-width: none; height: min(92vh, 760px); max-height: 92vh; margin: 0; overflow: hidden; border-radius: 22px 22px 0 0; background: var(--color-ivory); transform: translateY(100%); } .product-modal.is-open .product-modal__sheet { transform: translateY(0); } .product-modal__image-wrap { flex: 0 0 38vh; min-height: 230px; max-height: 360px; width: 100%; overflow: hidden; background: var(--color-black); } .product-modal__image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; } .product-modal__content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 1.5rem 1.25rem 2rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .product-modal__content .eyebrow { margin: 0 0 .5rem; font-size: .62rem; } .product-modal__content h2 { margin: 0 0 .65rem; font-size: clamp(2.5rem, 11vw, 4rem); line-height: .95; } .product-modal__description { max-width: none; margin: 0 0 1.25rem; font-size: .9rem; line-height: 1.55; } .product-modal__content dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; margin: 0 0 1.25rem; padding: 1rem 0; } .product-modal__content dt { margin-bottom: .35rem; font-size: .55rem; } .product-modal__content dd { font-size: .72rem; } .product-modal__close { position: absolute; top: .8rem; right: .8rem; z-index: 10; width: 2.6rem; height: 2.6rem; background: #fff; color: #000; box-shadow: 0 5px 20px rgba(0,0,0,.18); } .product-modal__quantity, [data-modal-cart-controls] { width: 100%; } .product-modal__qty-btn { min-width: 2.8rem; min-height: 2.8rem; } .product-modal__content .button, .product-modal__content button { touch-action: manipulation; } } /* LDM PRELOADER WHITE BACKGROUND */ /* ============================================================ LDM PRELOADER — WHITE BACKGROUND ============================================================ */ html.is-loading, body.is-loading { background: #fff !important; } html.is-loading::before, body.is-loading::before { background: #fff !important; } .light-transition, .light-transition.is-active { background: #fff !important; color: #000 !important; } /* LDM CART — HIDE DURING PRELOADER */ /* ============================================================ LDM CART — HIDE DURING PRELOADER ============================================================ */ html.is-loading .ldm-cart-trigger, body.is-loading .ldm-cart-trigger, html.is-preloading .ldm-cart-trigger, body.is-preloading .ldm-cart-trigger { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(20px) !important; } body.is-loaded .ldm-cart-trigger { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .45s ease, transform .45s ease, visibility 0s linear 0s; } /* LDM PRELOADER — FORCE WHITE FINAL */ /* ============================================================ LDM PRELOADER — FORCE WHITE FINAL ============================================================ */ /* Fond global pendant le chargement */ html.is-loading, html.is-preloading, html.is-loading body, html.is-preloading body, body.is-loading, body.is-preloading { background: #ffffff !important; color: #000000 !important; } /* Tous les overlays / écrans de préchargement */ html.is-loading #preloader, html.is-loading .preloader, html.is-loading .loader, html.is-loading .loading-screen, html.is-loading .site-loader, html.is-loading .page-loader, html.is-loading .light-transition, html.is-preloading #preloader, html.is-preloading .preloader, html.is-preloading .loader, html.is-preloading .loading-screen, html.is-preloading .site-loader, html.is-preloading .page-loader, html.is-preloading .light-transition, body.is-loading #preloader, body.is-loading .preloader, body.is-loading .loader, body.is-loading .loading-screen, body.is-loading .site-loader, body.is-loading .page-loader, body.is-loading .light-transition, body.is-preloading #preloader, body.is-preloading .preloader, body.is-preloading .loader, body.is-preloading .loading-screen, body.is-preloading .site-loader, body.is-preloading .page-loader, body.is-preloading .light-transition { background: #ffffff !important; color: #000000 !important; } /* Transition verte/noire existante */ .light-transition { background: #ffffff !important; color: #000000 !important; } /* Éléments internes de l'écran de chargement */ .light-transition p, .light-transition b { color: #000000 !important; } .light-transition span { background: rgba(0, 0, 0, .18) !important; } .light-transition span i { background: #000000 !important; } /* Évite qu'un pseudo-élément conserve le fond sombre */ html.is-loading::before, html.is-loading::after, html.is-preloading::before, html.is-preloading::after, body.is-loading::before, body.is-loading::after, body.is-preloading::before, body.is-preloading::after { background: #ffffff !important; } /* ============================================================ LDM — PRELOADER WHITE FINAL OVERRIDE ============================================================ */ /* Fond réel du preloader */ .preloader, html.is-loading .preloader, html.is-preloading .preloader, body.is-loading .preloader, body.is-preloading .preloader { background: #ffffff !important; color: #12140f !important; } /* Ligne décorative */ .preloader::before { background: rgba(18, 20, 15, 0.12) !important; } /* Texte */ .preloader__wordmark { color: #12140f !important; } .preloader__wordmark em { color: #6f9700 !important; } /* Compteur */ .preloader__meta { color: rgba(18, 20, 15, 0.60) !important; } .preloader__meta b { color: #6f9700 !important; } /* Barre de chargement */ .preloader__meter { background: rgba(18, 20, 15, 0.16) !important; } .preloader__meter span { background: #6f9700 !important; box-shadow: none !important; } /* Orb */ .preloader__orb { border-color: rgba(111, 151, 0, 0.55) !important; } .preloader__orb span { background: #6f9700 !important; box-shadow: none !important; } /* Empêche une ancienne règle de remettre le fond sombre */ .preloader, .preloader * { --preloader-bg: #ffffff; } /* Le panier flottant reste invisible pendant tout le chargement */ html.is-loading .ldm-cart-trigger, html.is-preloading .ldm-cart-trigger, body.is-loading .ldm-cart-trigger, body.is-preloading .ldm-cart-trigger { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Dès que le chargement est terminé, il redevient visible */ html:not(.is-loading):not(.is-preloading) .ldm-cart-trigger, body:not(.is-loading):not(.is-preloading) .ldm-cart-trigger { opacity: 1; visibility: visible; pointer-events: auto; } /* ============================================================ LDM — SECTION LUMINAIRES : FOND BLANC ============================================================ */ #luminaires, section#luminaires, [data-section="luminaires"] { background: #ffffff !important; color: #12140f; } #luminaires::before, #luminaires::after, section#luminaires::before, section#luminaires::after { background-color: transparent !important; } #luminaires .section-label, #luminaires .eyebrow, #luminaires h2, #luminaires h3, #luminaires p { color: #12140f; } #luminaires .eyebrow { color: #6f9700; } /* ============================================================ LDM — MINI TRANSITION CTA UNIVERS 1.5 secondes — légère — fond blanc ============================================================ */ .univers-transition { position: fixed; z-index: 99999; inset: 0; display: grid; place-items: center; background: #ffffff !important; color: #12140f; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s ease; } .univers-transition.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .univers-transition__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .univers-transition__text { color: #12140f; font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 2.2rem); letter-spacing: -.04em; } .univers-transition__line { display: block; width: 0; height: 1px; background: #6f9700; } .univers-transition.is-active .univers-transition__line { animation: univers-transition-line 1.5s ease-in-out forwards; } @keyframes univers-transition-line { 0% { width: 0; opacity: .4; } 20% { opacity: 1; } 80% { width: min(12rem, 40vw); opacity: 1; } 100% { width: min(16rem, 50vw); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .univers-transition.is-active .univers-transition__line { animation: none; width: min(12rem, 40vw); opacity: 1; } } /* ============================================================ LDM CART PAYMENT CHOICE CSS ============================================================ */ .ldm-cart__payment { display: none; min-height: 100%; padding: clamp(1.5rem, 4vw, 3rem); background: var(--color-ivory); color: var(--color-ink); } .ldm-cart.is-payment .ldm-cart__inner > *:not(.ldm-cart__payment) { display: none; } .ldm-cart.is-payment .ldm-cart__payment { display: block; } .ldm-cart__back { margin: 0 0 2rem; padding: .5rem 0; border: 0; background: transparent; color: var(--color-ink); font-size: .7rem; font-weight: 600; letter-spacing: .08em; cursor: pointer; } .ldm-cart__payment-header { margin-bottom: 2rem; } .ldm-cart__payment-header .eyebrow { margin: 0 0 .7rem; color: #6f9700; } .ldm-cart__payment-header h2 { margin: 0 0 .8rem; font-family: var(--font-display); font-size: clamp(2.3rem, 5vw, 4rem); line-height: .95; letter-spacing: -.05em; } .ldm-cart__payment-header p:not(.eyebrow) { max-width: 32rem; margin: 0; color: rgba(18, 20, 15, .62); font-size: .85rem; line-height: 1.6; } .ldm-cart__payment-options { display: grid; gap: .75rem; } .ldm-cart__payment-option { display: grid; grid-template-columns: 3.4rem 1fr auto; align-items: center; gap: 1rem; width: 100%; padding: 1rem; border: 1px solid rgba(18, 20, 15, .13); background: #fff; color: var(--color-ink); text-align: left; cursor: pointer; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .ldm-cart__payment-option:hover, .ldm-cart__payment-option.is-selected { border-color: #6f9700; box-shadow: 0 10px 30px rgba(18, 20, 15, .08); transform: translateY(-2px); } .ldm-cart__payment-icon { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; } .ldm-cart__payment-icon svg { display: block; width: 100%; height: 100%; } .ldm-cart__payment-copy { display: flex; flex-direction: column; gap: .25rem; } .ldm-cart__payment-copy strong { font-size: .9rem; } .ldm-cart__payment-copy small { color: rgba(18, 20, 15, .55); font-size: .68rem; } .ldm-cart__payment-arrow { font-size: 1.2rem; transition: transform .25s ease; } .ldm-cart__payment-option:hover .ldm-cart__payment-arrow { transform: translateX(4px); } .ldm-cart__payment-note { margin: 1.5rem 0 0; color: rgba(18, 20, 15, .48); font-size: .65rem; line-height: 1.5; } @media (max-width: 600px) { .ldm-cart__payment { padding: 1.25rem; } .ldm-cart__payment-header h2 { font-size: 2.5rem; } .ldm-cart__payment-option { grid-template-columns: 3rem 1fr auto; gap: .75rem; padding: .8rem; } .ldm-cart__payment-icon { width: 3rem; height: 3rem; } } /* ============================================================ LDM — PANIER / ÉCRAN DE PAIEMENT ============================================================ */ .ldm-cart.is-payment { background: var(--color-ivory, #f7f6f0); color: var(--color-black, #12140f); } .ldm-cart.is-payment .ldm-cart__inner { display: none; } .ldm-cart__payment { position: relative; display: none; width: 100%; min-height: 100%; padding: clamp(2rem, 5vw, 4rem); box-sizing: border-box; background: var(--color-ivory, #f7f6f0); color: var(--color-black, #12140f); } .ldm-cart__payment.is-active { display: block; } .ldm-cart__back { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 2.5rem; padding: .65rem .9rem; border: 1px solid rgba(18,20,15,.18); border-radius: 999px; background: transparent; color: #12140f; font: inherit; font-size: .72rem; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; } .ldm-cart__back:hover { background: #12140f; border-color: #12140f; color: #fff; } .ldm-cart__payment-header { margin-bottom: 2rem; } .ldm-cart__payment-header .eyebrow { margin: 0 0 .7rem; color: #6f9700; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .ldm-cart__payment-header h2 { margin: 0 0 .8rem; color: #12140f; font-size: clamp(2rem, 5vw, 3.4rem); line-height: .95; } .ldm-cart__payment-header p { margin: 0; max-width: 30rem; color: rgba(18,20,15,.62); font-size: .85rem; line-height: 1.6; } .ldm-cart__payment-options { display: grid; gap: .8rem; } .ldm-cart__payment-option { display: grid; grid-template-columns: 3.4rem 1fr auto; align-items: center; gap: 1rem; width: 100%; padding: 1rem; border: 1px solid rgba(18,20,15,.14); border-radius: 1rem; background: #fff; color: #12140f; text-align: left; cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .ldm-cart__payment-option:hover { border-color: rgba(18,20,15,.38); box-shadow: 0 10px 30px rgba(18,20,15,.08); transform: translateY(-2px); } .ldm-cart__payment-icon { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; flex: 0 0 auto; } .ldm-cart__payment-icon svg { display: block; width: 100%; height: 100%; } .ldm-cart__payment-copy { display: flex; min-width: 0; flex-direction: column; gap: .25rem; } .ldm-cart__payment-copy strong { color: #12140f; font-size: .95rem; font-weight: 700; } .ldm-cart__payment-copy small { color: rgba(18,20,15,.55); font-size: .68rem; } .ldm-cart__payment-arrow { color: #12140f; font-size: 1.2rem; transition: transform .25s ease; } .ldm-cart__payment-option:hover .ldm-cart__payment-arrow { transform: translateX(4px); } .ldm-cart__payment-note { margin: 1.5rem 0 0; color: rgba(18,20,15,.48); font-size: .65rem; line-height: 1.5; } /* Curseur noir dans le panneau paiement */ .ldm-cart .cart-cursor-black, .ldm-cart .ldm-cart__payment-option, .ldm-cart .ldm-cart__back { cursor: pointer; } /* Mobile */ @media (max-width: 640px) { .ldm-cart__payment { padding: 1.5rem; } .ldm-cart__back { margin-bottom: 1.8rem; } .ldm-cart__payment-header h2 { font-size: 2.25rem; } .ldm-cart__payment-option { grid-template-columns: 3rem 1fr auto; gap: .75rem; padding: .8rem; } .ldm-cart__payment-icon { width: 3rem; height: 3rem; } } /* ============================================================ LDM — SCROLL INDÉPENDANT DU PANNEAU DE PAIEMENT ============================================================ */ .ldm-cart { height: 100dvh; max-height: 100dvh; overflow: hidden; } .ldm-cart__inner, .ldm-cart__payment { height: 100%; max-height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .ldm-cart__payment { overscroll-behavior-y: contain; touch-action: pan-y; } /* Empêche le scroll de la page derrière le panneau */ body.cart-is-open { overflow: hidden; overscroll-behavior: none; } html:has(body.cart-is-open) { overflow: hidden; } /* Le contenu du paiement reste toujours scrollable */ .ldm-cart.is-payment .ldm-cart__payment { display: block; overflow-y: auto; } /* Masquer proprement le panier quand on est dans le paiement */ .ldm-cart.is-payment .ldm-cart__inner { display: none; } @media (max-width: 640px) { .ldm-cart { height: 100dvh; max-height: 100dvh; } .ldm-cart__payment { min-height: 100dvh; max-height: 100dvh; padding-bottom: 3rem; } } /* LDM REAL PAYMENT ICONS */ .ldm-cart__payment-icon { display: grid; width: 3.25rem; height: 3.25rem; min-width: 3.25rem; place-items: center; overflow: hidden; border-radius: .85rem; background: #fff; } .ldm-cart__payment-logo { display: block; width: 100%; height: 100%; object-fit: contain; } .ldm-cart__payment-icon--orange { background: #ff7900; } .ldm-cart__payment-icon--wave { background: #1dc5f0; } .ldm-cart__payment-option { color: var(--color-ink, #12140f); } .ldm-cart__payment-option:hover .ldm-cart__payment-icon { transform: scale(1.04); } .ldm-cart__payment-icon { transition: transform .25s ease; } @media (max-width: 600px) { .ldm-cart__payment-icon { width: 2.8rem; height: 2.8rem; min-width: 2.8rem; } } /* ============================================================ LDM — REAL PAYMENT BRAND ICONS ============================================================ */ .ldm-cart__payment-icon { display: grid; width: 3.25rem; height: 3.25rem; flex: 0 0 3.25rem; place-items: center; overflow: hidden; border-radius: .85rem; background: #fff; } .ldm-cart__payment-logo { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } .ldm-cart__payment-icon--orange { background: #ff7900; } .ldm-cart__payment-icon--wave { background: #1dc5f0; } .ldm-cart__payment-option:hover .ldm-cart__payment-icon { transform: scale(1.04); } .ldm-cart__payment-icon { transition: transform .25s ease; } @media (max-width: 600px) { .ldm-cart__payment-icon { width: 2.9rem; height: 2.9rem; flex-basis: 2.9rem; border-radius: .75rem; } } /* ============================================================ LDM — PAYMENT BRAND ICONS ============================================================ */ .ldm-cart__payment-icon { display: grid; width: 3.25rem; height: 3.25rem; flex: 0 0 3.25rem; place-items: center; overflow: hidden; border-radius: .85rem; background: #fff; } .ldm-cart__payment-logo { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } .ldm-cart__payment-icon--orange { background: #ff7900; } .ldm-cart__payment-icon--wave { background: #1dc5f0; } .ldm-cart__payment-option { color: var(--color-ink, #12140f); } .ldm-cart__payment-option:hover .ldm-cart__payment-icon { transform: scale(1.04); } .ldm-cart__payment-icon { transition: transform .25s ease; } @media (max-width: 600px) { .ldm-cart__payment-icon { width: 2.9rem; height: 2.9rem; flex-basis: 2.9rem; border-radius: .75rem; } } /* LDM — WhatsApp à gauche sur ordinateur */ @media (min-width: 769px) { .whatsapp-float, .whatsapp-button, .floating-whatsapp, [data-whatsapp], [class*="whatsapp"] { left: 2rem !important; right: auto !important; transform: none !important; } } /* LDM — Barre de progression centrée sur mobile */ @media (max-width: 768px) { .progress-bar, .site-progress, .page-progress, [data-progress], [data-scroll-progress] { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; z-index: 90 !important; } } /* LDM — TEXTE HERO / LUMIERE EN NOIR */ .hero p, .hero__subtitle, .hero__description, .hero__intro, [data-hero-description] { color: #12140F !important; } /* ============================================================ LDM — HERO : "La lumière raconte..." EN NOIR Désactivation forcée des filtres / effets blancs ============================================================ */ .hero, .hero *, .hero__content, .hero__content *, .hero__description, .hero__description *, .hero__subtitle, .hero__subtitle *, [data-hero-description], [data-hero-description] * { filter: none !important; } .hero__description, .hero__subtitle, [data-hero-description] { color: #000000 !important; -webkit-text-fill-color: #000000 !important; text-shadow: none !important; opacity: 1 !important; mix-blend-mode: normal !important; } .hero__description::before, .hero__description::after, .hero__subtitle::before, .hero__subtitle::after, [data-hero-description]::before, [data-hero-description]::after { color: #000000 !important; background: transparent !important; filter: none !important; } /* ============================================================ LDM — LA MAISON : TEXTE INTRO EN NOIR ============================================================ */ #maison, #maison *, [data-section="maison"], [data-section="maison"] * { filter: none !important; } #maison p, #maison .eyebrow, #maison .section-intro, #maison .section-intro p, #maison [class*="description"], #maison [class*="intro"], #maison [class*="text"], [data-section="maison"] p, [data-section="maison"] [class*="intro"], [data-section="maison"] [class*="description"] { color: #000000 !important; -webkit-text-fill-color: #000000 !important; text-shadow: none !important; opacity: 1 !important; mix-blend-mode: normal !important; } /* ============================================================ LDM — HERO : TEXTES BLANCS ============================================================ */ .hero, .hero__content, .hero__content * { color: #ffffff !important; } .hero__content * { -webkit-text-fill-color: #ffffff !important; text-shadow: none; } /* ============================================================ LDM — CTA HERO : BLANC / TEXTE NOIR ============================================================ */ .hero a.button, .hero button.button, .hero .button, .hero__content a.button, .hero__content .button { background: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border-color: #ffffff !important; } .hero a.button:hover, .hero button.button:hover, .hero .button:hover, .hero__content a.button:hover, .hero__content .button:hover { background: #f2f2f2 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border-color: #f2f2f2 !important; } /* LDM — CTA HERO : TEXTE NOIR FORCE */ .hero .button, .hero .button *, .hero a.button, .hero a.button *, .hero__content .button, .hero__content .button * { background-color: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; text-shadow: none !important; } /* LDM — CTA HERO : HOVER VERT */ .hero .button:hover, .hero .button:hover *, .hero a.button:hover, .hero a.button:hover *, .hero__content .button:hover, .hero__content .button:hover * { background-color: var(--color-green) !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border-color: var(--color-green) !important; text-shadow: none !important; } /* ============================================================ LDM — CART PREMIUM DESIGN Panier + paiement : même langage visuel ============================================================ */ :root { --ldm-cart-black: #12140f; --ldm-cart-white: #f8f8f3; --ldm-cart-line: rgba(18, 20, 15, .14); --ldm-cart-green: #eaff41; } /* ------------------------------------------------------------ DRAWER ------------------------------------------------------------ */ .ldm-cart { overflow: hidden; overscroll-behavior: contain; } .ldm-cart__inner, .ldm-cart__payment { background: radial-gradient( circle at 85% 8%, rgba(234,255,65,.10), transparent 28% ), var(--ldm-cart-white); } .ldm-cart__inner { position: relative; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(18,20,15,.35) transparent; transform: translateX(0); opacity: 1; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .35s ease; } .ldm-cart__inner::-webkit-scrollbar { width: 5px; } .ldm-cart__inner::-webkit-scrollbar-track { background: transparent; } .ldm-cart__inner::-webkit-scrollbar-thumb { background: rgba(18,20,15,.28); border-radius: 99px; } /* ------------------------------------------------------------ PANIER → PAIEMENT ------------------------------------------------------------ */ .ldm-cart__payment { position: absolute; inset: 0; z-index: 5; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(38px); transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .35s ease, visibility 0s linear .55s; } .ldm-cart.is-payment .ldm-cart__inner { transform: translateX(-38px); opacity: 0; pointer-events: none; } .ldm-cart.is-payment .ldm-cart__payment { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .4s ease, visibility 0s linear 0s; } /* ------------------------------------------------------------ TITRE DU PANIER ------------------------------------------------------------ */ .ldm-cart__inner > h2 { position: relative; letter-spacing: -.035em; } .ldm-cart__inner > h2::after { content: ""; display: block; width: 42px; height: 3px; margin-top: 14px; background: var(--ldm-cart-green); transform-origin: left center; animation: ldmCartLine .7s cubic-bezier(.22,1,.36,1) both; } @keyframes ldmCartLine { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } /* ------------------------------------------------------------ LIGNES DU PANIER ------------------------------------------------------------ */ .ldm-cart__items > * { animation: ldmCartItemIn .6s cubic-bezier(.22,1,.36,1) both; } .ldm-cart__items > *:nth-child(1) { animation-delay: .04s; } .ldm-cart__items > *:nth-child(2) { animation-delay: .09s; } .ldm-cart__items > *:nth-child(3) { animation-delay: .14s; } .ldm-cart__items > *:nth-child(4) { animation-delay: .19s; } .ldm-cart__items > *:nth-child(5) { animation-delay: .24s; } @keyframes ldmCartItemIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------------------ FOOTER PANIER ------------------------------------------------------------ */ .ldm-cart__footer { position: relative; animation: ldmCartFooterIn .65s .15s cubic-bezier(.22,1,.36,1) both; } @keyframes ldmCartFooterIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .ldm-cart__footer [data-cart-checkout] { position: relative; overflow: hidden; isolation: isolate; transition: color .3s ease, background-color .3s ease, transform .3s ease; } .ldm-cart__footer [data-cart-checkout]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ldm-cart-green); transform: translateY(101%); transition: transform .4s cubic-bezier(.22,1,.36,1); } .ldm-cart__footer [data-cart-checkout]:hover::before { transform: translateY(0); } .ldm-cart__footer [data-cart-checkout]:hover { color: var(--ldm-cart-black); transform: translateY(-2px); } /* ------------------------------------------------------------ PAYMENT HEADER ------------------------------------------------------------ */ .ldm-cart__payment-header { animation: ldmPaymentHeaderIn .7s cubic-bezier(.22,1,.36,1) both; } @keyframes ldmPaymentHeaderIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } } /* ------------------------------------------------------------ OPTIONS DE PAIEMENT ------------------------------------------------------------ */ .ldm-cart__payment-option { position: relative; overflow: hidden; isolation: isolate; transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, background-color .35s ease, box-shadow .35s ease; } .ldm-cart__payment-option::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ldm-cart-green); transform: translateX(-102%); transition: transform .45s cubic-bezier(.22,1,.36,1); } .ldm-cart__payment-option:hover { transform: translateX(-5px); border-color: var(--ldm-cart-black); box-shadow: 0 14px 35px rgba(18,20,15,.10); } .ldm-cart__payment-option:hover::before { transform: translateX(0); } .ldm-cart__payment-option:nth-child(1) { animation: ldmPaymentOptionIn .65s .10s cubic-bezier(.22,1,.36,1) both; } .ldm-cart__payment-option:nth-child(2) { animation: ldmPaymentOptionIn .65s .17s cubic-bezier(.22,1,.36,1) both; } .ldm-cart__payment-option:nth-child(3) { animation: ldmPaymentOptionIn .65s .24s cubic-bezier(.22,1,.36,1) both; } @keyframes ldmPaymentOptionIn { from { opacity: 0; transform: translateX(35px); } to { opacity: 1; transform: translateX(0); } } .ldm-cart__payment-option:hover .ldm-cart__payment-arrow { transform: translateX(5px); } .ldm-cart__payment-arrow { transition: transform .35s cubic-bezier(.22,1,.36,1); } /* ------------------------------------------------------------ RETOUR ------------------------------------------------------------ */ .ldm-cart__back { transition: transform .3s ease, opacity .3s ease; } .ldm-cart__back:hover { transform: translateX(-5px); } /* ------------------------------------------------------------ OVERLAY / OUVERTURE ------------------------------------------------------------ */ [data-cart-drawer] { will-change: transform, opacity; } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media (max-width: 767px) { .ldm-cart__inner, .ldm-cart__payment { overflow-y: auto; max-height: 100%; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .ldm-cart__payment { transform: translateX(25px); } .ldm-cart.is-payment .ldm-cart__inner { transform: translateX(-25px); } .ldm-cart__payment-option:hover { transform: none; } .ldm-cart__payment-option:active { transform: scale(.985); } } /* ------------------------------------------------------------ ACCESSIBILITE ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .ldm-cart *, .ldm-cart__inner, .ldm-cart__payment { animation: none !important; transition: none !important; } } /* LDM-MAISON-WHITE — texte de présentation en blanc */ .ldm-maison-white, .ldm-maison-white *, .ldm-maison-white p, .ldm-maison-white strong, .ldm-maison-white span, .ldm-maison-white a { color: #ffffff !important; } /* LA MAISON — TEXTE BLANC */ .ldm-maison-white,.ldm-maison-white *{color:#fff!important} /* LDM — texte présentation maison en blanc */ .ldm-maison-text-white, .ldm-maison-text-white * { color:#fff !important; } /* LDM — MANIFESTO MAISON : TEXTE BLANC */ .maison__manifesto .maison__manifesto-lead, .maison__manifesto .maison__manifesto-support { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; opacity: 1 !important; } .maison__manifesto > span { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* UNIQUEMENT les deux textes du manifesto Maison */ .maison-text-only-white { color:#fff !important; -webkit-text-fill-color:#fff !important; } /* LDM — Titre « Un intérieur... » : noir, sans filtre */ .ldm-interieur-white { color: #000000 !important; -webkit-text-fill-color: #000000 !important; filter: none !important; opacity: 1 !important; text-shadow: none !important; mix-blend-mode: normal !important; } /* LDM — FORCE NOIR DU TITRE INTERIEUR */ .ldm-interieur-white, .ldm-interieur-white *, .ldm-interieur-white::before, .ldm-interieur-white::after { color: #000000 !important; -webkit-text-fill-color: #000000 !important; -webkit-text-stroke: 0 !important; filter: none !important; opacity: 1 !important; text-shadow: none !important; mix-blend-mode: normal !important; } /* LDM — TITRE LA MAISON : NOIR PUR */ .maison__opening h2[data-split], .maison__opening h2[data-split] *, .maison__opening h2[data-split] em { color: #000000 !important; -webkit-text-fill-color: #000000 !important; -webkit-text-stroke: 0 !important; filter: none !important; opacity: 1 !important; text-shadow: none !important; mix-blend-mode: normal !important; } /* ========================================================= LDM — CARTES LA MAISON 3 noires / 3 blanches — style éditorial ========================================================= */ /* Carte noire */ .maison-card--quality, .maison-card--germany, .maison-card--origin { background: #000 !important; color: #fff !important; border-color: rgba(255,255,255,.22) !important; } /* Carte blanche */ .maison-card--detail, .maison-card--light, .maison-card--installation { background: #fff !important; color: #000 !important; border-color: rgba(0,0,0,.16) !important; } /* Texte des cartes noires */ .maison-card--quality *, .maison-card--germany *, .maison-card--origin * { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* Texte des cartes blanches */ .maison-card--detail *, .maison-card--light *, .maison-card--installation * { color: #000 !important; -webkit-text-fill-color: #000 !important; } /* Numéros */ .maison-card--quality .maison-card__index, .maison-card--germany .maison-card__index, .maison-card--origin .maison-card__index { color: #fff !important; } .maison-card--detail .maison-card__index, .maison-card--light .maison-card__index, .maison-card--installation .maison-card__index { color: #000 !important; } /* Petit effet premium */ .maison-card { transition: background-color .45s ease, color .45s ease, transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; } .maison-card:hover { transform: translateY(-5px); } .maison-card--quality:hover, .maison-card--germany:hover, .maison-card--origin:hover { box-shadow: 0 18px 45px rgba(0,0,0,.22); } .maison-card--detail:hover, .maison-card--light:hover, .maison-card--installation:hover { box-shadow: 0 18px 45px rgba(0,0,0,.12); } /* ========================================================= LDM — CONTRASTE DES 6 CARTES « LA MAISON » ========================================================= */ /* CARTES NOIRES */ .maison__cards .maison-card--quality, .maison__cards .maison-card--universes, .maison__cards .maison-card--manifesto { background-color: #000 !important; color: #fff !important; } .maison__cards .maison-card--quality *, .maison__cards .maison-card--universes *, .maison__cards .maison-card--manifesto * { color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: 1 !important; filter: none !important; } /* CARTES BLANCHES */ .maison__cards .maison-card--germany, .maison__cards .maison-card--detail, .maison__cards .maison-card--installation { background-color: #fff !important; color: #000 !important; } .maison__cards .maison-card--germany *, .maison__cards .maison-card--detail *, .maison__cards .maison-card--installation * { color: #000 !important; -webkit-text-fill-color: #000 !important; opacity: 1 !important; filter: none !important; } /* Suppression des effets pouvant rendre le texte gris/invisible */ .maison__cards .maison-card h3, .maison__cards .maison-card p, .maison__cards .maison-card__index, .maison__cards .maison-card__origin { text-shadow: none !important; mix-blend-mode: normal !important; } /* Numéros et petits labels */ .maison__cards .maison-card--quality .maison-card__index, .maison__cards .maison-card--universes .maison-card__index, .maison__cards .maison-card--manifesto .maison-card__index, .maison__cards .maison-card--quality .maison-card__origin, .maison__cards .maison-card--universes .maison-card__origin, .maison__cards .maison-card--manifesto .maison-card__origin { color: #fff !important; -webkit-text-fill-color: #fff !important; } .maison__cards .maison-card--germany .maison-card__index, .maison__cards .maison-card--detail .maison-card__index, .maison__cards .maison-card--installation .maison-card__index, .maison__cards .maison-card--germany .maison-card__origin, .maison__cards .maison-card--detail .maison-card__origin, .maison__cards .maison-card--installation .maison-card__origin { color: #000 !important; -webkit-text-fill-color: #000 !important; } /* ========================================================= LDM — CARTES LA MAISON ORDRE : NOIR / BLANC / NOIR / BLANC / NOIR / BLANC ========================================================= */ /* 01 — NOIR */ .maison__cards .maison-card--quality { background: #000 !important; color: #fff !important; } /* 02 — BLANC */ .maison__cards .maison-card--germany { background: #fff !important; color: #000 !important; } /* 03 — NOIR */ .maison__cards .maison-card--detail { background: #000 !important; color: #fff !important; } /* 04 — BLANC */ .maison__cards .maison-card--universes { background: #fff !important; color: #000 !important; } /* 05 — NOIR */ .maison__cards .maison-card--manifesto { background: #000 !important; color: #fff !important; } /* 06 — BLANC */ .maison__cards .maison-card--installation { background: #fff !important; color: #000 !important; } /* Texte des cartes noires */ .maison__cards .maison-card--quality *, .maison__cards .maison-card--detail *, .maison__cards .maison-card--manifesto * { color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: 1 !important; filter: none !important; } /* Texte des cartes blanches */ .maison__cards .maison-card--germany *, .maison__cards .maison-card--universes *, .maison__cards .maison-card--installation * { color: #000 !important; -webkit-text-fill-color: #000 !important; opacity: 1 !important; filter: none !important; } /* CARTE 01 — TOUT LE TEXTE EN BLANC */ .maison__cards .maison-card--quality, .maison__cards .maison-card--quality *, .maison__cards .maison-card--quality h3, .maison__cards .maison-card--quality p, .maison__cards .maison-card--quality .maison-card__index { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; filter: none !important; text-shadow: none !important; } /* LDM — OVERRIDE FINAL CARTE 01 */ .maison__cards .maison-card.maison-card--quality { background: #000000 !important; color: #ffffff !important; } .maison__cards .maison-card.maison-card--quality *, .maison__cards .maison-card.maison-card--quality h3, .maison__cards .maison-card.maison-card--quality p, .maison__cards .maison-card.maison-card--quality span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; filter: none !important; text-shadow: none !important; mix-blend-mode: normal !important; } /* LDM — CARTES 01 / 03 / 05 : TOUT EN BLANC */ .maison__cards .maison-card--quality, .maison__cards .maison-card--detail, .maison__cards .maison-card--manifesto, .maison__cards .maison-card--quality *, .maison__cards .maison-card--detail *, .maison__cards .maison-card--manifesto * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; -webkit-text-stroke-color: #ffffff !important; opacity: 1 !important; filter: none !important; text-shadow: none !important; mix-blend-mode: normal !important; } /* Fond noir */ .maison__cards .maison-card--quality, .maison__cards .maison-card--detail, .maison__cards .maison-card--manifesto { background: #000000 !important; } /* LDM — PARAGRAPHES CARTES 01 / 03 / 05 */ .maison__cards .maison-card--quality p, .maison__cards .maison-card--detail p, .maison__cards .maison-card--manifesto p, .maison__cards .maison-card--quality p *, .maison__cards .maison-card--detail p *, .maison__cards .maison-card--manifesto p * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; filter: none !important; text-shadow: none !important; mix-blend-mode: normal !important; } /* ========================================================= LDM — FIX FINAL TEXTE CARTES 01 / 03 / 05 ========================================================= */ .maison__cards .maison-card--quality p, .maison__cards .maison-card--detail p, .maison__cards .maison-card--manifesto p, .maison__cards .maison-card--quality p span, .maison__cards .maison-card--detail p span, .maison__cards .maison-card--manifesto p span, .maison__cards .maison-card--quality p span *, .maison__cards .maison-card--detail p span *, .maison__cards .maison-card--manifesto p span * { color: #fff !important; -webkit-text-fill-color: #fff !important; -webkit-text-stroke: 0 !important; opacity: 1 !important; filter: none !important; text-shadow: none !important; mix-blend-mode: normal !important; background: transparent !important; } /* Même traitement pour les éléments d'animation */ .maison__cards .maison-card--quality [data-split], .maison__cards .maison-card--detail [data-split], .maison__cards .maison-card--manifesto [data-split], .maison__cards .maison-card--quality [data-split] *, .maison__cards .maison-card--detail [data-split] *, .maison__cards .maison-card--manifesto [data-split] * { color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: 1 !important; filter: none !important; } /* ========================================================= LDM — FIX DÉFINITIF CARTES 01 / 03 / 05 ========================================================= */ .maison__cards > article.maison-card--quality, .maison__cards > article.maison-card--detail, .maison__cards > article.maison-card--manifesto, .maison__cards > article.maison-card--quality *, .maison__cards > article.maison-card--detail *, .maison__cards > article.maison-card--manifesto * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } .maison__cards > article.maison-card--quality p, .maison__cards > article.maison-card--detail p, .maison__cards > article.maison-card--manifesto p { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } /* ========================================================= LDM — NUMÉROS CARTES 03 / 04 03 = BLANC 04 = NOIR ========================================================= */ .maison__cards .maison-card:nth-child(3) .maison-card__index { color: #fff !important; -webkit-text-fill-color: #fff !important; } .maison__cards .maison-card:nth-child(4) .maison-card__index { color: #000 !important; -webkit-text-fill-color: #000 !important; } /* ========================================================= LDM — TEXTE SOUS L'IMAGE : NOIR ========================================================= */ .maison__figure--second figcaption, .maison__figure--second figcaption *, .maison__figure--second p, .maison__figure--second p * { color: #000 !important; -webkit-text-fill-color: #000 !important; } /* FORCE — texte sous l'image Maison en noir */ figure.ldm-maison-white.maison__figure--first figcaption { color: #000 !important; -webkit-text-fill-color: #000 !important; opacity: 1 !important; } /* DESKTOP — recentrer légèrement l'image et le texte Maison */ @media (min-width: 1024px) { .maison__figure--first, .maison__figure--first + * { transform: translateX(4vw); } } /* DESKTOP — recentrage maison : titre + image */ @media (min-width: 1024px) { #maison .maison__opening { transform: translateX(5vw); } #maison .maison__editorial { transform: translateX(5vw); } } /* DESKTOP — image Maison centrée et entièrement visible */ @media (min-width: 1024px) { #maison .maison__editorial { width: 100%; display: flex; justify-content: center; align-items: flex-start; transform: none !important; } #maison .maison__figure--first { margin-left: auto !important; margin-right: auto !important; width: min(72vw, 1100px); max-width: 1100px; } #maison .maison__figure--first img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; } } /* DESKTOP — Maison : image réduite + guirlandes lumineuses */ @media (min-width: 1024px) { #maison .maison__editorial { width: 100%; display: flex; justify-content: center; align-items: flex-start; transform: none !important; position: relative; padding: 2vw 8vw 4vw; overflow: visible; } #maison .maison__figure--first { position: relative; z-index: 2; width: min(58vw, 850px); max-width: 850px; margin: 0 auto !important; } #maison .maison__figure--first img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; } /* Guirlande lumineuse supérieure */ #maison .maison__figure--first::before { content: ""; position: absolute; z-index: -1; top: -7%; left: -13%; width: 126%; height: 18%; pointer-events: none; background: radial-gradient(circle at 4% 72%, #f4df9a 0 3px, transparent 4px), radial-gradient(circle at 13% 38%, #fff4c4 0 3px, transparent 4px), radial-gradient(circle at 23% 67%, #e8c96d 0 3px, transparent 4px), radial-gradient(circle at 34% 31%, #fff6cf 0 3px, transparent 4px), radial-gradient(circle at 46% 65%, #e8c96d 0 3px, transparent 4px), radial-gradient(circle at 58% 35%, #fff4c4 0 3px, transparent 4px), radial-gradient(circle at 70% 68%, #e8c96d 0 3px, transparent 4px), radial-gradient(circle at 82% 38%, #fff6cf 0 3px, transparent 4px), radial-gradient(circle at 94% 67%, #e8c96d 0 3px, transparent 4px); filter: drop-shadow(0 0 5px rgba(244, 223, 154, .7)); border-top: 1px solid rgba(65, 72, 45, .5); border-radius: 50%; transform: rotate(-2deg); } /* Branches / épines latérales */ #maison .maison__figure--first::after { content: ""; position: absolute; z-index: -1; inset: 3% -16% 8%; pointer-events: none; background: radial-gradient(circle at 3% 18%, #f4df9a 0 3px, transparent 4px), radial-gradient(circle at 97% 26%, #fff4c4 0 3px, transparent 4px), radial-gradient(circle at 5% 72%, #e8c96d 0 3px, transparent 4px), radial-gradient(circle at 95% 78%, #f4df9a 0 3px, transparent 4px); border-left: 1px solid rgba(65, 72, 45, .35); border-right: 1px solid rgba(65, 72, 45, .35); border-radius: 45%; transform: rotate(1deg); filter: drop-shadow(0 0 5px rgba(244, 223, 154, .45)); } } /* DESKTOP — Maison : composition ruche + guirlandes lumineuses */ @media (min-width: 1024px) { #maison .maison__cards { position: relative; width: min(92vw, 1180px); margin: 5vw auto 0 !important; padding: 5vw 3vw 7vw !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(2, 330px) !important; gap: 0 2.2vw !important; align-items: center; justify-items: center; overflow: visible; } /* Chaque carte devient une cellule de ruche */ #maison .maison-card { position: relative; width: min(27vw, 330px); height: 300px; display: flex !important; flex-direction: column; justify-content: center; align-items: flex-start; padding: 55px 48px !important; box-sizing: border-box; background: radial-gradient( circle at 50% 20%, rgba(255, 245, 190, .13), transparent 42% ), rgba(20, 25, 17, .92) !important; color: #fff !important; /* forme hexagonale */ clip-path: polygon( 25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50% ); filter: drop-shadow(0 0 12px rgba(218, 187, 91, .14)) drop-shadow(0 12px 25px rgba(0, 0, 0, .18)); transition: transform .45s ease, filter .45s ease; } /* Décalage de la deuxième rangée : effet ruche */ #maison .maison-card:nth-child(4) { grid-column: 1; transform: translateX(5.5vw); } #maison .maison-card:nth-child(5) { grid-column: 2; transform: translateX(5.5vw); } #maison .maison-card:nth-child(6) { grid-column: 3; transform: translateX(5.5vw); } /* Légère variation pour éviter un aspect trop rigide */ #maison .maison-card:nth-child(1) { transform: translateY(8px); } #maison .maison-card:nth-child(2) { transform: translateY(-8px); } #maison .maison-card:nth-child(3) { transform: translateY(8px); } #maison .maison-card:nth-child(4) { transform: translateX(5.5vw) translateY(-8px); } #maison .maison-card:nth-child(5) { transform: translateX(5.5vw) translateY(8px); } #maison .maison-card:nth-child(6) { transform: translateX(5.5vw) translateY(-8px); } /* Numéros */ #maison .maison-card__index { color: #e8cf83 !important; -webkit-text-fill-color: #e8cf83 !important; font-size: .72rem; letter-spacing: .18em; margin-bottom: 18px; opacity: .95; } /* Titres */ #maison .maison-card h3 { color: #fff !important; -webkit-text-fill-color: #fff !important; margin: 0 0 14px; } /* Textes */ #maison .maison-card p { color: rgba(255,255,255,.78) !important; -webkit-text-fill-color: rgba(255,255,255,.78) !important; margin: 0; } /* Guirlande principale autour de la ruche */ #maison .maison__cards::before { content: ""; position: absolute; z-index: 0; inset: 1vw 0 2vw; pointer-events: none; border: 1px solid rgba(92, 103, 65, .34); border-radius: 48% 52% 45% 55% / 38% 42% 58% 62%; box-shadow: 0 0 0 1px rgba(218, 187, 91, .05), inset 0 0 40px rgba(218, 187, 91, .025); } /* Petites ampoules lumineuses */ #maison .maison__cards::after { content: ""; position: absolute; z-index: 5; pointer-events: none; inset: 0; background: radial-gradient(circle at 5% 35%, #f5dfa0 0 3px, transparent 4px), radial-gradient(circle at 12% 17%, #fff2bd 0 2px, transparent 4px), radial-gradient(circle at 25% 5%, #e5c66f 0 3px, transparent 4px), radial-gradient(circle at 44% 2%, #fff4c6 0 2px, transparent 4px), radial-gradient(circle at 64% 5%, #e5c66f 0 3px, transparent 4px), radial-gradient(circle at 82% 15%, #fff4c6 0 2px, transparent 4px), radial-gradient(circle at 95% 36%, #e5c66f 0 3px, transparent 4px), radial-gradient(circle at 92% 72%, #fff4c6 0 2px, transparent 4px), radial-gradient(circle at 76% 94%, #e5c66f 0 3px, transparent 4px), radial-gradient(circle at 51% 98%, #fff4c6 0 2px, transparent 4px), radial-gradient(circle at 25% 94%, #e5c66f 0 3px, transparent 4px), radial-gradient(circle at 7% 75%, #fff4c6 0 2px, transparent 4px); filter: drop-shadow(0 0 5px rgba(245, 223, 160, .8)) drop-shadow(0 0 12px rgba(245, 223, 160, .3)); } /* Petites branches / épines décoratives */ #maison .maison-card::before { content: ""; position: absolute; z-index: -1; width: 45%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(112, 125, 79, .7), transparent ); box-shadow: 12px -8px 0 rgba(112,125,79,.25), 28px 7px 0 rgba(112,125,79,.2); } /* Halo doré discret */ #maison .maison-card:hover { filter: drop-shadow(0 0 18px rgba(218, 187, 91, .28)) drop-shadow(0 16px 30px rgba(0, 0, 0, .22)); } #maison .maison-card:nth-child(1):hover, #maison .maison-card:nth-child(2):hover, #maison .maison-card:nth-child(3):hover { transform: translateY(-4px) scale(1.015); } #maison .maison-card:nth-child(4):hover, #maison .maison-card:nth-child(5):hover, #maison .maison-card:nth-child(6):hover { transform: translateX(5.5vw) translateY(-4px) scale(1.015); } } /* DESKTOP — Maison : cartes rectangles modernes + guirlandes */ @media (min-width: 1024px) { #maison .maison__cards { position: relative; width: min(90vw, 1200px); margin: 6vw auto 0 !important; padding: 4vw 2vw 7vw !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 32px !important; align-items: stretch; justify-items: stretch; overflow: visible; } /* Cartes RECTANGULAIRES */ #maison .maison-card { position: relative; width: 100%; min-height: 300px; height: auto; box-sizing: border-box; padding: 42px 38px !important; display: flex !important; flex-direction: column; justify-content: flex-start; align-items: flex-start; /* fond moderne légèrement transparent */ background: linear-gradient( 145deg, rgba(255,255,255,.055), rgba(255,255,255,.018) ) !important; border: 1px solid rgba(255,255,255,.14); border-radius: 3px; color: #fff !important; box-shadow: 0 18px 45px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.055); transform: none !important; clip-path: none !important; transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease, background .4s ease; } /* Petite ligne dorée décorative en haut */ #maison .maison-card::before { content: ""; position: absolute; top: 0; left: 32px; width: 52px; height: 1px; background: linear-gradient( 90deg, transparent, #d9bd6b, transparent ); box-shadow: 0 0 8px rgba(217,189,107,.3); } /* Numéros */ #maison .maison-card__index { display: block; margin-bottom: 30px; color: #d8bd70 !important; -webkit-text-fill-color: #d8bd70 !important; font-size: .68rem; line-height: 1; letter-spacing: .22em; font-weight: 500; } /* Titres */ #maison .maison-card h3 { margin: 0 0 18px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: clamp(1.15rem, 1.5vw, 1.55rem); line-height: 1.15; font-weight: 400; } /* Paragraphes */ #maison .maison-card p { margin: 0 !important; color: rgba(255,255,255,.67) !important; -webkit-text-fill-color: rgba(255,255,255,.67) !important; font-size: .88rem; line-height: 1.7; } /* Cartes légèrement alternées pour donner du rythme */ #maison .maison-card:nth-child(2), #maison .maison-card:nth-child(5) { transform: translateY(28px) !important; } /* Effet moderne au survol */ #maison .maison-card:hover { transform: translateY(-7px) !important; border-color: rgba(220,195,116,.48); background: linear-gradient( 145deg, rgba(255,255,255,.075), rgba(255,255,255,.025) ) !important; box-shadow: 0 25px 55px rgba(0,0,0,.23), 0 0 28px rgba(217,189,107,.08), inset 0 1px 0 rgba(255,255,255,.08); } #maison .maison-card:nth-child(2):hover, #maison .maison-card:nth-child(5):hover { transform: translateY(20px) !important; } /* Guirlande supérieure */ #maison .maison__cards::before { content: ""; position: absolute; top: -15px; left: 3%; right: 3%; height: 70px; pointer-events: none; border-top: 1px solid rgba(92,105,68,.5); border-radius: 50%; background: radial-gradient(circle at 7% 48%, #f5dda0 0 3px, transparent 4px), radial-gradient(circle at 19% 72%, #fff1bc 0 2px, transparent 4px), radial-gradient(circle at 32% 40%, #e3c56f 0 3px, transparent 4px), radial-gradient(circle at 46% 67%, #fff3c5 0 2px, transparent 4px), radial-gradient(circle at 60% 39%, #e3c56f 0 3px, transparent 4px), radial-gradient(circle at 74% 70%, #fff3c5 0 2px, transparent 4px), radial-gradient(circle at 88% 44%, #e3c56f 0 3px, transparent 4px); filter: drop-shadow(0 0 5px rgba(245,221,160,.65)); } /* Guirlande inférieure */ #maison .maison__cards::after { content: ""; position: absolute; bottom: 8px; left: 10%; right: 10%; height: 55px; pointer-events: none; border-bottom: 1px solid rgba(92,105,68,.38); border-radius: 50%; background: radial-gradient(circle at 8% 42%, #e3c56f 0 3px, transparent 4px), radial-gradient(circle at 25% 70%, #fff3c5 0 2px, transparent 4px), radial-gradient(circle at 43% 38%, #e3c56f 0 3px, transparent 4px), radial-gradient(circle at 61% 68%, #fff3c5 0 2px, transparent 4px), radial-gradient(circle at 78% 40%, #e3c56f 0 3px, transparent 4px), radial-gradient(circle at 94% 67%, #fff3c5 0 2px, transparent 4px); filter: drop-shadow(0 0 5px rgba(245,221,160,.55)); } } /* ========================================================= MAISON — CARTES DESKTOP : 3 x 2, RECTANGLES ESPACÉS ========================================================= */ @media (min-width: 1024px) { .maison__cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; width: min(1180px, calc(100% - 100px)) !important; margin: 80px auto 0 !important; padding: 0 !important; align-items: stretch !important; } .maison__cards .maison-card { position: relative !important; width: 100% !important; min-height: 245px !important; height: auto !important; margin: 0 !important; padding: 32px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; border-radius: 0 !important; box-sizing: border-box !important; /* léger effet premium */ transition: transform .35s ease, box-shadow .35s ease !important; } .maison__cards .maison-card:hover { transform: translateY(-5px) !important; box-shadow: 0 18px 40px rgba(0,0,0,.12) !important; } /* Espacement visuel entre les deux rangées */ .maison__cards .maison-card:nth-child(n+4) { margin-top: 4px !important; } /* Numéros */ .maison__cards .maison-card__index { display: block !important; margin-bottom: 35px !important; font-size: 12px !important; line-height: 1 !important; letter-spacing: .12em !important; } /* Titres */ .maison__cards .maison-card h3 { margin: 0 0 14px !important; } /* Textes */ .maison__cards .maison-card p { margin: 0 !important; max-width: 440px !important; } /* Les cartes noires */ .maison__cards .maison-card--quality, .maison__cards .maison-card--detail, .maison__cards .maison-card--manifesto { background: #000 !important; color: #fff !important; } .maison__cards .maison-card--quality *, .maison__cards .maison-card--detail *, .maison__cards .maison-card--manifesto * { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* Les cartes blanches */ .maison__cards .maison-card--germany, .maison__cards .maison-card--universes, .maison__cards .maison-card--installation { background: #fff !important; color: #000 !important; border: 1px solid rgba(0,0,0,.12) !important; } .maison__cards .maison-card--germany *, .maison__cards .maison-card--universes *, .maison__cards .maison-card--installation * { color: #000 !important; -webkit-text-fill-color: #000 !important; } } /* LDM — NOUVELLE GRILLE CATÉGORIES LUMINAIRES */ .luminaires-categories { width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 120px 0 150px; } .luminaires-categories__intro { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(300px, 1fr); column-gap: 90px; align-items: end; margin-bottom: 75px; } .luminaires-categories__intro .eyebrow { grid-column: 1 / -1; margin-bottom: 28px; } .luminaires-categories__intro h2 { margin: 0; color: #fff; font-size: clamp(3.5rem, 7vw, 7.5rem); line-height: .88; letter-spacing: -.055em; font-weight: 400; } .luminaires-categories__intro h2 em { color: #a7c7ad; font-style: italic; } .luminaires-categories__lead { max-width: 390px; margin: 0 0 5px auto; color: rgba(255,255,255,.62); font-size: 1rem; line-height: 1.7; } /* GRILLE */ .luminaires-categories__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; } /* CARTES */ .luminaire-category { position: relative; isolation: isolate; overflow: hidden; min-height: 430px; background: #151515; border: 1px solid rgba(255,255,255,.12); cursor: pointer; transform: translateY(0); transition: transform .7s cubic-bezier(.16,1,.3,1), border-color .5s ease, box-shadow .7s ease; } .luminaire-category:nth-child(1) { grid-column: span 7; min-height: 520px; } .luminaire-category:nth-child(2) { grid-column: span 5; min-height: 520px; } .luminaire-category:nth-child(3), .luminaire-category:nth-child(4), .luminaire-category:nth-child(5) { grid-column: span 4; } .luminaire-category:nth-child(6) { grid-column: 3 / span 8; min-height: 470px; } /* IMAGE */ .luminaire-category__image { position: absolute; inset: 0; z-index: -3; overflow: hidden; } .luminaire-category__image img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.015); filter: saturate(.82) contrast(1.02); transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter 1s ease; } /* VOILE */ .luminaire-category__veil { position: absolute; inset: 0; z-index: -2; background: linear-gradient( 180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.12) 35%, rgba(0,0,0,.78) 100% ); transition: background .8s ease; } /* HALO */ .luminaire-category::after { content: ""; position: absolute; width: 260px; height: 260px; right: -100px; top: -100px; border-radius: 50%; background: rgba(176,210,184,.18); filter: blur(65px); opacity: .35; z-index: -1; transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .8s ease; } /* NUMÉRO */ .luminaire-category__number { position: absolute; top: 25px; left: 27px; color: rgba(255,255,255,.82); font-size: .72rem; letter-spacing: .18em; z-index: 2; } /* CONTENU */ .luminaire-category__content { position: absolute; left: 30px; right: 30px; bottom: 30px; z-index: 3; } .luminaire-category__eyebrow { margin: 0 0 10px; color: rgba(255,255,255,.58); font-size: .62rem; text-transform: uppercase; letter-spacing: .18em; } .luminaire-category__content h3 { margin: 0; color: #fff; font-size: clamp(1.65rem, 2.5vw, 2.7rem); line-height: 1; font-weight: 400; letter-spacing: -.035em; } .luminaire-category__description { max-width: 310px; margin: 13px 0 0; color: rgba(255,255,255,.68); font-size: .88rem; line-height: 1.55; transform: translateY(7px); opacity: .78; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease; } /* FLÈCHE */ .luminaire-category__arrow { position: absolute; top: 23px; right: 25px; width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; font-size: 1rem; z-index: 3; transition: background .5s ease, color .5s ease, transform .6s cubic-bezier(.16,1,.3,1); } /* HOVER */ .luminaire-category:hover { transform: translateY(-8px); border-color: rgba(190,220,198,.48); box-shadow: 0 28px 70px rgba(0,0,0,.3); } .luminaire-category:hover .luminaire-category__image img { transform: scale(1.075); filter: saturate(1) contrast(1.04); } .luminaire-category:hover .luminaire-category__veil { background: linear-gradient( 180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.82) 100% ); } .luminaire-category:hover::after { transform: scale(1.45); opacity: .7; } .luminaire-category:hover .luminaire-category__description { transform: translateY(0); opacity: 1; } .luminaire-category:hover .luminaire-category__arrow { background: #fff; color: #111; transform: rotate(45deg); } /* APPARITION AU SCROLL */ [data-reveal-category] { opacity: 0; transform: translateY(35px); } [data-reveal-category].is-visible { opacity: 1; transform: translateY(0); transition: opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1); } [data-reveal-category]:nth-child(2) { transition-delay: .08s; } [data-reveal-category]:nth-child(3) { transition-delay: .14s; } [data-reveal-category]:nth-child(4) { transition-delay: .20s; } [data-reveal-category]:nth-child(5) { transition-delay: .26s; } [data-reveal-category]:nth-child(6) { transition-delay: .32s; } /* TABLETTE */ @media (max-width: 900px) { .luminaires-categories { width: min(100% - 32px, 680px); padding: 90px 0 100px; } .luminaires-categories__intro { display: block; margin-bottom: 50px; } .luminaires-categories__lead { margin: 30px 0 0; } .luminaires-categories__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .luminaire-category, .luminaire-category:nth-child(n) { grid-column: span 1; min-height: 390px; } .luminaire-category:nth-child(1), .luminaire-category:nth-child(6) { grid-column: 1 / -1; } } /* MOBILE */ @media (max-width: 600px) { .luminaires-categories { width: calc(100% - 24px); padding: 75px 0 80px; } .luminaires-categories__intro h2 { font-size: clamp(3rem, 15vw, 5rem); } .luminaires-categories__grid { display: flex; flex-direction: column; gap: 12px; } .luminaire-category, .luminaire-category:nth-child(n) { min-height: 420px; } .luminaire-category:nth-child(1), .luminaire-category:nth-child(6) { min-height: 470px; } .luminaire-category__content { left: 22px; right: 22px; bottom: 22px; } .luminaire-category__number { top: 20px; left: 21px; } .luminaire-category__arrow { top: 17px; right: 18px; } } /* ACCESSIBILITÉ */ @media (prefers-reduced-motion: reduce) { .luminaire-category, .luminaire-category *, .luminaire-category::after { transition: none !important; animation: none !important; } } /* ============================================================ LUMINAIRES — GRILLE CATÉGORIES 3 × 2 ============================================================ */ .luminaires-categories { width: min(1380px, calc(100% - 64px)); margin: 0 auto; padding: 110px 0 140px; } .luminaires-categories__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 65px; } .luminaires-categories__intro h2 { margin: 18px 0 0; } .luminaires-categories__lead { max-width: 470px; margin: 0 0 8px auto; opacity: .7; line-height: 1.7; } .luminaires-categories__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .luminaires-category { position: relative; display: block; height: 390px; overflow: hidden; color: #fff; text-decoration: none; background: #171717; isolation: isolate; } .luminaires-category img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms cubic-bezier(.2,.7,.2,1), filter 700ms ease; } .luminaires-category__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.12) 35%, rgba(0,0,0,.82) 100% ); transition: background 500ms ease; } .luminaires-category__number { position: absolute; top: 22px; left: 24px; z-index: 2; font-size: 12px; letter-spacing: .14em; opacity: .9; } .luminaires-category__content { position: absolute; z-index: 2; left: 25px; right: 45px; bottom: 25px; } .luminaires-category__eyebrow { display: block; margin-bottom: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .18em; opacity: .65; } .luminaires-category__title { display: block; font-family: inherit; font-size: clamp(24px, 2.2vw, 36px); line-height: 1; font-weight: 400; margin-bottom: 12px; } .luminaires-category__text { display: block; max-width: 300px; font-size: 13px; line-height: 1.5; opacity: .75; } .luminaires-category__arrow { position: absolute; z-index: 3; top: 20px; right: 22px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; font-size: 17px; transition: transform 450ms ease, background 450ms ease, color 450ms ease; } .luminaires-category:hover img { transform: scale(1.07); filter: brightness(.88); } .luminaires-category:hover .luminaires-category__overlay { background: linear-gradient( 180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.88) 100% ); } .luminaires-category:hover .luminaires-category__arrow { transform: rotate(45deg); background: #fff; color: #111; } .luminaires-category:hover .luminaires-category__number { opacity: 1; } /* apparition élégante */ .luminaires-category { animation: luminairesCategoryIn .8s cubic-bezier(.2,.7,.2,1) both; } .luminaires-category--01 { animation-delay: .05s; } .luminaires-category--02 { animation-delay: .10s; } .luminaires-category--03 { animation-delay: .15s; } .luminaires-category--04 { animation-delay: .20s; } .luminaires-category--05 { animation-delay: .25s; } .luminaires-category--06 { animation-delay: .30s; } @keyframes luminairesCategoryIn { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: translateY(0); } } /* tablette */ @media (max-width: 900px) { .luminaires-categories { width: min(100% - 36px, 700px); padding: 80px 0 100px; } .luminaires-categories__intro { grid-template-columns: 1fr; gap: 30px; } .luminaires-categories__lead { margin-left: 0; } .luminaires-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* mobile */ @media (max-width: 600px) { .luminaires-categories { width: calc(100% - 28px); padding: 65px 0 80px; } .luminaires-categories__grid { grid-template-columns: 1fr; gap: 14px; } .luminaires-category { height: 330px; } } /* LUMINAIRES — accents vert fluo */ .showroom--luminaires .eyebrow { color: #B8FF00 !important; -webkit-text-fill-color: #B8FF00 !important; } .showroom--luminaires h2 em { color: #B8FF00 !important; -webkit-text-fill-color: #B8FF00 !important; } /* LUMINAIRES — reprendre exactement le vert du site */ .showroom--luminaires .eyebrow, .showroom--luminaires h2 em { color: #6f9700 !important; -webkit-text-fill-color: #6f9700 !important; } /* LUMINAIRES — suppression des flèches des cartes */ .luminaires-category__arrow { display: none !important; } /* ============================================================ LDM — CATÉGORIES LUMINAIRES + MODAL PRODUITS ============================================================ */ .luminaires-categories { width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 120px 0 150px; } .luminaires-categories__intro { display: grid; grid-template-columns: 1fr .75fr; gap: 80px; align-items: end; margin-bottom: 70px; } .luminaires-categories__intro h2 { margin: 0; } .luminaires-categories__intro h2 em { color: var(--color-green, #b7ff3c); font-style: normal; } .luminaires-categories__lead { max-width: 430px; margin: 0 0 5px auto; opacity: .7; line-height: 1.7; } .luminaires-categories__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .luminaires-category { position: relative; display: block; height: 430px; overflow: hidden; color: #fff; text-decoration: none; background: #111; isolation: isolate; } .luminaires-category__image, .luminaires-category__image img { position: absolute; inset: 0; width: 100%; height: 100%; } .luminaires-category__image img { object-fit: cover; transition: transform 1s cubic-bezier(.16,1,.3,1), filter .7s ease; } .luminaires-category__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.82) 100% ); } .luminaires-category__number { position: absolute; top: 24px; left: 24px; z-index: 2; font-size: 11px; letter-spacing: .16em; color: rgba(255,255,255,.7); } .luminaires-category__content { position: absolute; left: 28px; right: 28px; bottom: 27px; z-index: 2; } .luminaires-category__content strong { display: block; font-size: clamp(22px, 2vw, 32px); font-weight: 400; letter-spacing: -.025em; } .luminaires-category__content small { display: block; margin-top: 8px; max-width: 280px; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.68); } .luminaires-category::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 1px solid rgba(255,255,255,.13); pointer-events: none; transition: border-color .5s ease; } .luminaires-category:hover .luminaires-category__image img { transform: scale(1.06); filter: brightness(1.08); } .luminaires-category:hover::after { border-color: rgba(255,255,255,.42); } /* ============================================================ MODAL ============================================================ */ .luminaire-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 30px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .45s ease, visibility .45s ease; } .luminaire-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; } .luminaire-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .luminaire-modal__panel { position: relative; z-index: 2; width: min(1320px, 100%); max-height: calc(100vh - 60px); overflow-y: auto; padding: 55px; background: #111; color: #fff; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 100px rgba(0,0,0,.45); transform: translateY(35px) scale(.97); opacity: 0; transition: transform .65s cubic-bezier(.16,1,.3,1), opacity .45s ease; } .luminaire-modal.is-open .luminaire-modal__panel { transform: translateY(0) scale(1); opacity: 1; } .luminaire-modal__close { position: absolute; top: 25px; right: 25px; width: 45px; height: 45px; padding: 0; border: 1px solid rgba(255,255,255,.2); background: transparent; cursor: pointer; } .luminaire-modal__close span { position: absolute; left: 13px; top: 21px; width: 18px; height: 1px; background: #fff; } .luminaire-modal__close span:first-child { transform: rotate(45deg); } .luminaire-modal__close span:last-child { transform: rotate(-45deg); } .luminaire-modal__header { display: grid; grid-template-columns: 90px 1fr 300px; gap: 30px; align-items: end; margin-bottom: 50px; padding-right: 65px; } .luminaire-modal__number { margin: 0; font-size: 12px; color: var(--color-green, #b7ff3c); letter-spacing: .15em; } .luminaire-modal__header h2 { margin: 4px 0 0; font-size: clamp(40px, 5vw, 72px); font-weight: 400; letter-spacing: -.045em; } .luminaire-modal__description { margin: 0; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.6; } /* Produits */ .luminaire-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .luminaire-product { position: relative; overflow: hidden; background: #181818; opacity: 0; transform: translateY(25px); transition: opacity .55s ease, transform .65s cubic-bezier(.16,1,.3,1); } .luminaire-modal.is-open .luminaire-product { opacity: 1; transform: translateY(0); } .luminaire-modal.is-open .luminaire-product:nth-child(1) { transition-delay: .08s; } .luminaire-modal.is-open .luminaire-product:nth-child(2) { transition-delay: .13s; } .luminaire-modal.is-open .luminaire-product:nth-child(3) { transition-delay: .18s; } .luminaire-modal.is-open .luminaire-product:nth-child(4) { transition-delay: .23s; } .luminaire-modal.is-open .luminaire-product:nth-child(5) { transition-delay: .28s; } .luminaire-modal.is-open .luminaire-product:nth-child(6) { transition-delay: .33s; } .luminaire-product__image { aspect-ratio: 1 / 1.08; overflow: hidden; background: #202020; } .luminaire-product__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.16,1,.3,1); } .luminaire-product:hover .luminaire-product__image img { transform: scale(1.045); } .luminaire-product__info { display: flex; align-items: end; justify-content: space-between; gap: 15px; padding: 18px 18px 20px; } .luminaire-product__number { margin: 0 0 5px; font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.4); } .luminaire-product h3 { margin: 0; font-size: 16px; font-weight: 400; } .luminaire-product__price { margin: 0; font-size: 13px; color: var(--color-green, #b7ff3c); white-space: nowrap; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .luminaires-categories { padding: 80px 0 100px; } .luminaires-categories__intro { grid-template-columns: 1fr; gap: 30px; margin-bottom: 45px; } .luminaires-categories__lead { margin-left: 0; } .luminaires-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .luminaire-modal { padding: 12px; } .luminaire-modal__panel { padding: 35px 20px; max-height: calc(100vh - 24px); } .luminaire-modal__header { grid-template-columns: 55px 1fr; gap: 12px; margin-bottom: 35px; } .luminaire-modal__description { grid-column: 2; } .luminaire-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .luminaires-categories { width: calc(100% - 30px); } .luminaires-categories__grid { grid-template-columns: 1fr; } .luminaires-category { height: 380px; } .luminaire-products { grid-template-columns: 1fr; } .luminaire-modal__header { display: block; padding-right: 45px; } .luminaire-modal__number { margin-bottom: 8px; } .luminaire-modal__description { margin-top: 18px; } } /* ============================================================ POPUP CATÉGORIES LUMINAIRES ============================================================ */ .ldm-category-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 30px; visibility: hidden; opacity: 0; transition: opacity .4s ease, visibility .4s ease; } .ldm-category-modal.is-open { visibility: visible; opacity: 1; } .ldm-category-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(14px); } .ldm-category-modal__window { position: relative; width: min(1180px, 100%); max-height: 90vh; overflow-y: auto; padding: 55px; background: #f4f1e9; color: #111; transform: translateY(35px) scale(.97); transition: transform .5s cubic-bezier(.16,1,.3,1); } .ldm-category-modal.is-open .ldm-category-modal__window { transform: translateY(0) scale(1); } .ldm-category-modal__close { position: absolute; top: 20px; right: 25px; border: 0; background: none; color: #111; font-size: 38px; cursor: pointer; } .ldm-category-modal__window h2 { margin: 5px 0 35px; font-size: clamp(38px, 5vw, 70px); font-weight: 400; } .ldm-category-modal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .ldm-category-product { opacity: 0; transform: translateY(25px); animation: ldmProductIn .6s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(var(--i) * 70ms); } .ldm-category-product__image { aspect-ratio: 1 / 1; overflow: hidden; background: #ddd; } .ldm-category-product__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.16,1,.3,1); } .ldm-category-product:hover img { transform: scale(1.06); } .ldm-category-product__info { padding: 13px 2px; } .ldm-category-product__info span { font-size: 11px; opacity: .5; } .ldm-category-product h3 { margin: 5px 0; font-size: 18px; font-weight: 400; } .ldm-category-product strong { font-size: 15px; font-weight: 500; } @keyframes ldmProductIn { to { opacity: 1; transform: translateY(0); } } body.ldm-modal-open { overflow: hidden; } @media (max-width: 700px) { .ldm-category-modal { padding: 12px; } .ldm-category-modal__window { padding: 45px 20px 30px; } .ldm-category-modal__grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } } /* ========================================================= LDM — CATÉGORIES LUMINAIRES ========================================================= */ .luminaires-categories { width: min(1380px, calc(100% - 64px)); margin: 0 auto; padding: 120px 0 140px; } .luminaires-categories__intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 60px; margin-bottom: 70px; } .luminaires-categories__intro h2 { margin: 0; } .luminaires-categories__intro h2 em { color: var(--color-accent, #b7ff3c); } .luminaires-categories__intro > p:last-child { margin: 0; max-width: 380px; justify-self: end; opacity: .65; } .luminaires-categories__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .luminaires-category { position: relative; display: block; width: 100%; height: 390px; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: #151515; color: #fff; cursor: pointer; text-align: left; isolation: isolate; transform: translateZ(0); transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease; } .luminaires-category::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(0,0,0,.02) 20%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.82) 100% ); pointer-events: none; } .luminaires-category img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transform: scale(1.01); transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .6s ease, filter .6s ease; } .luminaires-category:hover { transform: translateY(-8px); box-shadow: 0 25px 70px rgba(0,0,0,.28); } .luminaires-category:hover img { transform: scale(1.07); opacity: 1; filter: saturate(1.08); } .luminaires-category__number { position: absolute; z-index: 3; top: 24px; left: 25px; font-size: 11px; letter-spacing: .16em; opacity: .75; } .luminaires-category__name { position: absolute; z-index: 3; left: 25px; right: 25px; bottom: 25px; font-family: inherit; font-size: clamp(21px, 2vw, 30px); line-height: 1; font-weight: 500; letter-spacing: -.025em; } .luminaires-category:focus-visible { outline: 2px solid var(--color-accent, #b7ff3c); outline-offset: 5px; } @media (max-width: 900px) { .luminaires-categories { width: min(100% - 36px, 680px); padding: 80px 0 100px; } .luminaires-categories__intro { grid-template-columns: 1fr; gap: 25px; margin-bottom: 45px; } .luminaires-categories__intro > p:last-child { justify-self: start; } .luminaires-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .luminaires-category { height: 300px; } } @media (max-width: 560px) { .luminaires-categories { width: calc(100% - 28px); } .luminaires-categories__grid { grid-template-columns: 1fr; } .luminaires-category { height: 330px; } } /* LDM — POPUP PRODUITS LUMINAIRES */ /* ========================================================= LDM — POPUP PRODUITS LUMINAIRES ========================================================= */ body.ldm-modal-open { overflow: hidden !important; } .ldm-luminaire-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 30px; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility .35s ease; } .ldm-luminaire-modal.is-visible { visibility: visible; opacity: 1; } .ldm-luminaire-modal__backdrop { position: absolute; inset: 0; background: rgba(5, 5, 5, .82); backdrop-filter: blur(14px); } .ldm-luminaire-modal__window { position: relative; z-index: 2; width: min(1180px, 100%); max-height: min(900px, 92vh); overflow-y: auto; padding: 55px; background: #111; color: #fff; transform: translateY(30px) scale(.97); transition: transform .55s cubic-bezier(.16,1,.3,1); scrollbar-width: thin; } .ldm-luminaire-modal.is-visible .ldm-luminaire-modal__window { transform: translateY(0) scale(1); } .ldm-luminaire-modal__close { position: absolute; top: 25px; right: 25px; z-index: 5; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; cursor: pointer; transition: background .3s ease, transform .3s ease; } .ldm-luminaire-modal__close:hover { background: #fff; transform: rotate(90deg); } .ldm-luminaire-modal__close span { position: absolute; left: 12px; top: 21px; width: 18px; height: 1px; background: #fff; } .ldm-luminaire-modal__close span:first-child { transform: rotate(45deg); } .ldm-luminaire-modal__close span:last-child { transform: rotate(-45deg); } .ldm-luminaire-modal__close:hover span { background: #111; } .ldm-luminaire-modal__header { margin-bottom: 40px; padding-right: 60px; } .ldm-luminaire-modal__eyebrow { margin: 0 0 14px; color: #b7ff3c; font-size: 10px; letter-spacing: .18em; } .ldm-luminaire-modal__header h2 { margin: 0 0 12px; font-size: clamp(38px, 5vw, 72px); line-height: .95; letter-spacing: -.045em; } .ldm-luminaire-modal__subtitle { max-width: 500px; margin: 0; color: rgba(255,255,255,.58); font-size: 14px; } .ldm-luminaire-modal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ldm-luminaire-product { min-width: 0; opacity: 0; transform: translateY(18px); transition: opacity .5s ease var(--delay), transform .6s cubic-bezier(.16,1,.3,1) var(--delay); } .ldm-luminaire-modal.is-visible .ldm-luminaire-product { opacity: 1; transform: translateY(0); } .ldm-luminaire-product__image { position: relative; aspect-ratio: 1 / 1.05; overflow: hidden; background: #1d1d1d; } .ldm-luminaire-product__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); } .ldm-luminaire-product:hover img { transform: scale(1.06); } .ldm-luminaire-product__info { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 8px; padding: 14px 2px 5px; } .ldm-luminaire-product__info span { color: rgba(255,255,255,.38); font-size: 10px; } .ldm-luminaire-product__info h3 { margin: 0; font-size: 15px; font-weight: 500; } .ldm-luminaire-product__info strong { color: #b7ff3c; font-size: 13px; font-weight: 500; } @media (max-width: 800px) { .ldm-luminaire-modal { padding: 12px; } .ldm-luminaire-modal__window { padding: 35px 20px; max-height: 95vh; } .ldm-luminaire-modal__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 520px) { .ldm-luminaire-modal__grid { grid-template-columns: 1fr; } .ldm-luminaire-modal__header h2 { font-size: 42px; } } /* Curseur LDM dans les popups luminaires */ .ldm-luminaire-modal, .ldm-luminaire-modal * { cursor: none !important; } .ldm-luminaire-modal__close { cursor: pointer !important; } /* ============================================================ LDM — POPUP PRODUITS LUMINAIRES ============================================================ */ html.ldm-modal-open, body.ldm-modal-open { overflow: hidden !important; } .ldm-popup { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 30px; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } .ldm-popup.is-open { opacity: 1; visibility: visible; } .ldm-popup__backdrop { position: absolute; inset: 0; background: rgba(5, 7, 6, .88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .ldm-popup__window { position: relative; z-index: 2; width: min(1180px, 100%); max-height: min(900px, 92vh); overflow-y: auto; padding: 55px; color: #fff; background: radial-gradient(circle at 80% 10%, rgba(117, 255, 100, .08), transparent 28%), #111412; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 120px rgba(0,0,0,.55); transform: translateY(35px) scale(.97); transition: transform .55s cubic-bezier(.16,1,.3,1); } .ldm-popup.is-open .ldm-popup__window { transform: translateY(0) scale(1); } .ldm-popup__close { position: absolute; top: 25px; right: 25px; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; cursor: pointer; z-index: 5; transition: .3s ease; } .ldm-popup__close:hover { background: #b7ff68; border-color: #b7ff68; transform: rotate(90deg); } .ldm-popup__close span { position: absolute; left: 13px; top: 23px; width: 20px; height: 1px; background: #fff; } .ldm-popup__close span:first-child { transform: rotate(45deg); } .ldm-popup__close span:last-child { transform: rotate(-45deg); } .ldm-popup__close:hover span { background: #10130f; } .ldm-popup__head { max-width: 720px; margin-bottom: 42px; } .ldm-popup__eyebrow { margin: 0 0 16px; color: #b7ff68; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } .ldm-popup__head h2 { margin: 0 0 14px; font-size: clamp(42px, 6vw, 82px); line-height: .92; letter-spacing: -.04em; } .ldm-popup__intro { max-width: 560px; margin: 0; color: rgba(255,255,255,.62); font-size: 15px; line-height: 1.6; } .ldm-popup__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ldm-popup-product { min-width: 0; opacity: 0; transform: translateY(25px); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); } .ldm-popup.is-open .ldm-popup-product { opacity: 1; transform: translateY(0); } .ldm-popup.is-open .ldm-popup-product:nth-child(1) { transition-delay: .05s; } .ldm-popup.is-open .ldm-popup-product:nth-child(2) { transition-delay: .10s; } .ldm-popup.is-open .ldm-popup-product:nth-child(3) { transition-delay: .15s; } .ldm-popup.is-open .ldm-popup-product:nth-child(4) { transition-delay: .20s; } .ldm-popup.is-open .ldm-popup-product:nth-child(5) { transition-delay: .25s; } .ldm-popup.is-open .ldm-popup-product:nth-child(6) { transition-delay: .30s; } .ldm-popup-product__image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #202420; } .ldm-popup-product__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); } .ldm-popup-product:hover .ldm-popup-product__image img { transform: scale(1.06); } .ldm-popup-product__number { position: absolute; top: 14px; left: 14px; padding: 6px 9px; color: #111; background: #b7ff68; font-size: 10px; letter-spacing: .1em; } .ldm-popup-product__info { display: flex; justify-content: space-between; gap: 15px; padding: 15px 2px 5px; } .ldm-popup-product__info h3 { margin: 0; font-size: 18px; font-weight: 500; } .ldm-popup-product__info strong { color: #b7ff68; font-size: 14px; font-weight: 500; white-space: nowrap; } .ldm-popup-cursor { position: fixed; z-index: 1000001; width: 68px; height: 68px; border-radius: 50%; pointer-events: none; display: grid; place-items: center; color: #111; background: #b7ff68; mix-blend-mode: normal; font-size: 8px; font-weight: 700; letter-spacing: .08em; transition: width .25s ease, height .25s ease, background .25s ease; } .ldm-popup-cursor.is-close { width: 82px; height: 82px; background: #fff; } @media (max-width: 800px) { .ldm-popup { padding: 12px; } .ldm-popup__window { max-height: 94vh; padding: 35px 20px 30px; } .ldm-popup__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ldm-popup__head h2 { font-size: 48px; } .ldm-popup-product__info { display: block; } .ldm-popup-product__info strong { display: block; margin-top: 5px; } .ldm-popup-cursor { display: none; } } @media (max-width: 520px) { .ldm-popup__grid { grid-template-columns: 1fr; } .ldm-popup__head h2 { font-size: 40px; } } /* ============================================================ LDM — CURSEUR GLOBAL DANS LES POPUPS LUMINAIRES ============================================================ */ .ldm-category-modal, .ldm-category-modal *, .ldm-category-modal__backdrop, .ldm-category-modal__window, .ldm-category-modal__close, .ldm-category-modal button, .ldm-category-modal a { cursor: none !important; } /* La croix reste une vraie zone interactive */ .ldm-category-modal__close { pointer-events: auto !important; position: relative; z-index: 20; } /* Le popup ne doit jamais masquer le curseur global */ .ldm-category-modal { pointer-events: auto; } /* Respecte le système de curseur existant du site */ body:has(.ldm-category-modal.is-open) { cursor: none !important; } /* LDM — cartes catégories : curseur personnalisé uniquement */ .luminaires-category, .luminaires-category *, .luminaires-categories__grid { cursor: none !important; } /* ============================================================ DÉTAIL PRODUIT — LUMINAIRES ============================================================ */ .ldm-product-detail { position: fixed; inset: 0; z-index: 2147483646; display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; cursor: none !important; } .ldm-product-detail.is-open { opacity: 1; visibility: visible; } .ldm-product-detail__backdrop { position: absolute; inset: 0; background: rgba(8, 10, 9, .82); backdrop-filter: blur(18px); } .ldm-product-detail__window { position: relative; z-index: 2; width: min(900px, 100%); display: grid; grid-template-columns: 1fr 1fr; background: #f3f1eb; color: #111; overflow: hidden; transform: translateY(30px) scale(.97); transition: transform .5s cubic-bezier(.16,1,.3,1); } .ldm-product-detail.is-open .ldm-product-detail__window { transform: translateY(0) scale(1); } .ldm-product-detail__image { min-height: 520px; } .ldm-product-detail__image img { width: 100%; height: 100%; object-fit: cover; } .ldm-product-detail__content { padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; } .ldm-product-detail__category { color: #657f62; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; } .ldm-product-detail__content h2 { font-size: clamp(36px, 5vw, 64px); line-height: .95; margin: 18px 0; } .ldm-product-detail__price { font-size: 22px; margin-bottom: 35px; } .ldm-product-detail__quantity { display: flex; align-items: center; width: fit-content; border: 1px solid rgba(0,0,0,.2); margin-bottom: 18px; } .ldm-product-detail__quantity button, .ldm-product-detail__quantity span { width: 52px; height: 52px; display: grid; place-items: center; background: none; border: 0; font-size: 20px; } .ldm-product-detail__add { min-height: 56px; border: 0; background: #657f62; color: white; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; cursor: none !important; transition: background .25s ease, transform .25s ease; } .ldm-product-detail__add:hover { background: #50684e; transform: translateY(-2px); } .ldm-product-detail__close { position: absolute; top: 20px; right: 20px; z-index: 5; width: 46px; height: 46px; border: 1px solid rgba(0,0,0,.2); background: #f3f1eb; font-size: 28px; cursor: none !important; } @media (max-width: 700px) { .ldm-product-detail { padding: 15px; } .ldm-product-detail__window { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; } .ldm-product-detail__image { min-height: 280px; } .ldm-product-detail__content { padding: 35px 25px; } } /* ============================================================ LDM — POPUP CATÉGORIE LUMINAIRES Fond blanc — style showroom ============================================================ */ .ldm-popup { position: fixed !important; inset: 0 !important; z-index: 99990 !important; background: #ffffff !important; color: #111111 !important; overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s cubic-bezier(.22,1,.36,1), visibility .45s; } .ldm-popup.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .ldm-popup__backdrop { position: fixed !important; inset: 0 !important; background: #ffffff !important; } .ldm-popup__window { position: relative !important; z-index: 2 !important; width: min(1400px, calc(100% - 80px)) !important; min-height: 100vh; margin: 0 auto; padding: 90px 0 100px; background: #ffffff !important; color: #111111 !important; } .ldm-popup__head { margin-bottom: 60px; } .ldm-popup__eyebrow { color: #111111 !important; opacity: .5; } .ldm-popup__head h2 { color: #111111 !important; font-size: clamp(48px, 7vw, 100px); line-height: .9; letter-spacing: -.055em; font-weight: 500; margin: 0 0 25px; } .ldm-popup__intro { max-width: 520px; color: #111111 !important; opacity: .65; } .ldm-popup__grid { position: relative; z-index: 3; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; } .ldm-popup-product { position: relative; background: #f3f2ed !important; color: #111111 !important; overflow: hidden; transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; } .ldm-popup-product:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,.10); } .ldm-popup-product__image { aspect-ratio: 4 / 5; overflow: hidden; background: #ebe9e2; } .ldm-popup-product__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.16,1,.3,1); } .ldm-popup-product:hover .ldm-popup-product__image img { transform: scale(1.045); } .ldm-popup-product__info { padding: 22px 24px 26px; background: #ffffff; } .ldm-popup-product__name { color: #111111 !important; } .ldm-popup-product__price { color: #111111 !important; opacity: .65; } .ldm-popup__close { position: fixed !important; top: 28px; right: 32px; z-index: 20; width: 52px; height: 52px; border: 1px solid rgba(0,0,0,.18) !important; border-radius: 50%; background: #ffffff !important; color: #111111 !important; cursor: none !important; transition: transform .4s cubic-bezier(.16,1,.3,1), background .25s ease; } .ldm-popup__close:hover { transform: rotate(90deg); background: #f0efe9 !important; } .ldm-popup__close span { background: #111111 !important; } @media (max-width: 900px) { .ldm-popup__window { width: calc(100% - 36px) !important; padding-top: 75px; } .ldm-popup__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 600px) { .ldm-popup__grid { grid-template-columns: 1fr !important; } .ldm-popup__head h2 { font-size: 52px; } } /* ============================================================ LDM — FINITION POPUP CATÉGORIE ============================================================ */ .ldm-popup-product { border: 0 !important; outline: 0 !important; box-shadow: none; } .ldm-popup-product__image { border: 0 !important; outline: 0 !important; box-shadow: none !important; border-radius: 0 !important; } .ldm-popup-product__image img { border: 0 !important; outline: 0 !important; box-shadow: none !important; border-radius: 0 !important; } .ldm-popup-product__info { border: 0 !important; background: #ffffff !important; } .ldm-popup-product__name, .ldm-popup-product__price, .ldm-popup-product__number { color: #111111 !important; } .ldm-popup-product__price { opacity: 1 !important; } /* ============================================================ LDM — NETTOYAGE CARTES DU POPUP CATÉGORIE ============================================================ */ /* Aucun trait / aucune bordure autour des cartes */ .ldm-popup .ldm-popup-product, .ldm-popup .ldm-popup-product *, .ldm-popup .ldm-popup-product__image, .ldm-popup .ldm-popup-product__image img, .ldm-popup .ldm-popup-product__info { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-bottom: 0 !important; outline: 0 !important; } /* Prix : noir absolu, même si le thème applique le vert */ .ldm-popup .ldm-popup-product__price, .ldm-popup .ldm-popup-product__price *, .ldm-popup [class*="price"] { color: #111111 !important; -webkit-text-fill-color: #111111 !important; opacity: 1 !important; } /* Nom et numéro également noirs */ .ldm-popup .ldm-popup-product__name, .ldm-popup .ldm-popup-product__number { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* Pas de pseudo-éléments pouvant créer les traits */ .ldm-popup .ldm-popup-product::before, .ldm-popup .ldm-popup-product::after, .ldm-popup .ldm-popup-product__image::before, .ldm-popup .ldm-popup-product__image::after { display: none !important; content: none !important; } /* Les images restent totalement propres */ .ldm-popup .ldm-popup-product__image { background: #f3f2ed !important; box-shadow: none !important; } /* La zone texte reste blanche */ .ldm-popup .ldm-popup-product__info { background: #ffffff !important; box-shadow: none !important; } /* ============================================================ LDM — MINIATURES PRODUITS DANS LE PANIER ============================================================ */ .ldm-cart__item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; } .ldm-cart__item-image { width: 64px; height: 72px; overflow: hidden; background: #f1f0eb; flex-shrink: 0; } .ldm-cart__item-image img { width: 100%; height: 100%; display: block; object-fit: cover; } @media (max-width: 600px) { .ldm-cart__item { grid-template-columns: 54px 1fr auto; gap: 10px; } .ldm-cart__item-image { width: 54px; height: 62px; } } /* ============================================================ PANIER — MINIATURE À GAUCHE / QUANTITÉ À DROITE ============================================================ */ .ldm-cart__item { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 16px !important; width: 100% !important; } .ldm-cart__item-image { width: 64px !important; height: 64px !important; overflow: hidden !important; flex-shrink: 0 !important; border: 0 !important; } .ldm-cart__item-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border: 0 !important; } .ldm-cart__item-info { min-width: 0 !important; } .ldm-cart__item-quantity { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; margin-left: auto !important; white-space: nowrap !important; } @media (max-width: 600px) { .ldm-cart__item { grid-template-columns: 52px minmax(0, 1fr) auto !important; column-gap: 10px !important; } .ldm-cart__item-image { width: 52px !important; height: 52px !important; } } /* ============================================================ NOTIFICATION — PRODUIT AJOUTÉ AU PANIER ============================================================ */ .ldm-cart-success { position: fixed; left: 50%; bottom: 32px; z-index: 999999; display: flex; align-items: center; gap: 10px; padding: 13px 20px; background: #ffffff; color: #111111; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); opacity: 0; transform: translate(-50%, 15px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .ldm-cart-success.is-visible { opacity: 1; transform: translate(-50%, 0); } .ldm-cart-success__icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #3f8f5f; color: #ffffff; font-size: 13px; font-weight: 700; } /* Notification au-dessus du popup produit */ .ldm-cart-success { z-index: 9999999 !important; bottom: auto; top: 32px; } /* ============================================================ NOTIFICATION — AU-DESSUS DU POPUP PRODUIT ============================================================ */ .ldm-product-detail { position: relative; } .ldm-cart-success { position: absolute !important; top: 24px !important; left: 50% !important; bottom: auto !important; z-index: 99999999 !important; transform: translate(-50%, -15px) !important; } .ldm-cart-success.is-visible { transform: translate(-50%, 0) !important; opacity: 1 !important; } .ldm-product-detail { position: relative; } .ldm-product-detail .ldm-cart-success { position: absolute !important; top: 24px !important; left: 50% !important; bottom: auto !important; z-index: 99999999 !important; } /* ============================================================ PRODUITS DU POPUP LUMINAIRES — CLIC PRIORITAIRE ============================================================ */ .ldm-popup__grid { position: relative; z-index: 10; } .ldm-popup-product { position: relative; z-index: 11; pointer-events: auto !important; } .ldm-popup-product__open { position: relative; z-index: 12; display: block; width: 100%; height: 100%; pointer-events: auto !important; cursor: none !important; } .ldm-popup-product__open * { pointer-events: none; } /* ============================================================ POPUP PRODUIT — MOBILE Cartes légèrement plus compactes ============================================================ */ @media (max-width: 767px) { .ldm-product-detail__window { width: min(92vw, 430px) !important; max-height: 90vh !important; } .ldm-product-detail__image { max-height: 42vh !important; } .ldm-product-detail__image img { max-height: 42vh !important; object-fit: contain !important; } .ldm-product-detail__content { padding: 18px 20px !important; } .ldm-product-detail__content h2 { font-size: 25px !important; line-height: 1.1 !important; } .ldm-product-detail__price { font-size: 16px !important; } .ldm-product-detail__quantity { transform: scale(.92); transform-origin: center; } .ldm-product-detail__add { padding: 12px 18px !important; font-size: 13px !important; } } /* ============================================================ POPUP CATÉGORIE — CARTES PRODUITS PLUS COMPACTES SUR MOBILE ============================================================ */ @media (max-width: 767px) { .ldm-popup__grid { gap: 14px !important; } .ldm-popup-product { min-height: 0 !important; } .ldm-popup-product__open { padding: 0 !important; } .ldm-popup-product__image { aspect-ratio: 1 / 1.08 !important; } .ldm-popup-product__image img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .ldm-popup-product__info { padding: 10px 8px 12px !important; } .ldm-popup-product__info h3 { font-size: 14px !important; line-height: 1.15 !important; margin-bottom: 5px !important; } .ldm-popup-product__price { font-size: 12px !important; } .ldm-popup-product__number { font-size: 10px !important; } } /* ============================================================ MOBILE — POPUP DE SÉLECTION DES PRODUITS Images plus compactes et légèrement recadrées Le popup produit détaillé reste intact. ============================================================ */ @media (max-width: 767px) { /* Cartes du popup catégorie */ .ldm-popup-product__image { height: 180px !important; aspect-ratio: auto !important; overflow: hidden !important; } /* Image de la carte : légèrement recadrée */ .ldm-popup-product__image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } /* Informations sous l'image */ .ldm-popup-product__info { padding: 9px 8px 11px !important; } .ldm-popup-product__info h3 { font-size: 13px !important; line-height: 1.15 !important; margin: 0 0 4px !important; } .ldm-popup-product__price { font-size: 12px !important; } /* ======================================================== POPUP DÉTAILLÉ DU PRODUIT L'image reste complète ======================================================== */ .ldm-product-detail__image { height: auto !important; max-height: none !important; overflow: visible !important; } .ldm-product-detail__image img { width: 100% !important; height: auto !important; max-height: 55vh !important; object-fit: contain !important; object-position: center !important; } } /* ============================================================ PANIER FLOTTANT — VISIBLE DANS LE POPUP CATÉGORIE ============================================================ */ /* * Le bouton panier reste au-dessus du popup de sélection * des 6 produits. */ .ldm-popup ~ [data-cart-open], .ldm-popup ~ .cart-button, .ldm-popup ~ .cart-toggle, .ldm-popup ~ .floating-cart, body.ldm-modal-open [data-cart-open], body.ldm-modal-open .cart-button, body.ldm-modal-open .cart-toggle, body.ldm-modal-open .floating-cart { z-index: 2147482000 !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* ============================================================ SÉCURITÉ — LE POPUP CATÉGORIE NE DOIT PAS LE MASQUER ============================================================ */ .ldm-popup { z-index: 2147480000 !important; } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { body.ldm-modal-open [data-cart-open], body.ldm-modal-open .cart-button, body.ldm-modal-open .cart-toggle, body.ldm-modal-open .floating-cart { z-index: 2147482000 !important; display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } } /* ============================================================ LDM — CURSEUR GLOBAL DANS TOUS LES POPUPS LUMINAIRES ============================================================ */ /* * On conserve le curseur principal du site. * Aucun nouveau curseur n'est créé. */ .ldm-popup, .ldm-popup *, .ldm-product-detail, .ldm-product-detail * { cursor: none !important; } /* * Le curseur global doit rester au-dessus des deux niveaux * de popup. */ [data-cursor-root], .cursor, .custom-cursor { z-index: 2147483647 !important; pointer-events: none !important; visibility: visible !important; } /* * Le fond des popups reste clair. * Le curseur principal peut donc appliquer son propre * changement de couleur selon le système déjà présent * sur le site. */ .ldm-popup__close, .ldm-product-detail__close, .ldm-popup-product__open, .ldm-product-detail__add, .ldm-product-detail__quantity button { cursor: none !important; } /* ============================================================ CURSEUR NOIR — POPUPS LUMINAIRES ============================================================ */ .ldm-popup, .ldm-product-detail { cursor: none !important; } /* Curseur principal au-dessus des popups */ body:has(.ldm-popup), body:has(.ldm-product-detail) { --ldm-popup-cursor-color: #000000; } /* * Curseur principal : noir dans les popups. * On cible les différentes versions utilisées par le site. */ body:has(.ldm-popup) [data-cursor-root], body:has(.ldm-popup) .cursor, body:has(.ldm-popup) .custom-cursor, body:has(.ldm-product-detail) [data-cursor-root], body:has(.ldm-product-detail) .cursor, body:has(.ldm-product-detail) .custom-cursor { z-index: 2147483647 !important; pointer-events: none !important; visibility: visible !important; opacity: 1 !important; color: #000 !important; border-color: #000 !important; } /* * Éléments du curseur qui utilisent un background. */ body:has(.ldm-popup) [data-cursor-root] *, body:has(.ldm-popup) .cursor *, body:has(.ldm-popup) .custom-cursor *, body:has(.ldm-product-detail) [data-cursor-root] *, body:has(.ldm-product-detail) .cursor *, body:has(.ldm-product-detail) .custom-cursor * { color: #000 !important; border-color: #000 !important; background-color: #000 !important; } /* Aucun curseur système dans les popups */ .ldm-popup *, .ldm-product-detail * { cursor: none !important; } /* ============================================================ LDM — EYEBROW POPUP LUMINAIRES EN VERT ============================================================ */ .ldm-popup .ldm-popup__eyebrow { color: #7f9b3a !important; } /* ============================================================ LDM — PANIER AU-DESSUS DES POPUPS LUMINAIRES ============================================================ */ /* * Le bouton flottant reste cliquable. */ [data-cart-open], .floating-cart, .cart-button, .cart-toggle { position: relative !important; z-index: 2147483646 !important; pointer-events: auto !important; } /* * Le DRAWER du panier doit passer au-dessus : * 1. popup catégorie * 2. popup produit */ [data-cart-drawer] { position: fixed !important; z-index: 2147483647 !important; pointer-events: auto !important; } /* * Le contenu interne du panier reste également au-dessus. */ [data-cart-drawer] *, [data-cart-drawer]::before, [data-cart-drawer]::after { pointer-events: auto; } /* * Les popups restent derrière le panier. */ .ldm-popup { z-index: 10000 !important; } .ldm-product-detail { z-index: 20000 !important; } /* * Les popups restent sous le système panier. */ .ldm-popup { z-index: 10000 !important; } .ldm-product-detail { z-index: 20000 !important; } /* * Le drawer panier passe au-dessus des popups, * sans modifier son fonctionnement JS. */ body .ldm-cart, body [data-cart-drawer] { z-index: 2147483647 !important; } /* ============================================================ LDM — BOUTON PANIER FLOTTANT ============================================================ */ /* * Le bouton est toujours visible. * On ne modifie PAS son comportement JavaScript. */ [data-cart-open] { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* * Variantes utilisées éventuellement par le thème. */ .cart-button, .cart-toggle, .floating-cart { visibility: visible !important; pointer-events: auto !important; } /* * Le bouton reste au-dessus des contenus de la page, * mais le drawer pourra ensuite passer au-dessus des popups. */ [data-cart-open] { z-index: 999999 !important; } /* ============================================================ POPUPS ============================================================ */ .ldm-popup { z-index: 10000 !important; } .ldm-product-detail { z-index: 20000 !important; } /* ============================================================ DRAWER PANIER ============================================================ */ [data-cart-drawer] { z-index: 2147483647 !important; } /* ============================================================ LDM — RESTAURATION FORCÉE DU BOUTON PANIER FLOTTANT ============================================================ */ /* * Le bouton panier doit toujours exister visuellement, * y compris lorsque les popups sont ouverts. * * !important est volontaire ici afin de neutraliser : * - display:none éventuel * - visibility:hidden * - opacity:0 * - les règles de modal */ [data-cart-open] { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; position: fixed !important; z-index: 2147483646 !important; } /* * Si le thème utilise une classe autour du bouton. */ .floating-cart, .cart-button, .cart-toggle { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* * Les popups restent derrière le bouton. */ .ldm-popup, .ldm-product-detail { z-index: 10000 !important; } /* * Le drawer du panier doit passer au-dessus de tout. */ [data-cart-drawer] { z-index: 2147483647 !important; } /* ============================================================ LDM — CURSEUR NOIR DANS LE PANNEAU PANIER ============================================================ */ /* * Le curseur global reste au-dessus du drawer panier. */ body.cart-is-open [data-cursor-root], body.cart-is-open .cursor, body.cart-is-open .custom-cursor { z-index: 2147483647 !important; visibility: visible !important; opacity: 1 !important; pointer-events: none !important; } /* * Curseur noir dans le panneau panier. */ body.cart-is-open [data-cursor-root], body.cart-is-open .cursor, body.cart-is-open .custom-cursor, body.cart-is-open [data-cursor-root] *, body.cart-is-open .cursor *, body.cart-is-open .custom-cursor * { color: #000000 !important; border-color: #000000 !important; } /* * Si le curseur est dessiné avec un background. */ body.cart-is-open [data-cursor-root]::before, body.cart-is-open [data-cursor-root]::after, body.cart-is-open .cursor::before, body.cart-is-open .cursor::after, body.cart-is-open .custom-cursor::before, body.cart-is-open .custom-cursor::after { border-color: #000000 !important; background-color: #000000 !important; } /* * Aucun curseur système dans le panier. */ body.cart-is-open [data-cart-drawer], body.cart-is-open [data-cart-drawer] * { cursor: none !important; } /* LDM CURSOR BLACK CART FINAL */ /* Curseur global noir lorsque le panneau panier est ouvert */ body.cart-is-open .cursor, body.cart-is-open .cursor.is-active, body.cart-is-open .cursor.is-image, body.cart-is-open .cursor.is-contrast, body.cart-is-open .cursor.is-contrast.is-active, body.cart-is-open [data-cursor-root], body.cart-is-open [data-cursor-root].is-active, body.cart-is-open .custom-cursor, body.cart-is-open .custom-cursor.is-active { border-color: #000 !important; background: #000 !important; box-shadow: 0 0 0 4px rgba(0,0,0,.10) !important; mix-blend-mode: normal !important; opacity: 1 !important; visibility: visible !important; } /* Le curseur reste visible au-dessus du panneau panier */ body.cart-is-open .cursor, body.cart-is-open [data-cursor-root], body.cart-is-open .custom-cursor { z-index: 2147483647 !important; pointer-events: none !important; } /* Même comportement quand le curseur passe sur un bouton */ body.cart-is-open .cursor.is-button, body.cart-is-open .cursor.is-cart, body.cart-is-open .cursor.is-button.is-cart { border-color: #000 !important; background: #000 !important; box-shadow: 0 0 0 5px rgba(0,0,0,.12) !important; } /* On masque le curseur système uniquement sur ordinateur */ @media (hover: hover) and (pointer: fine) { body.cart-is-open, body.cart-is-open *, body.cart-is-open button, body.cart-is-open a { cursor: none !important; } } /* LDM CART CURSOR DEFINITIVE FIX */ /* Le curseur global doit toujours être au-dessus du panier */ body.cart-is-open .cursor { display: block !important; position: fixed !important; z-index: 2147483647 !important; pointer-events: none !important; visibility: visible !important; opacity: 1 !important; /* Noir dans le panneau panier */ width: .82rem !important; height: .82rem !important; border: 1px solid #000 !important; border-radius: 50% !important; background: #000 !important; box-shadow: 0 0 0 4px rgba(0,0,0,.10) !important; mix-blend-mode: normal !important; } /* Même lorsque le curseur reçoit les classes du site */ body.cart-is-open .cursor.is-active, body.cart-is-open .cursor.is-cart, body.cart-is-open .cursor.is-contrast, body.cart-is-open .cursor.is-image { display: block !important; visibility: visible !important; opacity: 1 !important; border-color: #000 !important; background: #000 !important; box-shadow: 0 0 0 4px rgba(0,0,0,.10) !important; } /* Ne jamais laisser le panier passer devant le curseur */ body.cart-is-open .ldm-cart, body.cart-is-open [data-cart-drawer] { z-index: 100000 !important; } /* Le curseur reste au-dessus de tout le panneau */ body.cart-is-open .cursor { z-index: 2147483647 !important; } /* ========================================================= MOBILE — IMAGES PRODUITS CARRÉES ET COMPLÈTES ========================================================= */ @media (max-width: 768px) { /* Grille produits dans les popups de catégories */ .category-products, .products-grid, .luminaires-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Cadre carré */ .category-products .product-image, .products-grid .product-image, .luminaires-grid .product-image, .category-products .product-card-image, .products-grid .product-card-image, .luminaires-grid .product-card-image { aspect-ratio: 1 / 1 !important; width: 100% !important; height: auto !important; overflow: hidden !important; } /* Image entière, jamais coupée */ .category-products .product-image img, .products-grid .product-image img, .luminaires-grid .product-image img, .category-products .product-card-image img, .products-grid .product-card-image img, .luminaires-grid .product-card-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; display: block !important; } }