/* ==========================================================================
   SXPRESS 2026 — Responsive & Missing Styles
   Design tokens:
     --acid:    #BBFF00
     --black:   #0A0A0A
     --chrome:  #C0C8D4
     --dark:    #1E1E1E
     --muted:   #7A8899
     --paper:   #F5F5F0
   Fonts:
     Akira Expanded  → headlines
     Space Grotesk   → structural / labels
     Inter           → body
   ========================================================================== */


/* ==========================================================================
   14. UTILITY CLASSES
   ========================================================================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
  width: 100%;
}

.font-akira {
  font-family: "Akira Expanded", "Impact", sans-serif;
  text-transform: uppercase;
}

.font-space {
  font-family: "Space Grotesk", sans-serif;
}

.text-acid {
  color: #BBFF00;
}

.text-chrome {
  color: #C0C8D4;
}

.text-muted {
  color: #7A8899;
}

.text-paper {
  color: #F5F5F0;
}


/* ==========================================================================
   1. HEADER STYLES — Delta-style floating header
   ========================================================================== */

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  pointer-events: none;                /* container is transparent to clicks */
  padding: 1.5rem 1rem;               /* floating: 24px top, 16px sides     */
  transition: padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When nav is open, header must stay on top and be fully interactive */
body.nav-open .main-header {
  pointer-events: auto;
  z-index: 10001;
}

@media (min-width: 640px) {
  .main-header { padding: 2.5rem 1.5rem; }       /* s:my-10  s:px-6  */
}

@media (min-width: 1024px) {
  .main-header { padding: 2.5rem 3rem; }          /* l:px-12 */
}

.main-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

/* — Left: burger — */
.main-header .header-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 2;
}

/* — Center: logo — absolutely centered in header */
.main-header .header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.main-header .main-logo {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.main-header .main-logo:hover {
  opacity: 0.8;
  transform: scale(1.02);
}

.main-header .logo-img {
  width: 300px;
  height: auto;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 0 24px rgba(187, 255, 0, 0.15));
}

/* — Right: billetterie + toggles — */
.main-header .header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  z-index: 2;
}

/* ── Header Toggle Buttons (Lang + Theme) ────────── */

.header-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 2px solid rgba(187, 255, 0, 0.35);
  color: #F5F5F0;
  cursor: pointer;
  pointer-events: auto;
  padding: 0 16px;
  border-radius: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  height: 44px;
  box-sizing: border-box;
}

.header-toggle:hover {
  border-color: #BBFF00;
  color: #BBFF00;
}

/* Language toggle */
.lang-toggle-active {
  color: #BBFF00;
  font-weight: 700;
}

.lang-toggle-sep {
  opacity: 0.3;
  margin: 0 2px;
}

.lang-toggle-inactive {
  opacity: 0.5;
}

/* Theme toggle */
.theme-toggle {
  padding: 0 12px;
}

.theme-toggle-icon {
  display: block;
}

.theme-toggle-icon--moon {
  display: none;
}

/* When inverted theme is active: show moon, hide sun */
body.theme-inverted .theme-toggle-icon--sun {
  display: none;
}

body.theme-inverted .theme-toggle-icon--moon {
  display: block;
}

