/* ==========================================================================
   LXNO Live - galerie en direct, calée sur la feuille de style de luxano.studio
   (mêmes variables, mêmes polices, mêmes composants : nav, event-hero, gallery,
   btn, footer). Les ajouts propres au direct sont regroupés en fin de fichier.
   ========================================================================== */

:root{
  --bg:#0c0a09;
  --bg-alt:#151210;
  --bg-alt-2:#1c1815;
  --ink:#f2ece2;
  --ink-dim:#a89a8c;
  --gold:#b8892b;
  --gold-dim:#6e5620;
  --ember:#a13a1f;
  --ember-bright:#d4571f;
  --line: rgba(184,137,43,0.28);
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;}
svg .fill{fill:currentColor;stroke:none;}

.display{
  font-family:'Bebas Neue', sans-serif;
  font-weight:400;
  letter-spacing:0.03em;
  line-height:0.95;
}
.brush{
  font-family:'Permanent Marker', cursive;
  color:var(--ember-bright);
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- NAV ---------- */
header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(12,10,9,0.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 24px;
  max-width:1180px;
  margin:0 auto;
}
.nav .logo{min-width:0;}
.nav .logo img{height:38px;width:auto;max-width:100%;object-fit:contain;}
.insta-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 16px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-weight:700;
  font-size:0.92rem;
  white-space:nowrap;
  transition:background .2s ease, color .2s ease;
}
.insta-link:hover, .insta-link:focus-visible{background:var(--gold);color:var(--bg);}
.insta-link svg{width:18px;height:18px;}
.brand-text{white-space:nowrap;font-family:'Bebas Neue', sans-serif;font-size:1.7rem;letter-spacing:0.06em;line-height:1;}

/* ---------- BOUTONS ---------- */
.cta-row{display:flex;gap:16px;flex-wrap:wrap;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  font-weight:700;
  font-size:0.95rem;
  border:1px solid var(--gold);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{background:var(--ember);border-color:var(--ember);color:var(--ink);}
.btn-primary:hover, .btn-primary:focus-visible{background:var(--ember-bright);border-color:var(--ember-bright);}
.btn-ghost{color:var(--gold);}
.btn-ghost:hover, .btn-ghost:focus-visible{background:var(--gold);color:var(--bg);}

/* ---------- PAGE ÉVÉNEMENT ---------- */
.event-hero{
  position:relative;
  min-height:380px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.event-hero .cover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  animation:fadeIn .8s ease;
}
.event-hero .cover-placeholder{
  position:absolute;
  inset:0;
  background:linear-gradient(155deg,#241a17,#100d0b 75%);
}
.event-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, var(--bg) 0%, rgba(12,10,9,0.55) 40%, rgba(12,10,9,0.15) 70%);
}
.event-hero .event-hero-copy{
  position:relative;
  z-index:1;
  padding-top:220px;
  padding-bottom:32px;
}
.event-logo{
  display:block;
  width:auto;
  height:auto;
  max-height:96px;
  max-width:min(260px, 60%);
  object-fit:contain;
  margin:0 0 16px;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,0.5));
}
.event-hero h1{font-size:clamp(2.2rem, 5vw, 3.6rem);margin:0 0 8px;overflow-wrap:anywhere;}
.event-hero .event-meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--ink-dim);font-size:0.95rem;}
.event-hero .event-meta strong{color:var(--gold);font-weight:600;}
.event-meta > :empty{display:none;}

.event-description{
  max-width:65ch;
  color:var(--ink-dim);
  padding:48px 0 0;
  margin:0;
  white-space:pre-line;
}
.event-description:empty{display:none;}

/* galerie - même grille que luxano.studio */
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  padding-top:32px;
}
.gallery a{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(155deg,#241a17,#100d0b 75%);
  cursor:zoom-in;
  -webkit-tap-highlight-color:transparent;
}
.gallery a.o-portrait{aspect-ratio:3/4;}
.gallery img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}
.gallery a:hover img, .gallery a:focus-visible img{transform:scale(1.04);}

/* ---------- FOOTER ---------- */
footer{
  margin-top:72px;
  border-top:1px solid var(--line);
  padding:32px 0 max(28px, env(safe-area-inset-bottom));
}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-row .logo img{height:52px;width:auto;display:block;}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:0.9rem;color:var(--ink-dim);}
.footer-links a:hover, .footer-links a:focus-visible{color:var(--gold);}
.footer-bottom{margin-top:18px;font-size:0.8rem;color:var(--ink-dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* ---------- ACCESSIBILITÉ ---------- */
a:focus-visible, button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ==========================================================================
   Spécifique au direct
   ========================================================================== */

@keyframes fadeIn{from{opacity:0;}}
@keyframes spin{to{transform:rotate(360deg);}}

.spinner{width:28px;height:28px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .9s linear infinite;}
.view-loading{min-height:60vh;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--ink-dim);}

/* ---------- Page « pas de direct » ---------- */
.view-offline{min-height:68vh;display:flex;align-items:center;position:relative;overflow:hidden;}
.view-offline::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 80% 20%, rgba(161,58,31,0.22), transparent 55%),
             radial-gradient(ellipse at 10% 90%, rgba(184,137,43,0.10), transparent 50%);
  pointer-events:none;
}
.offline-inner{position:relative;padding-top:72px;padding-bottom:72px;width:100%;}
.kicker{font-size:0.85rem;color:var(--ink-dim);margin:0 0 10px;font-weight:600;}
.view-offline h1{font-size:clamp(2.8rem, 7vw, 5rem);margin:0 0 6px;}
.view-offline .slogan{font-size:clamp(1.4rem, 3vw, 2rem);margin:10px 0 24px;display:inline-block;transform:rotate(-1.5deg);}
.offline-text{max-width:52ch;color:var(--ink-dim);font-size:1.05rem;margin:0 0 30px;white-space:pre-line;}

