/* Visoriz — studio interactif et finitions */
:root{--vx-ink:#111a17;--vx-paper:#f6f5f0;--vx-gold:#d4aa7e}
html{scroll-padding-top:86px}
body{overflow-x:hidden}
.header{transition:box-shadow .25s,background .25s}
.header.is-scrolled{box-shadow:0 10px 35px rgba(12,24,18,.1)}
.hero{padding:92px 0 100px}
.hero-grid{gap:48px}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(3.45rem,6.1vw,6.8rem);line-height:1.06;letter-spacing:-.065em}
.hero-text{font-size:16px}
.hero-buttons .btn{min-height:52px;border-radius:6px}
.hero .showroom{min-height:510px}
.hero .screen.desktop{width:95%;margin-left:0;transform:rotate(-1.5deg);border:1px solid #e1e4df;box-shadow:0 35px 95px #0007}
.hero .screen.mobile{transform:rotate(4deg);right:-2%;bottom:0}
.hero .screen.desktop .screen-preview{min-height:240px}
.hero .showroom:after{content:"DESIGN • IMPACT • SIMPLICITÉ";position:absolute;top:4%;right:0;color:#c9b99e;letter-spacing:.24em;font-size:9px;z-index:2}
.hero-meta{border-top:1px solid #536058;padding-top:19px}
.section-head h2,.visual-intro h2{letter-spacing:-.065em}
.project{transition:transform .25s}
.project:hover{transform:translateY(-5px)}
.project-image{overflow:hidden}
.project-image img{transition:transform .6s cubic-bezier(.2,.75,.25,1)}
.project:hover .project-image img{transform:scale(1.055)}
.project-arrow{transition:transform .25s}
.project:hover .project-arrow{transform:rotate(45deg)}
.vx-studio{padding:108px 0;background:#eeeae2;color:var(--vx-ink);position:relative;overflow:hidden}
.vx-studio:before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,#ded3c5,transparent 70%);top:-210px;right:-100px;pointer-events:none}
.vx-studio .eyebrow{color:#896b4c}
.vx-studio-head{display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:42px;position:relative}
.vx-studio-head h2{font:400 clamp(2.8rem,5vw,5.4rem)/1.06 Georgia,serif;letter-spacing:-.065em;margin:14px 0 0}
.vx-studio-head p{max-width:345px;color:#58645d;margin:0;font-size:14px}
.vx-studio-grid{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);gap:26px;align-items:stretch;position:relative}
.vx-panel{background:#fff;border:1px solid #e4e0d7;border-radius:15px;padding:32px;box-shadow:0 12px 35px #1e24140b}
.vx-group{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid #e8e6e0}
.vx-group:last-of-type{margin-bottom:0;padding-bottom:0;border:0}
.vx-group-title{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:800;margin-bottom:14px}
.vx-group-title span{display:grid;place-items:center;width:27px;height:27px;background:#edf1e8;border-radius:50%;color:#48604f;font-size:12px}
.vx-options{display:flex;gap:9px;flex-wrap:wrap}
.vx-choice{appearance:none;border:1px solid #dadfd7;background:#fff;border-radius:7px;padding:10px 14px;color:#3c4841;font-size:12px;font-weight:700;min-height:41px;transition:background .18s,color .18s,border-color .18s,transform .18s}
.vx-choice:hover{border-color:#637b6c;transform:translateY(-1px)}
.vx-choice[aria-pressed=true]{background:#1e3329;color:#fff;border-color:#1e3329}
.vx-choice:focus-visible{outline:3px solid #4c68d9;outline-offset:2px}
.vx-estimate{margin-top:26px;padding:20px;border-radius:10px;background:#f3f5ef;display:flex;justify-content:space-between;align-items:center;gap:12px}
.vx-estimate small{display:block;color:#69746c;font-size:11px}
.vx-estimate strong{font-size:16px}
.vx-estimate .vx-price{font-size:30px;font-weight:800;white-space:nowrap;letter-spacing:-.055em}
.vx-panel>.btn{width:100%;margin-top:15px;min-height:52px;border-radius:7px}
.vx-panel-note{font-size:11px;color:#707b73;line-height:1.5;margin:13px 0 0}
.vx-preview-wrap{background:#19241f;border-radius:15px;padding:29px;display:flex;flex-direction:column;gap:17px;box-shadow:0 16px 44px #19231d24}
.vx-preview-top{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#d6e1d9;font-size:11px;letter-spacing:.08em}
.vx-preview-top b{color:#e5c7a5;font-weight:600}
.vx-browser{border:1px solid #c9c9c0;background:#fff;border-radius:11px;overflow:hidden;box-shadow:0 23px 42px #0003;flex:1;min-height:440px;display:flex;flex-direction:column}
.vx-browser-bar{height:38px;display:flex;align-items:center;gap:6px;padding:0 15px;background:#f4f4f1;border-bottom:1px solid #e3e4df}
.vx-browser-bar i{height:8px;width:8px;border-radius:50%;background:#d6d8d2}
.vx-browser-bar span{margin:auto;font-size:10px;color:#89928c}
.vx-site{--vx-theme:#536d58;--vx-txt:#293b2f;--vx-surface:#f9f7f2;--vx-serif:Georgia,serif;flex:1;display:flex;flex-direction:column;background:var(--vx-surface);transition:background .25s}
.vx-site.theme-bold{--vx-theme:#23272c;--vx-txt:#1f262b;--vx-surface:#f1f2f4;--vx-serif:Manrope,sans-serif}
.vx-site.theme-warm{--vx-theme:#a55d45;--vx-txt:#593d32;--vx-surface:#f8f0e6;--vx-serif:Georgia,serif}
.vx-site-nav{display:flex;justify-content:space-between;align-items:center;padding:18px 23px;gap:10px}
.vx-site-nav strong{font:700 17px var(--vx-serif);color:var(--vx-txt);letter-spacing:-.04em}
.vx-site-nav span{font-size:9px;color:#7c847d}
.vx-site-nav em{font-size:9px;font-style:normal;background:var(--vx-theme);color:#fff;padding:9px 11px;border-radius:3px}
.vx-site-hero{display:grid;grid-template-columns:.95fr 1.05fr;flex:1;min-height:320px}
.vx-site-copy{padding:30px 10px 34px 27px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.vx-site-copy small{color:var(--vx-theme);font-weight:800;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.vx-site-copy h3{font:400 clamp(1.65rem,3vw,3rem)/1.09 var(--vx-serif);color:var(--vx-txt);letter-spacing:-.06em;margin:13px 0}
.vx-site-copy p{font-size:11px;line-height:1.7;color:#727e74;margin:0 0 19px}
.vx-site-copy .vx-site-cta{font-size:10px;color:#fff;background:var(--vx-theme);padding:10px 13px;border-radius:3px}
.vx-site-photo{min-width:0;overflow:hidden}
.vx-site-photo img{width:100%;height:100%;object-fit:cover;transition:opacity .2s,transform .5s}
.vx-site-photo img.vx-fade{opacity:.45;transform:scale(1.035)}
.vx-site-footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #dddcd5;padding:12px 22px;font-size:9px;color:#69756b}
.vx-preview-actions{display:flex;align-items:center;justify-content:space-between;gap:15px}
.vx-preview-actions span{font-size:12px;color:#d6e0d7}
.vx-preview-actions a{font-size:12px;color:#f6dbb9;text-decoration:underline;text-underline-offset:4px;font-weight:700}
.vx-preview-disclaimer{font-size:10px;color:#aebdb0;line-height:1.5}
.vx-progress{position:fixed;top:0;left:0;width:0;height:3px;background:#d3a87b;z-index:100;pointer-events:none}
.vx-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.vx-reveal.is-visible{opacity:1;transform:none}
@media(max-width:950px){.vx-studio-grid{grid-template-columns:1fr}.vx-preview-wrap{order:-1}.vx-browser{min-height:390px}.vx-studio-head{display:block}.vx-studio-head p{margin-top:18px}.hero{padding:70px 0}}
@media(max-width:720px){.vx-studio{padding:70px 0}.vx-panel{padding:22px}.vx-preview-wrap{padding:16px}.vx-site-nav{padding:12px}.vx-site-nav span{display:none}.vx-site-hero{min-height:255px}.vx-site-copy{padding:17px 9px 20px 17px}.vx-site-copy h3{font-size:clamp(1.45rem,6vw,2.2rem)}.vx-site-copy p{font-size:10px}.vx-preview-top{font-size:10px}.vx-preview-actions{align-items:flex-start}.vx-preview-actions span{font-size:11px}.vx-studio-head h2{font-size:clamp(2.5rem,9vw,4rem)}}
@media(max-width:430px){.vx-site-hero{grid-template-columns:1.08fr .92fr}.vx-site-photo img{object-position:center}.vx-browser{min-height:325px}.vx-site-copy h3{font-size:1.5rem}.vx-site-nav em{display:none}.vx-site-footer{font-size:8px}.vx-options{gap:6px}.vx-choice{font-size:11px;padding:9px 10px}.vx-estimate .vx-price{font-size:25px}}
@media(prefers-reduced-motion:reduce){.vx-reveal{opacity:1;transform:none;transition:none}.vx-site-photo img{transition:none}}


/* Mobile-first polish: show a real project before the fold */
.vx-mobile-feature{display:none}
@media(max-width:740px){
 html{scroll-padding-top:64px}
 .header{background:#0f1915!important;border-bottom:1px solid #26342c!important}
 .header .brand{color:#faf7f0!important;letter-spacing:-.07em}
 .header .brand i{color:#d5a780!important}
 .header .burger{background:#25352c;color:#f6f5ef;border:1px solid #3c4d41;border-radius:9px;width:43px;height:43px}
 .header .mobile-nav{background:#13211a;border-color:#324238;box-shadow:0 14px 25px #0005}
 .header .mobile-nav a{color:#f7f7f0}
 .header .mobile-nav .btn{background:#ead9c6;color:#152119;border-color:#ead9c6}
 .hero{padding:27px 0 32px!important;background:linear-gradient(145deg,#14231b 0%,#08130e 100%)!important}
 .hero .hero-grid{display:block}
 .hero .hero-copy{max-width:none;padding:0}
 .hero .eyebrow{font-size:9px;letter-spacing:.115em;color:#cfbd9d}
 .hero h1{font-size:clamp(2.5rem,9.1vw,3.55rem)!important;line-height:1.06!important;letter-spacing:-.062em!important;margin:16px 0 21px!important;max-width:440px}
 .hero h1 .accent{display:block}
 .hero .hero-text{font-size:13px;line-height:1.65;color:#d9e0d8;max-width:460px;margin:17px 0 0}
 .hero .hero-buttons{margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:9px}
 .hero .hero-buttons .btn{padding:12px 8px;min-height:45px;font-size:11px;border-radius:7px;white-space:normal;text-align:center}
 .hero .hero-buttons .btn:first-child{background:#e7c5a6;color:#17241b;border-color:#e7c5a6}
 .hero .hero-buttons .btn.light{background:transparent;color:#f4f1eb;border-color:#68766b}
 .hero .hero-meta{display:none}
 .hero .showroom{display:none}
 .vx-mobile-feature{display:block}
 .vx-mobile-feature-link{display:block;position:relative;height:205px;overflow:hidden;border-radius:10px;background:#304336;border:1px solid #3c4e42}
 .vx-mobile-feature-link img{width:100%;height:100%;object-fit:cover;object-position:center 48%;transition:opacity .24s,transform .6s}
 .vx-mobile-feature-link img.vx-swapping{opacity:.4;transform:scale(1.03)}
 .vx-mobile-feature-link:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,16,11,.88),rgba(8,16,11,.05) 75%);pointer-events:none}
 .vx-mobile-feature-overlay{position:absolute;z-index:1;bottom:17px;left:18px;right:18px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;color:#fff}
 .vx-mobile-feature-overlay small{font-size:9px;font-weight:800;letter-spacing:.14em;color:#f2d0b3}
 .vx-mobile-feature-overlay strong{font:400 29px/1.13 Georgia,serif;letter-spacing:-.045em}
 .vx-mobile-feature-overlay>span{font-size:10px;font-weight:700;border-bottom:1px solid #e8d2bc;margin-top:6px}
 .vx-mobile-feature-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:11px}
 .vx-mobile-feature-caption{color:#bccbbf;font-size:10px;letter-spacing:.04em}
 .vx-mobile-feature-buttons{display:flex;align-items:center;gap:12px}
 .vx-mobile-feature-buttons button{border:1px solid #536659;background:#1c3024;color:#fff;border-radius:50%;height:31px;width:31px;display:grid;place-items:center;font-size:15px}
 .vx-mobile-feature-buttons button:focus-visible{outline:2px solid #edc7a4;outline-offset:3px}
 .vx-mobile-feature-buttons>span{font-size:10px;color:#d2dbd1;font-variant-numeric:tabular-nums}
 .visual-collection{padding-top:60px}
 .visual-intro h2{font-size:clamp(2.4rem,9vw,3.6rem)}
}
@media(max-width:370px){
 .hero h1{font-size:2.32rem!important}
 .vx-mobile-feature-link{height:180px}
 .hero .hero-buttons .btn{font-size:10px}
}