:root{
  --black:#0a0807;
  --ink:#100c0a;
  --blood:#b3121a;
  --blood-bright:#e11d24;
  --bone:#e9e2d6;
  --bone-dim:#9a9286;
  --gold:#c9a24b;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--bone);
  font-family:"Oswald",system-ui,sans-serif;
  font-weight:300;
  line-height:1.5;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}

/* grain / texture */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ticker */
.ticker{
  position:relative;z-index:3;
  background:var(--blood);
  color:#fff;
  border-bottom:2px solid #000;
  overflow:hidden;white-space:nowrap;
  font-weight:700;letter-spacing:.08em;font-size:.8rem;
}
.ticker__track{
  display:inline-block;padding:.55rem 0;
  animation:scroll 28s linear infinite;
}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* generic section */
section{position:relative;z-index:2;padding:5rem 1.5rem;max-width:1000px;margin:0 auto}
.section__kicker{
  text-align:center;color:var(--blood-bright);
  text-transform:uppercase;letter-spacing:.35em;font-size:.75rem;font-weight:700;
  margin-bottom:.75rem;
}
.section__title{
  font-family:"Metal Mania",cursive;
  font-weight:400;text-align:center;
  font-size:clamp(2.2rem,6vw,4rem);
  line-height:1;margin-bottom:2.5rem;
  text-shadow:0 2px 0 #000, 0 0 28px rgba(225,29,36,.35);
}

/* HERO */
.hero{
  position:relative;z-index:2;
  min-height:88vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:3rem 1.5rem;
  background:radial-gradient(120% 80% at 50% -10%, rgba(179,18,26,.35), transparent 60%);
}
.hero__eyebrow{
  text-transform:uppercase;letter-spacing:.3em;font-size:.8rem;
  color:var(--bone-dim);margin-bottom:1.5rem;font-weight:500;
}
.hero__title{
  font-family:"Metal Mania",cursive;font-weight:400;
  font-size:clamp(4rem,18vw,11rem);line-height:.85;
  letter-spacing:.02em;
  text-shadow:0 3px 0 #000, 0 0 40px rgba(225,29,36,.5);
}
.hero__title span{color:var(--blood-bright)}
.hero__slogan{
  margin-top:.6rem;
  font-family:"Metal Mania",cursive;
  font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--blood-bright);
  letter-spacing:.06em;
  text-shadow:0 2px 0 #000, 0 0 22px rgba(225,29,36,.4);
}
.hero__tag{
  margin:1.6rem 0 2.5rem;font-size:clamp(1.1rem,2.5vw,1.5rem);
  color:var(--bone);font-weight:300;
}
.hero__title{animation:flicker 6s infinite}
@keyframes flicker{
  0%,19%,21%,80%,100%{opacity:1}
  20%{opacity:.78}
  82%{opacity:.85}
}

/* buttons */
.btn{
  display:inline-block;cursor:pointer;border:none;
  background:var(--blood);color:#fff;
  font-family:"Oswald",sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:.95rem;
  padding:.85rem 1.8rem;text-decoration:none;
  transition:transform .12s ease, background .2s ease;
  border:2px solid #000;border-radius:2px;
}
.btn:hover{background:var(--blood-bright);transform:translateY(-2px)}
.btn--ghost{background:transparent;border-color:var(--blood);color:var(--bone)}
.btn--ghost:hover{background:var(--blood);color:#fff}
.btn[data-sold]{opacity:.55;cursor:not-allowed}
.btn[data-sold]:hover{transform:none}

/* MÉA CULPA */
.meaculpa__lede{
  text-align:center;max-width:560px;margin:0 auto 3rem;
  color:var(--bone-dim);font-size:1.1rem;
}
.phone{
  position:relative;width:min(300px,80vw);margin:0 auto;
  background:#1a1512;border:3px solid #2c2420;border-radius:34px;
  padding:14px;
  box-shadow:0 0 0 2px #000, 0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(179,18,26,.25);
}
.stamp{
  position:absolute;z-index:4;top:-18px;right:-26px;
  transform:rotate(11deg);
  font-family:"Metal Mania",cursive;font-size:1.25rem;
  color:#fff;background:var(--blood);
  padding:.35rem .9rem;border:2px solid #000;border-radius:3px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);white-space:nowrap;
  animation:stampwobble 3.5s ease-in-out infinite;
}
@keyframes stampwobble{0%,100%{transform:rotate(11deg)}50%{transform:rotate(7deg) scale(1.04)}}
.phone__notch{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:120px;height:22px;background:#000;border-radius:0 0 14px 14px;z-index:2;
}
.phone__video{
  width:100%;border-radius:22px;background:#000;
  aspect-ratio:9/16;object-fit:cover;
}
.pullquote{
  margin:3.5rem auto 0;max-width:600px;text-align:center;
  font-size:clamp(1.2rem,3vw,1.7rem);font-style:italic;font-weight:300;
  color:var(--bone);line-height:1.4;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:2rem 1rem;
}
.pullquote cite{
  display:block;margin-top:1rem;font-style:normal;font-size:.9rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blood-bright);
}

