/* ============================================================
   2K Festival 2026 – Global Stylesheet
   Responsive : Mobile | Tablet (iPad) | Desktop
   ============================================================ */

/* ---------- Variables ---------- */
:root {
  --cyan:        #00D4FF;
  --cyan-dark:   #0099CC;
  --pink:        #FF1493;
  --pink-light:  #FF69B4;
  --purple:      #7B2FBE;
  --purple-dark: #4A0080;
  --indigo:      #1A0040;
  --darker:      #0A0020;
  --darkest:     #04000F;
  --white:       #FFFFFF;
  --w80:  rgba(255,255,255,0.8);
  --w50:  rgba(255,255,255,0.5);
  --w20:  rgba(255,255,255,0.2);
  --w10:  rgba(255,255,255,0.1);
  --glow-cyan: 0 0 20px rgba(0,212,255,0.5), 0 0 40px rgba(0,212,255,0.2);
  --glow-pink: 0 0 20px rgba(255,20,147,0.5), 0 0 40px rgba(255,20,147,0.2);
  --font: 'Exo 2', system-ui, sans-serif;
  --script: 'Dancing Script', cursive;
  --r:  12px;
  --rl: 20px;
  --tr: 0.3s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--font); background: var(--darkest); color: var(--white); line-height: 1.6; overflow-x: hidden; }
img   { max-width: 100%; height: auto; display: block; }
a     { text-decoration: none; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
ul    { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--darkest); }
::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 3px; }

/* ---------- Layout ---------- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
section    { padding: 5rem 0; position: relative; }

/* ---------- Section Header ---------- */
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-pre {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 0.6rem;
}
.section-header h1,
.section-header h2 {
  font-size: clamp(1.8rem, 4.5vw, 3.2rem); font-weight: 900; line-height: 1.1;
  background: linear-gradient(135deg, #fff 0%, var(--cyan) 50%, var(--pink) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 0.75rem;
}
.section-sub { font-size: 1.05rem; color: var(--w80); max-width: 580px; margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 2rem; border-radius: 50px;
  font-family: var(--font); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.04em; transition: all var(--tr); white-space: nowrap; gap: 0.5rem;
}
.btn-primary {
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: var(--white); box-shadow: var(--glow-pink);
}
.btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 35px rgba(255,20,147,0.7); }
.btn-blue {
  background: linear-gradient(135deg, var(--cyan), var(--cyan-dark));
  color: var(--darkest); box-shadow: var(--glow-cyan);
}
.btn-blue:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 35px rgba(0,212,255,0.7); }
.btn-outline { border: 2px solid var(--cyan); color: var(--cyan); }
.btn-outline:hover { background: var(--cyan); color: var(--darkest); box-shadow: var(--glow-cyan); transform: translateY(-3px); }
.btn-ghost { border: 2px solid var(--w20); color: var(--w80); }
.btn-ghost:hover { border-color: var(--w50); color: var(--white); background: var(--w10); }
.btn-lg { padding: 1.1rem 2.5rem; font-size: 1.1rem; }

/* ---------- Divider ---------- */
.divider {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple), var(--cyan), var(--purple), transparent);
}

