/* ------------------------------------------------ the picture viewer (#66)
   #mediaLightbox, built by lightbox.js: a warm, understated architectural
   gallery (crest-voland issue #66, the Legendre Immobilier direction). One
   continuous page colour, no dark stage and no grey side panel: the picture
   large on the left (about 76 %), an editorial column on the right (about
   24 %), the annotation modes as a row of words above the picture, slideshow /
   full screen / close as line icons at the top right, previous · 01 / 02 · next
   under the picture, right-aligned, and the season line at its left.

   Loaded after residence.css and annotations.css: every rule is scoped to
   .lightbox.pv (or #mediaLightbox where a theme selector of annotations.css is
   stronger), so it outranks the older gallery rules it replaces, which stay for
   the village guide's copy of that look (guide.css). The slideshow's
   presentation keeps its own rules (residence.css .lightbox.presenting); the
   ones below only undo what this layout adds.

   Colours are the residence's warm roles with a neutral fallback, so a residence
   without them (Annapurna) gets the same layout in its greys. The red is a touch
   only: the title's dash, the active mode, the chosen point. */

.lightbox.pv{
  --pv-bg:var(--warm-bg,#f4f4f4);--pv-sand:var(--warm-sand,#e6e6e6);--pv-taupe:var(--warm-taupe,#8f8f8f);
  --pv-ink:var(--warm-ink,#1f1f1f);--pv-ink-2:var(--warm-ink-2,#3c3c3c);--pv-muted:var(--warm-muted,#6b6b6b);
  --pv-red:var(--accent,#e52436);--pv-red-strong:var(--accent-strong,#c01d2d);
  --pv-x:clamp(20px,3.3vw,56px);--pv-gap:clamp(28px,3.4vw,56px);--pv-col:clamp(260px,24%,400px);
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;
  padding:calc(6px + env(safe-area-inset-top)) var(--pv-x) calc(clamp(12px,2vh,24px) + env(safe-area-inset-bottom));
  box-sizing:border-box;background:var(--pv-bg);color:var(--pv-ink);font-family:var(--brand-font)}
.lightbox.pv .pv-defs{position:absolute;width:0;height:0;overflow:hidden}

/* The top row: the modes on the left, the line icons on the right. */
/* Rows named here: residence.css puts the old figure in row 1 on a phone. */
.lightbox.pv .pv-bar{grid-row:1;grid-column:1;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.lightbox.pv .pv-tools{min-width:0}
.lightbox.pv .pv-actions{display:flex;align-items:center;gap:clamp(6px,1.2vw,22px);margin-left:auto}
.lightbox.pv .pv-actions button{position:static;display:inline-flex;align-items:center;gap:10px;width:auto;height:44px;padding:0 10px;
  border:0;border-radius:8px;background:transparent;color:var(--pv-ink);font:400 16px/1 var(--brand-font);cursor:pointer}
.lightbox.pv .pv-actions button:hover{background:var(--pv-sand)}
.lightbox.pv .pv-actions button:focus-visible,.lightbox.pv .lightbox-nav:focus-visible,.lightbox.pv .ann-tools button:focus-visible,
.lightbox.pv .ann-list [data-ann-item]:focus-visible{outline:2px solid var(--pv-red);outline-offset:2px}
.lightbox.pv .pv-actions svg.lucide{width:22px;height:22px;stroke-width:1.6}
.lightbox.pv .lightbox-close{width:44px;padding:0;justify-content:center}
.lightbox.pv .lightbox-close svg.lucide{width:28px;height:28px;stroke-width:1.4}
.lightbox.pv .pv-sep{width:1px;height:32px;background:var(--pv-taupe);opacity:.45}
.lightbox.pv.no-fullscreen .pv-full{display:none}

/* The modes: words, the active one darker and heavier over a short red rule. */
.lightbox.pv .ann-tools{position:static;display:flex;align-items:center;gap:clamp(14px,2.6vw,44px);padding:0;border-radius:0;
  background:none;box-shadow:none;color:var(--pv-ink-2);-webkit-backdrop-filter:none;backdrop-filter:none;max-width:none;overflow:visible}
.lightbox.pv .ann-tools-label{padding:0;font:600 12px/1 var(--brand-font);letter-spacing:.18em;text-transform:uppercase;color:var(--pv-muted)}
.lightbox.pv .ann-tools button{position:relative;height:44px;padding:0 2px;border:0;border-radius:0;background:none;color:var(--pv-ink-2);
  font:400 17px/1 var(--brand-font);letter-spacing:0;text-transform:lowercase;white-space:nowrap;cursor:pointer}
.lightbox.pv .ann-tools button:hover{background:none;color:var(--pv-ink)}
.lightbox.pv .ann-tools button[aria-pressed="true"]{background:none;color:var(--pv-ink);font-weight:700}
.lightbox.pv .ann-tools button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:3px;border-radius:2px;background:var(--pv-red)}

/* The picture and its column. */
.lightbox.pv .lightbox-figure{grid-row:2;grid-column:1;margin:0;height:auto;min-height:0;min-width:0;padding:0;display:grid;
  grid-template-columns:minmax(0,1fr) var(--pv-col);grid-template-rows:minmax(0,1fr);column-gap:var(--pv-gap);align-content:stretch}
.lightbox.pv .pv-frame{display:flex;flex-direction:column;align-items:center;row-gap:16px;min-width:0;min-height:0}
/* Sized to the picture by lightbox.js layout(); the mask is its own <clipPath>,
   drawn in these pixels, so the picture and its layer are cut alike. */
.lightbox.pv .lightbox-stage{position:relative;flex:none;max-width:100%;clip-path:url(#pvMask)}
.lightbox.pv .lightbox-stage > img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;user-select:none;-webkit-user-drag:none}
.lightbox.pv .pv-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;width:var(--pv-w,100%);max-width:100%;min-height:44px}
.lightbox.pv .pv-season{font:400 15px/1.3 var(--brand-font);letter-spacing:.12em;color:var(--pv-muted)}
.lightbox.pv .pv-nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);margin-left:auto}
.lightbox.pv .lightbox-nav{width:44px;height:44px;padding:0;border:0;border-radius:8px;background:var(--pv-sand);color:var(--pv-ink);
  display:grid;place-items:center;cursor:pointer;justify-self:auto;margin:0}
.lightbox.pv .lightbox-nav:hover{background:color-mix(in srgb,var(--pv-sand) 80%,var(--pv-ink))}
.lightbox.pv .lightbox-nav svg.lucide{width:20px;height:20px;stroke-width:1.8}
.lightbox.pv .lightbox-count{font:400 16px/1 var(--brand-font);letter-spacing:.04em;color:var(--pv-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}

.lightbox.pv .pv-info{display:flex;flex-direction:column;align-items:flex-start;justify-items:start;gap:0;min-width:0;min-height:0;overflow:auto;
  padding:clamp(4px,2vh,22px) 4px 8px 0;text-align:left}
.lightbox.pv .pv-kicker{font:400 14px/1.3 var(--brand-font);letter-spacing:.16em;color:var(--pv-muted)}
.lightbox.pv .pv-kicker:empty{display:none}
.lightbox.pv .lightbox-title{margin:14px 0 0;font:700 clamp(30px,3.3vw,48px)/1.04 var(--brand-title-font,var(--brand-font));letter-spacing:-.02em;color:var(--pv-ink);overflow-wrap:anywhere}
.lightbox.pv .pv-dash{flex:none;width:44px;height:3px;margin-top:20px;border-radius:2px;background:var(--pv-red)}
.lightbox.pv .lightbox-caption{margin:26px 0 0;font:400 18px/1.45 var(--brand-font);color:var(--pv-ink-2)}
.lightbox.pv .pv-points{align-self:stretch;margin-top:clamp(28px,7vh,80px)}
.lightbox.pv .pv-points:empty{display:none}

/* The points of interest: numbered rows, the chosen one on beige with a red
   number and a red rule. Wide screens: the list sits in the column. */
.lightbox.pv .ann-list h3{margin:0 0 16px;padding:0 0 0 2px;font:600 12px/1.3 var(--brand-font)!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;color:var(--pv-muted)}
.lightbox.pv .ann-list ol{gap:6px}
.lightbox.pv .ann-list [data-ann-item]{display:flex;align-items:center;gap:0;width:100%;min-height:56px;padding:6px 16px;border:0;border-radius:6px;
  background:transparent;box-shadow:none;color:var(--pv-ink);font:400 17px/1.25 var(--brand-font);text-align:left;cursor:pointer}
.lightbox.pv .ann-list [data-ann-item]:hover,.lightbox.pv .ann-list [data-ann-item].is-active{background:color-mix(in srgb,var(--pv-sand) 45%,transparent)}
.lightbox.pv .ann-list [data-ann-item][aria-pressed="true"]{background:var(--pv-sand);box-shadow:none}
.lightbox.pv .ann-no{flex:none;display:inline-flex;align-items:center;height:28px;min-width:30px;padding-right:16px;margin-right:20px;
  border-right:1px solid color-mix(in srgb,var(--pv-taupe) 55%,transparent);font:400 17px/1 var(--brand-font);color:var(--pv-muted);font-variant-numeric:tabular-nums}
.lightbox.pv .ann-list [data-ann-item][aria-pressed="true"] .ann-no{color:var(--pv-red-strong);border-right-color:var(--pv-red)}
.lightbox.pv .ann-list .ann-swatch{margin-right:10px}
.lightbox.pv .ann-list small{color:var(--pv-muted)}
.lightbox.pv .ann-legend,.lightbox.pv .ann-groups{padding-left:2px}
.lightbox.pv .ann-groups{margin-bottom:14px}
.lightbox.pv .ann-groups button{height:36px;padding:0 14px;border:1px solid color-mix(in srgb,var(--pv-taupe) 60%,transparent);border-radius:999px;
  background:transparent;color:var(--pv-ink);font:400 15px/1 var(--brand-font)}
.lightbox.pv .ann-groups button[aria-pressed="true"]{background:var(--pv-sand);border-color:var(--pv-sand);color:var(--pv-ink)}
/* A card's picture fills its frame, whatever the frame's height comes from (its
   proportion, or the sheet's 110 px cap): inside the column a percentage height
   no longer resolved and the picture overflowed its frame. */
.lightbox.pv .ann-figure{position:relative}
.lightbox.pv .ann-figure > .ann-thumb{position:absolute;inset:0;width:100%;height:100%}
/* A zone's details opened in the column (the author's "panel"). */
.lightbox.pv .ann-details{margin-bottom:22px;padding:16px;border:0;border-radius:12px;background:var(--warm-paper,#ffffff)}

/* The markers (#66): a small off-white disc with its number, on a fine
   connector down to a small anchor on the point itself (or the middle of a
   line, the centre of a zone); the chosen one red with a white number. The
   button is 44 px, the disc 28: a finger's target, a discreet mark. #mediaLightbox
   outranks the themes' own pin rules (annotations.css), which style the
   markers of a panorama. */
#mediaLightbox .ann-layer .ann-pin.is-num{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;opacity:1;
  transform:translate(-50%,calc(-50% - 36px));display:grid;place-items:center;color:var(--pv-ink);-webkit-backdrop-filter:none;backdrop-filter:none;cursor:pointer}
#mediaLightbox .ann-layer .ann-pin.is-num b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--pv-bg);color:var(--pv-ink);
  font:700 11px/1 var(--brand-font);letter-spacing:.02em;box-shadow:0 0 0 1px rgba(35,31,30,.22),0 2px 6px rgba(0,0,0,.28);transition:background .2s ease,color .2s ease,transform .2s ease}
#mediaLightbox .ann-layer .ann-pin.is-num::before{content:"";position:absolute;left:50%;top:calc(50% + 14px);width:1px;height:22px;
  background:rgba(255,255,255,.92);box-shadow:0 0 1px rgba(0,0,0,.45);transform:translateX(-50%);pointer-events:none}
#mediaLightbox .ann-layer .ann-pin.is-num::after{content:"";position:absolute;left:50%;top:calc(50% + 36px);width:8px;height:8px;box-sizing:border-box;border-radius:50%;
  background:var(--pv-bg);border:1.5px solid var(--pv-ink);transform:translate(-50%,-50%);pointer-events:none}
