.hero-film{background:#0d0d0d}.hero-film:before,.hero-film:after{display:none}.film-frame{animation:filmShift 18s ease-in-out infinite;background-position:center;background-size:cover;inset:0;opacity:0;position:absolute;transform:scale(1.12)}.frame-a{animation-delay:0s;background-image:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.08)),url('assets/images/image38.jpeg');background-position:center 88%}.frame-b{animation-delay:6s;background-image:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.12)),url('assets/images/image8.jpeg')}.frame-c{animation-delay:12s;background-image:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.12)),url('assets/images/image44.jpeg')}@keyframes filmShift{0%,27%{opacity:0;transform:scale(1.12)}5%,23%{opacity:1}30%,100%{opacity:0;transform:scale(1)}}.hero-vignette{background:radial-gradient(circle at 72% 38%,transparent 0,rgba(0,0,0,.12) 35%,rgba(0,0,0,.66) 100%);inset:0;pointer-events:none;position:absolute}.hero-film-mark{bottom:38px;display:flex;flex-direction:column;gap:7px;position:absolute;right:7vw;z-index:2}.hero-film-mark span{font:600 12px var(--sans);letter-spacing:.26em}.hero-film-mark small{font-size:8px;letter-spacing:.2em;opacity:.75}.stone-reel{background:#0d0d0d;color:#f7f3ed;min-height:800px;overflow:hidden;padding:115px 0 45px;position:relative}.reel-heading{margin:0 auto;max-width:680px;text-align:center}.reel-heading h2{font:500 clamp(2.8rem,5vw,5.7rem)/.98 var(--serif);letter-spacing:-.05em;margin:0}.reel-heading>p:last-child{color:#aaa39a;font-size:14px;margin:25px auto 0;max-width:360px}.reel-stage{align-items:center;display:flex;gap:clamp(16px,3vw,54px);height:480px;justify-content:center;margin:25px auto 0;max-width:1420px;padding:20px 5vw;perspective:1500px}.reel-stone{animation:slabFloat 7s ease-in-out infinite;cursor:pointer;flex:0 0 clamp(120px,16vw,250px);height:365px;position:relative;transform:rotateY(-18deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .55s;will-change:transform}.reel-stone:nth-child(2){animation-delay:-1.2s}.reel-stone:nth-child(3){animation-delay:-2.4s}.reel-stone:nth-child(4){animation-delay:-3.6s}.reel-stone:before{background:#141414;content:"";height:100%;position:absolute;right:-15px;top:8px;transform:rotateY(90deg);transform-origin:left;width:15px}.reel-stone:after{background:rgba(255,255,255,.2);content:"";inset:0;mix-blend-mode:overlay;position:absolute}.reel-stone img{border-radius:18px;box-shadow:22px 30px 50px rgba(0,0,0,.55);height:100%;object-fit:cover;width:100%}.reel-stone span{font-size:10px;left:5px;letter-spacing:.14em;position:absolute;top:calc(100% + 20px)}.reel-stone h3{font:500 clamp(13px,1.35vw,20px) var(--serif);margin:0;position:absolute;right:0;top:calc(100% + 16px);white-space:nowrap}.reel-stone:hover{animation-play-state:paused;filter:brightness(1.17);transform:translateY(-28px) rotateY(0) rotateX(0) scale(1.1);z-index:2}@keyframes slabFloat{0%,100%{transform:translateY(0) rotateY(-18deg) rotateX(4deg)}50%{transform:translateY(-16px) rotateY(-10deg) rotateX(2deg)}}.reel-note{border-top:1px solid rgba(255,255,255,.18);color:#a8a39d;display:flex;font-size:9px;justify-content:space-between;letter-spacing:.16em;margin:40px 5vw 0;padding-top:18px}.hero-film .hero-inner{z-index:2}@media(max-width:780px){.hero-film-mark{bottom:25px;right:7vw}.reel-heading{padding-inline:7vw}.stone-reel{min-height:720px;padding-top:85px}.reel-stage{gap:18px;height:400px;justify-content:flex-start;overflow-x:auto;padding-left:9vw;padding-right:9vw;scroll-snap-type:x mandatory}.reel-stone{flex-basis:180px;height:290px;scroll-snap-align:center}.reel-note{font-size:8px;gap:20px}.reel-note span:last-child{display:none}}@media(prefers-reduced-motion:reduce){.film-frame,.reel-stone{animation:none}.frame-a{opacity:1;transform:none}}
/* 17/10/2026 — 1re image du héros : image38 (îlot de cuisine) remplace image22, photo du site d'un autre marbrier qui portait son
   filigrane « www.kamermarble.com » et des points de diaporama incrustés. Héros et dalles en WebP (assets/images/photos,
   _tools/optimize-photos.py) là où image-set() est compris ; les JPEG ci-dessus restent la valeur de secours. */
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
.frame-a{background-image:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.08)),image-set(url('assets/images/photos/image38-1078.webp') type("image/webp"),url('assets/images/image38.jpeg') type("image/jpeg"))}
.frame-b{background-image:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.12)),image-set(url('assets/images/photos/image8-1600.webp') type("image/webp"),url('assets/images/image8.jpeg') type("image/jpeg"))}
.frame-c{background-image:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.12)),image-set(url('assets/images/photos/image44-1280.webp') type("image/webp"),url('assets/images/image44.jpeg') type("image/jpeg"))}
.slab.one{background-image:image-set(url('assets/images/photos/image13-960.webp') type("image/webp"),url('assets/images/image13.jpeg') type("image/jpeg"))}
.slab.two{background-image:image-set(url('assets/images/photos/image34-960.webp') type("image/webp"),url('assets/images/image34.jpeg') type("image/jpeg"))}
}