/* O'Vestiaire — Le lieu */

/* ---------- En-tête : trois vues du lieu ---------- */
.lieu-head__photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: clamp(440px, 40vw, 580px); }
.lh { margin: 0; border-radius: var(--alv-radius); border: 1px solid var(--alv-hair); box-shadow: var(--alv-shadow-2); }
.lh--tall { grid-row: span 2; }
.lh figcaption, .fr figcaption { position: absolute; left: 12px; bottom: 12px; padding: 7px 10px; border-radius: 6px; background: rgba(10, 9, 4, .72); backdrop-filter: blur(6px); font: 700 12px/1 var(--alv-font-label); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- Les espaces ---------- */
.espaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.espace { display: flex; flex-direction: column; overflow: hidden; }
.espace .media { aspect-ratio: 4 / 5; flex: none; }
.espace__body { display: grid; gap: 10px; align-content: start; padding: 22px 24px 26px; flex: 1; }
.espace__body h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1.14; } /* « Ombragée » : l’accent ne touche plus la 1re ligne */
.espace__body p:last-child { margin: 0; font-size: 15px; line-height: 1.5; color: var(--alv-ink-soft); }
.espace__soon { display: grid; place-items: center; border-bottom: 1px dashed var(--alv-line); background: repeating-linear-gradient(135deg, rgba(247, 219, 142, .04) 0 12px, transparent 12px 24px); }
.espace__soon .label { padding: 10px 14px; border: 1px dashed var(--alv-line); border-radius: 8px; color: var(--alv-ink-soft); }

/* ---------- Les fresques ---------- */
.fresques { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.fresques .lead { margin: 28px 0 18px; max-width: 38ch; }
.fresques__note { margin: 0; max-width: 38ch; color: var(--alv-ink-soft); font-size: 15px; }
.fresques__photos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: end; }
.fr { margin: 0; border-radius: var(--alv-radius); border: 1px solid var(--alv-hair); box-shadow: var(--alv-shadow-2); }
.fr--wide { aspect-ratio: 5 / 4; }
.fr--tall { aspect-ratio: 4 / 5; margin-bottom: clamp(24px, 4vw, 56px); }

/* ---------- Galerie filtrable ---------- */
.gfilters { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 36px; }
.gchip {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--alv-line);
  font: 700 13px/1 var(--alv-font-label); letter-spacing: .13em; text-transform: uppercase; color: var(--alv-ink-soft);
  transition: color var(--alv-dur-s), border-color var(--alv-dur-s), transform var(--alv-dur-xs) var(--alv-ease-out);
}
/* Pinceau : le fond or se trace de gauche à droite sur la puce active (clip-path), il se retire vite quand elle s'éteint */
.gchip::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--alv-gold-fill); clip-path: inset(0 100% 0 0); transition: clip-path var(--alv-dur-xs) var(--alv-ease-out); }
.gchip.is-on::before { clip-path: inset(0 0 0 0); transition: clip-path var(--alv-dur-brush) var(--alv-ease-out); }
.gchip i { font-style: normal; font-size: 12px; color: var(--alv-ink-soft); }
.gchip:hover { color: var(--alv-ink); border-color: var(--alv-gold-solid); }
.gchip:active { transform: scale(.97); }
.gchip.is-on { color: #1A1206; border-color: transparent; }
.gchip.is-on i { color: rgba(26, 18, 6, .65); }
.gallery { columns: 3; column-gap: 16px; }
.g-item { position: relative; display: block; width: 100%; margin: 0 0 16px; padding: 0; overflow: hidden; break-inside: avoid; border-radius: var(--alv-radius); border: 1px solid var(--alv-hair); background: var(--alv-surface); cursor: zoom-in; box-shadow: var(--alv-shadow-1); transition: border-color .4s, box-shadow .5s var(--alv-ease-out); }
.g-item img { width: 100%; height: auto; transition: transform 1.1s var(--alv-ease-out); }
.g-item:hover { border-color: var(--alv-line); box-shadow: var(--alv-shadow-2); }
.g-item:hover img { transform: scale(1.04); }
.g-cap { position: absolute; left: 12px; bottom: 12px; padding: 7px 10px; border-radius: 6px; background: rgba(10, 9, 4, .72); backdrop-filter: blur(6px); font: 700 12px/1 var(--alv-font-label); letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--alv-ease-out); }
.g-item:hover .g-cap, .g-item:focus-visible .g-cap { opacity: 1; transform: none; }

