@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Work+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg-void:#0E0D16;
  --bg-surface:#1B1828;
  --bg-surface-2:#241F35;
  --accent-amber:#FF7A3D;
  --accent-gold:#FFC857;
  --accent-teal:#37E2C4;
  --text-primary:#F6F3ED;
  --text-muted:#A79FBE;
  --border:rgba(246,243,237,0.1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:'Work Sans', sans-serif;
  line-height:1.55;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Bebas Neue', sans-serif; letter-spacing:0.02em; line-height:1;}
.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent-teal);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--accent-teal);}
.eyebrow-center{justify-content:center; margin:0 auto; width:fit-content;}

.poster-wrap{
  display:inline-block; max-width:380px; width:100%; margin-top:20px;
  border-radius:10px; overflow:hidden; border:1px solid var(--border);
  box-shadow:0 24px 60px rgba(0,0,0,0.45); transition:transform .25s;
}
.poster-wrap:hover{transform:translateY(-4px);}
.poster-wrap img{width:100%; display:block;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
button{font-family:inherit; cursor:pointer; border:none;}

/* ---------- Waveform signature ---------- */
.wave{display:flex; align-items:flex-end; gap:4px; height:40px;}
.wave span{
  width:4px; background:linear-gradient(180deg,var(--accent-gold),var(--accent-amber));
  border-radius:2px;
  animation:bounce 1.4s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{transform:scaleY(0.25);}
  50%{transform:scaleY(1);}
}
.wave-divider{display:flex; justify-content:center; gap:5px; padding:48px 0; height:24px; align-items:flex-end; opacity:0.5;}
.wave-divider span{width:3px; background:var(--accent-teal); border-radius:2px; animation:bounce 1.8s ease-in-out infinite;}

/* ---------- Nav ---------- */
nav{
  position:sticky; top:0; z-index:40;
  background:rgba(14,13,22,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{font-family:'Bebas Neue'; font-size:1.35rem; letter-spacing:0.03em; display:flex; align-items:center;}
.brand span{color:var(--accent-amber);}
.brand-logo{max-height:44px; width:auto; height:auto; display:block;}
.navlinks{display:flex; gap:32px; font-size:0.92rem; font-weight:500; align-items:center;}
.navlinks a{position:relative; padding:6px 0; color:var(--text-muted); transition:color .2s;}
.navlinks a:hover{color:var(--text-primary);}
.navlinks a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:linear-gradient(90deg,var(--accent-gold),var(--accent-amber));
  transition:width .25s;
}
.navlinks a:hover::after{width:100%;}
.navburger{display:none; background:none; color:var(--text-primary); font-size:1.4rem;}

/* ---------- Hero ---------- */
.hero{position:relative; padding:110px 0 90px; overflow:hidden;}
.hero.has-bg{background-size:cover; background-position:center; background-repeat:no-repeat;}
.hero-overlay{position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(14,13,22,0.6), rgba(14,13,22,0.9));}
.hero-bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1;}

