/* ============================================================
   AUREA : visuels.css
   Galerie complete de la villa (scripts/visuels.js), ouverte par-dessus la page
   via AureaOverlay. Grille sobre sur feuille ivoire, puis vue agrandie plein ecran
   sur fond sombre. Direction artistique du site : tokens existants, police des
   titres (var(--font-title)) pour les noms de pieces, filets var(--line).
   z-index 240 (comme l'overlay de visite privee).
   ============================================================ */

.visuels-overlay{ position:fixed; inset:0; z-index:240; display:none; }
.visuels-overlay.is-open{ display:block; }

.visuels-backdrop{
  position:absolute; inset:0; background:rgba(42,32,24,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .4s ease;
}
.visuels-overlay.is-open .visuels-backdrop{ opacity:1; }

.visuels-panel{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,calc(-50% + 22px));
  width:min(1240px,96vw); height:min(920px,94vh);
  background:var(--blanc); border-radius:6px; box-shadow:0 30px 80px rgba(20,14,8,.42);
  overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  opacity:0; transition:transform .6s var(--ease-cine), opacity .5s var(--ease-cine);
}
.visuels-overlay.is-open .visuels-panel{ transform:translate(-50%,-50%); opacity:1; }

/* ---- Croix de fermeture ---- */
.visuels-close{
  position:sticky; top:12px; margin-left:auto; margin-right:12px; z-index:4;
  display:grid; place-items:center; width:42px; height:42px; border:0; cursor:pointer;
  background:rgba(74,59,44,.08); color:var(--ink); border-radius:999px; float:right;
  transition:background .2s ease;
}
.visuels-close svg{ width:16px; height:16px; stroke:currentColor; stroke-width:1.5; fill:none; }
.visuels-close:hover{ background:rgba(74,59,44,.16); }
.visuels-close:focus-visible{ outline:2px solid var(--bronze); outline-offset:2px; }

/* ---- Titre ---- */
.visuels-head{ padding:clamp(26px,4vw,52px) clamp(24px,4vw,56px) clamp(8px,1.6vw,18px); }
.visuels-kicker{
  display:block; font-family:var(--font-body); text-transform:uppercase;
  letter-spacing:.3em; font-size:.66rem; color:var(--bronze);
}
.visuels-villa{
  display:block; font-family:var(--font-title); font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.9rem); letter-spacing:.06em; color:var(--ink); margin-top:8px; line-height:1.05;
}

/* ---- Groupes (une piece) + grille ---- */
.visuels-groups{ padding-bottom:clamp(28px,5vw,64px); }
.visuels-group{ padding:0 clamp(24px,4vw,56px); margin-top:clamp(26px,4vw,46px); }
.visuels-group:first-child{ margin-top:clamp(14px,2vw,22px); }
.visuels-group-title{
  font-family:var(--font-title); font-weight:400; font-size:clamp(1.12rem,2vw,1.5rem);
  letter-spacing:.04em; color:var(--ink);
  padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:clamp(14px,2vw,20px);
}
.visuels-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(8px,1vw,14px);
}
.visuels-thumb{
  position:relative; display:block; padding:0; margin:0; border:0; cursor:pointer;
  background:var(--sable-clair); aspect-ratio:3 / 2; overflow:hidden; border-radius:3px;
}
.visuels-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s var(--ease-cine);
}
.visuels-thumb:hover img, .visuels-thumb:focus-visible img{ transform:scale(1.045); }
.visuels-thumb:focus-visible{ outline:2px solid var(--bronze); outline-offset:2px; }

/* ---- Vue agrandie (toute la galerie) ---- */
.visuels-lightbox{ position:fixed; inset:0; display:none; z-index:10; background:rgba(26,18,12,.95); }
.visuels-overlay.is-lightbox .visuels-lightbox{ display:flex; align-items:center; justify-content:center; }
.visuels-overlay.is-lightbox .visuels-main{ display:none; }

.vx-figure{ max-width:92vw; max-height:86vh; display:flex; align-items:center; justify-content:center; }
.vx-pic{ display:block; }
.vx-pic img{
  max-width:92vw; max-height:86vh; width:auto; height:auto; object-fit:contain; display:block;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}

.vx-close{
  position:absolute; top:clamp(12px,2vw,22px); right:clamp(12px,2vw,22px); z-index:3;
  display:grid; place-items:center; width:44px; height:44px; border:0; cursor:pointer;
  background:rgba(253,251,247,.14); color:var(--blanc); border-radius:999px; transition:background .2s ease;
}
.vx-close svg{ width:16px; height:16px; stroke:currentColor; stroke-width:1.5; fill:none; }
.vx-close:hover{ background:rgba(253,251,247,.28); }

.vx-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  display:grid; place-items:center; width:48px; height:48px; border:0; cursor:pointer;
  background:rgba(253,251,247,.12); color:var(--blanc); border-radius:50%; transition:background .2s ease;
}
.vx-arrow svg{ width:20px; height:20px; stroke:#F6EFE3; stroke-width:1.5; fill:none; }
.vx-arrow:hover{ background:rgba(253,251,247,.26); }
.vx-prev{ left:clamp(8px,2vw,26px); }
.vx-next{ right:clamp(8px,2vw,26px); }
.vx-close:focus-visible, .vx-arrow:focus-visible{ outline:2px solid var(--blanc-pur); outline-offset:2px; }

.vx-count{
  position:absolute; bottom:clamp(14px,3vh,28px); left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--font-body); font-weight:300; font-size:.72rem; letter-spacing:.14em;
  color:var(--on-sombre-soft);
}

@media (max-width:1023px){
  .visuels-panel{ width:100%; height:100%; border-radius:0; }
  .visuels-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .vx-arrow{ width:42px; height:42px; }
}

@media (prefers-reduced-motion:reduce){
  .visuels-panel{ transition:opacity .2s ease; transform:translate(-50%,-50%); }
  .visuels-thumb img{ transition:none; }
}