/* ============================================================
   NAV
   ============================================================ */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1rem 0; transition: background var(--tr), padding var(--tr), box-shadow var(--tr);
  background: linear-gradient(to bottom, rgba(4,0,15,0.75) 0%, rgba(4,0,15,0.35) 60%, rgba(4,0,15,0) 100%);
}
#navbar.scrolled {
  background: rgba(4,0,15,0.96); backdrop-filter: blur(20px);
  box-shadow: 0 2px 30px rgba(0,0,0,0.5); padding: 0.6rem 0;
}
.nav-container {
  max-width: 1280px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav-logo { display: flex; align-items: baseline; gap: 0.3rem; }
.logo-2k {
  font-size: 1.8rem; font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.logo-festival { font-family: var(--script); font-size: 1.1rem; color: var(--w80); }

.nav-links { display: flex; align-items: center; gap: 0.15rem; }
.nav-links li a {
  padding: 0.45rem 0.75rem;
  font-size: 0.88rem; font-weight: 600; color: var(--w80);
  transition: color var(--tr), border-color var(--tr);
  border-bottom: 2px solid transparent;
}
.nav-links li a:hover { color: var(--cyan); background: none; }
.nav-links li a.active { color: var(--cyan); border-bottom-color: var(--cyan); }

.nav-cta {
  background: linear-gradient(135deg, var(--pink), var(--purple)) !important;
  color: var(--white) !important; border-radius: 50px !important; padding: 0.45rem 1.2rem !important;
}
.nav-cta:hover { transform: scale(1.05); box-shadow: var(--glow-pink); background: var(--w10) !important; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; }
.nav-toggle span { display: block; width: 25px; height: 2px; background: var(--white); border-radius: 2px; transition: all var(--tr); }

/* ============================================================
   HERO (HOME)
   ============================================================ */
#hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; position: relative;
  overflow: hidden; padding: 7rem 1.5rem 5rem;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(75,0,130,0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(0,80,120,0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(120,0,80,0.2) 0%, transparent 60%),
    linear-gradient(180deg, #04000F 0%, #0A0030 50%, #04000F 100%);
}

/* Stars */
.stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.stars-layer { position: absolute; inset: -50%; }
.stars-1 {
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 80%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 15%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 40%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 45%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 75%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 90%, rgba(255,255,255,0.8) 0%, transparent 100%);
  animation: twinkle 4s ease-in-out infinite alternate;
}
.stars-2 {
  background-image:
    radial-gradient(1px 1px at 5% 30%, rgba(200,220,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 55%, rgba(200,220,255,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 45% 25%, rgba(200,220,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 65%, rgba(200,220,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 35%, rgba(200,220,255,0.8) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 85%, rgba(200,220,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 55%, rgba(200,220,255,0.8) 0%, transparent 100%);
  animation: twinkle 6s ease-in-out infinite alternate-reverse;
}
.stars-3 {
  background-image:
    radial-gradient(2px 2px at 12% 70%, rgba(180,140,255,0.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 15%, rgba(140,200,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 72% 88%, rgba(255,150,200,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 35%, rgba(180,140,255,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 88% 55%, rgba(140,200,255,0.8) 0%, transparent 100%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle {
  0%   { opacity: 0.6; transform: scale(1) rotate(0deg); }
  100% { opacity: 1;   transform: scale(1.05) rotate(2deg); }
}
.nebula {
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 60% 40% at 25% 50%, rgba(100,0,200,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 75% 40%, rgba(0,150,200,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 80%, rgba(200,0,100,0.1) 0%, transparent 70%);
  filter: blur(40px); pointer-events: none;
  animation: nebulaFloat 15s ease-in-out infinite alternate;
}
@keyframes nebulaFloat {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.05) translateY(-2%); }
}

.hero-content { position: relative; z-index: 2; text-align: center; max-width: 900px; width: 100%; }
.hero-edition { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--w50); margin-bottom: 0.5rem; }
.hero-tagline { font-family: var(--script); font-size: clamp(1.8rem,4vw,2.8rem); color: var(--cyan); text-shadow: var(--glow-cyan); margin-bottom: 0.5rem; }
.hero-logo-wrap {
  margin: 0 auto 1.5rem; max-width: 400px;
  filter: drop-shadow(0 0 30px rgba(0,212,255,0.3)) drop-shadow(0 0 60px rgba(255,20,147,0.2));
  animation: logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-styles { font-size: 1rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--w80); margin-bottom: 1.5rem; }

.hero-date-badge {
  display: inline-flex; flex-direction: column; align-items: center;
  background: rgba(75,0,130,0.6); border: 2px solid rgba(0,212,255,0.4);
  border-radius: var(--r); padding: 0.75rem 1.5rem; margin-bottom: 0.5rem; backdrop-filter: blur(10px);
}
.date-num  { font-size: clamp(1.5rem,4vw,2.2rem); font-weight: 900; color: var(--white); line-height: 1; }
.date-month{ font-size: 0.85rem; font-weight: 700; letter-spacing: 0.2em; color: var(--cyan); }
.hero-lieu { font-size: 0.88rem; color: var(--w50); margin-bottom: 2rem; }

/* Countdown */
.countdown { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.countdown-item {
  display: flex; flex-direction: column; align-items: center;
  background: var(--w10); border: 1px solid var(--w20); border-radius: var(--r);
  padding: 0.75rem 1.25rem; min-width: 75px; backdrop-filter: blur(10px);
}
.count-num   { font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 900; color: var(--cyan); line-height: 1; font-variant-numeric: tabular-nums; }
.count-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--w50); margin-top: 0.2rem; }
.countdown-sep { font-size: 1.8rem; font-weight: 700; color: var(--w20); align-self: center; margin-top: -0.8rem; }

.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.hero-banner-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(10px);
  border-top: 1px solid var(--w10); padding: 0.7rem 1.5rem;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  flex-wrap: wrap; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--w80); z-index: 2;
}
.sep-dot { color: var(--pink); font-size: 0.55rem; }

.scroll-down { position: absolute; bottom: 5rem; left: 50%; transform: translateX(-50%); z-index: 2; animation: bounce 2s infinite; }
.scroll-down span { display: block; width: 22px; height: 22px; border-right: 2px solid var(--w50); border-bottom: 2px solid var(--w50); transform: rotate(45deg); margin: 0 auto; }
@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  padding: 8rem 1.5rem 4rem; text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(75,0,130,0.4) 0%, transparent 70%),
    linear-gradient(180deg, #04000F 0%, #0A0030 80%, #04000F 100%);
}
.page-hero-pre { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.75rem; }
.page-hero h1 {
  font-size: clamp(2rem,5vw,3.5rem); font-weight: 900;
  background: linear-gradient(135deg, #fff 0%, var(--cyan) 50%, var(--pink) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 1rem; line-height: 1.1;
}
.page-hero p { font-size: 1.1rem; color: var(--w80); max-width: 600px; margin: 0 auto; }

/* ============================================================
   FESTIVAL (About)
   ============================================================ */
#festival { background: linear-gradient(180deg, var(--darkest) 0%, var(--indigo) 60%, var(--darkest) 100%); }

.festival-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-bottom: 3.5rem; }
.festival-text p { color: var(--w80); margin-bottom: 1.2rem; font-size: 1.03rem; }
.festival-text p strong { color: var(--cyan); }
.festival-text .btn { margin-top: 0.5rem; }

.festival-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.stat-card {
  background: var(--w10); border: 1px solid var(--w20); border-radius: var(--r);
  padding: 1.5rem 1rem; text-align: center; transition: all var(--tr);
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
}
.stat-card:hover { background: rgba(0,212,255,0.1); border-color: var(--cyan); transform: translateY(-4px); box-shadow: var(--glow-cyan); }
.stat-num  { font-size: 2rem; font-weight: 900; color: var(--cyan); line-height: 1; }
.stat-num sup { font-size: 0.9rem; }
.stat-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--w50); }

.features-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 1.25rem; }
.feature-card {
  background: var(--w10); border: 1px solid var(--w10); border-radius: var(--rl); padding: 1.75rem;
  transition: all var(--tr);
}
.feature-card:hover { border-color: rgba(255,20,147,0.4); background: rgba(255,20,147,0.05); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(255,20,147,0.12); }
.feature-icon { font-size: 2.2rem; margin-bottom: 0.85rem; }
.feature-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: 0.4rem; }
.feature-card p { color: var(--w80); font-size: 0.92rem; }

/* Home preview cards */
.preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.preview-card {
  border-radius: var(--rl); overflow: hidden; position: relative; aspect-ratio: 3/4;
  background: var(--indigo); border: 1px solid var(--w20); transition: all var(--tr); display: block;
}
.preview-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.5); border-color: var(--cyan); }
.preview-card img { width: 100%; height: 100%; object-fit: cover; }
.preview-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,20,0.92) 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem;
}
.preview-card-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.3rem; }
.preview-card-title { font-size: 1.2rem; font-weight: 800; color: var(--white); margin-bottom: 0.75rem; }
.preview-card-link { font-size: 0.85rem; font-weight: 600; color: var(--pink); display: flex; align-items: center; gap: 0.4rem; }
.preview-card-link::after { content: '→'; }

/* Free socials highlight */
.sociales-section { background: linear-gradient(135deg, rgba(0,212,255,0.05) 0%, rgba(255,20,147,0.05) 100%); border-radius: var(--rl); border: 1px solid var(--w10); padding: 3rem; margin-top: 2rem; }
.sociales-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.25rem; margin-top: 2rem; }
.sociale-card {
  background: var(--w10); border: 1px solid var(--w20); border-radius: var(--r); padding: 1.5rem; transition: all var(--tr);
}
.sociale-card:hover { border-color: var(--cyan); background: rgba(0,212,255,0.08); transform: translateY(-3px); }
.sociale-badge {
  display: inline-block; background: var(--cyan); color: var(--darkest); font-size: 0.7rem;
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.7rem;
  border-radius: 50px; margin-bottom: 0.75rem;
}
.sociale-card h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.3rem; }
.sociale-card p { font-size: 0.88rem; color: var(--w80); }

/* ============================================================
   PROGRAMME PAGE
   ============================================================ */
.programme-section { background: var(--darkest); }
.programme-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--purple),var(--cyan),var(--purple),transparent); }