/* PRESS / VU DANS LES MÉDIAS */
.press__lede{text-align:center;max-width:560px;margin:0 auto 3rem;color:var(--bone-dim);font-size:1.1rem}
.press__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.clip{
  position:relative;border:1px solid rgba(255,255,255,.08);border-radius:6px;overflow:hidden;
  background:#0d0a09;transition:border-color .2s ease,transform .15s ease;
}
.clip:hover{border-color:var(--blood)}
.clip__frame{
  position:relative;aspect-ratio:16/9;width:100%;cursor:pointer;
  background:#000 center/cover no-repeat;display:flex;align-items:center;justify-content:center;
}
.clip__frame::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55));
}
.clip__play{
  position:relative;z-index:2;width:62px;height:62px;border-radius:50%;
  background:var(--blood);border:2px solid #000;display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease,background .2s ease;
}
.clip__frame:hover .clip__play{transform:scale(1.1);background:var(--blood-bright)}
.clip__play::before{content:"";border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.clip iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.clip__frame--vertical{aspect-ratio:9/16;max-height:640px;cursor:default}
.clip__frame--vertical::after{display:none}
.clip__frame--vertical iframe{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.clip__meta{padding:1rem 1.1rem;display:flex;align-items:center;gap:.6rem}
.clip__src{
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--blood);color:#fff;padding:.15rem .5rem;border-radius:2px;white-space:nowrap;
}
.clip__title{font-size:.95rem;color:var(--bone);font-weight:300}
.clip--empty .clip__frame{cursor:default;background:repeating-linear-gradient(45deg,#141010,#141010 12px,#0e0b0a 12px,#0e0b0a 24px)}
.clip--empty .clip__frame::after{background:none}
.clip--empty .clip__hint{position:relative;z-index:2;color:var(--bone-dim);font-size:.85rem;text-align:center;padding:0 1rem;font-style:italic}

/* LINE-UP */
.lineup__list{list-style:none;text-align:center}
.lineup__list li{padding:.6rem 0;color:var(--bone-dim);font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.06)}
.lineup__head{
  font-family:"Oswald";font-weight:700;text-transform:uppercase;
  color:var(--bone)!important;letter-spacing:.05em;
  font-size:clamp(1.4rem,4vw,2.2rem)!important;
}
.lineup__foot{text-align:center;margin-top:1.5rem;color:var(--bone-dim);font-style:italic;font-size:.9rem}

/* TICKETS */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.card{
  background:linear-gradient(180deg,#171210,#0d0a09);
  border:1px solid rgba(255,255,255,.08);border-radius:6px;
  padding:2rem 1.5rem;text-align:center;position:relative;
  transition:transform .15s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--blood)}
.card--feat{border-color:var(--gold);box-shadow:0 0 40px rgba(201,162,75,.12)}
.card__flag{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#000;font-weight:700;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.1em;padding:.25rem .8rem;border-radius:2px;white-space:nowrap;
}
.card h3{font-family:"Metal Mania",cursive;font-weight:400;font-size:1.8rem;margin-bottom:.5rem}
.card__price{font-size:2.5rem;font-weight:700;color:var(--blood-bright);margin-bottom:.75rem}
.card p{color:var(--bone-dim);margin-bottom:1.5rem;min-height:3rem}

/* FOOTER */
.footer{
  position:relative;z-index:2;text-align:center;
  padding:4rem 1.5rem 3rem;border-top:2px solid var(--blood);
  background:#070504;color:var(--bone-dim);
}
.footer__logo{font-family:"Metal Mania",cursive;font-size:2.5rem;color:var(--bone);margin-bottom:1rem}
.footer__logo span{color:var(--blood-bright)}
.footer p{max-width:520px;margin:.4rem auto;font-size:.9rem}
.footer__small{font-size:.78rem;opacity:.6;font-style:italic}

/* toast */
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(150%);
  background:var(--blood);color:#fff;font-weight:700;
  padding:.9rem 1.6rem;border-radius:3px;border:2px solid #000;z-index:50;
  transition:transform .35s cubic-bezier(.2,1.4,.4,1);box-shadow:0 12px 40px rgba(0,0,0,.6);
  text-align:center;max-width:90vw;
}
.toast.show{transform:translateX(-50%) translateY(0)}

@media (max-width:600px){
  section{padding:3.5rem 1.25rem}
}