/* Mobile: compact toggles — match btn-header height */
@media (max-width: 480px) {
  .header-toggle {
    height: 38px;
    padding: 0 10px;
    font-size: 0.6875rem;
    border-color: rgba(187, 255, 0, 0.4);
    color: #BBFF00;
  }
  .theme-toggle {
    padding: 0 8px;
  }
  .main-header .btn-header {
    height: 38px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .lang-toggle-active {
    color: #BBFF00;
  }
  .lang-toggle-inactive {
    color: #F5F5F0;
    opacity: 0.4;
  }
  .btn-header-text { display: none; }
}


/* ── COLOR THEME: INVERTED (green bg, black text) ─── */

body.theme-inverted {
  background-color: #BBFF00 !important;
}

body.theme-inverted .hero-brutal,
body.theme-inverted .hero-poster,
body.theme-inverted .spinning-logo-section,
body.theme-inverted .section-brutal,
body.theme-inverted .lineup-section,
body.theme-inverted .newsletter-section,
body.theme-inverted .social-section,
body.theme-inverted .cta-billetterie,
body.theme-inverted .lineup-filter-bar,
body.theme-inverted .footer-brutal {
  background-color: #BBFF00 !important;
}

body.theme-inverted .hero-title,
body.theme-inverted .font-akira,
body.theme-inverted .nav-primary-list a,
body.theme-inverted .nav-brutal-primary .nav-link,
body.theme-inverted .hero-date,
body.theme-inverted .hero-year,
body.theme-inverted .hero-subtitle,
body.theme-inverted .page-hero-title,
body.theme-inverted .edition-title-outline {
  color: #0A0A0A !important;
}

body.theme-inverted .text-chrome,
body.theme-inverted .text-paper,
body.theme-inverted .text-muted,
body.theme-inverted .newsletter-subtitle,
body.theme-inverted .page-hero-subtitle,
body.theme-inverted .edition-description,
body.theme-inverted .section-label,
body.theme-inverted .newsletter-consent,
body.theme-inverted .nav-secondary-list a,
body.theme-inverted .nav-brutal-social a,
body.theme-inverted .footer-brutal,
body.theme-inverted .footer-brutal a {
  color: #1E1E1E !important;
}

body.theme-inverted .newsletter-title,
body.theme-inverted .lineup-card-day,
body.theme-inverted .text-acid {
  color: #0A0A0A !important;
}

body.theme-inverted .btn-brutal a,
body.theme-inverted .btn-brutal.wp-block-button a,
body.theme-inverted .newsletter-submit.btn-brutal,
body.theme-inverted .btn-header {
  background: #0A0A0A !important;
  color: #BBFF00 !important;
  border-color: #0A0A0A !important;
}

body.theme-inverted .btn-brutal a:hover,
body.theme-inverted .btn-brutal.wp-block-button a:hover,
body.theme-inverted .newsletter-submit.btn-brutal:hover,
body.theme-inverted .btn-header:hover {
  background: transparent !important;
  color: #0A0A0A !important;
  border-color: #0A0A0A !important;
}

body.theme-inverted .main-header {
  background: transparent;
}

body.theme-inverted .main-header.is-scrolled {
  background: rgba(187, 255, 0, 0.92) !important;
  border-bottom-color: rgba(10, 10, 10, 0.12) !important;
}

body.theme-inverted .burger-bars i {
  background: #0A0A0A !important;
}

body.theme-inverted .main-header .burger {
  border-color: rgba(10, 10, 10, 0.35) !important;
}

body.theme-inverted .main-header .burger:hover,
body.theme-inverted .main-header .burger.is-open {
  border-color: #0A0A0A !important;
  background: rgba(10, 10, 10, 0.08) !important;
}

body.theme-inverted .main-header .burger:active {
  background: rgba(10, 10, 10, 0.14) !important;
}

body.theme-inverted .header-toggle {
  border-color: rgba(10, 10, 10, 0.3);
  color: #0A0A0A;
}

body.theme-inverted .header-toggle:hover {
  border-color: #0A0A0A;
}

body.theme-inverted .lang-toggle-active {
  color: #0A0A0A;
}

body.theme-inverted .nav-brutal {
  background: #BBFF00 !important;
}

body.theme-inverted .nav-primary-list a:hover,
body.theme-inverted .nav-brutal-primary .nav-link:hover {
  color: #F5F5F0 !important;
}

body.theme-inverted .newsletter-input {
  color: #0A0A0A !important;
  border-bottom-color: rgba(10, 10, 10, 0.3) !important;
}

body.theme-inverted .newsletter-input::placeholder {
  color: rgba(10, 10, 10, 0.5) !important;
}

body.theme-inverted .newsletter-input:focus {
  border-bottom-color: #0A0A0A !important;
}

body.theme-inverted .lineup-card {
  border-color: rgba(10, 10, 10, 0.1);
}

body.theme-inverted .lineup-card-bg {
  background: linear-gradient(145deg, #d4e600 0%, #BBFF00 50%, #a8e600 100%) !important;
}

body.theme-inverted .lineup-card-name {
  color: #0A0A0A !important;
  text-shadow: none !important;
}

body.theme-inverted .lineup-card-content {
  background: linear-gradient(to top, rgba(187, 255, 0, 0.85) 0%, transparent 60%) !important;
}

body.theme-inverted .lineup-tab {
  border-color: rgba(10, 10, 10, 0.3);
  color: rgba(10, 10, 10, 0.5);
}

body.theme-inverted .lineup-tab.is-active {
  background: #0A0A0A !important;
  border-color: #0A0A0A !important;
  color: #BBFF00 !important;
}

body.theme-inverted .marquee-item,
body.theme-inverted .section-acid .marquee-item {
  color: #0A0A0A !important;
}

body.theme-inverted .section-acid {
  background: #0A0A0A !important;
}

body.theme-inverted .section-acid .marquee-item {
  color: #BBFF00 !important;
}

body.theme-inverted .grain-overlay {
  display: none;
}

body.theme-inverted .spinning-logo {
  filter: brightness(0) drop-shadow(0 0 30px rgba(10, 10, 10, 0.15)) !important;
}

body.theme-inverted .spinning-logo-glow {
  background: radial-gradient(circle, rgba(10, 10, 10, 0.06) 0%, transparent 60%) !important;
}

body.theme-inverted .logo-img {
  filter: brightness(0) !important;
}

body.theme-inverted .hero-social-link svg path,
body.theme-inverted .hero-social-link svg rect,
body.theme-inverted .hero-social-link svg circle {
  fill: #0A0A0A !important;
}

body.theme-inverted .hero-social-link {
  border-color: rgba(10, 10, 10, 0.2) !important;
}

body.theme-inverted .chrome-divider {
  background: linear-gradient(to right, transparent, #0A0A0A 20%, #0A0A0A 80%, transparent) !important;
}

body.theme-inverted .scroll-indicator-arrow {
  border-color: #0A0A0A !important;
}

/* Poster hero inverted: green bg, black dates/text */
body.theme-inverted .hero-poster {
  background: #BBFF00 !important;
}

body.theme-inverted .hero-date-day,
body.theme-inverted .hero-date-month,
body.theme-inverted .hero-date-year,
body.theme-inverted .hero-lieu-line1,
body.theme-inverted .hero-lieu-line2 {
  color: #0A0A0A !important;
}

/* Also handle SVG theme switching via filter */
body.theme-inverted .hero-date-svg { filter: brightness(0) !important; }
body.theme-inverted .hero-lieu-img { filter: brightness(0) !important; }

body.theme-inverted .hero-sxpress-backing {
  background: #BBFF00 !important;
}

body.theme-inverted .hero-date-svg,
body.theme-inverted .hero-lieu-img { filter: brightness(0); }

body.theme-inverted .hero-poster-btn {
  background: #0A0A0A !important;
  color: #BBFF00 !important;
  border-color: #0A0A0A !important;
}

body.theme-inverted .hero-poster-btn:hover {
  background: transparent !important;
  color: #0A0A0A !important;
  border-color: #0A0A0A !important;
}

body.theme-inverted .hero-poster .hero-social-link {
  border-color: rgba(10, 10, 10, 0.25) !important;
  color: #0A0A0A !important;
}

body.theme-inverted .hero-poster .hero-social-link svg path,
body.theme-inverted .hero-poster .hero-social-link svg rect,
body.theme-inverted .hero-poster .hero-social-link svg circle {
  fill: #0A0A0A !important;
}

body.theme-inverted .hero-poster .hero-social-link:hover {
  background: #0A0A0A !important;
}

body.theme-inverted .hero-poster .hero-social-link:hover svg path,
body.theme-inverted .hero-poster .hero-social-link:hover svg rect,
body.theme-inverted .hero-poster .hero-social-link:hover svg circle {
  fill: #BBFF00 !important;
}

body.theme-inverted .scroll-indicator-arrow--dark {
  border-color: #BBFF00 !important;
}

body.theme-inverted .reg-marks--dark .reg-mark::before,
body.theme-inverted .reg-marks--dark .reg-mark::after {
  background: rgba(187, 255, 0, 0.2) !important;
}

body.theme-inverted .hero-rond {
  filter: drop-shadow(0 0 12px rgba(10,10,10,.3));
  opacity: 0.85;
}

/* ── Theme inverted: Billetterie ─── */
body.theme-inverted .billet-page {
  background: #BBFF00 !important;
}

body.theme-inverted .billet-pill {
  border-color: rgba(10, 10, 10, 0.3);
  color: rgba(10, 10, 10, 0.5);
}

body.theme-inverted .billet-pill.is-active {
  background: #0A0A0A !important;
  border-color: #0A0A0A !important;
  color: #BBFF00 !important;
}

body.theme-inverted .billet-frame {
  border-color: rgba(10, 10, 10, 0.15) !important;
  background: rgba(10, 10, 10, 0.04) !important;
}

body.theme-inverted .billet-frame--vip {
  border-color: rgba(10, 10, 10, 0.25) !important;
}

body.theme-inverted .billet-frame__title {
  color: #0A0A0A !important;
}

body.theme-inverted .billet-frame__sub {
  color: #1E1E1E !important;
}

body.theme-inverted .billet-option {
  border-color: rgba(10, 10, 10, 0.08) !important;
}

body.theme-inverted .billet-option__badge {
  background: rgba(10, 10, 10, 0.08) !important;
  color: #0A0A0A !important;
}

body.theme-inverted .billet-option__badge--pop {
  background: #0A0A0A !important;
  color: #BBFF00 !important;
}

body.theme-inverted .billet-option__badge--vip {
  border-color: rgba(10, 10, 10, 0.3) !important;
}

body.theme-inverted .billet-option__name {
  color: #0A0A0A !important;
}

body.theme-inverted .billet-option__desc {
  color: #1E1E1E !important;
}

body.theme-inverted .billet-option__price {
  color: #0A0A0A !important;
}

body.theme-inverted .billet-option__cta {
  background: #0A0A0A !important;
  color: #BBFF00 !important;
  border-color: #0A0A0A !important;
}

body.theme-inverted .billet-option__cta:hover {
  background: transparent !important;
  color: #0A0A0A !important;
}

body.theme-inverted .billet-faq-section {
  background: #BBFF00 !important;
}

body.theme-inverted .billet-faq-title {
  color: #0A0A0A !important;
}

body.theme-inverted .billet-faq-title .text-acid {
  color: #1E1E1E !important;
}

body.theme-inverted .billet-faq-tab {
  border-color: rgba(10, 10, 10, 0.3);
  color: rgba(10, 10, 10, 0.5);
}

body.theme-inverted .billet-faq-tab.is-active {
  background: #0A0A0A !important;
  border-color: #0A0A0A !important;
  color: #BBFF00 !important;
}

body.theme-inverted .faq-item {
  border-color: rgba(10, 10, 10, 0.12) !important;
}

body.theme-inverted .faq-item__summary {
  color: #0A0A0A !important;
}

body.theme-inverted .faq-item__content {
  color: #1E1E1E !important;
}

/* ── Theme inverted: Partenaires ─── */
body.theme-inverted .partner-tier {
  border-color: rgba(10, 10, 10, 0.1) !important;
}

body.theme-inverted .partner-tier-label,
body.theme-inverted .partner-tier-title {
  color: #0A0A0A !important;
}

body.theme-inverted .partner-logo-placeholder {
  border-color: rgba(10, 10, 10, 0.15) !important;
  color: rgba(10, 10, 10, 0.3) !important;
}

body.theme-inverted .partner-cta-title {
  color: #0A0A0A !important;
}

body.theme-inverted .partner-cta-desc {
  color: #1E1E1E !important;
}

body.theme-inverted .partner-modal-inner,
body.theme-inverted .partner-form-section {
  background: #BBFF00 !important;
  border-color: #0A0A0A !important;
}

body.theme-inverted .partner-modal-title,
body.theme-inverted .partner-form-title {
  color: #0A0A0A !important;
}

body.theme-inverted .partner-modal label,
body.theme-inverted .partner-form-section label {
  color: #0A0A0A !important;
}

body.theme-inverted .partner-modal input,
body.theme-inverted .partner-modal textarea,
body.theme-inverted .partner-form-section input,
body.theme-inverted .partner-form-section textarea {
  border-color: rgba(10, 10, 10, 0.2) !important;
  color: #0A0A0A !important;
  background: rgba(10, 10, 10, 0.04) !important;
}

body.theme-inverted .partner-form-close {
  color: #0A0A0A !important;
  border-color: #0A0A0A !important;
}

body.theme-inverted .partner-form-close:hover {
  background: #0A0A0A !important;
  color: #BBFF00 !important;
  border-color: #0A0A0A !important;
}

/* ── Theme inverted: Ville de Fréjus ─── */
body.theme-inverted .frejus-page {
  background: #BBFF00 !important;
}

body.theme-inverted .frejus-h2,
body.theme-inverted .frejus-h3,
body.theme-inverted .frejus-card-h {
  color: #0A0A0A !important;
}

body.theme-inverted .frejus-lead {
  color: #0A0A0A !important;
}

body.theme-inverted .frejus-body {
  color: #1E1E1E !important;
}

body.theme-inverted .frejus-card {
  border-color: rgba(10, 10, 10, 0.12) !important;
  background: rgba(10, 10, 10, 0.04) !important;
}

body.theme-inverted .frejus-info-block {
  border-color: rgba(10, 10, 10, 0.1) !important;
  background: rgba(10, 10, 10, 0.03) !important;
}

body.theme-inverted .frejus-label {
  color: rgba(10, 10, 10, 0.6) !important;
}

body.theme-inverted .frejus-link {
  color: #0A0A0A !important;
}

body.theme-inverted .frejus-useful-links a {
  color: #0A0A0A !important;
  border-color: rgba(10, 10, 10, 0.1) !important;
}

body.theme-inverted .frejus-hours li {
  color: #1E1E1E !important;
}

/* ── Theme inverted: Contact ─── */
body.theme-inverted .contact-form {
  background: rgba(10, 10, 10, 0.04) !important;
  border-color: rgba(10, 10, 10, 0.12) !important;
}

body.theme-inverted .contact-form label {
  color: #0A0A0A !important;
}

body.theme-inverted .contact-form input,
body.theme-inverted .contact-form textarea {
  border-color: rgba(10, 10, 10, 0.2) !important;
  color: #0A0A0A !important;
  background: transparent !important;
}

body.theme-inverted .contact-form input:focus,
body.theme-inverted .contact-form textarea:focus {
  border-color: #0A0A0A !important;
}

/* ── Theme inverted: Page Hero (all pages) ─── */
body.theme-inverted .page-hero {
  background: #BBFF00 !important;
}

body.theme-inverted .page-hero-title {
  color: #0A0A0A !important;
}

body.theme-inverted .page-hero-subtitle {
  color: #1E1E1E !important;
}

/* ── Theme inverted: Gallery ─── */
body.theme-inverted .gallery-section {
  background: #BBFF00 !important;
}

body.theme-inverted .gallery-arrow {
  background: #0A0A0A !important;
  color: #BBFF00 !important;
}


/* ── Burger button ─────────────────────────────────── */

.main-header .burger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: none;
  border: 2px solid rgba(245, 245, 240, 0.3);
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
  flex-shrink: 0;
}

.main-header .burger:hover {
  border-color: #BBFF00;
  background: rgba(187, 255, 0, 0.06);
}

.main-header .burger:active {
  background: rgba(187, 255, 0, 0.12);
  transform: scale(0.95);
}

/* The 3 bars inside burger — use absolute positioning for reliable X */
.burger-bars {
  position: relative;
  width: 22px;
  height: 16px;
  z-index: 1;
}

.burger-bars i {
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  background: #F5F5F0;
  border-radius: 1px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease,
              width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

/* 3 bars positioned at top / middle / bottom */
.burger-bars i:nth-child(1) { top: 0; width: 100%; }
.burger-bars i:nth-child(2) { top: 7px; width: 60%; }
.burger-bars i:nth-child(3) { top: 14px; width: 100%; }

/* Open state → X (all bars move to center at 7px, rotate) */
.burger.is-open {
  border-color: #BBFF00;
  background: rgba(187, 255, 0, 0.1);
}

.burger.is-open .burger-bars i:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
  width: 100%;
}

.burger.is-open .burger-bars i:nth-child(2) {
  opacity: 0;
  width: 0;
}

.burger.is-open .burger-bars i:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
  width: 100%;
}


/* ── Billetterie button ────────────────────────────── */

.btn-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
  text-decoration: none;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: #BBFF00;
  color: #0A0A0A;
  border: 2px solid #BBFF00;
  padding: 0 28px;
  height: 44px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-header::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: #0A0A0A;
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-header:hover::before {
  transform: translateY(0);
}

.btn-header:hover {
  color: #BBFF00;
  border-color: #BBFF00;
}

/* Keep content above the ::before layer */
.btn-header-icon,
.btn-header-text {
  position: relative;
  z-index: 1;
}

.btn-header-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.btn-header:hover .btn-header-icon {
  transform: rotate(-8deg) scale(1.1);
}

/* Mobile: show only icon; Desktop: show text */
.btn-header-text {
  display: none;
}

@media (min-width: 640px) {
  .btn-header-text {
    display: inline;
  }
  .btn-header-icon {
    width: 18px;
    height: 18px;
  }
}

/* ── Scrolled state ──────────────────────────────── */

.main-header.is-scrolled {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(187, 255, 0, 0.12);
}

.main-header.is-scrolled .logo-img {
  width: 220px;
  filter: drop-shadow(0 0 12px rgba(187, 255, 0, 0.1));
}

.main-header.is-scrolled .burger {
  border-color: rgba(245, 245, 240, 0.2);
}


/* ==========================================================================
   2. NAVIGATION OVERLAY
   ========================================================================== */

.nav-brutal {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 9999;
  background: #0A0A0A;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 100px clamp(24px, 6vw, 80px) 60px;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.4s ease,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0.5s;
}

/* Overlay backdrop — cosmetic, must not block burger */
.nav-brutal-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  pointer-events: none;
}

