/* ============================================================
   L'ATELIER DIGITAL — Page Immobilier
   Uniquement ce que le site n'a pas déjà : emplacements d'images,
   galerie + visionneuse, comparateur avant/après.
   Tout le reste utilise les composants existants du site.
   ============================================================ */

/* Emplacement d'image (tant que le fichier n'est pas déposé) */
.media{position:relative;overflow:hidden;border-radius:var(--r-lg)}
.media img{display:block;width:100%;height:100%;object-fit:cover}
.media.is-empty{background:linear-gradient(150deg,#F6E8E2 0%,#F1DFD8 55%,#EBCFC5 100%)}
.section--dark .media.is-empty,.hero .media.is-empty{background:linear-gradient(150deg,rgba(251,242,236,.08),rgba(251,242,236,.03));border:1px solid rgba(251,242,236,.18)}
.media.is-empty::after{content:attr(data-label);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80%;text-align:center;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mauve)}
.section--dark .media.is-empty::after,.hero .media.is-empty::after{color:var(--abricot)}
.media.is-empty .pf-item__cap,.media.is-empty .reel__play{display:none}

/* Hero : photo dans la scène vitrée */
.immo-scene__photo{position:absolute;inset:12% 10% 12% 10%;border-radius:var(--r-md)}

/* Filtres de la galerie (même langage que les boutons « ghost ») */
.pf-filters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:-14px 0 34px}
.pf-filter{font-family:var(--font-body);font-weight:500;font-size:.85rem;letter-spacing:.04em;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(251,242,236,.28);background:transparent;color:var(--creme);cursor:pointer;transition:all .3s}
.pf-filter:hover{border-color:var(--abricot);color:var(--abricot)}
.pf-filter.is-active{background:var(--abricot);border-color:var(--abricot);color:var(--prune)}

/* Galerie */
.pf-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:110px;gap:16px}
.pf-item{grid-column:span 4;grid-row:span 3;cursor:zoom-in;margin:0}
.pf-item--wide{grid-column:span 8;grid-row:span 4}
.pf-item--tall{grid-column:span 4;grid-row:span 4}
.pf-item.is-hidden{display:none}
.pf-item img{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.pf-item:hover img{transform:scale(1.04)}
.pf-item__cap{position:absolute;left:14px;bottom:14px;z-index:2;font-family:var(--font-body);font-weight:500;font-size:.78rem;color:var(--creme);
  background:rgba(42,18,48,.55);backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px}

/* Visionneuse */
.lb{position:fixed;inset:0;z-index:999;background:rgba(42,18,48,.94);display:none;align-items:center;justify-content:center;padding:5vh 5vw}
.lb.is-open{display:flex}
.lb__stage{max-width:1400px;width:100%;max-height:88vh;display:flex;justify-content:center}
.lb__stage img,.lb__stage video{max-width:100%;max-height:88vh;border-radius:12px}
.lb__close,.lb__nav{position:absolute;background:none;border:0;color:var(--creme);cursor:pointer;font-family:var(--font-body);font-size:.9rem;padding:14px}
.lb__close{top:18px;right:22px}
.lb__nav{top:50%;transform:translateY(-50%);font-size:2rem}
.lb__nav--prev{left:10px}.lb__nav--next{right:10px}
.lb__close:hover,.lb__nav:hover{color:var(--abricot)}

/* Avant / après */
.ba__frame{position:relative;aspect-ratio:3/2;border-radius:var(--r-lg);overflow:hidden;user-select:none}
.ba__frame .media{position:absolute;inset:0;border-radius:0}
.ba__line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--creme);pointer-events:none;z-index:3}
.ba__knob{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--prune);color:var(--abricot);
  z-index:4;pointer-events:none;display:grid;place-items:center;font-size:1rem}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.ba__tag{position:absolute;top:16px;z-index:2;font-family:var(--font-body);font-weight:500;font-size:.78rem;padding:6px 12px;border-radius:999px;background:var(--prune);color:var(--creme)}
.ba__tag--l{left:16px}.ba__tag--r{right:16px;background:var(--abricot);color:var(--prune)}

/* Portrait */
.immo-portrait{aspect-ratio:4/5;max-width:460px}

/* Options : grille de 4 sous les formules */
.immo-options{grid-template-columns:1fr 1fr}
.immo-options .cross-link{cursor:default}

@media (max-width:760px){
  .pf-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .pf-item,.pf-item--tall{grid-column:span 1;grid-row:span 2}
  .pf-item--wide{grid-column:span 2;grid-row:span 2}
  .immo-options{grid-template-columns:1fr}
  .immo-scene__photo{position:relative;inset:auto;aspect-ratio:4/3;width:100%}
}

/* Déroulé en 4 étapes (la frise du site est prévue pour 5) */
@media (min-width:901px){ #timeline{grid-template-columns:repeat(4,1fr) !important} }

/* Prix lisibles (sur le site, une règle générale sur les <p> des cartes les écrase) */
.pricing-grid .price-card__price{font-size:2.6rem !important;line-height:1.1;margin:10px 0 14px}
.pricing-grid .price-card__price span{font-size:.9rem}

/* Surtitre du hero raccourci sur mobile (comme la page Réseaux sociaux) */
.tag-mob{display:none}
@media (max-width:768px){ .tag-pc{display:none} .tag-mob{display:inline} }