/* ============================================================
   Lady Lily — Section « Constellation » (production)
   Préfixe .llc- pour éviter tout conflit. Charte étoilée.
   ============================================================ */
#ll-constellation{ display:block; }
.llc-wrap{ position:relative; background:radial-gradient(130% 120% at 50% 0%, #0a0d1e 0%, #050507 60%); }
.llc-vp{ position:sticky; top:0; height:100vh; overflow:hidden; }
.llc-sky{ position:absolute; inset:0; z-index:0; }

.llc-head{ position:absolute; top:0; left:0; right:0; z-index:6; text-align:center; padding:58px 24px 0; transition:opacity .5s; }
.llc-head .eyebrow{ color:var(--accent); letter-spacing:.42em; text-transform:uppercase; font-size:12px; display:inline-flex; gap:.6em; align-items:center; }
.llc-head .eyebrow::before,.llc-head .eyebrow::after{ content:'✶'; filter:drop-shadow(0 0 8px rgba(216,196,143,.6)); }
.llc-head h2{ font-family:var(--display); font-weight:500; font-size:clamp(34px,5.5vw,64px); margin:12px 0 6px; }
.llc-head p{ color:var(--muted); font-weight:200; max-width:520px; margin:0 auto; }

.llc-pieces{ position:absolute; inset:0; z-index:3; }
.llc-piece{ position:absolute; width:clamp(170px,22vw,280px); text-decoration:none; color:inherit; will-change:transform,opacity,filter; }
.llc-ph{ position:relative; aspect-ratio:3/4; border-radius:2px; border:1px solid var(--line); overflow:hidden;
  background-size:cover; background-position:center; cursor:pointer;
  box-shadow:0 30px 70px -28px #000, 0 0 40px -10px rgba(216,196,143,.35); transition:box-shadow .5s; }
.llc-piece.active .llc-ph:hover{ box-shadow:0 46px 100px -30px #000, 0 0 70px -6px rgba(243,231,196,.55); }
.llc-ph .aura{ position:absolute; top:10px; left:10px; color:var(--accent); font-size:15px; z-index:3;
  filter:drop-shadow(0 0 8px rgba(216,196,143,.85)); animation:llcTw 3.5s ease-in-out infinite; }
@keyframes llcTw{ 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.25)} }
.llc-ph .meta{ position:absolute; inset:auto 0 0 0; z-index:3; padding:18px 18px 16px;
  background:linear-gradient(180deg, transparent, rgba(5,5,7,.92)); opacity:0; transform:translateY(10px); transition:.5s; }
.llc-piece.active .llc-ph .meta{ opacity:1; transform:none; }
.llc-ph .meta .cat{ color:var(--accent); font-size:11px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:4px; }
.llc-ph .meta h3{ font-family:var(--display); font-weight:500; font-size:24px; line-height:1.02; }
.llc-ph .meta .price{ font-family:var(--display); color:var(--accent-2); font-size:18px; margin-top:3px; }
.llc-ph .go{ position:absolute; top:12px; right:14px; z-index:4; opacity:0; transition:opacity .4s;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-2); }
.llc-piece.active .llc-ph:hover .go{ opacity:1; }

.llc-hint{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:6;
  color:rgba(236,235,240,.5); font-weight:200; letter-spacing:.28em; font-size:11px; text-transform:uppercase;
  transition:opacity .5s; animation:llcFloat 2.6s ease-in-out infinite; }
@keyframes llcFloat{ 0%,100%{transform:translate(-50%,0);opacity:.4} 50%{transform:translate(-50%,8px);opacity:.85} }
.llc-prog{ position:absolute; top:0; left:0; height:2px; width:0; z-index:9;
  background:linear-gradient(90deg,transparent,var(--accent)); box-shadow:0 0 12px var(--accent); }

/* Repli sans animation : simple rangée de pièces */
.llc-wrap.reduced{ height:auto!important; }
.llc-wrap.reduced .llc-vp{ position:relative; height:auto; padding:40px 0 80px; }
.llc-wrap.reduced .llc-pieces{ position:relative; inset:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:20px; padding:20px; }
.llc-wrap.reduced .llc-piece{ position:relative!important; left:auto!important; top:auto!important; transform:none!important; opacity:1!important; filter:none!important; width:210px; }
.llc-wrap.reduced .llc-piece .meta{ opacity:1; transform:none; }