/* Open state — triggered by body.nav-open */
body.nav-open .nav-brutal {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.4s ease,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0s;
}

.nav-brutal-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Primary nav */
.nav-brutal-primary {
  flex: 1;
}

.nav-primary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-primary-list a,
.nav-brutal-primary .nav-link {
  display: inline-block;
  font-family: "Akira Expanded", "Impact", sans-serif;
  font-size: clamp(32px, 6vw, 56px);
  text-transform: uppercase;
  color: #F5F5F0;
  text-decoration: none;
  line-height: 1.15;
  transition: color 0.25s ease, transform 0.25s ease;
  padding: 4px 0;
}

.nav-primary-list a:hover,
.nav-brutal-primary .nav-link:hover {
  color: #BBFF00;
}

/* Nav link reveal animation */
.nav-link {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.25s ease;
}

.nav-link.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Secondary nav */
.nav-brutal-secondary {
  margin-top: 48px;
}

.nav-secondary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-secondary-list a {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.875rem;
  color: #7A8899;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.25s ease;
}

.nav-secondary-list a:hover {
  color: #BBFF00;
}

/* Social row */
.nav-brutal-social {
  margin-top: 48px;
  display: flex;
  gap: 24px;
  align-items: center;
}

.nav-brutal-social a {
  color: #7A8899;
  transition: color 0.25s ease;
  text-decoration: none;
}

.nav-brutal-social a:hover {
  color: #BBFF00;
}


/* ==========================================================================
   3. HERO POSTER SECTION — acid green poster / flyer layout
   ========================================================================== */

/* ── Base section ─── */
.hero-poster {
  position: relative;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100svh;
  height: 100vh;
  height: -webkit-fill-available;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0A0A0A;
  padding: clamp(80px, 10vh, 120px) clamp(20px, 4vw, 60px) clamp(40px, 6vh, 80px);
}

/* ── Poster grid ─── */
.hero-poster-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(160px, 0.54fr) 1fr;
  gap: clamp(6px, 1vw, 14px);
  width: 100%;
  max-width: 1040px;
  align-items: stretch;
}

/* ── LEFT: Date SVG (inline) ───
   Inline SVG is NOT a replaced element — it stretches naturally.
   preserveAspectRatio="none" on the SVG lets it fill the cell. */
.hero-dates {
  display: flex;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
}

.hero-date-svg {
  width: 100%;
  height: 100%;
  display: block;
  flex: 1 1 auto;
}

/* SVG is green (#BBFF00) by default — turn black in inverted theme */
body.theme-inverted .hero-date-svg {
  filter: brightness(0);
}

/* ── RIGHT: Main column ─── */
.hero-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── SXPRESS chrome logo (hidden — cadre removed) ─── */
.hero-sxpress {
  display: none;
}

/* ── Arenes photo ─── */
.hero-arenes-photo {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid rgba(187, 255, 0, 0.12);
}

.hero-arenes-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── CRT / Old-TV effect on arenes photo ─── */
.glitch-wrapper {
  position: relative;
}

/* Scanlines overlay */
.glitch-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: multiply;
  animation: crt-scanline-flicker 0.12s steps(2) infinite;
}

/* RGB horizontal tear band */
.glitch-wrapper::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background: linear-gradient(
    0deg,
    transparent 0%,
    rgba(187, 255, 0, 0.15) 48%,
    rgba(0, 255, 255, 0.1) 50%,
    rgba(255, 0, 80, 0.08) 52%,
    transparent 100%
  );
  animation: crt-tear 8s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* Main image CRT glitch */
.glitch-img {
  animation: crt-glitch 8s ease-in-out infinite;
}

/* Scanline brightness flicker */
@keyframes crt-scanline-flicker {
  0%   { opacity: 0.35; }
  50%  { opacity: 0.55; }
  100% { opacity: 0.35; }
}

