/* ── the property page, second cut: gallery stage + thumbnail carousel, facts strip, highlights, full gallery, drive times, services, sticky agent ── */
.pv{padding-top:clamp(84px,9vw,104px)}
.pv__in{gap:clamp(26px,3.6vw,52px)}
/* the stage */
.pvh{display:grid;gap:12px}
.pvh__stage{position:relative;height:clamp(380px,56vw,760px);border-radius:var(--r);overflow:hidden;background:var(--ice);isolation:isolate}
.pvh__stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.pvh__zoom{position:absolute;inset:0;border:0;background:none;cursor:zoom-in;z-index:1}
.glassbtn{display:inline-flex;align-items:center;gap:9px;padding:12px 16px;border-radius:999px;border:0;cursor:pointer;
  font:600 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  background:linear-gradient(165deg,rgba(255,255,255,.94),rgba(255,255,255,.76));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 1.5px 0 #FFFFFF,0 10px 24px -12px rgba(17,19,24,.45);transition:transform .35s var(--e),box-shadow .35s var(--e)}
.glassbtn:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 1.5px 0 #FFFFFF,0 16px 30px -14px rgba(17,19,24,.5)}
.glassbtn b{font-weight:600;color:var(--pewter)}
.pvh__tools{position:absolute;right:16px;top:16px;z-index:2;display:flex;gap:8px}
.pvh__count{position:absolute;left:16px;bottom:16px;z-index:2;padding:10px 14px;cursor:default}
.pvh__count b{color:var(--ink)}
.pvh__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;padding:0;justify-content:center;border-radius:50%}
.pvh__nav:hover{transform:translateY(-50%)}
.pvh__nav--p{left:16px}.pvh__nav--n{right:16px}
.pvh__nav i{display:block;width:9px;height:9px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateX(-2px) rotate(-45deg)}
.pvh__nav--p i{transform:translateX(2px) rotate(135deg)}
.ic-ph{position:relative;width:14px;height:11px;border:1.5px solid currentColor;border-radius:2px}
.ic-ph::after{content:"";position:absolute;left:2px;top:2px;width:3px;height:3px;border-radius:50%;background:currentColor}
.ic-sh{position:relative;width:12px;height:12px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:2px}
.ic-sh::before{content:"";position:absolute;left:50%;top:-5px;width:1.5px;height:11px;background:currentColor;transform:translateX(-50%)}
.ic-sh::after{content:"";position:absolute;left:50%;top:-5px;width:6px;height:6px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:translateX(-50%) rotate(45deg)}
/* the thumbnails: a strip that scrolls, the active one ringed */
.pvh__thumbs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 8px;scrollbar-width:none}
.pvh__thumbs::-webkit-scrollbar{display:none}
.pvh__th{flex:0 0 auto;width:148px;height:98px;border-radius:12px;overflow:hidden;border:0;padding:0;background:var(--ice);cursor:pointer;scroll-snap-align:center;position:relative;
  box-shadow:0 0 0 1px rgba(17,19,24,.06);transition:box-shadow .3s var(--e-soft),transform .45s var(--e)}
.pvh__th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--e),opacity .3s}
.pvh__th:not(.is-on) img{opacity:.78}
.pvh__th:hover img{transform:scale(1.05);opacity:1}
.pvh__th.is-on{box-shadow:0 0 0 2px var(--ink)}
.pvh__th.is-on img{opacity:1}
/* the head */
.pv__head{max-width:none;gap:18px}
.pv__price{align-items:baseline}
.pv__price span{color:var(--pewter);text-transform:none;letter-spacing:0;font:500 15px/1 var(--ui)}
.pv__strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:22px;padding:8px;max-width:820px;margin-top:6px}
.pv__strip .counter{padding:16px 20px}
.pv__strip .counter b{font-size:clamp(24px,2.4vw,34px)}
/* highlights */
.pv__hl{display:grid;gap:14px}
.pv__chips{display:flex;flex-wrap:wrap;gap:8px}
.pv__chips span{padding:11px 15px;border-radius:999px;font:600 12px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(240,243,247,.8));box-shadow:inset 0 0 0 1px rgba(17,19,24,.07),0 6px 16px -12px rgba(17,19,24,.3)}
/* the full gallery */
.pvgl{display:grid;gap:14px}
.pvgl__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pvgl__it{position:relative;border:0;padding:0;border-radius:14px;overflow:hidden;background:var(--ice);cursor:zoom-in;aspect-ratio:3/2}
.pvgl__it:nth-child(3n+1){grid-column:span 2;aspect-ratio:16/8}
.pvgl__it img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--e)}
.pvgl__it:hover img{transform:scale(1.04)}
.pvgl__it span{position:absolute;left:12px;bottom:12px;padding:8px 11px;border-radius:999px;font:600 11px/1 var(--ui);letter-spacing:.06em;color:var(--ink);
  background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.95)}