/* ---------- Fonds d'image pour les autres sections (À propos, Services, Galerie, Diffusion, Contact) ---------- */
.bg-section{position:relative;}
.bg-section.section-has-bg{background-size:cover; background-position:center; background-repeat:no-repeat;}
.bg-section-overlay{position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(14,13,22,0.88), rgba(14,13,22,0.94));}
.bg-section.section-has-bg > .wrap{position:relative; z-index:1;}
.hero-wave-bg{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; gap:6px; opacity:0.12; z-index:0;}
.hero-wave-bg span{width:8px; background:var(--accent-amber); border-radius:4px; animation:bounce 2.2s ease-in-out infinite;}
.hero .wrap{position:relative; z-index:1;}
.hero h1{font-size:clamp(2.6rem,7vw,5rem); margin:18px 0 22px; max-width:820px;}
.hero p.sub{color:var(--text-muted); font-size:1.1rem; max-width:560px; margin-bottom:36px;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  padding:14px 28px; border-radius:2px; font-weight:600; font-size:0.95rem;
  transition:transform .18s, box-shadow .18s;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{background:var(--accent-amber); color:#12101a;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,122,61,0.28);}
.btn-ghost{border:1px solid var(--border); color:var(--text-primary); background:transparent;}
.btn-ghost:hover{border-color:var(--accent-teal); color:var(--accent-teal);}

/* ---------- Sections ---------- */
section{padding:80px 0;}
.section-head{margin-bottom:44px;}
.section-head h2{font-size:clamp(2rem,4vw,2.8rem); margin-top:10px;}
.about p{color:var(--text-muted); max-width:680px; font-size:1.05rem;}

.services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}
.service-card{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:6px;
  padding:28px; transition:border-color .2s, transform .2s;
}
.service-card:hover{border-color:var(--accent-teal); transform:translateY(-3px);}
.service-icon{font-size:1.8rem; margin-bottom:14px;}
.service-card h3{font-family:'Work Sans'; font-weight:700; font-size:1.08rem; letter-spacing:0; margin-bottom:8px;}
.service-card p{color:var(--text-muted); font-size:0.92rem;}

.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;}
.gallery-item{position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:var(--bg-surface);}
.gallery-item img{width:100%; height:100%; object-fit:cover;}
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
  background:linear-gradient(0deg,rgba(0,0,0,0.75),transparent);
  font-size:0.8rem; color:var(--text-primary);
}

.slideshow{max-width:720px; margin:0 auto;}
.slideshow-viewport{
  position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden;
  border:1px solid var(--border); box-shadow:0 24px 60px rgba(0,0,0,0.4); background:var(--bg-surface);
}
.slide{position:absolute; inset:0; padding:16px; box-sizing:border-box; opacity:0; transition:opacity .5s ease; pointer-events:none;}
.slide.active{opacity:1; pointer-events:auto;}
.slide img{width:100%; height:100%; object-fit:contain; display:block;}
.slide-cap{
  position:absolute; left:0; right:0; bottom:0; padding:18px 22px;
  background:linear-gradient(0deg, rgba(0,0,0,0.82), transparent);
  font-size:0.95rem; color:var(--text-primary);
}
.slide-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  background:rgba(14,13,22,0.55); color:var(--text-primary); border:1px solid var(--border);
  width:42px; height:42px; border-radius:50%; font-size:1.7rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:background .2s, border-color .2s, color .2s;
}
.slide-arrow:hover{background:rgba(14,13,22,0.85); border-color:var(--accent-teal); color:var(--accent-teal);}
.slide-arrow.prev{left:14px;}
.slide-arrow.next{right:14px;}
.slide-dots{display:flex; justify-content:center; gap:9px; margin-top:18px;}
.dot{width:9px; height:9px; border-radius:50%; background:rgba(246,243,237,0.3); border:none; padding:0; transition:background .2s, transform .2s;}
.dot.active{background:var(--accent-amber); transform:scale(1.3);}
.dot:hover{background:var(--accent-gold);}
@media(max-width:600px){
  .slide-arrow{width:36px; height:36px; font-size:1.4rem;}
}
.empty-note{
  border:1px dashed var(--border); border-radius:6px; padding:40px; text-align:center;
  color:var(--text-muted); font-size:0.95rem;
}

.live-box{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:8px;
  padding:8px; aspect-ratio:16/9; overflow:hidden; position:relative;
}
.live-box iframe{width:100%; height:100%; border:0; border-radius:4px; display:block;}
/* Neutralise la technique "padding-bottom en %" que certaines plateformes
   (Vimeo, etc.) utilisent dans leur code d'intégration pour forcer un
   ratio d'aspect — notre boîte a déjà son propre ratio via aspect-ratio
   ci-dessus, donc on écrase leur padding pour éviter un double calcul. */