/* RGB tear band sweeps vertically */
@keyframes crt-tear {
  0%, 85%, 100% {
    opacity: 0;
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
  }
  87% {
    opacity: 1;
    -webkit-clip-path: inset(15% 0 75% 0);
    clip-path: inset(15% 0 75% 0);
    transform: translateX(-3px);
  }
  88% {
    opacity: 1;
    -webkit-clip-path: inset(35% 0 45% 0);
    clip-path: inset(35% 0 45% 0);
    transform: translateX(4px);
  }
  89% {
    opacity: 1;
    -webkit-clip-path: inset(60% 0 20% 0);
    clip-path: inset(60% 0 20% 0);
    transform: translateX(-2px);
  }
  90% {
    opacity: 1;
    -webkit-clip-path: inset(80% 0 5% 0);
    clip-path: inset(80% 0 5% 0);
    transform: translateX(3px);
  }
  91% {
    opacity: 0;
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
  }
}

/* Image distortion burst — chromatic split + skew + brightness flash */
@keyframes crt-glitch {
  0%, 86%, 92%, 100% {
    transform: translate(0);
    filter: none;
  }
  87% {
    transform: translate(4px, 0) skewX(-0.8deg);
    filter: drop-shadow(3px 0 0 rgba(187, 255, 0, 0.6))
            drop-shadow(-3px 0 0 rgba(0, 255, 255, 0.4))
            brightness(1.15);
  }
  88% {
    transform: translate(-3px, 1px) skewX(0.5deg);
    filter: drop-shadow(-2px 0 0 rgba(255, 0, 80, 0.5))
            drop-shadow(2px 0 0 rgba(187, 255, 0, 0.5))
            brightness(0.85);
  }
  89% {
    transform: translate(2px, -1px);
    filter: drop-shadow(4px 0 0 rgba(0, 255, 255, 0.3))
            brightness(1.3);
  }
  90% {
    transform: translate(-1px, 0) skewX(-0.3deg);
    filter: brightness(0.7) contrast(1.3);
  }
  91% {
    transform: translate(0);
    filter: brightness(1.4);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .glitch-img,
  .glitch-wrapper::before,
  .glitch-wrapper::after {
    animation: none !important;
  }
}

/* Show default photo, hide inverted */
.hero-arenes-img--inverted {
  display: none;
}

body.theme-inverted .hero-arenes-img--default {
  display: none;
}

body.theme-inverted .hero-arenes-img--inverted {
  display: block;
}

/* ── Location: Arene image ─── */
.hero-lieu {
  display: block;
  margin-top: 3px;
  line-height: 0;
}

.hero-lieu-img {
  display: block;
  width: 100%;
  height: auto;
}

/* SVG is green (#BBFF00) by default — turn black in inverted theme */
body.theme-inverted .hero-lieu-img {
  filter: brightness(0);
}

.hero-lieu-line1,
.hero-lieu-line2 { display: none; }
.hero-lieu-line1 .lieu-space { display: none; }

/* ── Decorative 'rond' strips on hero edges ─── */
.hero-rond {
  position: absolute;
  top: 0;
  width: clamp(50px, 7vw, 120px);
  height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(187,255,0,.25))
         drop-shadow(0 0 40px rgba(187,255,0,.08));
}

.hero-rond--left {
  left: 0;
  animation: heroRondFloatL 8s ease-in-out infinite, heroRondPulse 4s ease-in-out infinite;
}

.hero-rond--right {
  right: 0;
  animation: heroRondFloatR 9s ease-in-out infinite, heroRondPulse 5s ease-in-out infinite 1s;
}

/* ── CTA Button (inside hero-main) ─── */
.hero-poster-cta {
  position: relative;
  z-index: 3;
  margin-top: 0;
  width: 100%;
}

.hero-poster-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 44px;
  background: #BBFF00;
  color: #0A0A0A;
  border: 2px solid #BBFF00;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-poster-btn:hover {
  background: transparent;
  color: #BBFF00;
  border-color: #BBFF00;
}

.hero-poster-btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── Scroll indicator (dark variant for green bg) ─── */
.scroll-indicator-arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 2px solid #BBFF00;
  border-bottom: 2px solid #BBFF00;
  transform: rotate(45deg);
  animation: scrollBounce 1.6s ease-in-out infinite;
}

.scroll-indicator-arrow--dark {
  border-right-color: #0A0A0A;
  border-bottom-color: #0A0A0A;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 1; }
  50%      { transform: translateY(8px) rotate(45deg); opacity: 0.4; }
}

/* ── Registration marks (dark variant) ─── */
.reg-marks--dark .reg-mark::before,
.reg-marks--dark .reg-mark::after {
  background: rgba(10, 10, 10, 0.2);
}

/* ── Hero social icons ─── */
.hero-social {
  position: absolute;
  bottom: 5rem;
  right: clamp(1rem, 3vw, 3rem);
  z-index: 5;
}

.hero-social-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.hero-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(187, 255, 0, 0.25);
  color: #BBFF00;
  background: transparent;
  transition: background 0.3s ease, transform 0.3s ease;
  text-decoration: none;
}

.hero-social-link svg {
  width: 16px;
  height: 16px;
  transition: fill 0.3s ease;
}

.hero-social-link svg path,
.hero-social-link svg rect,
.hero-social-link svg circle {
  fill: #BBFF00;
}

.hero-social-link:hover {
  background: #BBFF00;
}

.hero-social-link:hover svg path,
.hero-social-link:hover svg rect,
.hero-social-link:hover svg circle {
  fill: #0A0A0A;
}

/* Mobile: move social icons above scroll arrow */
@media (max-width: 768px) {
  .hero-social {
    bottom: auto;
    top: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5.5rem;
  }
  .hero-social-list {
    justify-content: center;
  }
  .scroll-indicator {
    bottom: 20px;
  }
}


/* ==========================================================================
   3b. SPINNING CHROME LOGO
   ========================================================================== */

.spinning-logo-section {
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) 0;
  background: #0A0A0A;
  position: relative;
  overflow: hidden;
}

.spinning-logo-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pulsing glow ring behind the logo */
.spinning-logo-glow {
  position: absolute;
  width: 200%;
  height: 200%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(187, 255, 0, 0.06) 0%, transparent 55%);
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

/* Logo — CRT / Old TV effect: float + glitch + scanlines */
.spinning-logo {
  width: clamp(100px, 18vw, 180px);
  height: auto;
  animation: logoFloat 6s ease-in-out infinite, logoCRT 10s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(187, 255, 0, 0.12)) brightness(1.05) contrast(1.1);
  transition: filter 0.5s ease;
  cursor: pointer;
  /* Remove any background — logo is transparent PNG */
  background: none !important;
  mix-blend-mode: screen;
}

.spinning-logo:hover {
  filter: drop-shadow(0 0 50px rgba(187, 255, 0, 0.5)) brightness(1.2) contrast(1.15);
  animation: logoFloat 3s ease-in-out infinite, logoCRTHover 0.5s steps(3) infinite;
}

/* Scanline overlay via pseudo-element on wrapper */
.spinning-logo-wrapper::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.06) 2px,
      rgba(0, 0, 0, 0.06) 4px
    );
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
  animation: scanlineFlicker 0.15s steps(2) infinite;
}

@keyframes scanlineFlicker {
  0%   { opacity: 0.4; }
  50%  { opacity: 0.6; }
  100% { opacity: 0.4; }
}

/* Gentle floating — like it's breathing */
@keyframes logoFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-12px) scale(1.02); }
}

/* CRT glitch — chromatic split + horizontal tear + subtle static */
@keyframes logoCRT {
  0%, 88%, 100% {
    filter: drop-shadow(0 0 20px rgba(187, 255, 0, 0.12)) brightness(1.05) contrast(1.1);
    clip-path: inset(0);
    transform: translateY(0) scale(1);
  }
  89% {
    filter: drop-shadow(3px 0 0 rgba(187, 255, 0, 0.7)) drop-shadow(-3px 0 0 rgba(0, 255, 255, 0.5)) brightness(1.3);
    clip-path: inset(8% 0 65% 0);
  }
  90% {
    filter: drop-shadow(-2px 0 0 rgba(255, 0, 80, 0.5)) drop-shadow(2px 0 0 rgba(187, 255, 0, 0.7)) brightness(0.8);
    clip-path: inset(35% 0 15% 0);
  }
  91% {
    filter: drop-shadow(5px 0 0 rgba(0, 255, 255, 0.4)) brightness(1.5);
    clip-path: inset(60% 0 5% 0);
    transform: translateY(-8px) scale(1.01) skewX(-1.5deg);
  }
  92% {
    filter: drop-shadow(0 0 30px rgba(187, 255, 0, 0.25)) brightness(1.1);
    clip-path: inset(0);
    transform: translateY(-8px) scale(1.01) skewX(1deg);
  }
  93% {
    filter: drop-shadow(0 0 20px rgba(187, 255, 0, 0.12)) brightness(1.05) contrast(1.1);
    clip-path: inset(0);
    transform: translateY(-10px) scale(1.02) skewX(0);
  }
}

