/* ── Hotel Eurovision palette ── */
:root{
  --bg:      #0f0a2a;
  --card:    #1e1550;
  --muted:   #c8b9e8;
  --text:    #fdf8ff;

  /* Gradient accents — gold → hot pink → electric purple */
  --accent1: #FFD54B;   /* goud */
  --accent2: #FF2A9A;   /* hot pink */
  --accent3: #A855F7;   /* electric purple */
  --accent4: #5CE1E6;   /* eurovision cyan sparkle */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,42,154,.40), transparent 60%),
    radial-gradient(1000px 500px at 20% -20%, rgba(168,85,247,.35), transparent 60%),
    radial-gradient(900px 500px at 50% 120%, rgba(255,213,75,.22), transparent 60%),
    radial-gradient(700px 400px at 10% 60%, rgba(92,225,230,.18), transparent 60%),
    var(--bg);
}
a{color:var(--accent1)}
.container{max-width:1100px;margin:0 auto;padding:0 1.2rem}

/* Header / Nav */
.nav{
  position:sticky;top:0;z-index:1000;
  backdrop-filter: blur(10px);
  background: rgba(15,10,42,.55);
  border-bottom: 1px solid rgba(255,213,75,.18);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.8rem}
.brand .logo{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:26px;line-height:1;filter:drop-shadow(0 0 10px rgba(255,213,75,.55))}
.brand .title{font-weight:800;letter-spacing:.4px;background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.menu{display:flex;gap:.6rem;flex-wrap:wrap}
.menu a{
  text-decoration:none;color:var(--text);
  padding:.45rem .9rem;border-radius:999px;
  border:1px solid rgba(255,213,75,.25);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  transition:.2s;
  font-size:.95rem;
  font-weight:600
}
.menu a:hover{transform:translateY(-2px) scale(1.02);border-color:var(--accent1);box-shadow:0 6px 20px rgba(255,42,154,.25)}

/* Hero — La Tannerie dusk photo under a disco stage wash */
.hero{
  position:relative; overflow:hidden; padding:6rem 0 4rem;
  background:
    radial-gradient(70% 60% at 20% 10%, rgba(255,213,75,.35), transparent 60%),
    radial-gradient(60% 55% at 85% 0%, rgba(255,42,154,.45), transparent 60%),
    radial-gradient(70% 65% at 50% 110%, rgba(168,85,247,.55), transparent 65%),
    linear-gradient(180deg, rgba(26,13,58,.72) 0%, rgba(42,16,96,.68) 55%, rgba(17,8,58,.82) 100%),
    url('assets/images/04_8a5d66f6bac56856346e231102990507.jpg') center/cover no-repeat;
  background-color:#1a0d3a;
}
.hero::after{
  /* Soft vignette */
  content:""; position:absolute; inset:0;
  background: radial-gradient(80% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}
.hero .container{position:relative; z-index:3}

.hero .pill{
  display:inline-flex;gap:.5rem;align-items:center;
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3),var(--accent1));
  background-size:300% 100%;
  color:#180540;padding:.4rem .95rem;border-radius:999px;font-weight:800;font-size:.9rem;
  letter-spacing:.5px;
  box-shadow:0 8px 24px rgba(255,42,154,.35), inset 0 0 0 1px rgba(255,255,255,.3);
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer { from { background-position: 0% 50% } to { background-position: 300% 50% } }

.hero h1{
  font-family:"Bungee Shade","Inter",sans-serif;
  font-size:clamp(2rem, 6vw, 4.2rem);
  line-height:1.05;
  margin:1rem 0 .7rem;
  text-shadow: 0 6px 26px rgba(255,42,154,.35), 0 2px 0 rgba(0,0,0,.35);
  color:#fff;
  letter-spacing:.02em;
}
.hero p{color:#eae2ff;max-width:760px;font-size:1.1rem;line-height:1.65}

/* Disco ball accent — pure CSS */
.hero-bg{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.9) 0 1.4px, transparent 2px),
    radial-gradient(circle at 78% 12%, rgba(255,213,75,.85) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 32% 72%, rgba(255,42,154,.8) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 88% 66%, rgba(92,225,230,.7) 0 1.4px, transparent 2px),
    radial-gradient(circle at 52% 36%, rgba(168,85,247,.7) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 8% 88%, rgba(255,255,255,.7) 0 1.2px, transparent 1.8px);
  background-size: 220px 220px;
  opacity:.9;
}
.hero-bg::before{
  /* Disco ball, top-left */
  content:""; position:absolute;
  top:18px; left:max(16px, calc((100vw - 1100px)/2 + 16px));
  width:110px; height:110px; border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95) 0 6%, transparent 8%),
    conic-gradient(from 0deg,
      #fff 0 10deg, #d9d9ff 10deg 20deg, #fff 20deg 30deg, #c8b9e8 30deg 40deg,
      #fff 40deg 50deg, #ffd9f2 50deg 60deg, #fff 60deg 70deg, #c8b9e8 70deg 80deg,
      #fff 80deg 90deg, #d9d9ff 90deg 100deg, #fff 100deg 110deg, #ffd9f2 110deg 120deg,
      #fff 120deg 130deg, #c8b9e8 130deg 140deg, #fff 140deg 150deg, #ffd9f2 150deg 160deg,
      #fff 160deg 170deg, #d9d9ff 170deg 180deg, #fff 180deg 190deg, #c8b9e8 190deg 200deg,
      #fff 200deg 210deg, #ffd9f2 210deg 220deg, #fff 220deg 230deg, #c8b9e8 230deg 240deg,
      #fff 240deg 250deg, #d9d9ff 250deg 260deg, #fff 260deg 270deg, #ffd9f2 270deg 280deg,
      #fff 280deg 290deg, #c8b9e8 290deg 300deg, #fff 300deg 310deg, #ffd9f2 310deg 320deg,
      #fff 320deg 330deg, #d9d9ff 330deg 340deg, #fff 340deg 350deg, #c8b9e8 350deg 360deg);
  box-shadow:
    0 0 40px rgba(255,213,75,.6),
    0 0 80px rgba(255,42,154,.45),
    inset -12px -18px 30px rgba(0,0,0,.45),
    inset 8px 10px 20px rgba(255,255,255,.4);
  animation: spin 14s linear infinite, sway 7s ease-in-out infinite alternate;
  filter: contrast(1.1) saturate(1.1);
}
.hero-bg::after{
  /* Disco ball hanging string */
  content:""; position:absolute;
  top:0; left:calc(max(16px, (100vw - 1100px)/2 + 16px) + 54px);
  width:2px; height:20px; background:rgba(255,255,255,.55);
  transform-origin: top center;
  animation: sway 7s ease-in-out infinite alternate;
}
@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes sway { from { transform: translateX(-6px) } to { transform: translateX(6px) } }

