/* ==========================================================
   IMMO VITRINE — feuille de style (reproduction fidèle de la V27)
   Couleurs : navy #0F1B2D · or #B8935A · or foncé #7A5C2E · crème #F7F3EC · crème foncé #EFE8DB
   Polices  : Playfair Display (titres) · Hanken Grotesk (texte), auto-hébergées
   Breakpoints : 860 px (menu) · 600 px (états mobiles de la V27, bloc .m)
   ========================================================== */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/playfair-display-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/playfair-display-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/playfair-display-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/playfair-display-latin-500-italic.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url('/assets/fonts/playfair-display-latin-600-italic.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2')}

:root{--navy:#0F1B2D;--gold:#B8935A;--gold-dark:#7A5C2E;--cream:#F7F3EC;--cream-dark:#EFE8DB;--text-2:#4A5565;--text-on-navy:#C9D0DA}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#F7F3EC;color:#0F1B2D;font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,dl,figure{margin:0}
img,video{max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
.page{width:100%;overflow-x:clip}
.serif{font-family:'Playfair Display',Georgia,serif}
h1,h2{text-wrap:balance}
[id]{scroll-margin-top:84px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#B8935A;color:#0F1B2D;padding:12px 18px;font-weight:700}
.skip:focus{left:8px}
:focus-visible{outline:2px solid #B8935A;outline-offset:2px}
main:focus{outline:none}
/* composants */
.btn-gold{transition:transform .25s ease,background .25s ease}
.btn-gold:hover{background:#c9a56c;transform:translateY(-2px)}
.btn-line{transition:background .25s ease,border-color .25s ease}
.btn-line:hover{background:rgba(247,243,236,.08);border-color:#B8935A}
body.biens .btn-line:hover{background:rgba(15,27,45,.06)}
.navlink{position:relative;padding:6px 0}
.navlink:after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:#B8935A;transition:width .3s ease}
.navlink:hover:after{width:100%}
.svc{transition:padding-left .35s ease,background .35s ease}
.svc:hover{padding-left:20px;background:rgba(15,27,45,.035)}
.lift{transition:transform .35s ease,box-shadow .35s ease}
.lift:hover{transform:translateY(-6px);box-shadow:0 24px 48px -24px rgba(15,27,45,.35)}
.card{transition:transform .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 28px 52px -26px rgba(15,27,45,.45)}
.card .zoom{transition:transform .8s ease}
.card:hover .zoom{transform:scale(1.05)}
.ph{background-color:#16263d;background-image:linear-gradient(rgba(184,147,90,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(184,147,90,.13) 1px,transparent 1px);background-size:36px 36px}
.field{width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border:1px solid rgba(15,27,45,.25);background:#fff;font:inherit;font-size:16px;color:#0F1B2D;border-radius:2px}
.field:focus{outline:2px solid #B8935A;outline-offset:1px}
.tap{transition:transform .2s ease,background .2s ease}
.tap:active{transform:scale(.98)}
.snap{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.snap::-webkit-scrollbar{display:none}
.snap>*{scroll-snap-align:start;flex:0 0 auto}
a[aria-disabled="true"]{cursor:default}
/* navigation */
.navlinks{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;box-sizing:border-box;display:flex;align-items:center;padding:0 16px;border:1px solid rgba(184,147,90,.6);color:#F7F3EC;font-weight:600;font-size:15px}
.mnav summary::-webkit-details-marker{display:none}
.mnavp{position:absolute;right:0;top:calc(100% + 12px);width:min(300px,calc(100vw - 40px));background:#0F1B2D;border:1px solid rgba(184,147,90,.5);padding:6px 20px 20px;display:flex;flex-direction:column;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.mnavp a{padding:16px 0;border-bottom:1px solid rgba(184,147,90,.2);font-size:17px;color:#F7F3EC}
.mnavp a.mcta{margin-top:12px;border:0;min-height:52px;display:flex;align-items:center;justify-content:center;background:#B8935A;color:#0F1B2D;font-weight:700;font-size:16px;padding:0}
/* comparateur avant / après */
.ba .p1{display:none}
.ba[data-piece="1"] .p0{display:none}
.ba[data-piece="1"] .p1{display:block}
.ba:focus-within{outline:2px solid #B8935A;outline-offset:3px}
.ba-range{-webkit-appearance:none;appearance:none;background:transparent}
/* vidéo : états d'affichage */
.d{display:block}
.m{display:none}
/* animations (scroll-driven, progressive) */
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:translateY(40px)}to{transform:translateY(-40px)}}
@keyframes drift30{from{transform:translateY(30px)}to{transform:translateY(-30px)}}
@keyframes navpad{from{padding-top:22px;padding-bottom:22px}to{padding-top:12px;padding-bottom:12px}}
@supports (animation-timeline:view()){
.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
.par{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
body.vitrines .par{animation-name:drift30}
}
@supports (animation-timeline:scroll()){
.nav{animation:navpad linear both;animation-timeline:scroll(root);animation-range:0 220px}
}
@media (max-width:860px){.navlinks,.hcta{display:none!important}.mnav{display:block}}
@media (max-width:600px){
.par{animation:none!important}
body.home .hsm{display:none!important}
.vids{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px!important;padding-bottom:12px}
.vids>*{flex:0 0 190px!important;scroll-snap-align:center}
}
/* ---- états mobiles de l'Accueil (écran « Accueil — mobile 390 » de la V27) ---- */
@media (max-width:600px){
body.home .d{display:none}
body.home .m{display:block}
body.home .nav{animation:none!important;padding:12px 20px!important}
body.home .nav .serif{font-size:20px!important}
body.home .nav svg{width:30px;height:30px}
body.home .ph{background-size:30px 30px}
body.home .field{min-height:52px;padding:14px}
.s-hero{background:#0F1B2D!important;color:#F7F3EC!important;padding:40px 20px 36px!important}
.s-avant-apres{padding:64px 20px!important;background:#F7F3EC!important}
.s-video{background:#0F1B2D!important;color:#F7F3EC!important;padding:64px 0 56px!important;overflow:hidden!important}
.s-services{padding:64px 20px!important;background:#F7F3EC!important}
.s-transparence{background:#0F1B2D!important;color:#F7F3EC!important;padding:72px 20px!important}
.s-confiance{background:#F7F3EC!important;padding:64px 20px!important}
.s-tarifs{background:#EFE8DB!important;padding:64px 20px!important}
.s-processus{background:#0F1B2D!important;color:#F7F3EC!important;padding:64px 20px!important}
.s-contact{background:#F7F3EC!important;padding:64px 20px!important}
.s-foot{background:#0F1B2D!important;color:#C9D0DA!important;padding:44px 20px 40px!important}
}
@supports (animation-timeline:view()){@media (max-width:600px){
@keyframes rise20{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
body.home .rv{animation-name:rise20;animation-range:entry 0% entry 40%}
}}
@media (prefers-reduced-motion:reduce){
.rv,.par,.nav{animation:none!important}
.btn-gold,.btn-line,.lift,.svc,.card,.card .zoom,.tap,.navlink:after{transition:none}
}

/* ===== Thème du site EXEMPLE (identité distincte d'Immo Vitrine) ===== */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/manrope-latin-800-normal.woff2') format('woff2')}
body.exemple{background:#fff;color:#141414;font-family:'Manrope',system-ui,sans-serif}
body.exemple .serif{font-family:'Manrope',system-ui,sans-serif;font-weight:600!important;letter-spacing:-.03em}
body.exemple .serif span,body.exemple h1 span,body.exemple h2 span{font-style:normal!important}
body.exemple .btn-gold:hover{background:#2a2a2a;color:#fff}
body.exemple .exhero .btn-gold:hover{background:#E8DFD2;color:#141414}
body.exemple .btn-line:hover{background:rgba(0,0,0,.05);border-color:#141414}
body.exemple .exhero .btn-line:hover{background:rgba(255,255,255,.12)}
body.exemple :focus-visible{outline-color:#141414}
body.exemple .field{border-radius:12px;border-color:rgba(0,0,0,.18)}
body.exemple .field:focus{outline-color:#141414}
body.exemple .card{border-radius:20px;overflow:hidden;border-color:transparent!important;box-shadow:0 14px 40px -24px rgba(0,0,0,.35)}
body.exemple .card:hover{box-shadow:0 30px 56px -28px rgba(0,0,0,.45)}
body.exemple [style*="aspect-ratio:4/5"]{border-radius:24px}
body.exemple .lift{border-radius:18px}
body.exemple li[style*="border:1px solid"]{border-radius:999px}
body.exemple .skip{background:#141414;color:#fff}
body.exemple .navlink:after{background:#141414}
body.exemple .mnav summary{border-color:rgba(0,0,0,.25);color:#141414;border-radius:999px}
body.exemple .mnavp{background:#fff;border-color:rgba(0,0,0,.1);border-radius:16px}
body.exemple .mnavp a{color:#141414;border-bottom-color:rgba(0,0,0,.08)}
body.exemple .mnavp a.mcta{background:#141414;color:#fff;border-radius:999px}
body.exemple .card a,body.exemple main button,body.exemple form button{border-radius:999px}
@media(max-width:700px){body.exemple .exnote{display:none}}
body.exemple [id]{scroll-margin-top:140px}
/* Plein écran : afficher la vidéo entière (pas de recadrage) */
video:fullscreen{object-fit:contain!important;background:#000!important}
video:-webkit-full-screen{object-fit:contain!important;background:#000!important}