/* Day tabs */
.day-tabs { display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 2.5rem; flex-wrap: wrap; }
.day-tab {
  padding: 0.75rem 1.75rem; border-radius: 50px; font-weight: 700; font-size: 0.9rem;
  border: 2px solid var(--w20); color: var(--w80); cursor: pointer; transition: all var(--tr);
}
.day-tab:hover { border-color: var(--cyan); color: var(--cyan); }
.day-tab.active { background: linear-gradient(135deg,var(--pink),var(--purple)); border-color: transparent; color: var(--white); box-shadow: var(--glow-pink); }

.day-panel { display: none; }
.day-panel.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.day-title {
  font-size: 1.5rem; font-weight: 900; color: var(--cyan); margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.day-title::before { content: ''; display: block; width: 4px; height: 1.6em; background: linear-gradient(var(--pink),var(--purple)); border-radius: 2px; }

.schedule { display: flex; flex-direction: column; gap: 0.85rem; }
.schedule-item {
  display: grid; grid-template-columns: 140px 1fr; gap: 1.25rem;
  background: var(--w10); border: 1px solid var(--w10); border-radius: var(--r);
  padding: 1.1rem 1.25rem; align-items: start; transition: all var(--tr);
}
.schedule-item:hover { border-color: var(--w20); background: var(--w10); transform: translateX(4px); }
.schedule-item.highlight { border-color: rgba(255,20,147,0.3); background: rgba(255,20,147,0.05); }
.schedule-item.gratuit { border-color: rgba(0,212,255,0.3); background: rgba(0,212,255,0.04); }
.schedule-time {
  font-size: 0.9rem; font-weight: 800; color: var(--cyan); letter-spacing: 0.05em;
  padding-top: 0.1rem; line-height: 1.3;
}
.schedule-content h4 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.25rem; }
.schedule-content p { font-size: 0.88rem; color: var(--w80); }
.badge {
  display: inline-block; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 50px; margin-left: 0.5rem; vertical-align: middle;
}
.badge-gratuit { background: rgba(0,212,255,0.2); color: var(--cyan); border: 1px solid rgba(0,212,255,0.4); }
.badge-inclus  { background: rgba(123,47,190,0.2); color: #C084FC; border: 1px solid rgba(123,47,190,0.4); }
.badge-soir    { background: rgba(255,20,147,0.2); color: var(--pink-light); border: 1px solid rgba(255,20,147,0.4); }

/* Programme image */
.programme-img-wrap { border-radius: var(--rl); overflow: hidden; border: 1px solid var(--w10); box-shadow: 0 20px 50px rgba(0,0,0,0.5); margin-top: 3rem; position: relative; }
.programme-img { width: 100%; }
.programme-zoom {
  position: absolute; bottom: 1rem; right: 1rem; display: flex; align-items: center; gap: 0.5rem;
  background: rgba(0,0,0,0.7); border: 1px solid var(--w20); border-radius: var(--r);
  padding: 0.5rem 1rem; font-size: 0.82rem; color: var(--w80); transition: all var(--tr); backdrop-filter: blur(10px);
}
.programme-zoom svg { width: 16px; height: 16px; }
.programme-zoom:hover { background: rgba(0,212,255,0.2); border-color: var(--cyan); color: var(--white); }

/* ============================================================
   SHOW YOUR STYLE
   ============================================================ */
.sys-section { background: linear-gradient(180deg, var(--darkest) 0%, rgba(75,0,130,0.15) 50%, var(--darkest) 100%); }

.sys-intro { text-align: center; max-width: 700px; margin: 0 auto 3rem; color: var(--w80); font-size: 1.05rem; }
.sys-intro strong { color: var(--white); }

.sys-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-bottom: 2.5rem; }
.sys-card {
  border-radius: var(--rl); overflow: hidden;
  background: var(--w10); border: 1px solid var(--w20); transition: all var(--tr);
}
.sys-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,0.4); border-color: var(--pink); }
.sys-card-header { padding: 1.5rem 1.5rem 0; }
.sys-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 50px; margin-bottom: 0.85rem;
}
.sys-card h3 { font-size: 1.15rem; font-weight: 800; color: var(--white); margin-bottom: 0.3rem; }
.sys-card .sys-artists { font-size: 0.9rem; color: var(--cyan); font-weight: 600; margin-bottom: 0.75rem; }
.sys-card p { font-size: 0.88rem; color: var(--w80); padding: 0 1.5rem 1.5rem; }

.sys-bachata { border-top: 3px solid var(--pink); }
.sys-bachata .sys-tag { background: rgba(255,20,147,0.2); color: var(--pink-light); border: 1px solid rgba(255,20,147,0.4); }
.sys-kizomba { border-top: 3px solid #C084FC; }
.sys-kizomba .sys-tag { background: rgba(123,47,190,0.2); color: #C084FC; border: 1px solid rgba(123,47,190,0.4); }
.sys-zouk   { border-top: 3px solid var(--cyan); }
.sys-zouk .sys-tag { background: rgba(0,212,255,0.15); color: var(--cyan); border: 1px solid rgba(0,212,255,0.3); }

.sys-note {
  text-align: center; background: rgba(255,20,147,0.08); border: 1px solid rgba(255,20,147,0.25);
  border-radius: var(--r); padding: 1.25rem; color: var(--w80); font-size: 0.95rem;
}
.sys-note strong { color: var(--pink-light); }

/* SYS – Concept */
.concept-text { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.concept-text p { color: var(--w80); font-size: 1.05rem; margin-bottom: 1.25rem; }
.concept-text strong { color: var(--white); }
.concept-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.concept-step {
  background: rgba(255,255,255,0.03); border: 1px solid var(--w10);
  border-radius: var(--r); padding: 2rem 1.5rem; text-align: center;
  transition: transform var(--tr), border-color var(--tr);
}
.concept-step:hover { transform: translateY(-6px); border-color: var(--cyan); }
.concept-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; margin-bottom: 1rem;
  font-size: 1.3rem; font-weight: 900; color: var(--white);
  background: linear-gradient(135deg, var(--cyan), var(--pink));
}
.concept-step h3 { font-size: 1.05rem; font-weight: 800; color: var(--white); margin-bottom: 0.5rem; }
.concept-step p { font-size: 0.92rem; color: var(--w80); }

/* Bannière CTA SYS (page Artistes) */
.sys-cta-banner {
  text-align: center; max-width: 760px; margin: 0 auto;
  background: linear-gradient(135deg, rgba(0,212,255,0.08), rgba(255,0,153,0.08));
  border: 1px solid var(--w10); border-radius: var(--rl);
  padding: 3rem 2rem;
}
.sys-cta-banner h2 { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: 1rem; }
.sys-cta-banner p { color: var(--w80); font-size: 1.02rem; max-width: 600px; margin: 0 auto; }

@media (max-width: 768px) {
  .concept-steps { grid-template-columns: 1fr; }
}

/* Dresscodes */
.dresscode-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; }
.dresscode-card {
  background: var(--w10); border: 1px solid var(--w10); border-radius: var(--r); padding: 1.5rem; text-align: center;
  transition: all var(--tr);
}
.dresscode-card:hover { border-color: var(--w20); transform: translateY(-3px); }
.dresscode-day { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.5rem; }
.dresscode-card h4 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.4rem; }
.dresscode-card p { font-size: 0.88rem; color: var(--w80); }