/* Marquee banner below hero */
.marquee{
  position:relative; z-index:2;
  overflow:hidden; white-space:nowrap;
  background:linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3), var(--accent1));
  background-size:300% 100%;
  animation: shimmer 7s linear infinite;
  border-block: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 6px 24px rgba(255,42,154,.3);
}
.marquee-track{
  display:inline-flex; gap:3rem;
  padding:.8rem 0;
  animation: slide 28s linear infinite;
  font-family:"Bungee Shade","Inter",sans-serif;
  font-size:1.05rem;
  color:#170340;
  letter-spacing:.08em;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.marquee-track span{display:inline-flex;align-items:center;gap:.8rem}
@keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* Sections */
.section{padding:3.2rem 0;position:relative;z-index:3;background:transparent}
.section h2{
  display:flex;align-items:center;gap:.55rem;
  font-size:1.75rem;margin:0 0 1.1rem;
  position:relative;
}
.section h2 .title{
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-family:"Bungee Shade","Inter",sans-serif;
  letter-spacing:.02em;
}
.section h2 .emoji{font-size:1.55rem;line-height:1;filter:drop-shadow(0 0 10px rgba(255,213,75,.45))}
.section h2:after{
  content:""; position:absolute; left:0; bottom:-8px; width:140px; height:6px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  border-radius:6px; filter:drop-shadow(0 4px 10px rgba(255,42,154,.35));
}

/* Grid */
.grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:800px){.grid{grid-template-columns:1fr 1fr}}

/* Card */
.card{
  position:relative;
  background:linear-gradient(180deg, rgba(30,21,80,.82), rgba(30,21,80,.6));
  border:1px solid rgba(255,213,75,.22);
  box-shadow:0 12px 34px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  border-radius:20px;padding:1.3rem;
}
.card::before{
  /* subtle top gradient highlight */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,213,75,.08), transparent 40%);
  pointer-events:none;
}
.card h2, .card h3{position:relative}
.card h3{margin:.1rem 0 .5rem;font-size:1.15rem}
.card p{margin:.2rem 0 .8rem;color:var(--text);position:relative}

