@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700;800;900&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Space Grotesk', sans-serif;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 22px 6%;
  transition: background .3s ease, box-shadow .3s ease;
}

.nav-logo {
  position: relative;
  z-index: 10002;
}

.nav-logo img {
  width: 115px;
  height: auto;
  display: block;
}

.nav-actions {
  position: relative;
  z-index: 10002;
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-spacer{
    width:120px;
}

/* BOUTON BILLETTERIE DESKTOP */
.desktop-ticket {
  background: #84db41;
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 #ff9f1c;
  transition: .25s ease;
}

.desktop-ticket:hover {
  background: white;
  color: #111;
  transform: rotate(-2deg) translateY(-2px);
}

/* BOUTON BURGER */
.menu-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(5,2,20,.65);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  width: 23px;
  height: 2px;
  background: white;
  border-radius: 999px;
  transition: .3s ease;
}

.menu-toggle span:first-child {
  transform: translateY(-5px);
}

.menu-toggle span:last-child {
  transform: translateY(5px);
}

body.menu-open .menu-toggle span:first-child {
  transform: rotate(45deg);
}

body.menu-open .menu-toggle span:last-child {
  transform: rotate(-45deg);
}

/* MENU PLEIN ÉCRAN */
.festival-nav{
    position:fixed;
    top:0;
    right:0;

    width:420px;
    max-width:90vw;
    height:100vh;

    padding:120px 50px;

    display:flex;
    flex-direction:column;
    gap:22px;

    background:rgba(12,8,28,.92);
    backdrop-filter:blur(20px);

    transform:translateX(100%);
    transition:.45s cubic-bezier(.22,1,.36,1);

    z-index:10000;
}
.site-nav::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(3px);

    opacity:0;
    pointer-events:none;
    transition:.4s;
}

body.menu-open .site-nav::after{
    opacity:1;
}

body.menu-open .festival-nav {
  transform: translateX(0);
}

.festival-nav a {
  position: relative;
  color: white;
  text-decoration: none;
  font-size: 2.2rem;
  line-height: .88;
  font-weight: 800;
  letter-spacing: -.06em;
  text-transform: uppercase;

  opacity: 0;
  transform: translateX(45px);
  transition: .45s ease;
}

body.menu-open .festival-nav a {
  opacity: 1;
  transform: translateX(0);
}

body.menu-open .festival-nav a:nth-child(1) { transition-delay: .08s; }
body.menu-open .festival-nav a:nth-child(2) { transition-delay: .14s; }
body.menu-open .festival-nav a:nth-child(3) { transition-delay: .20s; }
body.menu-open .festival-nav a:nth-child(4) { transition-delay: .26s; }
body.menu-open .festival-nav a:nth-child(5) { transition-delay: .32s; }
body.menu-open .festival-nav a:nth-child(6) { transition-delay: .38s; }
body.menu-open .festival-nav a:nth-child(7) { transition-delay: .44s; }

.festival-nav a:hover {
  color: #ff9f1c;
  transform: translateX(12px);
}

.ticket-btn {
  margin-top: 18px;
  display: inline-block;
  background: #84db41;
  color: white !important;
  padding: 16px 26px;
  border-radius: 8px;
  font-size: clamp(1.6rem, 4vw, 3.4rem) !important;
  transform: rotate(-2deg);
  box-shadow: 6px 6px 0 #ff9f1c;
}

/* NAV SCROLLÉE */
.site-nav.scrolled {
  background: rgba(9,4,31,.72);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}

/* MOBILE */
@media (max-width: 700px) {
  .site-nav {
    padding: 16px 7%;
  }

  .nav-logo img {
    width: 88px;
  }

  .desktop-ticket {
    display: none;
  }

  .menu-toggle {
    width: 54px;
    height: 54px;
  }

   .festival-nav {
    top: 12px;
    right: 12px;
    width: calc(100vw - 24px);
    max-width: none;
    height: auto;
    min-height: 70vh;

    padding: 105px 28px 34px;
    border-radius: 28px;

    gap: 18px;
  }

  .festival-nav a {
    font-size: clamp(1.8rem, 10vw, 3.4rem);
    line-height: .92;
  }

  .ticket-btn {
    margin-top: 10px;
    padding: 14px 20px;
    font-size: clamp(1.4rem, 8vw, 2.6rem) !important;
  }
}