/* ============================================================
   ARTISTES PAGE
   ============================================================ */
.artistes-section { background: linear-gradient(180deg, var(--darkest) 0%, #0D0030 100%); }

.artistes-poster-wrap { border-radius: var(--rl); overflow: hidden; margin-bottom: 3rem; border: 1px solid var(--w10); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.artistes-poster { width: 100%; }

.artistes-filters {
  display: flex; gap: 0.6rem; justify-content: center; margin-bottom: 2.5rem; flex-wrap: wrap;
}
.filter-btn {
  padding: 0.55rem 1.35rem; border-radius: 50px; font-size: 0.88rem; font-weight: 600;
  color: var(--w80); border: 2px solid var(--w20); transition: all var(--tr);
}
.filter-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.filter-btn.active { background: linear-gradient(135deg,var(--pink),var(--purple)); border-color: transparent; color: var(--white); box-shadow: var(--glow-pink); }

.artistes-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 1.1rem; }
.artiste-card {
  border-radius: var(--r); overflow: hidden; background: var(--w10); border: 1px solid var(--w10);
  transition: all var(--tr);
}
.artiste-card:hover { transform: translateY(-8px) scale(1.02); border-color: rgba(0,212,255,0.4); box-shadow: 0 15px 40px rgba(0,0,0,0.5), var(--glow-cyan); }
.artiste-card.hidden { display: none; }
.artiste-img-wrap { aspect-ratio: 1/1; overflow: hidden; background: var(--indigo); position: relative; }
.artiste-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tr); }
.artiste-card:hover .artiste-img-wrap img { transform: scale(1.08); }
.artiste-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; font-weight: 900; color: var(--w50);
  background: linear-gradient(135deg, var(--indigo), var(--purple-dark));
}
.artiste-info { padding: 0.8rem; text-align: center; }
.artiste-info h3 { font-size: 0.88rem; font-weight: 700; color: var(--white); margin-bottom: 0.35rem; }
.artiste-style {
  display: inline-block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem; border-radius: 50px;
}
.style-bachata { background: rgba(255,20,147,0.2); color: var(--pink-light); border: 1px solid rgba(255,20,147,0.3); }
.style-salsa   { background: rgba(255,165,0,0.15); color: #FBD38D; border: 1px solid rgba(255,165,0,0.3); }
.style-kizomba { background: rgba(123,47,190,0.2); color: #C084FC; border: 1px solid rgba(123,47,190,0.4); }
.style-zouk    { background: rgba(0,212,255,0.15); color: var(--cyan); border: 1px solid rgba(0,212,255,0.3); }
.style-photo   { background: rgba(255,165,0,0.12); color: #F6AD55; border: 1px solid rgba(255,165,0,0.25); }

/* Category title */
.artists-category-title {
  grid-column: 1/-1; font-size: 1rem; font-weight: 800; color: var(--cyan);
  letter-spacing: 0.15em; text-transform: uppercase; padding: 1rem 0 0.25rem;
  border-bottom: 1px solid var(--w10); margin-bottom: 0.25rem;
}

/* ============================================================
   BILLETTERIE PAGE
   ============================================================ */
.billetterie-section { background: radial-gradient(ellipse at center, rgba(75,0,130,0.25) 0%, var(--darkest) 70%); }

.billetterie-cta-box {
  max-width: 750px; margin: 0 auto; text-align: center;
  background: linear-gradient(135deg, rgba(255,20,147,0.08), rgba(75,0,130,0.12));
  border: 1px solid rgba(255,20,147,0.3); border-radius: var(--rl); padding: 3.5rem 2.5rem;
  box-shadow: var(--glow-pink), 0 30px 60px rgba(0,0,0,0.3);
}
.billetterie-cta-box h2 { font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 900; color: var(--white); margin-bottom: 1rem; }
.billetterie-cta-box p { color: var(--w80); margin-bottom: 1.75rem; font-size: 1.05rem; max-width: 500px; margin-inline: auto; margin-bottom: 2rem; }
.billetterie-cta-box .btn { font-size: 1.1rem; padding: 1rem 2.5rem; }

.billetterie-infos { max-width: 750px; margin: 2.5rem auto 0; display: flex; flex-direction: column; gap: 1rem; }
.billet-info-card {
  background: var(--w10); border: 1px solid var(--w10); border-radius: var(--r);
  padding: 1.25rem 1.5rem; display: flex; align-items: flex-start; gap: 1rem; transition: all var(--tr);
}
.billet-info-card:hover { border-color: var(--w20); }
.billet-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 0.1rem; }
.billet-info-card h4 { font-size: 0.95rem; font-weight: 700; color: var(--white); margin-bottom: 0.25rem; }
.billet-info-card p { font-size: 0.88rem; color: var(--w80); }

.fb-event-card {
  max-width: 750px; margin: 2rem auto 0;
  background: rgba(24,119,242,0.08); border: 1px solid rgba(24,119,242,0.3);
  border-radius: var(--r); padding: 1.25rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  transition: all var(--tr);
}
.fb-event-card:hover { background: rgba(24,119,242,0.12); border-color: rgba(24,119,242,0.5); }
.fb-event-card-left { display: flex; align-items: center; gap: 0.75rem; }
.fb-event-card-left svg { width: 32px; height: 32px; color: #1877F2; }
.fb-event-card h4 { font-size: 0.95rem; font-weight: 700; color: var(--white); }
.fb-event-card p { font-size: 0.85rem; color: var(--w80); }

/* ============================================================
   INFOS PAGE
   ============================================================ */
.infos-section { background: var(--darkest); }

.lieu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.lieu-venues { display: flex; flex-direction: column; gap: 1rem; }
.lieu-card {
  background: var(--w10); border: 1px solid var(--w10); border-radius: var(--r); padding: 1.25rem 1.5rem; transition: all var(--tr);
}
.lieu-card:hover { border-color: rgba(0,212,255,0.3); background: rgba(0,212,255,0.04); transform: translateX(4px); }
.lieu-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.lieu-icon { font-size: 1.5rem; }
.lieu-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--cyan); }
.lieu-card p { font-size: 0.88rem; color: var(--w80); line-height: 1.5; }
.lieu-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.15rem 0.5rem; border-radius: 50px; margin-left: auto; }
.tag-payant { background: rgba(255,20,147,0.15); color: var(--pink-light); border: 1px solid rgba(255,20,147,0.3); }
.tag-gratuit { background: rgba(0,212,255,0.12); color: var(--cyan); border: 1px solid rgba(0,212,255,0.3); }