/* location + drive times */
.pv__map{min-height:360px;grid-template-columns:1fr}
.pv__drive{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;max-width:440px}
.pv__drive li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);font:500 13px/1.3 var(--ui);color:var(--ink-2)}
.pv__drive b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the agency's services */
.pv__svc{display:grid;gap:14px}
.pv__svc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pv__svc li{display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:center;padding:16px 20px;border-radius:14px;background:var(--ice)}
.pv__svc li b{font:600 var(--t5)/1.25 var(--ui);letter-spacing:-.01em;color:var(--ink)}
.pv__svc li span{grid-column:1;font:400 13px/1.45 var(--ui);color:var(--pewter)}
.pv__svc li a{grid-column:2;grid-row:1/3;font:600 12px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
/* the agent card */
.pv__alt{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pv__alt .btn{width:100%;padding-left:10px;padding-right:10px}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:320;padding:12px 18px;border-radius:999px;font:600 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.96);box-shadow:inset 0 0 0 1px rgba(17,19,24,.08),0 18px 40px -18px rgba(17,19,24,.45)}
@media (max-width:900px){
  .pvh__stage{height:auto;aspect-ratio:4/3}.pvh__tools{right:12px;top:12px}.pvh__tools .glassbtn{padding:10px 12px}
  .pvh__th{width:112px;height:76px}
  .pv__strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pvgl__grid{grid-template-columns:1fr}.pvgl__it,.pvgl__it:nth-child(3n+1){grid-column:auto;aspect-ratio:3/2}
  .pv__drive{grid-template-columns:1fr}
  .pv__svc li{grid-template-columns:1fr}.pv__svc li a{grid-column:1;grid-row:auto;padding-top:6px}
  .pv__alt{grid-template-columns:1fr}
  .est__row{grid-template-columns:1fr}}

/* v17 · the stage fits the first screen; the thumbnails follow it */
.pvh__stage{height:clamp(300px,min(40vw,56vh),560px)}
.pvh__th{width:124px;height:82px}
@media (max-width:900px){.pvh__stage{height:auto;aspect-ratio:4/3}.pvh__th{width:104px;height:70px}}
/* v17 · figures never wrap */
.pv__facts dd,.pv__price span,.pv__strip .counter b{white-space:nowrap}
.pv__facts dd{font-size:clamp(17px,1.3vw,20px)}
/* v17 · the situation card: the map on the left, the words on the right — nothing over anything */
.pv__map{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-height:0;background:var(--ice)}
.pv__mapin{position:relative;inset:auto;min-height:320px}
.pv__mapin svg{position:absolute;inset:0;width:100%;height:100%}
.pv__mapcap{padding:clamp(22px,3vw,36px);align-content:center;gap:8px}
.pv__drive{max-width:none}
@media (max-width:900px){.pv__map{grid-template-columns:1fr}.pv__mapin{min-height:220px}}

/* v18 · the carousel: the active photo at its own landscape ratio, centred; the neighbours peek on both sides */
.pv{padding-top:clamp(74px,8vw,92px)}
.pvh{margin-top:-6px}
.pvc{position:relative;overflow:hidden;border-radius:var(--r);height:clamp(300px,min(56vh,40vw),600px);isolation:isolate;touch-action:pan-y}
.pvc__track{position:absolute;left:50%;top:0;height:100%;display:flex;column-gap:16px;will-change:transform;cursor:grab}
.pvc__track:active{cursor:grabbing}
.pvc__slide{flex:0 0 auto;height:100%;aspect-ratio:3/2;margin:0;border-radius:var(--r);overflow:hidden;background:var(--ice);
  opacity:.5;transform:scale(.92);transition:opacity .5s var(--e-soft),transform .7s var(--e);user-select:none}
.pvc__slide.is-on{opacity:1;transform:none;cursor:zoom-in}
.pvc__slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.pvh__thumbs{justify-content:center}
@media (max-width:900px){.pvc{height:auto;aspect-ratio:3/2}.pvc__slide{opacity:.9;transform:none}.pvh__thumbs{justify-content:flex-start}}

/* v18b · slides shaped by their photographs; on a phone the carousel follows the current one */
.pvc__slide{aspect-ratio:16/9}
.pvc__slide img{object-fit:cover}
@media (max-width:900px){.pvc{aspect-ratio:auto;height:220px;transition:height .5s var(--e)}.pvc__slide{height:100%}}

/* v19 · no tools over the photo; the counter alone */
.pvh__tools{display:none}

