/* SF Logements — page /logement (fiche dynamique) — CSS Slater ⚠️ RÈGLE : le style vit dans le DESIGNER (classes jsw-*). Ce fichier ne garde QUE ce que l'API/Designer ne sait pas exprimer : sélecteurs descendants sur classes héritées V1, ::before/::after, :has(), -webkit-line-clamp/mask, env(safe-area), media queries fines. */ .jsw-fiche-root{font-family:"Objectivity","Helvetica Neue",Arial,sans-serif;color:#14161C} .jsw-fiche-root *{box-sizing:border-box} .jsw-fiche-root img{max-width:100%} /* fil d'ariane */ .jsw-crumb a{color:#002474;text-decoration:none;font-weight:600} .jsw-crumb a:hover{opacity:.8} /* sélecteur de médias */ .jsw-mtabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap} .jsw-mtab{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #E4E5E9;border-radius:300px;padding:8px 16px;font-size:14px;font-weight:600;color:#464851;cursor:pointer} .jsw-mtab.jsw-active{background:#002474;color:#fff;border-color:#002474} [data-jsw="tour-url"]{display:none} /* galerie mosaïque */ .jsw-gallery{display:block} .jsw-gallery.jsw-gal-hide{display:none} .jsw-gallery > .image-wrapper{width:100%;border-radius:16px;overflow:hidden;height:520px;max-height:none;min-height:0} .jsw-gallery .property-gallery-wrapper{display:grid !important;grid-template-columns:1.5fr 1fr;gap:8px;width:100%;height:520px} .jsw-gallery .property-gallery-wrapper > .lightbox-link{grid-column:1;grid-row:1;height:520px;position:relative} .jsw-gallery .property-gallery-wrapper > .lightbox-link > div{width:100%;height:100%} /* max-height:450px heritee de .image.cover-image._200px---mbp : bat les 3 classes */ .jsw-gallery .property-gallery-wrapper > .lightbox-link img{width:100%;height:100%;max-height:none;object-fit:cover} .jsw-gallery .property-gallery-wrapper > .collection-list-wrapper-2.mobile-hidden{grid-column:2;grid-row:1;height:520px;max-height:none} .jsw-gallery .collection-list-wrapper-2.mobile-hidden .w-dyn-list, .jsw-gallery .collection-list-wrapper-2.mobile-hidden > div{height:100%} .jsw-gallery .collection-list-wrapper-2.mobile-hidden .w-dyn-items{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;height:100%;margin:0} .jsw-gallery .collection-list-wrapper-2.mobile-hidden .w-dyn-item{overflow:hidden;border-radius:0;min-height:0} .jsw-gallery .collection-list-wrapper-2.mobile-hidden .image-wrapper{height:100%;min-height:0} .jsw-gallery .collection-list-wrapper-2.mobile-hidden img{width:100%;height:100%;max-height:none;object-fit:cover} .jsw-gallery .property-gallery-wrapper{position:relative} .jsw-gal-all{position:absolute;right:16px;bottom:16px;z-index:6;padding:9px 15px;border:1px solid rgba(20,22,28,.12);border-radius:300px;background:#fff;color:#14161C;font-size:13px;font-weight:500;cursor:pointer;box-shadow:0 2px 8px rgba(20,22,28,.14);transition:background .18s ease} .jsw-gal-all:hover{background:#FAFAFB} .jsw-gallery .property-gallery-wrapper > .no-photo{display:none} .jsw-gallery .property-gallery-wrapper > .div-block-13{display:none} /* hover sobre : la vignette s'eclaircit, elle ne grossit pas (transition:all heritee) */ .jsw-gallery img{cursor:zoom-in;transition:opacity .2s ease} .jsw-gallery .lightbox-link:hover img, .jsw-gallery .w-dyn-item:hover img{opacity:.88;transform:none} /* panneau vidéo 9:16 + photos à droite */ .jsw-vpanel{display:none;grid-template-columns:293px 1fr;gap:8px;height:520px} .jsw-vpanel.jsw-show{display:grid} .jsw-vstage{position:relative;height:520px;width:293px;border-radius:16px;overflow:hidden;background:#0a0c12;margin:0} /* le wrapper Webflow force un padding-top ratio : on le neutralise */ .jsw-vstage .video-wrapper,.jsw-vstage .w-video{width:100%;height:100%;padding:0 !important;position:static} .jsw-vstage iframe,.jsw-vstage video{width:100%;height:100%;border:0;position:absolute;inset:0} .jsw-vstage img{width:100%;height:100%;object-fit:cover} /* façade vidéo : poster cover 9:16 + play, l'iframe YouTube ne charge qu'au clic */ .jsw-vfacade{position:absolute;inset:0;padding:0;border:0;background:#0a0c12;cursor:pointer;display:block;width:100%;height:100%} .jsw-vposter{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease} .jsw-vfacade:hover .jsw-vposter{opacity:.9} .jsw-vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(10,12,18,.55);backdrop-filter:blur(2px);box-shadow:0 2px 12px rgba(0,0,0,.35);transition:background .18s ease,transform .18s ease} .jsw-vplay::before{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff} .jsw-vfacade:hover .jsw-vplay{background:#002474;transform:translate(-50%,-50%) scale(1.06)} .jsw-vfacade:focus-visible{outline:2px solid #002474;outline-offset:2px} /* mosaïque décorative à droite de la vidéo (remplit l'espace desktop, non cliquable) */ .jsw-vside{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:8px;height:520px;min-height:0} .jsw-vthumb-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;min-height:0} /* 2 colonnes (jsw-col-side : sticky/top dans le Designer) */ .jsw-layout{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;padding:32px 0 56px} .jsw-col-main{min-width:0} /* bandeau identité */ .jsw-identity{padding-bottom:26px;border-bottom:1px solid #E4E5E9;margin-bottom:28px} .jsw-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#1B7A4B;background:rgba(27,122,75,.08);padding:5px 12px;border-radius:300px;margin-bottom:14px} .jsw-city{font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px} /* adresse : rue sur une ligne, région dessous plus pâle (distincte de la rue) */ .jsw-street{display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:15.5px;color:#464851;margin-bottom:22px} .jsw-street-sep{display:none} .jsw-street-region{font-size:13px;color:#8A8D96;font-weight:500;letter-spacing:.02em} .jsw-facts{display:flex;flex-wrap:wrap;align-items:center;margin-top:4px} .jsw-unit-id{margin-top:20px} /* faits identité : icône + valeur seule, aérés + séparateur point (labels masqués) */ .jsw-facts-row{gap:0;align-items:center} .jsw-facts-row .listing-icon{width:18px;height:18px} .jsw-facts-row .listing-info{font-size:15px;font-weight:600;color:#14161C} .jsw-facts-row .jsw-fact:nth-child(2) .listing-info::after{content:" pi\00b2"} .jsw-facts-row .jsw-fact{position:relative;padding:0 18px} .jsw-facts-row .jsw-fact.jsw-fact-first{padding-left:0} .jsw-facts-row .jsw-fact:not(.jsw-fact-first):not(.w-condition-invisible)::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:#C4C6CD} /* sections */ .jsw-fsec{padding:30px 0;border-bottom:1px solid #E4E5E9} .jsw-fsec:last-child{border-bottom:0} .jsw-fsec h2,.jsw-fsec-h{font-size:21px;font-weight:600;letter-spacing:-.01em;margin-bottom:18px} /* faits saillants */ .jsw-saillants{display:flex;flex-wrap:wrap;gap:10px} .jsw-saillant{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #E4E5E9;border-radius:300px;padding:9px 16px 9px 10px;font-size:14px;font-weight:500;box-shadow:0 1px 2px rgba(20,22,28,.04)} .jsw-saillant img{width:26px;height:26px;object-fit:contain} /* description */ .jsw-desc{font-size:15.5px;color:#464851;line-height:1.7} .jsw-desc p{margin-bottom:14px} .jsw-desc.jsw-clamped{max-height:180px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);mask-image:linear-gradient(180deg,#000 58%,transparent)} .jsw-see-more{margin-top:14px;background:none;border:0;color:#002474;font-weight:600;font-size:14.5px;cursor:pointer;padding:0} /* commodités en lignes */ .jsw-amenities-list{display:flex !important;flex-direction:column;gap:0;grid-template-columns:none} .jsw-amenities-list .amenity-card{display:flex;align-items:center;gap:12px;background:transparent;border:0;box-shadow:none;padding:13px 0;border-bottom:1px solid #E4E5E9;border-radius:0;width:100%;margin:0} .jsw-amenities-list .amenity-card.w-condition-invisible{display:none} .jsw-amenities-list .amenity-image{width:26px;height:26px;object-fit:contain;flex:none;margin:0} .jsw-amenities-list .amenity-card > div:last-child{font-size:15px;color:#14161C;font-weight:500} /* localisation */ .jsw-map-zone{border-radius:12px;overflow:hidden;border:1px solid #E4E5E9;position:relative;height:340px} .jsw-map-zone iframe{width:100%;height:100%;border:0} /* carte contact sticky */ .jsw-contact-card{background:#fff;border:1px solid #E4E5E9;border-radius:16px;box-shadow:0 4px 24px rgba(20,22,28,.06);overflow:hidden} .jsw-contact-card .sidebar-v1---card{border:0;box-shadow:none;background:transparent;padding:26px 24px 0;border-radius:0;margin:0} .jsw-contact-card .small-disclaimer{font-size:12.5px;color:#6E717C;margin-bottom:4px} .jsw-contact-card .listing-price{display:flex;align-items:baseline;gap:6px;margin:0} .jsw-contact-card .listing-price .display-8{font-size:32px;font-weight:700;color:#002474;letter-spacing:-.01em;line-height:1.1} .jsw-contact-card .listing-price .display-4{font-size:15px;color:#8A8D96;font-weight:500} .jsw-contact-card .listing-price---currency---page-v1, .jsw-contact-card .listing-price .text-neutral-light{font-size:15px;color:#8A8D96;font-weight:500} .jsw-contact-card .listing-price + .listing-price .display-8{color:#B4380F} /* prix vide (pas de promo) et bloc catégorie "Property" : masqués */ .jsw-contact-card .listing-price:has(.display-8.w-dyn-bind-empty){display:none} .jsw-contact-card .mg-top-extra-small{display:none} /* note promo */ .jsw-contact-card [class*="single-listing-margin"]{margin-top:14px} .jsw-contact-card [class*="single-listing-margin"] h4{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#B4380F;margin-bottom:2px} .jsw-contact-card [class*="single-listing-margin"] .paragraph-3{font-size:13.5px;color:#B4380F;line-height:1.4} /* actions : plus d'air au-dessus */ .jsw-cc-actions{padding:22px 24px 24px} .jsw-fbtn-primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:300px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;border:1px solid transparent;background:#002474;color:#fff;padding:15px} .jsw-fbtn-primary:hover{background:#001d5e} .jsw-fbtn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:300px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;background:#fff;color:#14161C;border:1px solid #E4E5E9;padding:13px;margin-top:10px} .jsw-fbtn-ghost:hover{border-color:#8A8D96} /* bloc confiance */ .jsw-cc-trust{background:#FAFAFB;border-top:1px solid #E4E5E9;padding:14px 24px;font-size:13px;color:#6E717C;display:flex;align-items:center;gap:8px;line-height:1.4} .jsw-cc-trust svg{color:#002474;flex:none} /* section « Intéressé » (classes jsw-interesse-* dans le Designer) */ #form-interesse{scroll-margin-top:124px} /* padding + filets de .jsw-interesse : dans le DESIGNER */ .jsw-interesse-card{background:#fff;border:1px solid #E4E5E9;border-radius:16px;box-shadow:0 1px 2px rgba(20,22,28,.04);overflow:hidden;display:grid;grid-template-columns:1fr 1fr} .jsw-interesse-intro{padding:40px;background:#002474;color:#fff;display:flex;flex-direction:column;justify-content:center} /* padding du formulaire + de l'intro : dans le DESIGNER (base + breakpoint medium) */ /* bouton Envoyer : le texte prenait 89% de la pilule, la fleche etait ecrasee. Descendants de classes heritees -> reste ici. */ /* le parent etait en space-between : le texte collait a gauche, la fleche a droite. La fleche sort du flux -> le texte se centre dans la pilule a toute largeur. */ .jsw-interesse-form .primary-button{height:56px;position:relative;justify-content:center} .jsw-interesse-form .inside-input-button{flex:0 1 auto;width:auto;text-align:center;padding-left:0;padding-right:0} .jsw-interesse-form .button-icon-right{position:absolute;right:14px;top:50%;transform:translateY(-50%)} /* ---------- Plus de propriétés : la carte est en classes jsw-card* (Designer) ---------- Ne restent ici que la grille de la liste CMS, le suffixe pi² et le clamp de la note promo : inexprimables dans le Designer. */ /* promo : la condition Designer vit sur /proprietes-v2 mais l'API ne sait pas la poser. Equivalent exact : Promotion Price vide (w-dyn-bind-empty) = pas de promo. */ [data-jsw="more"] .jsw-card-price:has(.jsw-price-amt-promo .w-dyn-bind-empty) .jsw-price-promo{display:none} [data-jsw="more"] .jsw-card-price:not(:has(.jsw-price-amt-promo .w-dyn-bind-empty)) .jsw-price-main{display:none} /* le bloc du prix barre est lie : le $ ne peut pas y etre un enfant */ [data-jsw="more"] .jsw-price-was:not(.w-dyn-bind-empty)::after{content:"$"} /* align-items:baseline sur des tailles melangees (21px / 12,5px) donne 3 lignes de base distinctes : le $ tombe 17px trop bas. Aligner en bas les recolle. */ [data-jsw="more"] .jsw-price-main, [data-jsw="more"] .jsw-price-amt-promo, [data-jsw="more"] .jsw-price-promo, [data-jsw="more"] .jsw-card-price{align-items:flex-end} [data-jsw="more"] .jsw-price-main > *, [data-jsw="more"] .jsw-price-amt-promo > *{line-height:1.15} /* region sur sa propre ligne, 11px capitales : classe jsw-card-region + jsw-card-sub dans le DESIGNER (appliquees sur la fiche ET /proprietes-v2) */ [data-jsw="more"] [data-jsw="card-region"]::before{content:none} [data-jsw="more"] .cms_list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} [data-jsw="more"] .cms_list-item{width:100%;height:auto} [data-jsw="more"] .jsw-fact:first-child .jsw-fact-num::after{content:" pi\00b2"} /* note promo : réserve TOUJOURS 2 lignes (pleine, courte ou VIDE) → ville/rue/région à la même hauteur sur toutes les cartes, comme sur /proprietes-v2 */ [data-jsw="more"] .jsw-price-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:2.7em;line-height:1.35} [data-jsw="more"] .jsw-price-note.w-dyn-bind-empty{display:-webkit-box !important} /* bouton « Toutes les propriétés » : déplacé sous la dernière carte par JS, en vrai bouton */ [data-jsw="more"] .jsw-all-wrap{display:flex;justify-content:flex-start;width:100%;margin-top:28px} [data-jsw="more"] .jsw-all-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:300px;background:#002474;color:#fff;font-size:15px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:background .18s ease} [data-jsw="more"] .jsw-all-btn:hover{background:#001d5e} /* groupes de caractéristiques (créés par JS) */ .jsw-feat-group:last-child{margin-bottom:0} .jsw-feat-list .amenity-card:last-child{border-bottom:0} /* barre d'action mobile (créée par JS) */ .jsw-mobile-bar .jsw-mb-price b{display:block} .jsw-mobile-bar .jsw-mb-price span{font-size:12px;color:#6E717C} .jsw-mobile-bar .jsw-fbtn-primary{flex:1;padding:14px 18px;margin:0;white-space:nowrap;font-size:14.5px} /* barre mobile : safe-area seulement (le reste est dans le Designer) */ .jsw-mobile-bar{padding-bottom:calc(12px + env(safe-area-inset-bottom))} /* localisation : la carte Mapbox impose ses styles au conteneur */ .jsw-locmap .mapboxgl-canvas{border-radius:16px} .jsw-locmap .mapboxgl-ctrl-bottom-left{display:none} /* accessibilité */ .jsw-crumb a{display:inline-flex;align-items:center;min-height:32px} .jsw-interesse .w-button{min-height:44px} .jsw-fiche-root a:focus-visible,.jsw-mtab:focus-visible,.jsw-see-more:focus-visible,.jsw-lb button:focus-visible{outline:2px solid #002474;outline-offset:2px} @media (prefers-reduced-motion: reduce){ [data-jsw="more"] .jsw-card{transition:none} [data-jsw="more"] .jsw-card:hover{transform:none} } /* lightbox */ /* la navbar du site est en z-index 999999 : l'overlay doit passer AU-DESSUS, sinon la croix de fermeture se retrouve dessous et devient incliquable */ .jsw-lb{position:fixed;inset:0;z-index:1000000;background:rgba(10,12,18,.94);display:none;flex-direction:column;align-items:center;justify-content:center;padding:40px} .jsw-lb.jsw-open{display:flex} /* ceinture + bretelles : la navbar et la barre mobile sont retirees pendant le lightbox */ body.jsw-lb-on .navigation, body.jsw-lb-on .jsw-mobile-bar{display:none !important} .jsw-lb-img{max-width:90%;max-height:80vh;border-radius:8px;object-fit:contain} .jsw-lb-close{position:absolute;top:24px;right:28px;background:none;border:0;color:#fff;font-size:30px;cursor:pointer;line-height:1} .jsw-lb-count{position:absolute;top:28px;left:28px;color:#fff;font-size:14px;opacity:.85} .jsw-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:0;color:#fff;width:48px;height:48px;border-radius:50%;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center} .jsw-lb-prev{left:24px}.jsw-lb-next{right:24px} /* bande de vignettes sous la photo */ .jsw-lb-img{max-height:70vh} .jsw-lb-strip{display:flex;gap:8px;margin-top:18px;max-width:min(90%,900px);overflow-x:auto;padding:4px;scrollbar-width:thin} .jsw-lb-thumb{flex:0 0 auto;width:84px;height:60px;padding:0;border:0;border-radius:6px;overflow:hidden;cursor:pointer;background:none;opacity:.5;transition:opacity .18s ease,outline-color .18s ease;outline:2px solid transparent} .jsw-lb-thumb img{width:100%;height:100%;object-fit:cover;display:block} .jsw-lb-thumb:hover{opacity:.85} .jsw-lb-thumb.jsw-active{opacity:1;outline-color:#fff} /* responsive */ @media (max-width:991px){ .jsw-layout{grid-template-columns:1fr;gap:0;padding-bottom:40px} [data-jsw="more"] .jsw-all-wrap{justify-content:center} .jsw-gallery > .image-wrapper{height:auto} .jsw-gallery .property-gallery-wrapper{grid-template-columns:1fr;height:auto} .jsw-gallery .property-gallery-wrapper > .lightbox-link{height:300px} .jsw-gallery .property-gallery-wrapper > .collection-list-wrapper-2.mobile-hidden{display:none} .jsw-vpanel.jsw-show{grid-template-columns:1fr;height:auto;justify-items:center} .jsw-vstage{height:auto;width:100%;max-width:293px;aspect-ratio:9/16} .jsw-vside{grid-template-rows:auto;grid-auto-rows:1fr;height:auto;width:100%;max-width:293px} .jsw-vthumb{aspect-ratio:4/3} /* lightbox mobile : plein ecran, swipe, pas de fleches (standard Centris/Airbnb). La photo n'occupait que 22% de la hauteur (padding 40 + max-width 90%). */ .jsw-lb{padding:0;justify-content:flex-start} .jsw-lb-img{max-width:100%;max-height:none;width:100%;height:calc(100dvh - 168px); margin-top:56px;border-radius:0;object-fit:contain} .jsw-lb-nav{display:none} .jsw-lb-close{top:14px;right:16px;width:40px;height:40px;display:flex;align-items:center; justify-content:center;background:rgba(255,255,255,.14);border-radius:50%;font-size:24px} .jsw-lb-count{top:24px;left:20px;font-size:15px} .jsw-lb-strip{margin-top:0;position:absolute;bottom:calc(16px + env(safe-area-inset-bottom)); left:0;right:0;max-width:100%;padding:0 16px;gap:6px} .jsw-lb-thumb{width:56px;height:42px} .jsw-vstage{height:auto;width:100%;max-width:340px;aspect-ratio:9/16} .jsw-city{font-size:28px} .jsw-interesse-card{grid-template-columns:1fr} /* paddings intro/formulaire/sections/interesse : dans le DESIGNER (breakpoint medium) */ [data-jsw="more"] .cms_list{grid-template-columns:1fr 1fr;gap:14px} body.jsw-fiche-page{padding-bottom:88px} /* « Plus de proprietes » : padding en double (19px section + 16px conteneur) -> les cartes tombaient a 35px alors que la page est a 19px */ /* padding de la section more : classe jsw-more-sec dans le DESIGNER */ /* aligner sur les autres sections (19px, pas les 16px du conteneur herite) */ [data-jsw="more"] > .container-default{padding-left:19px;padding-right:19px} [data-jsw="more"] .title-left---content-right{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px} .jsw-interesse-form .primary-button{height:52px} } @media (max-width:560px){ [data-jsw="more"] .cms_list{grid-template-columns:1fr} }