.lieu-map iframe { width: 100%; height: 380px; border: 0; border-radius: var(--rl); display: block; }

.transport-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; }
.transport-card {
  background: var(--w10); border: 1px solid var(--w10); border-radius: var(--r); padding: 1.5rem; transition: all var(--tr); text-align: center;
}
.transport-card:hover { border-color: var(--w20); transform: translateY(-4px); }
.transport-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.transport-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--white); margin-bottom: 0.4rem; }
.transport-card p { font-size: 0.88rem; color: var(--w80); line-height: 1.5; }

.hebergement-box {
  background: linear-gradient(135deg,rgba(255,20,147,0.05),rgba(75,0,130,0.08));
  border: 1px solid var(--w10); border-radius: var(--rl); padding: 2.5rem;
}
.hebergement-box p { color: var(--w80); margin-bottom: 1rem; font-size: 0.97rem; }
.hebergement-box p strong { color: var(--cyan); }
.hebergement-box .villes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.hebergement-box .ville-badge {
  background: var(--w10); border: 1px solid var(--w20); border-radius: 50px;
  padding: 0.3rem 0.85rem; font-size: 0.85rem; color: var(--w80);
}
.hebergement-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--cyan); font-weight: 600; font-size: 0.9rem; margin-top: 0.5rem; }
.hebergement-link:hover { text-decoration: underline; }

.stands-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1.25rem; }
.stand-card {
  background: var(--w10); border: 1px solid var(--w10); border-radius: var(--r); padding: 1.5rem; transition: all var(--tr);
}
.stand-card:hover { border-color: var(--w20); transform: translateY(-3px); }
.stand-type { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.5rem; }
.stand-card h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.3rem; }
.stand-card p  { font-size: 0.88rem; color: var(--w80); }
.stand-icon { font-size: 1.8rem; margin-bottom: 0.75rem; }

/* ============================================================
   CONTACT & FOOTER
   ============================================================ */
#contact { background: var(--darkest); padding-bottom: 2rem; }
#contact::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--cyan),var(--pink),var(--cyan),transparent); }

.contact-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: start; }
.contact-info h3 { font-size: 1.3rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; }
.contact-info p  { color: var(--w80); margin-bottom: 1rem; font-size: 0.95rem; }
.contact-link { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.2rem; font-weight: 700; color: var(--cyan); transition: all var(--tr); margin-bottom: 0.5rem; display: block; }
.contact-link svg { width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; margin-right: 0.4rem; }
.contact-link:hover { text-shadow: var(--glow-cyan); }
.contact-email { font-size: 1rem; }

.social-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.social-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1.75rem 1rem; border-radius: var(--rl); border: 1px solid var(--w20);
  background: var(--w10); transition: all var(--tr); text-align: center;
}
.social-card svg { width: 36px; height: 36px; }
.social-card span { font-weight: 700; font-size: 0.95rem; }
.social-card small { font-size: 0.78rem; color: var(--w50); }
.social-card:hover { transform: translateY(-5px); }
.social-youtube:hover  { border-color: #FF0000; background: rgba(255,0,0,0.08); box-shadow: 0 8px 25px rgba(255,0,0,0.2); }
.social-youtube svg    { color: #FF0000; }
.social-facebook:hover { border-color: #1877F2; background: rgba(24,119,242,0.08); box-shadow: 0 8px 25px rgba(24,119,242,0.2); }
.social-facebook svg   { color: #1877F2; }
.social-instagram:hover{ border-color: #E1306C; background: rgba(225,48,108,0.08); box-shadow: 0 8px 25px rgba(225,48,108,0.2); }
.social-instagram svg  { color: #E1306C; }

#footer {
  background: rgba(0,0,0,0.85); border-top: 1px solid var(--w10); padding: 3rem 0 1.5rem;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--w10); }
.footer-brand p { margin-top: 0.6rem; font-size: 0.88rem; color: var(--w50); line-height: 1.6; }
.footer-nav h4, .footer-contact h4 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--w50); margin-bottom: 0.85rem; }
.footer-nav ul { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-nav ul li a { font-size: 0.9rem; color: var(--w80); transition: color var(--tr); }
.footer-nav ul li a:hover { color: var(--cyan); }
.footer-contact a[href^="tel"], .footer-contact a[href^="mailto"] { color: var(--cyan); font-size: 0.9rem; font-weight: 600; display: block; margin-bottom: 0.3rem; }
.footer-socials { display: flex; gap: 0.6rem; margin-top: 0.75rem; }
.footer-socials a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--w20); display: flex; align-items: center; justify-content: center; transition: all var(--tr); color: var(--w80); }
.footer-socials a svg { width: 14px; height: 14px; }
.footer-socials a:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,0.1); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--w50); flex-wrap: wrap; gap: 0.5rem; }
.footer-bottom a { color: var(--cyan); }

/* Back to top */
.back-to-top {
  position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg,var(--pink),var(--purple)); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--glow-pink); opacity: 0; pointer-events: none;
  transition: all var(--tr); transform: translateY(20px);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-4px); box-shadow: 0 0 30px rgba(255,20,147,0.8); }
.back-to-top svg { width: 20px; height: 20px; }

/* ============================================================
   RESPONSIVE – TABLET (iPad : 768–1023px)
   ============================================================ */