/* ══ Realtis · la fiche sur téléphone, et ses chiffres (10 oct. 2026) ══════
   LA GALERIE. Les flèches faisaient 48 px sur une photo de 220 px de haut :
   deux gros ronds blancs qui en cachaient le tiers. Elles deviennent petites
   et translucides — on change de photo d'un geste du doigt (Prestige67Fiche).
   Et la photo active occupe toute la largeur du cadre, au format 3:2, au lieu
   d'une diapositive 16:9 plus large que l'écran, rognée des deux côtés. */
@media (max-width:900px){
  .pvc{height:auto;aspect-ratio:3/2;transition:none}
  .pvc__slide{height:100%;aspect-ratio:3/2;opacity:1}
  .pvh__nav{width:34px;height:34px;background:rgba(255,255,255,.66);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 6px 16px -8px rgba(17,19,24,.45)}
  .pvh__nav i{width:7px;height:7px}
  .pvh__nav--p{left:10px}.pvh__nav--n{right:10px}
  .pvh__count{left:10px;bottom:10px;padding:7px 10px;font-size:10.5px;
    background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .pvh__th{width:84px;height:56px;border-radius:10px}
  .pvh__thumbs{gap:8px}
}
/* Sur un écran tactile sans souris, les flèches se font plus discrètes encore. */
@media (max-width:900px) and (hover:none){
  .pvh__nav{opacity:.85}
}

/* LES CHIFFRES MIS EN AVANT (4½ pièces, 190 m² habitables…). Sur ordinateur,
   la bande gardait QUATRE colonnes quel que soit le nombre de chiffres : avec
   deux, ils se serraient à gauche et la moitié droite de la bande restait
   vide. La bande prend désormais la largeur de ses chiffres, une case chacun.
   (Sur téléphone, le modèle les pose déjà côte à côte sur toute la largeur.) */
@media (min-width:761px){
  .pv .pv__head .pv__strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,max-content);
    width:max-content;max-width:100%}
  .pv .pv__head .pv__strip .counter{padding:16px 30px 16px 22px}
}

/* ══ Realtis · la fiche, 2e passage (10 oct. 2026) ═══════════════════════
   « C'est tellement les uns sur les autres que ça ne donne pas envie de
   lire », « on comprend à moitié que c'est un formulaire », « ces numéros
   d'image énormes ». */

/* LE FORMULAIRE DE VISITE — sur tous les écrans : une carte blanche avec un
   titre, et des cases qu'on voit. Avant : des cases blanches à demi
   transparentes sur une carte presque blanche, l'intitulé répété dans la case
   en texte d'exemple — rien ne disait qu'il fallait écrire là. */
.pv .pv__contact{background:var(--white);padding:18px;gap:14px;scroll-margin-top:96px;
  box-shadow:0 0 0 1px var(--rule),0 30px 60px -36px rgba(17,19,24,.35)}
.pv .pv__entete{display:grid;gap:6px;padding:2px 4px 0}
.pv .pv__titre{margin:0;font:600 clamp(20px,1rem + .6vw,24px)/1.2 var(--ui);letter-spacing:-.015em;color:var(--ink)}
.pv .pv__sous{margin:0;font:400 14.5px/1.5 var(--ui);color:var(--ink-2)}
.pv .pv__agent{padding:4px 2px 2px}
.pv .pv__form{gap:12px}
.pv .pv__form .est__row{gap:12px}
.pv .pv__form .est__fld{padding:0;background:none;box-shadow:none;border-radius:0;gap:7px}
.pv .pv__form .est__fld>span{font:600 12.5px/1.2 var(--ui);letter-spacing:.01em;text-transform:none;color:var(--ink-2)}
.pv .pv__form .est__fld input,.pv .pv__form .est__fld textarea{box-sizing:border-box;width:100%;margin:0;padding:13px 14px;border:0;border-radius:12px;
  background:var(--white);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 20%,transparent);
  font:500 16px/1.4 var(--ui);color:var(--ink);transition:box-shadow .2s var(--e-soft)}
.pv .pv__form .est__fld textarea{min-height:104px;resize:vertical}
.pv .pv__form .est__fld input:focus,.pv .pv__form .est__fld textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.pv .pv__form .est__fld input::placeholder,.pv .pv__form .est__fld textarea::placeholder{color:transparent}
.pv .pv__form .btn{min-height:52px;margin-top:4px}
/* Le calendrier de réservation, quand il n'a rien à proposer pour ce bien (courtier hors zone,
   aucune heure libre), ne contient que sa feuille de style — mais gardait ses marges : un trou
   de 64 px entre le message et le bouton. Vide, il ne prend plus de place. */
.pv .pv__form>.cv:not(:has(>:not(style))){display:none}