/* ---------- Barre « En direct » ---------- */
.live-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 22px;
  margin:40px 0 0;
  padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:0.9rem;
  color:var(--ink-dim);
}
.live-bar > span:empty{display:none;}
.live-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Bebas Neue', sans-serif;
  font-size:1.35rem;
  letter-spacing:0.06em;
  line-height:1;
  color:var(--ink);
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ember-bright);animation:pulse 2s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(212,87,31,0.6);}
  70%{box-shadow:0 0 0 9px rgba(212,87,31,0);}
  100%{box-shadow:0 0 0 0 rgba(212,87,31,0);}
}
.live-pending{color:var(--gold);}

/* ---------- Nouvelles photos ---------- */
.gallery a.is-new{animation:arrive .7s ease both;}
.gallery a.is-new::after{
  content:'Nouveau';
  position:absolute;
  top:10px;
  left:10px;
  padding:3px 9px;
  background:var(--ember);
  color:var(--ink);
  font-family:'Bebas Neue', sans-serif;
  font-size:1rem;
  letter-spacing:0.06em;
  animation:fadeOut .6s ease 6s forwards;
}
@keyframes arrive{from{opacity:0;transform:scale(.97);}to{opacity:1;transform:none;}}
@keyframes fadeOut{to{opacity:0;}}

.empty{display:grid;justify-items:center;gap:14px;padding:64px 0;text-align:center;color:var(--ink-dim);}

.new-pill, .toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  z-index:60;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border:1px solid var(--ember);
  background:var(--ember);
  color:var(--ink);
  font-weight:700;
  font-size:0.9rem;
  white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.new-pill{top:84px;cursor:pointer;animation:drop .35s ease;}
.new-pill:hover{background:var(--ember-bright);border-color:var(--ember-bright);}
.new-pill svg{width:16px;height:16px;}
.toast{bottom:max(20px, env(safe-area-inset-bottom));background:var(--bg-alt-2);border-color:var(--line);font-weight:600;}
@keyframes drop{from{opacity:0;transform:translate(-50%,-10px);}}

.noscript{max-width:560px;margin:24px auto;padding:0 24px;text-align:center;color:var(--ink-dim);}

/* ---------- Visionneuse (même esprit que .lightbox du site) ---------- */
.lb{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:rgba(6,5,4,0.97);
  animation:fadeIn .2s ease;
}
.lb-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
}
.lb-count{font-family:'Bebas Neue', sans-serif;font-size:1.3rem;letter-spacing:0.06em;color:var(--ink-dim);font-variant-numeric:tabular-nums;}
.lb-actions{display:flex;align-items:center;gap:8px;}
.lb-btn, .lb-nav{
  display:grid;
  place-items:center;
  background:rgba(12,10,9,0.7);
  border:1px solid var(--line);
  color:var(--ink);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.lb-btn{width:44px;height:44px;}
.lb-btn:hover, .lb-nav:hover{border-color:var(--gold);color:var(--gold);}
.lb-dl{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:44px;
  padding:0 18px;
  background:var(--ember);
  border:1px solid var(--ember);
  color:var(--ink);
  font-weight:700;
  font-size:0.9rem;
  transition:background .2s ease;
}
.lb-dl:hover{background:var(--ember-bright);border-color:var(--ember-bright);}
.lb-dl svg{width:18px;height:18px;}
.lb-stage{
  position:relative;
  min-height:0;
  display:grid;
  place-items:center;
  padding:0 16px;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.lb-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border:1px solid var(--line);
  transition:opacity .2s, transform .25s ease;
  -webkit-touch-callout:default;
}
.lb-img.loading{opacity:.85;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;}
.lb-nav svg{width:24px;height:24px;}
.lb-prev{left:20px;}
.lb-next{right:20px;}
.lb-nav:disabled{opacity:0;pointer-events:none;}
.lb-foot{margin:0;padding:12px 16px max(14px, env(safe-area-inset-bottom));text-align:center;font-size:0.8rem;color:var(--ink-dim);min-height:1.5em;}

/* ---------- RESPONSIVE (mêmes paliers que le site) ---------- */
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2, 1fr);}
  .event-hero .event-hero-copy{padding-top:140px;padding-bottom:28px;}
  .new-pill{top:76px;}
}

@media (max-width:560px){
  .gallery{grid-template-columns:1fr;}
  .event-hero{min-height:0;}
  .event-hero .event-hero-copy{padding-top:88px;padding-bottom:20px;}
  .event-hero h1{font-size:2.1rem;}
  .event-logo{max-height:60px;margin-bottom:10px;}
  .event-description{padding-top:28px;}
  .live-bar{margin-top:24px;}
  .nav{padding:10px 16px;}
  .nav .logo img{height:30px;}
  .insta-link{padding:8px 12px;font-size:0.85rem;}
  .lb-dl span{display:none;}
  .lb-dl{width:44px;padding:0;justify-content:center;}
  .lb-stage{padding:0;}
  .lb-img{border-left:0;border-right:0;}
}

@media (hover:none) and (pointer:coarse){
  .lb-nav{display:none;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{transition:none !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
}