@media (max-width: 1023px) {
  .festival-grid   { grid-template-columns: 1fr; gap: 2.5rem; }
  .festival-stats  { grid-template-columns: repeat(3,1fr); }
  .preview-grid    { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .sys-grid        { grid-template-columns: 1fr 1fr; }
  .contact-grid    { grid-template-columns: 1fr; }
  .social-grid     { grid-template-columns: repeat(3,1fr); }
  .footer-grid     { grid-template-columns: 1fr 1fr; }
  .footer-brand    { grid-column: span 2; }
  .lieu-grid       { grid-template-columns: 1fr; }
  .schedule-item   { grid-template-columns: 120px 1fr; }
}

/* ============================================================
   RESPONSIVE – MOBILE (phone : <768px)
   ============================================================ */
@media (max-width: 767px) {
  section { padding: 3.5rem 0; }

  /* Nav mobile – plein écran avec animation */
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; inset: 0;
    background: rgba(4, 0, 15, 0.97); backdrop-filter: blur(24px);
    flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
    opacity: 0; pointer-events: none;
    transform: scale(1.04);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
    z-index: 999; padding: 2rem;
  }
  .nav-links.open { opacity: 1; pointer-events: auto; transform: scale(1); }
  .nav-links li {
    width: 100%; text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .nav-links.open li { opacity: 1; }
  .nav-links.open li:nth-child(1) { transition-delay: 0.06s; }
  .nav-links.open li:nth-child(2) { transition-delay: 0.12s; }
  .nav-links.open li:nth-child(3) { transition-delay: 0.18s; }
  .nav-links.open li:nth-child(4) { transition-delay: 0.24s; }
  .nav-links.open li:nth-child(5) { transition-delay: 0.30s; }
  .nav-links.open li:nth-child(6) { transition-delay: 0.36s; }
  .nav-links li a { display: block; padding: 0.9rem 2rem; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; border-bottom: none; }
  .nav-links li a:hover, .nav-links li a.active { color: var(--cyan); border-bottom: none; }
  .nav-cta { display: block; margin-top: 0.75rem !important; }
  /* Hamburger → croix */
  .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  .nav-toggle span { transition: transform 0.3s ease, opacity 0.3s ease; }

  /* Hero */
  .countdown { gap: 0.3rem; }
  .countdown-item { min-width: 62px; padding: 0.6rem 0.7rem; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-banner-bottom { font-size: 0.68rem; gap: 0.4rem; padding: 0.6rem 1rem; }

  /* Layout */
  .festival-stats  { grid-template-columns: repeat(2,1fr); }
  .preview-grid    { grid-template-columns: 1fr; }
  .sys-grid        { grid-template-columns: 1fr; }
  .artistes-grid   { grid-template-columns: repeat(2,1fr); gap: 0.85rem; }
  .social-grid     { grid-template-columns: 1fr; }
  .footer-grid     { grid-template-columns: 1fr; }
  .footer-brand    { grid-column: 1; }
  .footer-bottom   { flex-direction: column; text-align: center; }
  .schedule-item   { grid-template-columns: 1fr; gap: 0.4rem; }
  .schedule-time   { font-size: 0.8rem; }
  .dresscode-grid  { grid-template-columns: 1fr; }
  .transport-grid  { grid-template-columns: 1fr 1fr; }
  .stands-grid     { grid-template-columns: 1fr; }
  .billetterie-cta-box { padding: 2.5rem 1.5rem; }
}

@media (max-width: 480px) {
  .transport-grid  { grid-template-columns: 1fr; }
  .artistes-grid   { grid-template-columns: repeat(2,1fr); }
  .sociale-grid    { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO ARTICLE (index.html – affiche plein écran)
   ============================================================ */
.hero-article-mode {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden; padding: 0;
}
/* Image couvre tout l'écran (décalée sous la barre de menu) */
.hero-article-bg {
  position: absolute; top: 72px; left: 0; right: 0; bottom: 0; z-index: 0;
}
.hero-article-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block;
}
/* Dégradé : haut sombre (nav) + voile global + bas très sombre (boutons/countdown) */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(4,0,15,0.55) 0%,
    rgba(4,0,15,0.18) 28%,
    rgba(4,0,15,0.35) 55%,
    rgba(4,0,15,0.85) 78%,
    rgba(4,0,15,0.98) 100%
  );
}
/* Boutons + countdown sur l'image (bas) */
.hero-article-bottom {
  position: relative; z-index: 2;
  margin-top: auto;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  padding: 2.5rem 1.5rem 5rem;
  width: 100%;
}
.hero-article-actions {
  display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center;
}
.btn-xl {
  padding: 1.1rem 2.5rem; font-size: 1.05rem; font-weight: 800;
  display: inline-flex; align-items: center; gap: 0.6rem;
  letter-spacing: 0.04em;
}
.btn-xl svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Le hero-banner-bottom et scroll-down passent au-dessus de l'overlay */
.hero-article-mode .hero-banner-bottom { position: relative; z-index: 2; }
.hero-article-mode .scroll-down { z-index: 2; }

/* Badge style media (photographes/vidéastes) */
.style-media { background: rgba(255,200,0,0.15); color: #FFC800; border: 1px solid rgba(255,200,0,0.2); }

/* ============================================================
   VIDÉOS SYS
   ============================================================ */
.sys-video-wrap {
  position: relative; width: 100%; padding-bottom: 56.25%;
  height: 0; margin-top: 1.25rem; border-radius: 10px; overflow: hidden;
  background: #000;
}
.sys-video-wrap iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* ============================================================
   DÉCOR PROFIL (accueil)
   ============================================================ */
.decor-promo-box {
  display: flex; align-items: center; gap: 2.5rem; margin-top: 3rem;
  background: linear-gradient(135deg, rgba(0,212,255,0.05), rgba(255,20,147,0.05));
  border: 1px solid rgba(0,212,255,0.2); border-radius: var(--rl); padding: 2rem 2.5rem;
  overflow: hidden;
}
.decor-promo-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(0,212,255,0.3); }
.decor-promo-text h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; }
.decor-promo-text p  { font-size: 0.88rem; color: var(--w80); margin-bottom: 1rem; }
@media (max-width: 600px) {
  .decor-promo-box { flex-direction: column; text-align: center; }
}

/* ============================================================
   PAGE HERO (pages intérieures)
   ============================================================ */
.page-hero {
  position: relative; min-height: 30vh; display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 6rem 1.5rem 3.5rem; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(123,47,190,0.5) 0%, var(--darkest) 70%);
}
.page-hero .stars { position: absolute; inset: 0; z-index: 0; }
.page-hero-content { position: relative; z-index: 1; }
.page-hero-content h1 {
  font-size: clamp(2rem, 6vw, 4rem); font-weight: 900;
  background: linear-gradient(135deg, var(--white) 0%, var(--cyan) 50%, var(--pink) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin: 0.4rem 0;
}
.page-hero-sub { font-size: 1rem; color: var(--w80); letter-spacing: 0.05em; margin-top: 0.5rem; }

/* Nav link active state – géré directement sur l'élément a */

/* Nav cards (index.html) */
.nav-cards-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 3.5rem;
}
.nav-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--w10); border-radius: var(--rl);
  padding: 1.75rem 1.5rem; transition: all var(--tr); cursor: pointer;
}
.nav-card:hover { border-color: rgba(0,212,255,0.4); transform: translateY(-4px); background: rgba(0,212,255,0.05); }
.nav-card-cta { border-color: rgba(255,20,147,0.3); background: rgba(255,20,147,0.04); }
.nav-card-cta:hover { border-color: rgba(255,20,147,0.6); background: rgba(255,20,147,0.08); }
.nav-card-icon { font-size: 2rem; margin-bottom: 0.25rem; }
.nav-card h3 { font-size: 1rem; font-weight: 700; color: var(--white); }
.nav-card p  { font-size: 0.82rem; color: var(--w50); line-height: 1.5; flex: 1; }
.nav-card-link { font-size: 0.82rem; font-weight: 700; color: var(--cyan); margin-top: 0.5rem; }
.nav-card-cta .nav-card-link { color: var(--pink); }