.live-box > div{width:100% !important; height:100% !important; padding:0 !important; position:relative !important;}
#live .wrap{max-width:1400px;}
.live-badge-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.live-badge-group{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.live-event-name{font-family:'Work Sans', sans-serif; font-size:0.85rem; color:var(--text-muted);}
.live-badge{display:inline-flex; align-items:center; gap:8px; font-family:'Space Mono'; font-size:0.78rem; letter-spacing:0.1em; color:var(--accent-teal); margin-bottom:0;}
.replay-badge{color:var(--accent-gold);}
.fullscreen-btn{
  font-family:'Space Mono', monospace; font-size:0.72rem; letter-spacing:0.04em; color:var(--text-primary);
  background:var(--bg-surface-2); border:1px solid var(--border); padding:6px 12px; border-radius:20px;
  white-space:nowrap; transition:border-color .15s, color .15s;
}
.fullscreen-btn:hover{border-color:var(--accent-gold); color:var(--accent-gold);}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--accent-teal); animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.25;}}

/* ---------- Diffusion + clavardage ---------- */
.live-grid{display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start;}
.live-grid.no-chat{grid-template-columns:1fr;}
.live-video{min-width:0;}
.video-gate{
  background:var(--bg-surface); border:1px dashed var(--border); border-radius:8px;
  aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:32px 24px; gap:6px;
}
.video-gate-icon{font-size:1.8rem; margin-bottom:6px; opacity:0.85;}
.video-gate-title{font-family:'Bebas Neue'; font-size:1.5rem; letter-spacing:0.02em;}
.video-gate-text{color:var(--text-muted); font-size:0.88rem; max-width:340px; line-height:1.55; margin-bottom:6px;}
.video-gate-btn{
  background:linear-gradient(135deg,var(--accent-gold),var(--accent-amber)); color:#1B1828;
  font-weight:700; padding:11px 22px; border-radius:6px; font-size:0.85rem;
}
.video-gate-btn:hover{filter:brightness(1.06);}
.live-chat{
  background:var(--bg-surface); border:1px solid var(--border); border-radius:10px;
  display:flex; flex-direction:column; height:520px; overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,0.35);
}
.chat-head{padding:16px 18px 12px; border-bottom:1px solid var(--border); background:var(--bg-surface-2);}
.chat-head-row{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.chat-head h3{font-family:'Bebas Neue'; font-size:1.35rem; letter-spacing:0.02em;}
.chat-online{
  font-family:'Space Mono'; font-size:0.68rem; letter-spacing:0.05em; color:var(--accent-teal);
  background:rgba(55,226,196,0.1); border:1px solid rgba(55,226,196,0.3);
  padding:4px 10px; border-radius:20px; white-space:nowrap; margin-top:2px; flex-shrink:0;
}
.chat-messages{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:14px;}
.chat-empty{color:var(--text-muted); font-size:0.85rem; text-align:center; margin:auto; padding:20px 10px; line-height:1.6;}
.chat-msg{font-size:0.86rem; line-height:1.4; word-break:break-word;}
.chat-msg-head{display:flex; align-items:baseline; gap:8px; margin-bottom:3px;}
.chat-msg-name{color:var(--accent-gold); font-weight:600; font-size:0.82rem;}
.chat-msg-time{color:var(--text-muted); font-size:0.66rem; font-family:'Space Mono', monospace;}
.chat-msg-text{color:var(--text-primary);}
.chat-flash{font-size:0.76rem; padding:0 14px; margin:0; min-height:0;}
.chat-flash:empty{display:none;}
.chat-flash-ok{color:var(--accent-teal); padding-top:8px;}
.chat-flash-err{color:var(--accent-amber); padding-top:8px;}

.chat-authbox{border-top:1px solid var(--border); padding:14px; background:var(--bg-surface-2);}
.chat-authtabs{display:flex; gap:6px; margin-bottom:12px;}
.chat-authtab{
  flex:1; background:var(--bg-void); border:1px solid var(--border); color:var(--text-muted);
  padding:8px; border-radius:6px; font-size:0.78rem; font-weight:600; letter-spacing:0.02em;
}
.chat-authtab.active{color:var(--bg-void); background:var(--accent-gold); border-color:var(--accent-gold);}
.chat-authform{display:flex; flex-direction:column; gap:8px;}
.chat-authform input{
  background:var(--bg-void); border:1px solid var(--border); border-radius:6px;
  padding:9px 11px; color:var(--text-primary); font-size:0.83rem; font-family:'Work Sans', sans-serif; width:100%;
}
.chat-authform input:focus{outline:none; border-color:var(--accent-gold);}
.chat-authsubmit{
  background:linear-gradient(135deg,var(--accent-gold),var(--accent-amber)); color:#1B1828;
  font-weight:700; padding:9px; border-radius:6px; font-size:0.82rem; margin-top:2px;
}
.chat-linklike{
  background:none; color:var(--accent-teal); font-size:0.72rem; text-decoration:underline;
  padding:2px 0; text-align:left; width:fit-content;
}
.chat-hint{color:var(--text-muted); font-size:0.7rem; margin-top:12px; line-height:1.5;}
.chat-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}