/* ---------- Visionneuse ---------- */
.lb-open { overflow: hidden; scrollbar-gutter: stable; }
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 2vw, 28px); padding: 24px clamp(12px, 3vw, 40px); background: rgba(6, 5, 2, .94); backdrop-filter: blur(10px); touch-action: pan-y; } /* pan-y : le balayage horizontal arrive jusqu'à lieu.js */
.lightbox[hidden] { display: none; }
.lb__fig { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; justify-items: center; align-items: center; min-width: 0; height: calc(100svh - 120px); } /* hauteur fixe : la légende ne saute plus d'une photo à l'autre */
.lb__fig img { max-width: 100%; max-height: 100%; width: auto; height: auto; align-self: end; border-radius: var(--alv-radius); border: 1px solid var(--alv-hair); box-shadow: var(--alv-shadow-2); }
.lb__fig figcaption { position: relative; overflow: hidden; display: flex; gap: 18px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--alv-hair); font: 700 13px/1.3 var(--alv-font-label); letter-spacing: .16em; text-transform: uppercase; }
/* Reflet or (celui du macaron) : passe une fois sur le filet à l'ouverture */
.lb__fig figcaption::after { content: ""; position: absolute; left: 0; bottom: 0; width: 35%; height: 1px; background: var(--alv-gold-sheen); opacity: 0; transform: translateX(-110%); }
.lightbox.is-opening .lb__fig figcaption::after { animation: alv-lb-sheen var(--alv-dur-sheen) var(--alv-ease-in-out) .4s 1 both; }
@keyframes alv-lb-sheen { 0% { opacity: 1; transform: translateX(-110%); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(300%); } }
.lb__count { color: var(--alv-ink-soft); white-space: nowrap; }
.lb__close, .lb__nav { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--alv-line); background: rgba(10, 9, 4, .6); transition: border-color var(--alv-dur-s), transform var(--alv-dur-xs) var(--alv-ease-out), box-shadow var(--alv-dur-s); }
.lb__close:hover, .lb__nav:hover { border-color: var(--alv-gold-solid); box-shadow: var(--alv-glow-gold); }
.lb__close:active, .lb__nav:active { transform: scale(.95); }
.lb__close { position: absolute; top: 18px; right: clamp(12px, 3vw, 40px); z-index: 2; }
.lb__close svg, .lb__nav svg { width: 20px; height: 20px; }
.lb__prev svg { transform: scaleX(-1); }
.lightbox.is-open .lb__fig img { animation: alv-lb-in .5s var(--alv-ease-out); }
@keyframes alv-lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .espaces { grid-template-columns: repeat(2, 1fr); }
  .gallery { columns: 2; }
}
@media (max-width: 900px) {
  .lieu-head__photos { height: 440px; }
  .fresques { grid-template-columns: 1fr; }
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-content: center; padding-bottom: 20px; }
  .lb__fig { grid-row: 1; }
  .lb__prev, .lb__next { position: absolute; bottom: 20px; grid-row: 2; }
  .lb__prev { left: 20px; } .lb__next { right: 20px; }
  .lb__fig { height: calc(100svh - 150px); }
}
@media (hover: none) { .g-cap { opacity: 1; transform: none; } } /* tablette tactile : la légende n'attend pas un survol */
@media (max-width: 640px) {
  .lieu-head__photos { grid-template-rows: 200px 200px; height: auto; gap: 10px; }
  .espaces {
    display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--alv-gutter); gap: 14px; touch-action: pan-x pan-y;
    margin-inline: calc(-1 * var(--alv-gutter)); padding: 6px var(--alv-gutter) 18px; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .espaces::-webkit-scrollbar { display: none; }
  .espaces > * { flex: 0 0 78%; scroll-snap-align: start; }
  .fresques__photos { grid-template-columns: 1.2fr 1fr; gap: 10px; }
  .gfilters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--alv-gutter)); padding-inline: var(--alv-gutter); scrollbar-width: none; }
  .gfilters::-webkit-scrollbar { display: none; }
  .gchip { flex: none; }
  .gallery { columns: 2; column-gap: 10px; }
  .g-item { margin-bottom: 10px; }
  .g-cap { opacity: 1; transform: none; font-size: 11px; left: 8px; bottom: 8px; padding: 6px 8px; }
}

/* ---------- Peaufinage 05/10 ---------- */
.gallery[data-n="1"] { columns: 1; max-width: 640px; }
.gallery[data-n="2"] { columns: 2; max-width: 980px; }
@media (max-width: 640px) {
  .fresques__photos { grid-template-columns: 1fr; }
  .fr--tall { aspect-ratio: 4 / 3; margin-bottom: 0; }
  .fr--tall img { object-position: 30% 30%; }
  .gfilters { padding-right: 64px; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .lb__fig figcaption { padding-bottom: 16px; }
  .lb__fig { height: min(calc(100svh - 170px), 150vw); } /* boîte fixe mais à la taille d’une photo : plus de grand vide au-dessus */
  .lb__fig img { align-self: center; }
  .gallery[data-n="1"] { columns: 1; }
}

/* pas de segment d’accent or sous la légende : seul le filet neutre reste (règle du liseré) */
.lb__fig figcaption::after { display: none; }