/*
Theme Name: Assembly Belgium Premium
Theme URI: https://assemblybelgium.com
Author: Assembly Belgium
Description: Thème premium one-page pour Assembly Belgium, avec bande noire fixe, logo intégré et sections éditables.
Version: 2.0.0
Text Domain: assembly-belgium-premium
*/

:root{
  --black:#050505;
  --black-2:#0b0b0b;
  --paper:#f5f4f0;
  --white:#ffffff;
  --ink:#171717;
  --muted:#8d8b85;
  --line:#d9d7d0;
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,input{font:inherit}

.site-header{
  position:sticky;
  top:0;
  z-index:999;
  width:100%;
  min-height:122px;
  padding:16px clamp(24px,4vw,64px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#000;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.admin-bar .site-header{top:32px}
.site-brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.site-brand img{
  display:block;
  width:auto;
  height:82px;
  object-fit:contain;
  background:#000;
}
.site-nav{
  display:flex;
  align-items:center;
  gap:34px;
}
.site-nav a{
  color:rgba(255,255,255,.78);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.22em;
  transition:.2s ease;
}
.site-nav a:hover{color:#fff}
.site-nav .nav-cta{
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
}
.menu-toggle{
  display:none;
  width:42px;
  height:42px;
  background:transparent;
  border:0;
  padding:5px 0;
}
.menu-toggle span{
  display:block;
  width:100%;
  height:1.5px;
  margin:7px 0;
  background:#fff;
}

.hero{
  position:relative;
  min-height:calc(100vh - 122px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  padding:100px clamp(26px,5vw,82px) 78px;
  background:
    radial-gradient(circle at 72% 32%,rgba(255,255,255,.08),transparent 24%),
    linear-gradient(rgba(255,255,255,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.038) 1px,transparent 1px),
    #070707;
  background-size:auto,80px 80px,80px 80px,auto;
  color:#fff;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.28),transparent 42%);
}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
}
.eyebrow,.section-kicker{
  margin:0 0 26px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.31em;
  color:#9a9a9a;
}
.hero h1{
  margin:0;
  max-width:980px;
  font-size:clamp(66px,8.7vw,132px);
  line-height:.83;
  letter-spacing:-.075em;
  font-weight:400;
}
.hero-copy{
  margin:28px 0 0;
  max-width:540px;
  font-size:16px;
  line-height:1.65;
  color:#b8b8b8;
}
.hero-actions{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.19em;
  transition:.25s ease;
}
.button.primary{
  background:#fff;
  color:#000;
  border-color:#fff;
}
.button:hover{transform:translateY(-2px)}
.button.primary:hover{background:#efefef}

.manifesto,.experience,.access{
  max-width:var(--max);
  margin:0 auto;
  padding:135px clamp(26px,5vw,82px);
}
.manifesto-grid{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:clamp(42px,7vw,120px);
}
.manifesto h2{
  margin:0;
  max-width:940px;
  font-size:clamp(48px,6.5vw,98px);
  line-height:.95;
  letter-spacing:-.065em;
  font-weight:400;
  color:#e3e1db;
}
.manifesto h2 strong{
  display:block;
  color:#262626;
  font-weight:400;
}
.manifesto-copy{
  max-width:620px;
  margin:55px 0 0 auto;
  font-size:18px;
  line-height:1.75;
  color:var(--muted);
}
.experience{
  border-top:1px solid var(--line);
}
.experience-list{margin-top:78px}
.experience-item{
  display:grid;
  grid-template-columns:84px 1fr 1fr;
  gap:42px;
  padding:36px 0;
  border-top:1px solid var(--line);
}
.experience-item:last-child{border-bottom:1px solid var(--line)}
.experience-item .num{color:#bebbb4}
.experience-item h3{
  margin:0;
  font-size:clamp(34px,4vw,62px);
  line-height:1;
  letter-spacing:-.052em;
  font-weight:400;
}
.experience-item p{
  margin:0;
  max-width:520px;
  color:var(--muted);
  line-height:1.7;
}

.next-event{
  padding:130px clamp(26px,5vw,82px);
  background:#fff;
}
.next-card{
  max-width:1120px;
  margin:0 auto;
  padding:54px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:72px;
  background:#0b0b0b;
  color:#fff;
}
.next-card h2{
  margin:18px 0 0;
  font-size:clamp(50px,6.3vw,92px);
  line-height:.92;
  letter-spacing:-.065em;
  font-weight:400;
}
.next-card p{
  color:#969696;
  line-height:1.7;
}
.event-meta{
  display:flex;
  flex-direction:column;
}
.meta-row{
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.meta-row span{
  display:block;
  margin-bottom:8px;
  color:#777;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.22em;
}
.meta-row strong{
  font-size:17px;
  font-weight:400;
}

.access{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:end;
}
.access h2{
  margin:0;
  font-size:clamp(54px,7vw,106px);
  line-height:.9;
  letter-spacing:-.07em;
  font-weight:400;
  color:#e1dfd9;
}
.access h2 strong{
  display:block;
  color:#222;
  font-weight:400;
}
.access-links{
  display:flex;
  flex-direction:column;
}
.access-links a{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:20px;
  align-items:center;
  padding:25px 0;
  border-top:1px solid var(--line);
}
.access-links a:last-child{border-bottom:1px solid var(--line)}
.access-links span{
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.22em;
}
.access-links strong{
  font-size:clamp(18px,2vw,28px);
  font-weight:400;
}
.access-links i{font-style:normal;font-size:22px}

.site-footer{
  padding:32px clamp(26px,5vw,82px);
  background:#000;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.footer-links{display:flex;gap:22px}

@media(max-width:900px){
  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:24px 28px 30px;
    background:#000;
    flex-direction:column;
    align-items:flex-start;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .site-nav.open{display:flex}
  .menu-toggle{display:block}
  .manifesto-grid,.next-card,.access{grid-template-columns:1fr}
  .experience-item{grid-template-columns:64px 1fr}
  .experience-item p{grid-column:2}
}
@media(max-width:782px){
  .admin-bar .site-header{top:46px}
}
@media(max-width:620px){
  .site-header{
    min-height:108px;
    padding:12px 22px;
  }
  .site-brand img{height:74px}
  .hero{
    min-height:calc(100vh - 108px);
    padding:70px 26px 60px;
  }
  .hero h1{
    font-size:clamp(54px,16vw,82px);
    line-height:.88;
  }
  .hero-copy{max-width:100%;font-size:15px}
  .manifesto,.experience,.access{padding:96px 26px}
  .manifesto h2{font-size:48px}
  .manifesto-copy{margin-top:40px}
  .experience-list{margin-top:58px}
  .experience-item{grid-template-columns:1fr;gap:18px}
  .experience-item p{grid-column:auto}
  .next-event{padding:90px 20px}
  .next-card{padding:34px 26px;gap:42px}
  .access{gap:55px}
  .access-links a{grid-template-columns:1fr auto}
  .access-links a span{grid-column:1/3}
  .site-footer{flex-direction:column;align-items:flex-start}
}

/* =========================================================
   MOBILE FIX 1.1 — desktop intentionally unchanged
   ========================================================= */
@media (max-width: 620px) {
  html, body { overflow-x: hidden; }

  .site-header {
    min-height: 72px;
    height: 72px;
    padding: 8px 18px;
  }
  .admin-bar .site-header { top: 46px; }
  .site-brand { height: 56px; max-width: 112px; overflow: hidden; }
  .site-brand img {
    width: 88px;
    height: 56px;
    max-width: 88px;
    object-fit: contain;
    object-position: left center;
  }
  .menu-toggle {
    width: 38px;
    height: 38px;
    padding: 4px 0;
  }
  .menu-toggle span {
    height: 1px;
    margin: 6px 0;
  }
  .site-nav {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    padding: 22px 20px 28px;
    gap: 22px;
  }
  .site-nav a { font-size: 12px; }

  .hero {
    min-height: 650px;
    height: auto;
    align-items: flex-end;
    padding: 300px 20px 42px;
    background-position: center center !important;
    background-size: cover !important;
  }
  .hero-inner { width: 100%; }
  .eyebrow {
    margin-bottom: 14px;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: .23em;
    white-space: normal;
  }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(45px, 13.5vw, 58px);
    line-height: .94;
    letter-spacing: -.055em;
    overflow-wrap: normal;
    word-break: normal;
  }
  .hero-copy {
    margin-top: 20px;
    max-width: 330px;
    font-size: 15px;
    line-height: 1.5;
  }
  .hero-actions {
    margin-top: 26px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
  }
  .hero-actions .button {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    font-size: 10px;
  }

  .manifesto, .experience, .access { padding: 76px 20px; }
  .manifesto-grid { gap: 26px; }
  .manifesto h2 {
    font-size: clamp(38px, 11.2vw, 48px);
    line-height: .98;
    letter-spacing: -.055em;
  }
  .manifesto-copy {
    margin-top: 30px;
    font-size: 16px;
    line-height: 1.65;
  }
  .section-kicker { margin-bottom: 18px; }

  .experience-list { margin-top: 40px; }
  .experience-item { padding: 26px 0; }
  .experience-item h3 {
    font-size: clamp(32px, 10vw, 42px);
    line-height: 1.02;
  }

  .next-event { padding: 68px 14px; }
  .next-card { padding: 30px 22px; gap: 32px; }
  .next-card h2 {
    font-size: clamp(44px, 13vw, 58px);
    line-height: .95;
  }
  .meta-row strong { font-size: 16px; }

  .access { gap: 42px; }
  .access h2 {
    font-size: clamp(44px, 13vw, 58px);
    line-height: .94;
  }
  .access-links a { padding: 21px 0; }
  .access-links strong {
    font-size: 17px;
    overflow-wrap: anywhere;
  }

  .site-footer {
    padding: 28px 20px;
    gap: 18px;
  }
}

@media (max-width: 390px) {
  .hero {
    min-height: 620px;
    padding-top: 275px;
  }
  .hero h1 { font-size: 45px; }
}

/* =========================================================
   EDITABLE PHOTOS — Customizer
   ========================================================= */
.hero.has-photo{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.38) 50%,rgba(0,0,0,.2) 100%),
    linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.08) 55%),
    var(--hero-image);
  background-size:cover;
  background-position:center;
}
.content-photo,
.experience-photo{
  margin:42px 0 0;
  overflow:hidden;
  background:#111;
}
.content-photo img,
.experience-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.manifesto-photo{
  width:min(100%,760px);
  aspect-ratio:16/10;
  margin-left:auto;
}
.experience-photo{
  grid-column:2/4;
  width:100%;
  aspect-ratio:16/7;
  margin-top:8px;
}
.event-photo{
  aspect-ratio:4/3;
  margin-top:30px;
}

@media(max-width:900px){
  .experience-photo{grid-column:2;aspect-ratio:16/9}
}
@media(max-width:620px){
  .hero.has-photo{
    background-position:center center !important;
    background-image:
      linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.24) 58%,rgba(0,0,0,.3) 100%),
      var(--hero-image);
  }
  .manifesto-photo,
  .experience-photo,
  .event-photo{
    grid-column:auto;
    width:100%;
    margin-top:28px;
    aspect-ratio:4/5;
  }
  .event-photo{aspect-ratio:4/3}
}


/* =========================================================
   LINE-UP — editable from WordPress Customizer
   ========================================================= */
.lineup{
  max-width:var(--max);
  margin:0 auto;
  padding:135px clamp(26px,5vw,82px);
  border-top:1px solid var(--line);
}
.lineup-head{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:clamp(42px,7vw,120px);
  align-items:start;
}
.lineup h2{
  margin:0;
  max-width:920px;
  font-size:clamp(52px,6.5vw,98px);
  line-height:.92;
  letter-spacing:-.065em;
  font-weight:400;
}
.lineup-copy{
  max-width:620px;
  margin:34px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
}
.lineup-list{
  margin-top:76px;
  border-top:1px solid var(--line);
}
.lineup-artist{
  display:grid;
  grid-template-columns:84px 1fr;
  align-items:center;
  gap:42px;
  min-height:112px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.lineup-artist span{
  color:#bebbb4;
  font-size:12px;
  letter-spacing:.18em;
}
.lineup-artist strong{
  font-size:clamp(38px,5vw,76px);
  line-height:.95;
  letter-spacing:-.055em;
  font-weight:400;
  text-transform:uppercase;
}
@media(max-width:900px){
  .lineup-head{grid-template-columns:1fr;gap:28px}
}
@media(max-width:620px){
  .lineup{padding:76px 20px}
  .lineup-head{gap:16px}
  .lineup h2{
    font-size:clamp(42px,12vw,54px);
    line-height:.95;
  }
  .lineup-copy{
    margin-top:22px;
    font-size:16px;
    line-height:1.6;
  }
  .lineup-list{margin-top:44px}
  .lineup-artist{
    grid-template-columns:38px 1fr;
    gap:12px;
    min-height:78px;
    padding:18px 0;
  }
  .lineup-artist strong{
    font-size:clamp(30px,9.5vw,42px);
    line-height:1;
    overflow-wrap:anywhere;
  }
}