.chat-loggedbox{border-top:1px solid var(--border); background:var(--bg-surface-2);}
.chat-whoami{padding:10px 14px 0; font-size:0.75rem; color:var(--text-muted);}
.chat-whoami strong{color:var(--text-primary);}
.chat-form{padding:10px 14px 14px; display:flex; flex-direction:column; gap:8px;}
.chat-input-row{display:flex; gap:8px;}
.chat-input-row input{
  flex:1; min-width:0; background:var(--bg-void); border:1px solid var(--border); border-radius:6px;
  padding:10px 12px; color:var(--text-primary); font-size:0.85rem; font-family:'Work Sans', sans-serif;
}
.chat-input-row input:focus{outline:none; border-color:var(--accent-gold);}
.chat-input-row button{
  background:linear-gradient(135deg,var(--accent-gold),var(--accent-amber)); color:#1B1828;
  font-weight:700; width:42px; border-radius:6px; font-size:1rem; flex-shrink:0;
}
.chat-error{color:var(--accent-amber); font-size:0.72rem; min-height:1em;}
.chat-messages::-webkit-scrollbar{width:6px;}
.chat-messages::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px;}
@media(max-width:860px){
  .live-grid{grid-template-columns:1fr;}
  .live-chat{height:420px;}
}

.contact-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:50px;}
.contact-info div{margin-bottom:18px;}
.contact-info .label{font-family:'Space Mono'; font-size:0.72rem; color:var(--accent-gold); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:4px;}
.contact-info .val{font-size:1.05rem;}
footer{border-top:1px solid var(--border); padding:32px 0; text-align:center; color:var(--text-muted); font-size:0.85rem;}

.contact-form .field label{color:var(--accent-gold);}
.hp-field{position:absolute; left:-9999px; top:-9999px;}
.flash-error{background:var(--accent-amber);}

#admin-trigger{
  position:fixed; bottom:20px; right:20px; z-index:100;
  background:var(--bg-surface); border:1px solid var(--border); color:var(--text-muted);
  padding:10px 16px; border-radius:30px; font-size:0.78rem; display:flex; align-items:center; gap:8px;
  font-family:'Space Mono';
}
#admin-trigger:hover{color:var(--accent-teal); border-color:var(--accent-teal);}

@media(max-width:760px){
  .navlinks{position:fixed; top:72px; left:0; right:0; background:var(--bg-void); flex-direction:column; padding:20px 24px; gap:18px; border-bottom:1px solid var(--border); transform:translateY(-140%); transition:transform .25s; align-items:flex-start;}
  .navlinks.open{transform:translateY(0);}
  .navburger{display:block;}
  .contact-grid{grid-template-columns:1fr;}
}