/* Hover CRT — faster, more intense */
@keyframes logoCRTHover {
  0%   { clip-path: inset(12% 0 55% 0); filter: drop-shadow(4px 0 0 rgba(187, 255, 0, 0.9)) drop-shadow(-4px 0 0 rgba(0, 255, 255, 0.7)) brightness(1.4); }
  33%  { clip-path: inset(45% 0 10% 0); filter: drop-shadow(-3px 0 0 rgba(255, 0, 80, 0.7)) drop-shadow(3px 0 0 rgba(187, 255, 0, 0.9)) brightness(0.7); }
  66%  { clip-path: inset(5% 0 40% 0); filter: drop-shadow(5px 0 0 rgba(0, 255, 255, 0.6)) brightness(1.6); }
}


/* ==========================================================================
   3c. TITLE FONT METRICS — Akira Expanded consistency
   ========================================================================== */

/* Global Akira title rules — tighter line-height for impact */
.font-akira,
[class*="font-akira"],
.hero-title,
.edition-title-outline,
.edition-year,
.lineup-title,
.gallery-title,
.billetterie-title,
.newsletter-title,
.social-section .social-title {
  line-height: 0.9;
  letter-spacing: -0.02em;
}

/* Specific overrides for different contexts */
.hero-title {
  line-height: 0.85;
  letter-spacing: -0.02em;
}

.edition-title-outline {
  line-height: 0.9;
  -webkit-text-stroke: 2px #F5F5F0;
  color: transparent;
}

.edition-year {
  line-height: 0.85;
  margin-top: -0.1em;
}

/* Section titles — controlled sizing + centered */
.lineup-title,
.gallery-title,
.billetterie-title,
.newsletter-title {
  line-height: 0.9;
  text-align: center;
}

/* Section content containers — center all children */
.lineup-content,
.gallery-header,
.billetterie-content,
.newsletter-content,
.social-content,
.edition-content,
.partenaires-carousel-content {
  text-align: center;
}

/* Hero subtitle uses Space Grotesk — separate treatment */
.hero-subtitle {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1.2;
}


/* ==========================================================================
   4. HERO PARTS — parts/hero.html (reusable)
   ========================================================================== */

.hero-overline {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.875rem;
  color: #BBFF00;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hero-tagline {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  color: #C0C8D4;
  letter-spacing: 0.2em;
}

.hero-title-line {
  display: block;
}

.hero-title-line.accent {
  color: #BBFF00;
}

.hero-title-line.small {
  font-size: 0.6em;
  color: #C0C8D4;
}

/* Button variants */
.btn-brutal--primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: #BBFF00;
  color: #0A0A0A;
  border: 2px solid #BBFF00;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-brutal--primary:hover {
  background: transparent;
  color: #BBFF00;
}

.btn-brutal--outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: transparent;
  color: #BBFF00;
  border: 2px solid #BBFF00;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-brutal--outline:hover {
  background: #BBFF00;
  color: #0A0A0A;
}

.btn-brutal--lg {
  padding: 20px 48px;
  font-size: 1rem;
}


/* ==========================================================================
   5. EDITION SECTION
   ========================================================================== */

/* ── Lottie logo animation ─── */
.edition-lottie-wrapper {
  display: flex;
  justify-content: center;
  padding: 0;
}

.edition-lottie {
  width: clamp(200px, 35vw, 400px);
  height: clamp(200px, 35vw, 400px);
}

.edition-title-outline {
  -webkit-text-stroke: 2px #F5F5F0;
  color: transparent;
  font-family: "Akira Expanded", "Impact", sans-serif;
  text-transform: uppercase;
}

.edition-year {
  font-family: "Akira Expanded", "Impact", sans-serif;
  text-transform: uppercase;
}

.edition-location-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2rem;
}

.edition-description {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  color: #C0C8D4;
  line-height: 1.7;
}

.separator-chrome {
  height: 2px;
  max-width: 120px;
  margin: 2rem auto;
  background: #C0C8D4;
  opacity: 0.5;
  border: none;
}


/* ==========================================================================
   6. GALLERY CAROUSEL
   ========================================================================== */

.gallery-carousel {
  position: relative;
  overflow: hidden;
}

.gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 48px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
}

.gallery-track::-webkit-scrollbar {
  display: none;                 /* Chrome / Safari */
}

.gallery-item {
  flex: 0 0 auto;
  width: calc(50vw - 32px);
  aspect-ratio: 16 / 10;
  scroll-snap-align: start;
}

.gallery-item-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(60%) contrast(1.2);
  transition: filter 0.5s ease, transform 0.5s ease;
}

.gallery-item:hover .gallery-img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.05);
}

.gallery-item-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(10, 10, 10, 0.6) 100%);
  pointer-events: none;
}

/* Nav buttons */
.gallery-nav {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
}

.gallery-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #7A8899;
  background: transparent;
  color: #F5F5F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.gallery-nav-btn:hover {
  border-color: #BBFF00;
  color: #BBFF00;
}

/* Progress bar */
.gallery-progress {
  height: 3px;
  background: #1E1E1E;
  margin-top: 16px;
  max-width: 200px;
  margin-inline: auto;
  border-radius: 2px;
  overflow: hidden;
}

.gallery-progress-bar {
  height: 100%;
  background: #BBFF00;
  width: 0%;
  transition: width 0.3s ease;
}


/* ==========================================================================
   7. FRONT-PAGE COUNTDOWN TIMER
   ========================================================================== */

.countdown-timer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 4vw, 48px);
}

.countdown-unit {
  text-align: center;
  flex-shrink: 0;
}

.countdown-number {
  font-size: clamp(48px, 10vw, 120px);
  color: #BBFF00;
  line-height: 1;
  display: block;
}

.countdown-label-unit {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #7A8899;
  margin-top: 8px;
  display: block;
}

.countdown-timer .countdown-separator {
  font-family: "Akira Expanded", "Impact", sans-serif;
  font-size: clamp(48px, 10vw, 120px);
  line-height: 1;
  color: #7A8899;
  opacity: 0.4;
}


/* ==========================================================================
   8. FRONT-PAGE NEWSLETTER
   ========================================================================== */

.newsletter-form {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.newsletter-form-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

.newsletter-input-wrapper {
  position: relative;
  min-width: 0;
}

.newsletter-input {
  width: 100%;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid #333;
  color: #F5F5F0;
  font-family: "Space Grotesk", sans-serif;
  font-size: max(16px, 1rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
  box-sizing: border-box;
  border-radius: 0;
  -webkit-appearance: none;
  flex: none;
}

.newsletter-input::placeholder {
  color: #555;
  letter-spacing: 0.08em;
}

.newsletter-input:focus {
  border-color: #BBFF00;
  background: rgba(187, 255, 0, 0.03);
}

.newsletter-input-line {
  display: none;
}

.newsletter-submit {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  background: #BBFF00;
  color: #0A0A0A;
  border: 2px solid #BBFF00;
  border-top: none;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  border-radius: 0;
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
  /* Reset conflicting btn-brutal styles */
  transform: none;
  flex: none;
}

.newsletter-submit::after {
  display: none !important;
}

.newsletter-submit:hover {
  background: transparent;
  color: #BBFF00;
  border: 2px solid #BBFF00;
  transform: none;
}

.newsletter-submit-text {
  display: inline;
}

.newsletter-submit-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.newsletter-consent {
  font-size: 0.75rem;
  color: #666;
  margin-top: 2rem;
  text-align: center;
  line-height: 1.5;
  font-family: "Space Grotesk", sans-serif;
}

/* Newsletter feedback */
.newsletter-feedback {
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.875rem;
  margin-top: 1rem;
  padding: 12px 16px;
  border: 1px solid transparent;
}

.newsletter-feedback.success {
  color: #BBFF00;
  border-color: rgba(187, 255, 0, 0.3);
  background: rgba(187, 255, 0, 0.06);
  display: block !important;
}

.newsletter-feedback.error {
  color: #ff4444;
  border-color: rgba(255, 68, 68, 0.3);
  background: rgba(255, 68, 68, 0.06);
  display: block !important;
}

.newsletter-submit.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

.newsletter-submit.is-loading .newsletter-submit-text {
  visibility: hidden;
}

.newsletter-submit.is-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid transparent;
  border-top-color: #0A0A0A;
  border-radius: 50%;
  animation: spinLoader 0.6s linear infinite;
}

@keyframes spinLoader {
  to { transform: rotate(360deg); }
}


/* ==========================================================================
   9. SOCIAL SECTION (front-page.html)
   ========================================================================== */

.social-section .social-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 360px;
  margin: 0 auto;
}

.social-section .social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
  border: 1px solid #1E1E1E;
  transition: all 0.3s ease;
  text-decoration: none;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  /* Override components.css defaults */
  width: auto;
  height: auto;
  color: inherit;
}

.social-section .social-link:hover {
  border-color: #BBFF00;
  transform: translateY(-4px);
}

.social-section .social-link-icon {
  color: #F5F5F0;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-section .social-link-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
}

.social-section .social-link:hover .social-link-icon {
  color: #BBFF00;
}