/* LE BOUTON QUI SUIT LE VISITEUR SUR TÉLÉPHONE (« Demander une visite ») : il
   paraît une fois le titre du bien passé et s'efface quand le formulaire est à
   l'écran (Prestige67Fiche pose html.ps-cta). Un toucher y mène. La bulle
   WhatsApp remonte d'autant pour ne pas le couvrir. */
.pv-cta{display:none}
@media (max-width:900px){
  .pv-cta{display:flex;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:47;
    align-items:center;justify-content:center;min-height:52px;padding:0 20px;border-radius:999px;background:var(--red);color:var(--white);
    font:600 13px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
    box-shadow:0 16px 36px -14px var(--red-glow),0 6px 16px -8px rgba(17,19,24,.35);
    transform:translateY(calc(100% + 32px));opacity:0;pointer-events:none;
    transition:transform .45s var(--e),opacity .3s var(--e-soft)}
  html.ps-cta .pv-cta{transform:none;opacity:1;pointer-events:auto}
  html.ps-menu .pv-cta,body.lb-open .pv-cta{opacity:0;pointer-events:none}
  [data-bulle-whatsapp]{transition:bottom .45s var(--e)}
  html.ps-cta [data-bulle-whatsapp]{bottom:calc(80px + env(safe-area-inset-bottom,0px))!important}
}

@media (max-width:900px){
  /* LES TITRES DE LA FICHE, DE VRAIS TITRES. « Le bien », « Caractéristiques »,
     « Galerie »… étaient de petites capitales grises, collées au titre de
     rubrique suivant : on ne voyait pas où commençait quoi. */
  .pv .pv__main{gap:44px}
  .pv .pv__main>*>.eyebrow:first-child,.pv .pv__main .fc-titre{margin:0 0 6px;font:600 21px/1.25 var(--ui);letter-spacing:-.012em;
    text-transform:none;color:var(--ink)}
  .pv .pv__desc,.pv .pv__facts{gap:14px}
  .pv .pv__facts dl{gap:8px}
  .pv .pv__facts dl>div{padding:14px 16px}

  /* LES CARACTÉRISTIQUES DÉTAILLÉES ET LES ENVIRONS : une carte par rubrique,
     des lignes qui respirent, l'intitulé à gauche, la valeur en gras à
     droite. Avant : une seule colonne serrée de quarante lignes. */
  .pv .fc-bloc .fc-groupes{gap:12px}
  .pv .fc-bloc .fc-groupes>div{padding:16px 18px 4px;border-radius:16px;background:var(--ice)}
  .pv .fc-bloc .fc-sous{margin:0 0 2px;font:600 11px/1.4 var(--ui);letter-spacing:.1em;opacity:1;color:var(--pewter)}
  .pv .fc-bloc .fc-liste>div,.pv .fc-bloc .fc-lieux li{padding:12px 0;gap:16px;font-size:15px;line-height:1.35;
    border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
  .pv .fc-bloc .fc-liste>div:last-child,.pv .fc-bloc .fc-lieux li:last-child{border-bottom:0}
  .pv .fc-bloc .fc-liste dt{opacity:1;color:var(--ink-2)}
  .pv .fc-bloc .fc-liste dd{max-width:62%;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
  .pv .fc-bloc .fc-lieux li span:last-child{opacity:1;color:var(--ink-2)}
  .pv .fc-bloc .fc-atouts{gap:8px}
  .pv .fc-bloc .fc-atouts li{padding:8px 14px;border:0;border-radius:999px;background:var(--ice);font-size:14px;line-height:1.3;color:var(--ink)}
  .pv .fc-bloc .fc-commune p{line-height:1.7}

  /* LES COMPTEURS « n / 14 ». Sur la grande photo : une petite pastille dans
     le coin. Sur chaque photo de la galerie : plus rien — un numéro par
     vignette n'apprend rien et mangeait la moitié des petites photos. */
  .pvh__count{left:8px;bottom:8px;padding:5px 8px;font-size:10px;letter-spacing:.04em}
  .pvgl__it span{display:none}
  /* LA GALERIE COMPLÈTE : deux photos par rangée, une grande toutes les
     trois — au lieu de quatorze photos pleine largeur l'une sous l'autre. */
  .pvgl__grid{grid-template-columns:1fr 1fr;gap:8px}
  .pvgl__it,.pvgl__it:nth-child(3n+1){grid-column:auto;aspect-ratio:1/1;border-radius:12px}
  .pvgl__it:nth-child(3n+1){grid-column:1/-1;aspect-ratio:3/2}
  /* La visionneuse se feuillette au doigt (Prestige67Fiche) ; son compteur reste discret. */
  .lb{touch-action:pan-y pinch-zoom}
  .lb__fig figcaption{font-size:11px;letter-spacing:.06em}
}