/* ============ ADMIN DASHBOARD ============ */
.admin-shell{min-height:100vh;}
.admin-topbar{
  background:var(--accent-gold); color:#12101a; padding:16px 0; position:sticky; top:0; z-index:50;
}
.admin-topbar .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.admin-topbar .site-link{font-size:0.82rem; font-weight:600; border-bottom:1px solid #12101a55;}
.admin-title{font-family:'Bebas Neue'; font-size:1.4rem;}
.logout-link{font-size:0.82rem; font-weight:600; border:1px solid #12101a55; padding:6px 14px; border-radius:4px;}

.admin-tabs{display:flex; gap:8px; flex-wrap:wrap; padding:24px 0 0;}
.tab-link{
  padding:9px 16px; border-radius:4px; font-size:0.85rem; font-weight:600;
  border:1px solid var(--border); color:var(--text-muted);
}
.tab-link.active{background:var(--accent-teal); color:#0E0D16; border-color:var(--accent-teal);}

.admin-content{padding:28px 0 80px;}
.tabsec{display:none;}
.tabsec.active{display:block;}

.flash{
  background:var(--accent-teal); color:#0E0D16; font-weight:700; padding:12px 18px;
  border-radius:6px; margin-bottom:20px; font-size:0.9rem;
}

.field{margin-bottom:18px;}
.field label{display:block; font-family:'Space Mono'; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-teal); margin-bottom:6px;}
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=url], .field input[type=password], .field textarea{
  width:100%; padding:11px 13px; background:var(--bg-void); border:1px solid var(--border);
  color:var(--text-primary); border-radius:4px; font-family:inherit; font-size:0.92rem; resize:vertical;
}
.field textarea{min-height:90px;}
.field .hint{color:var(--text-muted); font-size:0.78rem; margin-top:6px;}

.edit-card{background:var(--bg-surface); border:1px solid var(--border); border-radius:6px; padding:18px; margin-bottom:14px; position:relative;}
.edit-card .del-row{display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--accent-amber); margin-top:6px;}

.save-btn{background:var(--accent-amber); color:#12101a; padding:12px 26px; border-radius:4px; font-weight:700; font-size:0.9rem; margin-top:8px;}
.save-btn:hover{filter:brightness(1.08);}

.hint{color:var(--text-muted); font-size:0.82rem; line-height:1.5;}

.chatusers-table{width:100%; border-collapse:collapse; font-size:0.86rem;}
.chatusers-table th{
  text-align:left; font-family:'Space Mono'; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--accent-teal); padding:8px 10px; border-bottom:1px solid var(--border);
}
.chatusers-table td{padding:10px; border-bottom:1px solid var(--border); vertical-align:middle;}
.chatuser-status{font-family:'Space Mono'; font-size:0.68rem; padding:3px 8px; border-radius:20px; white-space:nowrap;}
.chatuser-status.ok{color:var(--accent-teal); background:rgba(55,226,196,0.1); border:1px solid rgba(55,226,196,0.3);}
.chatuser-status.pending{color:var(--accent-amber); background:rgba(255,122,61,0.1); border:1px solid rgba(255,122,61,0.3);}
.chatuser-actions{display:flex; gap:8px; flex-wrap:wrap;}
.mini-btn{
  background:var(--bg-void); border:1px solid var(--border); color:var(--text-primary);
  padding:6px 10px; border-radius:5px; font-size:0.75rem;
}
.mini-btn:hover{border-color:var(--accent-gold);}
.mini-btn-danger{color:var(--accent-amber); border-color:rgba(255,122,61,0.3);}
code{background:var(--bg-void); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-family:'Space Mono', monospace; font-size:0.85em; color:var(--accent-teal);}

.gallery-edit-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-bottom:20px;}
.gallery-edit-item{background:var(--bg-surface); border:1px solid var(--border); border-radius:6px; overflow:hidden;}
.gallery-edit-item img{width:100%; height:120px; object-fit:cover;}
.gallery-edit-item .gi-body{padding:10px;}
.gallery-edit-item input{margin-bottom:8px; font-size:0.8rem; padding:8px 10px;}
.gallery-edit-item .del-row{font-size:0.78rem;}

.upload-box{
  border:1px dashed var(--border); border-radius:6px; padding:24px; text-align:center; color:var(--text-muted);
  margin-bottom:20px;
}
.upload-box input[type=file]{margin-top:10px; color:var(--text-muted);}

/* ---------- Login ---------- */
.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-box{background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:36px; width:100%; max-width:380px;}
.login-box h1{font-size:1.7rem; margin-bottom:6px;}
.login-box .sub{color:var(--text-muted); font-size:0.85rem; margin-bottom:22px;}
.login-box .err{color:var(--accent-amber); font-size:0.85rem; margin-bottom:14px;}