.social-section .social-link-label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7A8899;
  transition: color 0.3s ease;
  text-align: center;
  white-space: nowrap;
}

.social-section .social-link:hover .social-link-label {
  color: #F5F5F0;
}


/* ==========================================================================
   9b. LINEUP DAY CARDS (front-page.html)
   ========================================================================== */

/* ==========================================================================
   9c. PARTENAIRES CAROUSEL (front-page.html)
   ========================================================================== */

.partenaires-carousel-section {
  position: relative;
  overflow: hidden;
}

.partenaires-carousel-content {
  text-align: center;
}

.partenaires-carousel-title {
  line-height: 0.9;
  text-align: center;
}

.partenaires-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 3rem;
  /* Fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.partenaires-marquee-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: partenairesScroll 30s linear infinite;
}

.partenaires-marquee-item {
  flex-shrink: 0;
}

.partenaire-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 80px;
  border: 1px solid rgba(192, 200, 212, 0.15);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.3s ease;
}

.partenaire-placeholder span {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7A8899;
  opacity: 0.6;
}

.partenaire-placeholder:hover {
  border-color: rgba(187, 255, 0, 0.3);
  background: rgba(187, 255, 0, 0.04);
}

.partenaire-placeholder img {
  max-width: 140px;
  max-height: 50px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.7);
  opacity: 0.5;
  transition: all 0.4s ease;
}

.partenaire-placeholder:hover img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

@keyframes partenairesScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.partenaires-marquee:hover .partenaires-marquee-track {
  animation-play-state: paused;
}

/* ==========================================================================
   9d. LINEUP DAY CARDS (front-page.html)
   ========================================================================== */

.lineup-day-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 3rem auto 0;
}

.lineup-day-card {
  background: #111;
  border: 2px solid #1E1E1E;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.lineup-day-card:hover {
  border-color: rgba(187, 255, 0, 0.3);
}

.lineup-day-header {
  background: #BBFF00;
  color: #0A0A0A;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lineup-day-name {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
}

.lineup-day-date {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing: -0.02em;
}

.lineup-day-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 24px;
}

.lineup-slot {
  aspect-ratio: 1 / 1;
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
}

.lineup-slot:hover {
  border-color: rgba(187, 255, 0, 0.2);
}

.lineup-slot-mystery {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #333;
  -webkit-user-select: none;
  user-select: none;
  animation: mysteryPulse 3s ease-in-out infinite;
}

@keyframes mysteryPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; color: rgba(187, 255, 0, 0.3); }
}

/* Footer — artistic layout handled in brutal.css */


/* ==========================================================================
   10. TICKET CARDS — page-billetterie.html
   ========================================================================== */

.grid-tickets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.card-ticket {
  background: #1E1E1E;
  padding: 40px 32px;
  border: 2px solid #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.card-ticket:hover {
  transform: translateY(-6px);
  border-color: #BBFF00;
}

.card-ticket--featured {
  border-color: #BBFF00;
  position: relative;
}

.card-ticket--featured::before {
  content: "★";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #BBFF00;
  color: #0A0A0A;
  padding: 4px 16px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-ticket__badge {
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
  color: #BBFF00;
}

.card-ticket__title {
  margin-bottom: 16px;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.card-ticket__price {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 24px;
}

.card-ticket__features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  text-align: left;
  width: 100%;
}

.card-ticket__features li {
  padding: 8px 0;
  border-bottom: 1px solid #333;
  font-size: 0.875rem;
  color: #C0C8D4;
  font-family: "Inter", sans-serif;
}

.card-ticket__features li::before {
  content: "✦ ";
  color: #BBFF00;
}

.card-ticket__cta {
  margin-top: auto;
}

.btn.btn-acid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: #BBFF00;
  color: #0A0A0A;
  border: 2px solid #BBFF00;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn.btn-acid:hover {
  background: transparent;
  color: #BBFF00;
}


/* ==========================================================================
   11. INFO BLOCKS — page-infos-pratiques.html (BEM enhancements)
   ========================================================================== */

.info-block__title {
  font-family: "Akira Expanded", "Impact", sans-serif;
  text-transform: uppercase;
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: #F5F5F0;
  margin-bottom: 1rem;
}

.info-block__content {
  color: #C0C8D4;
  font-family: "Inter", sans-serif;
  line-height: 1.7;
}

.info-block__content h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #BBFF00;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-block__content p {
  margin-bottom: 1rem;
}

.info-block__content ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.info-block__content li {
  margin-bottom: 0.5rem;
}


/* ==========================================================================
   12. FAQ — page-faq.html
   ========================================================================== */

.faq-item {
  border-bottom: 1px solid #1E1E1E;
  padding: 0;
}

.faq-item__summary {
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #F5F5F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color 0.3s ease;
}

.faq-item__summary:hover {
  color: #BBFF00;
}

/* Remove default markers */
.faq-item__summary::-webkit-details-marker {
  display: none;
}

.faq-item__summary::marker {
  display: none;
  content: "";
}

/* Plus / minus indicator */
.faq-item__summary::after {
  content: "+";
  font-size: 1.5rem;
  color: #BBFF00;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  line-height: 1;
}

.faq-item[open] .faq-item__summary::after {
  content: "−";
}

.faq-item__content {
  padding: 0 0 20px 0;
  color: #C0C8D4;
  line-height: 1.7;
  font-family: "Inter", sans-serif;
  font-size: 0.9375rem;
}

.faq-item__content p {
  margin-bottom: 0.75rem;
}

.faq-item__content p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   13. PAGE HERO
   ========================================================================== */

.page-hero {
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: clamp(80px, 15vh, 140px) clamp(16px, 4vw, 48px) clamp(40px, 6vh, 80px);
}

.page-hero__title,
.page-hero-title {
  margin: 0;
  font-family: "Akira Expanded", "Impact", sans-serif;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 10vw, 6rem);
  color: #BBFF00;
  line-height: 1;
}

.page-hero__subtitle,
.page-hero-subtitle {
  margin-top: 1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(0.875rem, 2vw, 1.25rem);
  color: #C0C8D4;
  letter-spacing: 0.15em;
}

/* Tight hero variant for billetterie */
.page-hero--tight {
  min-height: 28vh;
  padding: clamp(60px, 10vh, 100px) clamp(16px, 4vw, 48px) clamp(20px, 3vh, 40px);
}

/* Fréjus hero — arene background */
.page-hero--frejus {
  min-height: 38vh;
  background: url('../images/arene-frejus.jpg') center center / cover no-repeat;
  position: relative;
}
.page-hero--frejus::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,.55) 0%, rgba(10,10,10,.8) 100%);
  z-index: 0;
}
.page-hero--frejus > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   14b. LINEUP PAGE — Plages Electroniques style grid
   ========================================================================== */

/* Filter bar */
.lineup-filter-bar {
  background: #0A0A0A;
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(187, 255, 0, 0.1);
}

.lineup-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.lineup-tab {
  background: transparent;
  border: 2px solid #333;
  color: #7A8899;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lineup-tab:hover {
  border-color: #BBFF00;
  color: #BBFF00;
}

.lineup-tab.is-active {
  background: #BBFF00;
  border-color: #BBFF00;
  color: #0A0A0A;
}

/* Lineup section */
.lineup-section {
  background: #0A0A0A;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* Grid layout — masonry-like */
.lineup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Headliner cards span 2 columns */
.lineup-card--headliner {
  grid-column: span 2;
}

/* Card base */
.lineup-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(187, 255, 0, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
}

.lineup-card:hover {
  transform: translateY(-4px);
  border-color: rgba(187, 255, 0, 0.3);
}

/* Card background — dark gradient with subtle pattern */
.lineup-card-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background:
    linear-gradient(145deg, #1a1a2e 0%, #0A0A0A 50%, #16213e 100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.lineup-card:hover .lineup-card-bg {
  transform: scale(1.05);
}

/* Card background noise shimmer */
.lineup-card-bg::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(187, 255, 0, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(192, 200, 212, 0.03) 0%, transparent 40%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lineup-card:hover .lineup-card-bg::after {
  opacity: 1;
}

/* Card content overlay — positioned at bottom */
.lineup-card-content {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.85) 0%, transparent 60%);
  z-index: 2;
}

/* Headliner tag */
.lineup-card-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #0A0A0A;
  background: #BBFF00;
  padding: 4px 10px;
}