/* Infos billet CTA */
.infos-billet-cta {
  text-align: center; margin-top: 3.5rem; padding: 2.5rem;
  background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(255,20,147,0.06));
  border: 1px solid var(--w10); border-radius: var(--rl);
}
.infos-billet-cta p { font-size: 1.1rem; color: var(--w80); margin-bottom: 1.25rem; font-weight: 600; }

/* Contact billet box */
.contact-billet-box { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--w10); }
.contact-billet-box p { font-size: 0.9rem; color: var(--w80); }

@media (max-width: 1023px) {
  .nav-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .nav-cards-grid { grid-template-columns: 1fr; }
  .page-hero { min-height: 22vh; padding: 5rem 1.25rem 2.5rem; }
}

/* ============================================================
   PROGRAMME DAYS
   ============================================================ */
.programme-days {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2.5rem 0;
}
.programme-day {
  background: rgba(255,255,255,0.03); border: 1px solid var(--w10); border-radius: var(--rl);
  overflow: hidden; transition: border-color var(--tr);
}
.programme-day:hover { border-color: rgba(0,212,255,0.3); }
.day-header {
  background: linear-gradient(135deg, var(--purple-dark), var(--indigo));
  padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.75rem;
}
.day-badge {
  background: linear-gradient(135deg, var(--cyan), var(--pink)); color: var(--white);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.25rem 0.75rem; border-radius: 50px;
}
.day-header h3 { font-size: 1rem; font-weight: 700; color: var(--white); }
.day-schedule { padding: 0; }
.day-schedule li {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--w10);
  font-size: 0.82rem; flex-wrap: wrap;
}
.day-schedule li:last-child { border-bottom: none; }
.day-schedule li.place-badge-row { background: rgba(0,212,255,0.05); }
.place-icon { font-size: 1rem; }
.time {
  color: var(--cyan); font-weight: 700; font-size: 0.78rem;
  white-space: nowrap; min-width: 90px; padding-top: 2px;
}
.event-name { flex: 1; color: var(--w80); line-height: 1.4; }
.event-name small { display: block; color: var(--w50); font-size: 0.75rem; margin-top: 2px; }
.event-type {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.15rem 0.55rem; border-radius: 50px; white-space: nowrap; align-self: flex-start;
}
.event-type.free     { background: rgba(0,255,130,0.15); color: #00FF82; }
.event-type.workshop { background: rgba(0,212,255,0.15); color: var(--cyan); }
.event-type.gala     { background: rgba(255,20,147,0.15); color: var(--pink); }
.event-type.show     { background: rgba(255,200,0,0.15); color: #FFC800; }
.event-type.sys      { background: rgba(123,47,190,0.25); color: #C084FC; }
.event-type.info     { background: rgba(255,255,255,0.08); color: var(--w50); }
.programme-coming {
  text-align: center; font-size: 0.78rem; color: var(--w50); padding: 0.75rem 1.25rem;
  font-style: italic;
}

/* Dresscode box */
.dresscode-box {
  background: rgba(255,255,255,0.03); border: 1px solid var(--w10);
  border-radius: var(--rl); padding: 2rem; margin-top: 2.5rem;
}
.dresscode-box h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--cyan); }
.dresscode-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1rem; }
.dresscode-item {
  background: var(--w10); border-radius: var(--r); padding: 1rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.dc-jour { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--w50); }
.dc-val  { font-size: 0.9rem; font-weight: 600; color: var(--pink); }

/* Dresscodes – visuels */
.dresscode-visuals {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-bottom: 1rem;
}
.dc-visual {
  margin: 0; flex: 0 1 210px; max-width: 210px;
  background: var(--w10); border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--w10); transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.dc-visual:hover { transform: translateY(-6px); border-color: var(--pink); box-shadow: 0 18px 40px rgba(0,0,0,0.4); }
.dc-visual a { display: block; line-height: 0; }
.dc-visual img { width: 100%; height: auto; display: block; }
.dc-visual figcaption {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.75rem 0.85rem 0.9rem; text-align: center;
}
.dc-name { font-size: 0.92rem; font-weight: 800; color: var(--white); }
#sys-dresscodes .dc-visual { flex: 0 1 300px; max-width: 300px; }

.dresscode-note {
  font-size: 0.85rem; color: var(--cyan); background: rgba(0,212,255,0.08);
  border-radius: var(--r); padding: 0.75rem 1rem; margin-top: 0.5rem;
}

/* ============================================================
   SHOW YOUR STYLE
   ============================================================ */