#mediaLightbox .ann-layer .ann-pin.is-num.is-below{transform:translate(-50%,calc(-50% + 36px))}
#mediaLightbox .ann-layer .ann-pin.is-num.is-below::before{top:auto;bottom:calc(50% + 14px)}
#mediaLightbox .ann-layer .ann-pin.is-num.is-below::after{top:calc(50% - 36px)}
#mediaLightbox .ann-layer .ann-pin.is-num:hover,#mediaLightbox .ann-layer .ann-pin.is-num.is-active{background:transparent}
#mediaLightbox .ann-layer .ann-pin.is-num.is-active b{transform:scale(1.12)}
#mediaLightbox .ann-layer .ann-pin.is-num.is-selected b{background:var(--pv-red);color:#ffffff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.32)}
#mediaLightbox .ann-layer .ann-pin.is-num:focus-visible{outline:none}
#mediaLightbox .ann-layer .ann-pin.is-num:focus-visible b{outline:2px solid var(--pv-red);outline-offset:3px}
/* "Find a property": the disc's ring is the apartment's status. */
#mediaLightbox .ann-layer[data-mode="availability"] .ann-pin.is-num b{box-shadow:0 0 0 3px var(--ann-color),0 2px 6px rgba(0,0,0,.28)}
@keyframes pv-pop{from{opacity:0;scale:.3}60%{opacity:1;scale:1.15}to{opacity:1;scale:1}}
#mediaLightbox .ann-layer.is-intro .ann-pin.is-num{animation:pv-pop .45s ease-out var(--ann-delay,0s) backwards}
/* A title beside its marker's disc (Show all), not over the connector. */
#mediaLightbox .ann-layer .ann-label[data-num]{transform:translate(22px,calc(-50% - 36px))}
#mediaLightbox .ann-layer .ann-label[data-num].is-below{transform:translate(22px,calc(-50% + 36px))}