/* Artist name — the big "?" */
.lineup-card-name {
  font-family: "Akira Expanded", "Impact", sans-serif;
  font-size: clamp(3rem, 6vw, 5rem);
  color: #F5F5F0;
  line-height: 1;
  text-shadow: 0 0 40px rgba(187, 255, 0, 0.15);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.lineup-card:hover .lineup-card-name {
  color: #BBFF00;
  text-shadow: 0 0 60px rgba(187, 255, 0, 0.35);
}

/* Headliner name — bigger */
.lineup-card--headliner .lineup-card-name {
  font-size: clamp(4rem, 8vw, 8rem);
}

/* Card meta — day + scene */
.lineup-card-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.lineup-card-day {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #BBFF00;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lineup-card-scene {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.6875rem;
  color: #7A8899;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lineup-card-scene::before {
  content: '·';
  margin-right: 12px;
  color: #333;
}

/* Counter */
.lineup-counter {
  text-align: center;
  padding: 2rem 0 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}

.lineup-counter span:first-child {
  color: #BBFF00;
  font-weight: 700;
  font-size: 1.25rem;
}

/* Empty state */
.lineup-empty {
  text-align: center;
  padding: 4rem 0;
}

/* CTA billetterie section */
.cta-billetterie {
  text-align: center;
  position: relative;
}


/* ==========================================================================
   15. RESPONSIVE — Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {

  /* Header */
  .main-header {
    padding: 0.75rem 0.75rem;
  }

  .main-header .header-inner {
    gap: 4px;
  }

  /* On mobile, make logo part of flex flow instead of absolute */
  .main-header .header-center {
    position: static;
    transform: none;
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-header .logo-img {
    width: clamp(110px, 26vw, 170px);
    height: auto;
  }

  .main-header .header-right {
    gap: 6px;
  }

  /* Toggles at 768px — compact but visible */
  .header-toggle {
    height: 38px;
    padding: 0 10px;
    font-size: 0.6875rem;
  }
  .theme-toggle {
    padding: 0 8px;
  }

  .main-header .burger {
    width: 40px;
    height: 40px;
  }

  .burger-bars {
    width: 18px;
    height: 14px;
  }

  .burger-bars i:nth-child(2) { top: 6px; }
  .burger-bars i:nth-child(3) { top: 12px; }

  .burger.is-open .burger-bars i:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
    width: 100%;
  }

  .burger.is-open .burger-bars i:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
    width: 100%;
  }

  .main-header .btn-header {
    height: 38px;
    padding: 0 10px;
    font-size: 0;
    box-sizing: border-box;
  }

  .main-header .btn-header .btn-header-icon {
    width: 20px;
    height: 20px;
  }

  .main-header.is-scrolled {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  .main-header.is-scrolled .logo-img {
    width: clamp(80px, 20vw, 130px);
  }

  /* Hero Poster — mobile layout */
  .hero-poster {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    padding: 100px 16px 80px;
  }

  .hero-poster-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }

  .hero-dates {
    position: relative;
    min-height: auto;
    display: flex;
    justify-content: center;
  }

  .hero-date-svg {
    width: clamp(100px, 30vw, 180px) !important;
    height: auto !important;
    flex: 0 0 auto;
  }

  .hero-poster-cta {
    text-align: center;
    margin-top: 12px;
  }

  .hero-poster-btn {
    width: auto;
    display: inline-flex;
  }

  .hero-main {
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .hero-arenes-photo {
    max-width: 100%;
  }

  .hero-lieu {
    text-align: center;
    margin-top: 4px;
  }

  .hero-rond {
    width: clamp(28px, 5vw, 50px);
    opacity: .45;
  }

  .hero-poster-btn {
    padding: 14px 32px;
    font-size: 0.8125rem;
  }

  /* Hero social — reposition to bottom center on mobile */
  .hero-social {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .hero-social-list {
    justify-content: center;
  }

  .hero-social-link {
    width: 36px;
    height: 36px;
  }

  .hero-social-link svg {
    width: 14px;
    height: 14px;
  }

  /* Scroll indicator — hide on mobile when social shows */
  .scroll-indicator {
    display: none;
  }

  /* Spinning logo — smaller on mobile */
  .spinning-logo {
    width: clamp(80px, 22vw, 120px);
  }

  .spinning-logo-section {
    padding: clamp(2rem, 6vw, 4rem) 0;
  }

  /* Edition */
  .edition-title-outline {
    font-size: clamp(2.5rem, 12vw, 5rem) !important;
    -webkit-text-stroke: 1.5px #F5F5F0;
  }

  .edition-year {
    font-size: clamp(2rem, 10vw, 4rem) !important;
  }

  .edition-description {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    padding: 0 8px;
  }

  /* Gallery */
  .gallery-item {
    width: 85vw;
  }

  /* Billetterie */
  .billetterie-title {
    font-size: clamp(2rem, 10vw, 4rem) !important;
  }

  .billetterie-subtitle {
    font-size: 1rem !important;
    padding: 0 8px;
  }

  /* Social */
  .social-section .social-links {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 100%;
    padding: 0 16px;
  }

  .social-section .social-link {
    padding: 12px 6px;
    aspect-ratio: 1 / 1;
  }

  .social-section .social-link-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
  }

  .social-section .social-link-label {
    font-size: 0.5rem;
  }

  .social-section .social-title {
    font-size: clamp(1.25rem, 8vw, 3rem) !important;
  }

  /* Partners carousel — smaller on tablet */
  .partenaire-placeholder {
    width: 140px;
    height: 60px;
  }

  .partenaires-marquee-track {
    gap: 24px;
  }

  /* Card ticket */
  .card-ticket {
    padding: 24px 20px;
  }

  .grid-tickets {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Sections — reduce padding */
  .section-brutal {
    padding-top: clamp(48px, 10vw, 80px) !important;
    padding-bottom: clamp(48px, 10vw, 80px) !important;
  }

  /* Marquee — smaller text */
  .marquee-item {
    font-size: clamp(1rem, 3.5vw, 1.5rem) !important;
  }

  /* Navigation overlay */
  .nav-brutal {
    padding: 80px 24px 40px;
    width: 100%;
  }

  .nav-primary-list a,
  .nav-brutal-primary .nav-link {
    font-size: clamp(24px, 7vw, 36px);
  }

  .nav-brutal-secondary {
    margin-top: 32px;
  }

  .nav-secondary-list {
    gap: 12px 24px;
  }

  .nav-brutal-social {
    margin-top: 24px;
    gap: 16px;
  }

  /* Newsletter — stack */
  .newsletter-form-inner {
    flex-direction: column;
    gap: 0;
  }

  .newsletter-form {
    max-width: 100%;
    padding: 0 16px;
  }

  .newsletter-submit {
    width: 100%;
    justify-content: center;
  }

  .newsletter-title {
    font-size: clamp(2rem, 10vw, 4rem) !important;
  }

  .newsletter-subtitle {
    font-size: 0.875rem !important;
    padding: 0 8px;
  }

  /* Page hero */
  .page-hero {
    min-height: 30vh;
    padding: clamp(64px, 12vh, 100px) 16px clamp(32px, 5vh, 60px);
  }

  .page-hero__title,
  .page-hero-title {
    font-size: clamp(2rem, 10vw, 4rem);
  }

  /* Footer compact */
  .footer-brutal {
    padding: 60px 0 32px;
  }

  .footer-chrome-logo {
    width: clamp(200px, 55vw, 320px);
  }

  .footer-tagline {
    font-size: 0.625rem;
    letter-spacing: 0.25em;
    margin-bottom: 2rem;
  }

  .footer-social-row {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
  }

  .footer-social-icon {
    padding: 8px 16px;
    font-size: 0.625rem;
    width: 160px;
    justify-content: center;
  }

  .footer-hashtag {
    font-size: clamp(0.875rem, 4vw, 1.125rem);
  }

  .footer-divider-line {
    width: 40px;
  }

  .footer-info {
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1.5rem;
  }

  .footer-info-diamond {
    display: none;
  }

  .footer-nav {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.5rem;
  }

  .footer-nav-dot {
    display: none;
  }

  /* Registration marks — smaller on mobile */
  .reg-mark {
    width: 8px;
    height: 8px;
  }

  /* Chrome accents — thinner on mobile */
  .chrome-accent {
    width: 2px;
  }

  /* Lineup day cards — stack on mobile */
  .lineup-day-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Lineup grid — 2 columns on mobile */
  .lineup-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .lineup-card--headliner {
    grid-column: span 2;
  }

  .lineup-card-name {
    font-size: clamp(1.5rem, 8vw, 3rem);
  }

  .lineup-card--headliner .lineup-card-name {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .lineup-card-content {
    padding: 12px;
  }

  .lineup-card-meta {
    flex-direction: column;
    gap: 4px;
  }

  .lineup-card-scene::before {
    display: none;
  }

  .lineup-tab {
    padding: 8px 16px;
    font-size: 0.6875rem;
  }
}


/* ==========================================================================
   16. RESPONSIVE — Very Small Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {

  /* Hero Poster — very small mobile */
  .hero-poster {
    padding: 90px 12px 70px;
  }

  .hero-date-day {
    font-size: clamp(38px, 12vw, 56px);
  }

  .hero-date-month,
  .hero-date-year {
    font-size: clamp(22px, 7vw, 36px);
  }

  .hero-lieu-line1,
  .hero-lieu-line2 {
    justify-content: center;
    gap: 2px;
    width: auto;
  }

  .hero-lieu-line1 > span,
  .hero-lieu-line2 > span {
    flex: none;
  }

  .hero-lieu-line1 {
    font-size: clamp(12px, 3vw, 18px);
  }

  .hero-lieu-line2 {
    font-size: clamp(20px, 7vw, 36px);
  }

  .hero-poster-btn {
    padding: 12px 24px;
    font-size: 0.75rem;
    width: auto;
    display: inline-flex;
  }

  /* Hero social — even smaller */
  .hero-social-link {
    width: 32px;
    height: 32px;
  }

  .hero-social-link svg {
    width: 12px;
    height: 12px;
  }

  /* Social — smaller grid on 480px */
  .social-section .social-links {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 8px;
  }

  /* Partners carousel — compact on mobile */
  .partenaire-placeholder {
    width: 120px;
    height: 50px;
  }

  .partenaires-marquee-track {
    gap: 16px;
    animation-duration: 20s;
  }

  .social-section .social-link {
    padding: 10px 4px;
    aspect-ratio: auto;
    gap: 4px;
  }

  .social-section .social-link-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
  }

  .social-section .social-link-label {
    font-size: 0.4375rem;
    letter-spacing: 0.04em;
  }

  /* Gallery */
  .gallery-item {
    width: 90vw;
  }

  /* Page hero */
  .page-hero__title {
    font-size: clamp(1.75rem, 9vw, 3rem);
  }

  /* Card ticket */
  .card-ticket__title {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }

  .card-ticket__price {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
  }

  /* Navigation */
  .nav-primary-list a,
  .nav-brutal-primary .nav-link {
    font-size: clamp(20px, 6vw, 28px);
  }

  /* Line-Up section */
  .lineup-title {
    font-size: clamp(2rem, 10vw, 4rem) !important;
  }

  /* Gallery section */
  .gallery-title {
    font-size: clamp(2rem, 10vw, 4rem) !important;
  }

  /* Header — ultra compact */
  .main-header {
    padding: 0.5rem;
  }

  .main-header .logo-img {
    width: clamp(90px, 22vw, 120px);
  }

  .main-header.is-scrolled .logo-img {
    width: clamp(80px, 20vw, 100px);
  }
}