#sys { background: linear-gradient(180deg, var(--darkest) 0%, rgba(26,0,64,0.5) 100%); }
.sys-intro { text-align: center; max-width: 680px; margin: 0 auto 2.5rem; font-size: 1.05rem; color: var(--w80); }
.sys-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.sys-card {
  background: rgba(255,255,255,0.04); border: 1px solid var(--w10); border-radius: var(--rl);
  padding: 2rem 1.5rem; text-align: center; transition: all var(--tr); position: relative; overflow: hidden;
}
.sys-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
}
.sys-bachata::before { background: linear-gradient(90deg, #FF6B9D, #C44B4B); }
.sys-kizomba::before { background: linear-gradient(90deg, var(--purple), var(--pink)); }
.sys-zouk::before    { background: linear-gradient(90deg, var(--cyan), #00FF82); }
.sys-card:hover { border-color: rgba(0,212,255,0.3); transform: translateY(-4px); box-shadow: 0 12px 35px rgba(0,0,0,0.3); }
.sys-badge-new {
  position: absolute; top: 0.85rem; right: 0.85rem;
  background: linear-gradient(135deg, var(--cyan), #00FF82); color: var(--darker);
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 50px;
}
.sys-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.sys-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
.sys-artistes { font-size: 0.88rem; color: var(--w80); margin-bottom: 0.75rem; }
.sys-concept { font-size: 0.82rem; color: var(--cyan); font-style: italic; margin-bottom: 1rem; }
.sys-dresscode { display: flex; align-items: center; gap: 0.5rem; justify-content: center; }
.dc-label { font-size: 0.75rem; color: var(--w50); text-transform: uppercase; letter-spacing: 0.1em; }
.dc-value { font-size: 0.85rem; font-weight: 600; color: var(--pink); }
.sys-note {
  text-align: center; margin-top: 2rem; font-size: 0.95rem; color: var(--w80);
  background: rgba(255,255,255,0.04); border-radius: var(--r); padding: 1rem;
}
.sys-twb-box {
  text-align: center; margin-top: 2.5rem; padding: 2rem;
  background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(255,20,147,0.06));
  border: 1px solid var(--w10); border-radius: var(--rl);
}
.sys-twb-box p { font-size: 1rem; color: var(--w80); margin-bottom: 1.25rem; }
.sys-salsa::before { background: linear-gradient(90deg, #FFC800, #FF6B9D); }

/* Concept – textes */
.concept-hook { font-size: 1.2rem; font-weight: 800; color: var(--cyan); margin-bottom: 1.25rem; }
.concept-subtitle {
  text-align: center; font-size: 1.3rem; font-weight: 800; color: var(--white);
  margin: 0 0 1.5rem; text-transform: uppercase; letter-spacing: 0.08em;
}

/* Grande première Zouk */
.sys-zouk-feature {
  position: relative; text-align: center; max-width: 760px; margin: 0 auto;
  background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(0,255,130,0.08));
  border: 1px solid rgba(0,212,255,0.3); border-radius: var(--rl);
  padding: 3rem 2rem; overflow: hidden;
}
.sys-zouk-feature .sys-badge-new { position: static; display: inline-block; margin-bottom: 1rem; font-size: 0.7rem; padding: 0.35rem 0.9rem; }
.sys-zouk-feature h2 { font-size: clamp(1.8rem,4vw,2.6rem); margin-bottom: 1rem; }
.sys-zouk-lead { font-size: 1.1rem; color: var(--w80); max-width: 580px; margin: 0 auto 1rem; }
.sys-zouk-lead strong { color: var(--white); }
.sys-zouk-credit { font-size: 0.95rem; color: var(--cyan); }
.sys-zouk-credit strong { color: var(--white); }

@media (max-width: 768px) {
  .sys-grid { grid-template-columns: 1fr; }
}

/* Bouton programme complet */
.programme-download {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 2.5rem;
}

/* ============================================================
   BILLETTERIE
   ============================================================ */
#billetterie { background: linear-gradient(135deg, rgba(26,0,64,0.8), rgba(4,0,15,0.9)); }
.billet-cta-box {
  text-align: center;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(0,212,255,0.2);
  border-radius: var(--rl); padding: 3rem 2rem; max-width: 900px; margin: 0 auto;
}
.billet-info-cols {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-bottom: 2.5rem; text-align: left;
}
.billet-info-item { padding: 1.25rem; background: var(--w10); border-radius: var(--r); }
.billet-icon { font-size: 1.75rem; margin-bottom: 0.6rem; display: block; }
.billet-info-item h4 { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--cyan); }
.billet-info-item p  { font-size: 0.83rem; color: var(--w80); line-height: 1.5; }
.btn-large { padding: 1.1rem 3rem; font-size: 1.05rem; }
.billet-event-fb {
  margin-top: 1.25rem; font-size: 0.85rem; color: var(--w50);
}
.billet-event-fb a { color: var(--cyan); font-weight: 600; }
.billet-event-fb a:hover { text-decoration: underline; }

/* ============================================================
   MEDIA TEAM
   ============================================================ */
.media-team {
  margin-top: 3rem; padding: 2rem; background: rgba(255,255,255,0.03);
  border: 1px solid var(--w10); border-radius: var(--rl); text-align: center;
}
.media-team h3 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--w50); margin-bottom: 1.25rem; }
.media-list { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.media-list span {
  background: var(--w10); border: 1px solid var(--w10); border-radius: 50px;
  padding: 0.3rem 0.9rem; font-size: 0.85rem; color: var(--w80);
}

/* ============================================================
   HEBERGEMENTS & STANDS
   ============================================================ */
.hebergement-box {
  margin-top: 3rem; padding: 2rem 2rem 2.5rem; background: rgba(255,255,255,0.03);
  border: 1px solid var(--w10); border-radius: var(--rl);
}
.hebergement-box h3 { font-size: 1.1rem; font-weight: 700; color: var(--cyan); margin-bottom: 0.75rem; }
.hebergement-box p  { font-size: 0.9rem; color: var(--w80); margin-bottom: 1rem; }
.heberg-cities {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;
}
.heberg-cities span {
  background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.25); border-radius: 50px;
  padding: 0.3rem 0.9rem; font-size: 0.85rem; color: var(--cyan); font-weight: 600;
}
.heberg-options { font-size: 0.82rem; color: var(--w50); margin-bottom: 1.5rem !important; }

.stands-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem;
}
.stands-col {
  background: rgba(255,255,255,0.03); border: 1px solid var(--w10);
  border-radius: var(--rl); padding: 1.75rem;
}
.stands-col h3 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--w50); margin-bottom: 1.25rem; }
.stands-list { display: flex; flex-direction: column; gap: 1rem; }
.stands-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.stand-icon { font-size: 1.4rem; }
.stands-list li div { display: flex; flex-direction: column; gap: 0.2rem; }
.stands-list li strong { font-size: 0.95rem; color: var(--white); }
.stands-list li small  { font-size: 0.8rem; color: var(--w50); }

/* Contact promo */
.contact-promo {
  margin-top: 1.25rem; padding: 1rem; background: rgba(0,212,255,0.06);
  border-radius: var(--r); border-left: 3px solid var(--cyan);
  font-size: 0.88rem; color: var(--w80);
}

/* Social event card */
.social-event:hover { border-color: #1877F2; background: rgba(24,119,242,0.08); box-shadow: 0 8px 25px rgba(24,119,242,0.15); }
.social-event svg   { color: #1877F2; }

/* ============================================================
   RESPONSIVE NOUVELLES SECTIONS
   ============================================================ */
@media (max-width: 1023px) {
  .programme-days  { grid-template-columns: 1fr; }
  .sys-grid        { grid-template-columns: 1fr 1fr; }
  .billet-info-cols{ grid-template-columns: 1fr; }
  .dresscode-grid  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .programme-days  { grid-template-columns: 1fr; }
  .sys-grid        { grid-template-columns: 1fr; }
  .billet-info-cols{ grid-template-columns: 1fr; }
  .dresscode-grid  { grid-template-columns: 1fr; }
  .stands-grid     { grid-template-columns: 1fr; }
  .time            { min-width: 75px; font-size: 0.72rem; }
  .billet-cta-box  { padding: 2rem 1.25rem; }
  .btn-large       { padding: 1rem 2rem; font-size: 0.95rem; }
  .social-grid     { grid-template-columns: 1fr 1fr; }
}