/* The list lives in the column at every width, so « Liste » is not needed. */
.lightbox.pv .ann-panel{position:static;transform:none;max-height:none;padding:0;overflow:visible;border-radius:0;box-shadow:none;
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--pv-ink);font-family:var(--brand-font)}
.lightbox.pv .ann-list-toggle{display:none}

/* Narrower than 900 px (a tablet held upright, a phone): one column. The
   modes get their own row under the icons, the picture takes the width, its
   name and caption follow, and the points of interest open from « Liste » as
   the bottom sheet they have always been there (annotations.css). */
@media (max-width:899px){
  .lightbox.pv{--pv-x:16px;grid-template-rows:auto minmax(0,1fr)}
  .lightbox.pv .pv-bar{flex-wrap:wrap;row-gap:0;min-height:52px}
  .lightbox.pv .pv-actions{order:1}
  .lightbox.pv .pv-tools{order:2;flex:1 0 100%;overflow-x:auto;scrollbar-width:none}
  .lightbox.pv .pv-tools::-webkit-scrollbar{display:none}
  .lightbox.pv .ann-tools{gap:20px}
  .lightbox.pv .ann-tools button{font-size:16px}
  .lightbox.pv .lightbox-figure{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:18px;align-content:start}
  .lightbox.pv .pv-frame{row-gap:12px}
  .lightbox.pv .pv-info{padding:0 0 8px}
  .lightbox.pv .lightbox-title{margin-top:8px;font-size:clamp(26px,7vw,36px)}
  .lightbox.pv .pv-dash{margin-top:14px}
  .lightbox.pv .lightbox-caption{margin-top:16px;font-size:16px}
  /* A tapped point's details (every touch screen opens them in the panel):
     the panel rises as a bottom sheet over the column, the picture stays in
     sight above it, as before #66. */
  .lightbox.pv .ann-panel.has-details{position:absolute;left:0;right:0;bottom:0;z-index:3;max-height:55%;overflow:auto;
    padding:18px 16px calc(16px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:var(--pv-bg);box-shadow:0 -10px 30px rgba(35,31,30,.22)}
  .lightbox.pv .lightbox-nav{grid-row:auto;grid-column:auto;background:var(--pv-sand)!important}
}
@media (max-width:720px){
  .lightbox.pv .pv-actions button{min-width:44px;padding:0 8px;justify-content:center}
  .lightbox.pv .lightbox-play{width:auto}
  .lightbox.pv .pv-full span,.lightbox.pv .lightbox-play span{display:none}
  .lightbox.pv .pv-season{font-size:13px;letter-spacing:.08em}
}

/* The slideshow (slideshow.js): the picture alone, as large as the screen
   allows, unmasked. What this layout adds goes away; the presentation's own
   rules (residence.css) do the rest. A card the theme puts in the panel still
   opens over the picture: the column steps aside (display:contents) so the
   panel is placed as it was before. */
.lightbox.pv.presenting{padding:0;grid-template-rows:minmax(0,1fr)}
.lightbox.pv.presenting .pv-bar,.lightbox.pv.presenting .pv-foot{display:none}
.lightbox.pv.presenting .lightbox-figure{grid-row:1;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden}
.lightbox.pv.presenting .pv-frame{justify-content:center;row-gap:0}
.lightbox.pv.presenting .lightbox-stage{clip-path:none}
.lightbox.pv.presenting .lightbox-figure .pv-info,.lightbox.pv.presenting .pv-points{display:contents!important}
.lightbox.pv.presenting .pv-info > :not(.pv-points){display:none!important}
.lightbox.pv.presenting .ann-panel{background:var(--pv-bg)}
/* Under 1100 px a card the theme opens in the panel is the presentation's bottom sheet, as before #66. */
@media (max-width:1099px){
  .lightbox.pv.presenting .ann-panel{position:absolute;left:0;right:0;bottom:0;z-index:3;max-height:55%;overflow:auto;
    padding:18px 16px calc(16px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.4);
    transform:translateY(105%);transition:transform .22s ease}
  .lightbox.pv.presenting .ann-panel.is-open{transform:none}
}
@media (prefers-reduced-motion:reduce){
  #mediaLightbox .ann-layer.is-intro .ann-pin.is-num{animation:none}
  #mediaLightbox .ann-layer .ann-pin.is-num b{transition:none}
}