/* ==========================================================================
   17. RESPONSIVE — Tablet (769px – 1024px)
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {

  .gallery-item {
    width: 45vw;
  }

  .grid-tickets {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-hero__title {
    font-size: clamp(3rem, 8vw, 5rem);
  }

  .nav-primary-list a,
  .nav-brutal-primary .nav-link {
    font-size: clamp(36px, 5vw, 48px);
  }

  /* Hero social — keep at right on tablet */
  .hero-social {
    bottom: 5rem;
    right: 1.5rem;
  }

  /* Lineup — 3 columns on tablet */
  .lineup-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .lineup-card--headliner {
    grid-column: span 3;
  }
}


/* ==========================================================================
   18. RESPONSIVE — Large Desktop (min-width: 1440px)
   ========================================================================== */

@media (min-width: 1440px) {

  .container {
    max-width: 1400px;
  }

  .main-header .header-inner {
    max-width: 1600px;
  }

  .main-header .logo-img {
    width: 280px;
  }

  .main-header.is-scrolled .logo-img {
    width: 200px;
  }

  .gallery-item {
    width: calc(40vw - 32px);
  }

  .grid-tickets {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  .page-hero {
    min-height: 55vh;
  }

  .edition-description {
    max-width: 800px;
  }

  .hero-social-link {
    width: 44px;
    height: 44px;
  }
}


/* ==========================================================================
   19. DESIGN POLISH — Elevated aesthetics
   ========================================================================== */

/* Smooth page-level transitions */
html {
  scroll-behavior: smooth;
}

/* Better text rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Section label enhancement — subtle uppercase tracking */
.section-label {
  position: relative;
  display: inline-block;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  vertical-align: middle;
  margin-right: 1rem;
}

.section-label::after {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  vertical-align: middle;
  margin-left: 1rem;
}

/* Grain overlays — slightly more visible */
.grain-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image: url('/wp-content/themes/flavor-starter-child/assets/images/noise-pattern.svg');
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

.grain-heavy {
  opacity: 0.07;
}

.grain-light {
  opacity: 0.03;
}

/* Chrome accents */
.chrome-accent {
  position: absolute;
  top: 10%;
  bottom: 10%;
  width: 3px;
  background: linear-gradient(to bottom, transparent, #C0C8D4 50%, transparent);
  opacity: 0.15;
  z-index: 1;
  pointer-events: none;
}

.chrome-accent--left { left: clamp(8px, 2vw, 24px); }
.chrome-accent--right { right: clamp(8px, 2vw, 24px); }

/* Hero chrome bars — vertical accents */
.hero-chrome-bar {
  position: absolute;
  top: 15%;
  bottom: 15%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(192, 200, 212, 0.3), transparent);
  z-index: 1;
  pointer-events: none;
}

.hero-chrome-bar--left { left: clamp(12px, 3vw, 32px); }
.hero-chrome-bar--right { right: clamp(12px, 3vw, 32px); }

/* Registration marks — small corner markers */
.reg-marks {
  position: absolute;
  inset: clamp(8px, 2vw, 24px);
  z-index: 1;
  pointer-events: none;
}

.reg-mark {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0.2;
}

.reg-mark::before,
.reg-mark::after {
  content: '';
  position: absolute;
  background: #C0C8D4;
}

.reg-mark::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
}

.reg-mark::after {
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
}

.reg-mark--tl { top: 0; left: 0; }
.reg-mark--tr { top: 0; right: 0; transform: rotate(90deg); }
.reg-mark--bl { bottom: 0; left: 0; transform: rotate(-90deg); }
.reg-mark--br { bottom: 0; right: 0; transform: rotate(180deg); }

.reg-marks--dark .reg-mark::before,
.reg-marks--dark .reg-mark::after {
  background: #0A0A0A;
}

/* Chrome dividers */
.chrome-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #C0C8D4 20%, #C0C8D4 80%, transparent);
  opacity: 0.2;
  pointer-events: none;
}

.chrome-divider--top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Selection color */
::selection {
  background: #BBFF00;
  color: #0A0A0A;
}

/* Focus visible — acid green outline */
:focus-visible {
  outline: 2px solid #BBFF00;
  outline-offset: 3px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #0A0A0A;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #BBFF00;
}

/* Hero section base — LEGACY kept for compatibility with inner pages */
.hero-brutal {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0A0A0A;
}

.hero-content {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 0 clamp(16px, 4vw, 48px);
}

.hero-title {
  font-family: "Akira Expanded", "Impact", sans-serif;
  text-transform: uppercase;
  font-size: clamp(48px, 12vw, 140px);
  color: #F5F5F0;
  line-height: 0.95;
  position: relative;
  z-index: 2;
}

.hero-date {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(0.75rem, 1.5vw, 1rem);
  color: #C0C8D4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 1.5rem;
  position: relative;
  z-index: 2;
}

/* Hero BG */
.hero-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 0;
}

.hero-bg-img,
.hero-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

/* btn-brutal base (used in hero CTA, newsletter submit, etc.) */
.btn-brutal a,
.btn-brutal.wp-block-button a,
.newsletter-submit.btn-brutal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: #BBFF00;
  color: #0A0A0A;
  border: 2px solid #BBFF00;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.btn-brutal a:hover,
.btn-brutal.wp-block-button a:hover,
.newsletter-submit.btn-brutal:hover {
  background: transparent;
  color: #BBFF00;
}

.btn-brutal--dark a {
  background: #0A0A0A;
  color: #BBFF00;
  border-color: #0A0A0A;
}

.btn-brutal--dark a:hover {
  background: #BBFF00;
  color: #0A0A0A;
}

.btn-brutal--outline a {
  background: transparent;
  color: #BBFF00;
  border: 2px solid #BBFF00;
}

.btn-brutal--outline a:hover {
  background: #BBFF00;
  color: #0A0A0A;
}

/* Marquee base styles */
.marquee-section {
  padding: 1rem 0;
  overflow: hidden;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: inline-flex;
  gap: clamp(1rem, 3vw, 2rem);
  animation: marqueeScroll 25s linear infinite;
}

.marquee-reverse .marquee-track {
  animation-direction: reverse;
}

.marquee-item {
  font-size: clamp(1.25rem, 3vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.section-acid .marquee-item {
  color: #0A0A0A;
}

.section-acid {
  background: #BBFF00;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   ACCESSIBILITY — Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track,
  .partenaires-marquee-track {
    animation: none !important;
  }
  .spinning-logo {
    animation: none !important;
    filter: drop-shadow(0 0 20px rgba(187, 255, 0, 0.12)) brightness(1.05) contrast(1.1) !important;
  }
  .hero-rond {
    animation: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
  }
}