.badge{display:inline-flex;gap:.5rem;align-items:center;font-size:.85rem;color:var(--muted)}

.list{margin:.4rem 0 .6rem;padding-left:1.1rem}
.list li{margin:.4rem 0}

/* Room grid */
.rooms{display:grid;grid-template-columns:1fr;gap:.8rem;margin-top:.8rem}
@media(min-width:720px){.rooms{grid-template-columns:1fr 1fr}}
.room{
  display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;
  border:1px solid rgba(255,213,75,.18);border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  transition: .2s;
}
.room:hover{transform:translateY(-1px);border-color:var(--accent2);box-shadow:0 6px 20px rgba(255,42,154,.2)}
.room .pill{
  margin-left:auto;
  background:linear-gradient(90deg, rgba(255,213,75,.25), rgba(255,42,154,.25));
  border:1px solid rgba(255,213,75,.35);
  color:#fff;padding:.25rem .7rem;border-radius:999px;font-weight:600;font-size:.88rem
}

/* Footer */
.footer{padding:2rem 0;color:var(--muted);font-size:.95rem;text-align:center;border-top:1px solid rgba(255,213,75,.15)}
.small{font-size:.92rem;color:var(--muted)}

/* CTA buttons */
.cta{
  display:inline-flex;gap:.55rem;align-items:center;
  padding:.65rem 1.1rem;border-radius:999px;border:1px solid rgba(255,213,75,.35);
  background:linear-gradient(90deg, rgba(255,213,75,.18), rgba(255,42,154,.18), rgba(168,85,247,.18));
  text-decoration:none;color:var(--text);font-weight:700;
  transition:.2s;
  box-shadow:0 6px 18px rgba(255,42,154,.2);
}
.cta:hover{transform:translateY(-2px) scale(1.02); border-color:var(--accent2); box-shadow:0 10px 28px rgba(255,42,154,.35)}
.marker{opacity:.85}

/* Confetti dots background */
body:before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    radial-gradient(rgba(255,213,75,.22) 1px, transparent 1px),
    radial-gradient(rgba(255,42,154,.18) 1px, transparent 1px),
    radial-gradient(rgba(168,85,247,.15) 1px, transparent 1px),
    radial-gradient(rgba(92,225,230,.14) 1px, transparent 1px);
  background-size: 22px 22px, 28px 28px, 34px 34px, 40px 40px;
  background-position: 0 0, 12px 18px, -10px 6px, 18px -4px;
  mask-image: radial-gradient(1100px 800px at 50% -10%, #000 35%, transparent 75%);
}

/* Affiche / poster section */
.poster-section{ padding-top: 3rem; padding-bottom: 3.4rem; }
.poster-frame{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  max-width: 440px;
  margin: 1.6rem auto 0;
  padding: 14px 14px 18px;
  background: linear-gradient(180deg, rgba(255,213,75,.18), rgba(255,42,154,.18) 50%, rgba(168,85,247,.22));
  border: 1px solid rgba(255,213,75,.45);
  border-radius: 14px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 14px 40px rgba(255,42,154,.35),
    0 6px 22px rgba(168,85,247,.28),
    0 0 80px rgba(255,213,75,.18);
  transform: rotate(-2.2deg);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.4), box-shadow .35s;
}
.poster-frame::before{
  /* Gold tack / pin at the top */
  content:""; position:absolute; top:-10px; left:50%;
  width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff7d1 0 18%, var(--accent1) 20% 65%, #8b6a00 70% 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 14px rgba(255,213,75,.7);
  transform: translateX(-50%);
  z-index:2;
}
.poster-frame a{
  display:block; line-height:0;
  border-radius:8px; overflow:hidden;
  cursor: zoom-in;
  box-shadow: 0 10px 26px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
}
.poster-frame img{
  width:100%; height:auto; display:block;
  transition: transform .4s ease;
}
.poster-frame:hover{
  transform: rotate(0deg) translateY(-6px) scale(1.015);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.12) inset,
    0 22px 58px rgba(255,42,154,.5),
    0 10px 34px rgba(168,85,247,.4),
    0 0 120px rgba(255,213,75,.3);
}
.poster-frame:hover img{ transform: scale(1.02) }
.poster-frame figcaption{
  font-family: "Bungee Shade","Inter",sans-serif;
  font-size:.95rem;
  letter-spacing:.05em;
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-align:center;
}
@media(max-width:640px){
  .poster-frame{ max-width: 320px; transform: rotate(-1.5deg); padding: 10px 10px 14px }
  .poster-frame figcaption{ font-size:.85rem }
}

/* Programme section */
#programma{padding-top:4rem}

/* Image gallery */
.gallery{display:grid; grid-template-columns:1fr; gap:12px; margin-top:1rem}
.gallery img{width:100%; height:260px; object-fit:cover; border-radius:16px; border:1px solid rgba(255,213,75,.22); box-shadow:0 10px 28px rgba(0,0,0,.35)}
@media(min-width:740px){ .gallery{grid-template-columns:1fr 1fr} .gallery img{height:280px} }
@media(min-width:1024px){ .gallery{grid-template-columns:1fr 1fr 1fr 1fr} .gallery img{height:220px} }

/* Gallery placeholder card (when images array is empty) */
.gallery-placeholder{
  grid-column: 1 / -1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem;
  padding:3rem 1.5rem; min-height:220px;
  border-radius:18px;
  border:2px dashed rgba(255,213,75,.35);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255,42,154,.15), transparent 70%),
    linear-gradient(180deg, rgba(30,21,80,.5), rgba(30,21,80,.25));
  text-align:center;
}
.gallery-placeholder .big{font-size:2.2rem; filter:drop-shadow(0 0 18px rgba(255,213,75,.6))}
.gallery-placeholder .label{
  font-family:"Bungee Shade","Inter",sans-serif;
  font-size:1.1rem;
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gallery-placeholder .hint{color:var(--muted); max-width:480px; font-size:.95rem}

/* Timetable / day cards */
.day-card{ margin: 2rem 0; padding: 1.4rem 1.6rem; border-radius: 20px;
  background:
    radial-gradient(120% 180% at 10% -20%, rgba(255,213,75,.22), rgba(255,255,255,0) 60%),
    radial-gradient(120% 180% at 90% 140%, rgba(255,42,154,.22), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  border: 1px solid rgba(255,213,75,.28);
  box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.04);
}
.day-card h3{ margin-top:0; margin-bottom:1rem; font-size:1.25rem;
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.day-header{
  display:flex; align-items:baseline; gap:.55rem;
  font-size:1.4rem; font-weight:800; margin-bottom:1rem;
  font-family:"Bungee Shade","Inter",sans-serif;
  letter-spacing:.02em;
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.day-header .day-emoji{font-size:1.5rem;filter:drop-shadow(0 0 10px rgba(255,213,75,.45));-webkit-text-fill-color: initial;color:initial}
.timetable{display:flex; flex-direction:column; gap:1.2rem}
.timetable .rows{display:flex; flex-direction:column; gap:1.4rem}
.timetable .row{
  display:grid;
  grid-template-columns: 12ch 1fr;
  column-gap: 1.6rem;
}
.timetable .time{white-space:nowrap; text-align:right; padding-top:.1rem; font-weight:800; color: var(--accent1); text-shadow:0 0 10px rgba(255,213,75,.3)}
.timetable .activity{min-width:0; overflow-wrap: anywhere;}
.timetable .activity .title{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;font-size:1.05rem}

/* FAQ */
.faq-question{
  font-weight:700;
  font-size:1.1rem;
  margin:0 0 .6rem;
  color:var(--text);
}
.faq-answer{
  color:var(--muted);
  margin:0;
  font-weight:400;
}

/* ── Responsive ── */
@media(max-width:900px){
  .hero{ padding: 4.5rem 0 3rem }
  .menu{ gap:.4rem }
  .menu a{ padding:.35rem .7rem; font-size:.9rem }
  .grid{ grid-template-columns:1fr }
  .timetable .row{ grid-template-columns: 10ch 1fr }
  .hero-bg::before{ width:82px; height:82px; top:14px }
  .hero-bg::after{ left:calc(max(16px, (100vw - 1100px)/2 + 16px) + 40px); height:14px }
}
@media(max-width:768px){
  .nav-inner{flex-direction:column; gap:.6rem}
  .menu{flex-wrap:wrap; justify-content:center}
}
@media(max-width:640px){
  .hero{ padding: 3.2rem 0 2.2rem }
  .hero h1{ font-size:2rem }
  .hero p{ font-size:.98rem }
  .timetable .activity .title{ font-size:1rem }
  .day-card{ padding: 1rem }
  .rooms{ grid-template-columns:1fr }
  .hero-bg::before{ width:64px; height:64px; top:10px }
  .hero-bg::after{ display:none }
  .marquee-track{ font-size:.9rem; gap:2rem }
}