@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
/* =========================
   BASE
========================= */
*{box-sizing:border-box;}
html {scroll-behavior: smooth;}
body{
   margin:0;
   background:black;
   color:white;
   font-family:'IM Fell English SC', cursive;
   font-size:1.1rem;
   line-height:1.5;
   overflow-x:hidden;}
.hero {
    position: relative;
    height: auto;
    overflow: visible;}
.hero-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}

/* =========================
   BACKGROUND
========================= */
body::before{
   content:"";
   position:fixed;
   inset:0;
   background:url("../image/background.png");
   background-size:cover;
   background-position:center;
   z-index:-2;}
.page{
    max-width:900px;
    margin:0 auto;
    padding:0 15px;}

/* ========================
=========HEADER========== */
header{
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   text-align:center;
   position: relative;}
.main-logo{
    width:430px;
    max-width:100%;
    margin-top: 10px;
    margin-bottom: 0px;
    opacity: 1;
    z-index: 1;
    filter:drop-shadow(0 0 8px #ff0000)
           drop-shadow(0 0 18px #ff0000);}
.background-video {
  position: absolute;
  border: 2px solid #000000;
  border-radius: 10px;
  width:100%;
  max-width: 870px;
  height: 250px;
  margin-top: 0px;
  object-fit: cover;
  object-position: center 45%;
  z-index: -1;
  opacity: 0.6; /* option pour laisser lire le texte */
  filter: saturate(1.5) contrast(1);}

/* =========================
   NAVIGATION
========================= */
nav{
   position:sticky;
   top:0px;
   display:flex;
   justify-content:center;
   flex-wrap:wrap;
   margin-top: -2px;
   margin-bottom: 0px;
   gap:10px;
   padding: 5px;
   background-color: #1c0000;
   border-radius: 10px 10px 0 0;
   z-index:10;
   border-top:2px solid#000000;
   border-left: 2px solid#000000;
   border-right: 2px solid#000000;
   border-bottom: none;}
nav a{
  display: inline-block;
  padding: 10px 20px;
  color:#00ff00;
  text-decoration:none;
  font-family:'ROCK SALT', cursive;
  font-size:1.1rem;
  border: 1px solid #ff0000;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.623);
  transition:0.2s;}
nav a:hover{
  color: #FF0000;
  text-shadow:0 0 50px #00ff00;}
.menu-toggle{
  display:none;}
.nav-links{
  display:none;}

/* =========================
   BOX + Typo  
    ========================*/
.box{
   width:100%;
   max-width:900px;
   margin:0 auto;
   margin-top:0px;
   padding:20px;
   border-top:none;
   border-left: 2px solid#000000;
   border-right: 2px solid#000000;
   border-bottom: 2px solid#000000;
   border-radius: 0 0 10px 10px;
   background:rgba(0, 0, 0, 0.623);
   box-shadow:0px 0px 100px 10px rgb(255, 0, 0);
   overflow:hidden;}
.box h1 {
  text-align: center;
  color: #ff0000;
  font-family: 'Rock Salt', cursive;
  text-decoration: underline;
  text-underline-offset: 6px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 2rem;}
.box h2 {
    color:#29FF00;
    font-family:'Rock Salt', cursive;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 6px;
    margin-top:0px;
    letter-spacing:2px;
    font-size:1.5rem;}
.box h3 {
  text-align: center;
  font-size:1.25rem;
  color: #FF0000;
  font-family: 'Rock Salt', cursive;
  letter-spacing:2px;
  margin-top: 15px;}
.box h4 {
  line-height: 1.6;
  font-family: 'IM Fell English SC', serif;
  margin: 10px 0;
  text-align: center; 
  color: #00FF00;}
.box p {
  line-height: 1.6;
  font-family: 'IM Fell English SC', serif;
  margin: 10px 0;
  text-align: center; }

a {text-decoration: none;}

/* =========================
   DIVIDER
========================= */
.divider {
  height: 2px;
  width: 100%;
  margin: 25px 0;
  background: linear-gradient(to right, transparent, #ff0000, #29FF00, transparent);
  box-shadow: 0 0 10px rgba(255,0,0,0.3);}

/* =========================
   PHOTO BLOCK / Valeurs
========================= */
.photo-block {
  margin: 30px 0;
  text-align: center;
  filter: contrast(1.3) saturate(1.20);}
.photo-block img {
  width: 100%;
  max-width: 800px;
  border: 2px solid #29FF00;
  box-shadow: 0 0 20px rgba(255,0,0,0.3);
  transition: 0.3s ease;}
.photo-block img:hover {
  filter: contrast(1.0) saturate(0);
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(41,255,0,0.5);}

/*==========================
COMPTEURS / Billeterie
=========================*/
.counter{
    font-size:2rem;
    font-weight:bold;
    color:#ff0000;
    text-align:center;}
.box-counter{
    display:grid;
    align-items: center;
    grid-template-columns:repeat(3, 1fr);
    gap:0px;
    margin:0px 0;}
.box-counter2{
    display:grid;
    align-items: center;
    grid-template-columns:repeat(2, 1fr);
    gap:0px;
    margin:0px 0;}
.box-colonne2{
    display:grid;
    align-items: flex-end;
    grid-template-columns:repeat(2, 1fr);
    gap:0px;
    margin:0px 0;}

/*===============================================
=============Page Prog' & Partenaires===========*/
.lineup-grid{ display:grid;
              grid-template-columns:repeat(4, 1fr);
              margin-inline: 10px;
              margin-top:0px;}
.band-card,
.band-card2 {text-decoration: none;
            text-align: center;
            margin: 10px;
            filter: contrast(1.3) saturate(1.20);}
.band-card img {width: 100%;
                max-width: 800px;
                border: 2px solid #29FF00;
                box-shadow: 0 0 20px rgba(255,0,0,0.3);
                transition: 0.3s ease;}
.band-card2 img {width: 100%;
                max-width: 800px;
                border: 2px solid #FF0000;
                border-radius: 100px;
                box-shadow: 0 0 20px rgba(255,0,0,0.3);
                transition: 0.3s ease;}
.band-card img:hover,
.band-card2 img:hover {filter: contrast(1.0) saturate(0);
                      transform: scale(1.02);
                      box-shadow: 0 0 30px rgba(41,255,0,0.5);}
.band-card h3,
.band-card2 h3{margin:10px 0 5px 0;
                          color:#ff0000;
                          font-family:'Rock Salt', cursive;
                          align-items: flex-end;
                          font-size:1rem;}
.band-card p{font-size:0.9rem;
              color: #00ff00;
              align-items: flex-end;
              opacity:0.8;}


/*===================================================
========Bouton Prog'===============================*/
#soundBtn{
  position: relative;
  padding: 12px 20px;
  border-radius: 30px;
  background: black;
  color: #ff0000;
  border: 2px solid #29FF00;
  font-family: 'Rock Salt', cursive;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 0 25px rgba(255,0,0,0.5);
  transition: 0.3s;
}

#soundBtn:hover{
                        animation:glitch 0.15s infinite;
                        border-radius: 100%;
                        background-color: #ffffff;
                        filter:
                        drop-shadow(3px 0 #66ff00)
                        drop-shadow(-3px 0 #ff0000)
                        drop-shadow(0 0 10px #ff0000);
                        transform:scale(1.08);
                    }
        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-3px,2px); }
            40% { transform: translate(3px,-2px); }
            60% { transform: translate(-2px,-2px); }
            80% { transform: translate(2px,2px); }
            100% { transform: translate(0); }
        }


/*======================================================
==================Google Maps==========================*/
.map-container{
    width:100%;
    display:flex;
    justify-content:center;
    margin :0px 0;}
.map-container iframe{
    width:100%;
    max-width:800px;
    height:450px;
    border:2px solid #29FF00;
    border-radius:10px;
    box-shadow:0 0 20px rgba(255,0,0,0.4);}

/* =========================
   FOOTER
   =========================*/
   footer{
    text-align:center;
    padding:30px 20px;
    color:rgba(255,255,255,0.5);
    font-size:0.8rem;
    font-family:'Rock Salt', cursive;
    max-width:900px;
    margin:0 auto;
 }
/* =========================
   MOBILE
========================= */
@media (max-width:768px){
    header{
        padding:15px;}
    .main-logo{
        width:350px;
        margin-top: 0;
        margin-bottom: -25px;}   
    .box{
        padding:15px;
        width:calc(100% - 20px);} 
    .background-video {
        display: none !important;}
    nav {
        background: none;
        border: none;}
    nav a{
        display: none;}
    #soundBtn { 
        display:block;}
    .menu-toggle{
        display:block;
        position: relative;
        border: 2px solid #00ff00;
        z-index: 1000;
        font-size:24px;
        background:none;
        color:#00ff00;
        cursor:pointer;}
    .nav-links{
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background: #000;
        padding: 5px;
        border: 1px solid #ff0000;
        border-radius: 20px;
        z-index: 999;
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: all 0.25s ease;}
    .nav-links a{
        text-align:center; 
        border: 1px solid #ff0000; 
        border-radius: 50px; 
        margin: 5px; color: #00FF00; 
        font-family:'ROCK SALT', cursive;}
    .nav-links.active{
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;}
    .lineup-grid{
        grid-template-columns:1fr;}
}
@media (max-width:900px){
  .box-2023{
    grid-template-columns:repeat(1, 1fr);}
  .box-counter{
    grid-template-columns:repeat(1, 1fr);}
}


.social-links {
    display: flex;
    justify-content: center;
    padding: none;
}

.social-links a {
    color: white;
    font-size: 28px;
    text-decoration: none;
     padding-left: 10px;
     padding-right: 10px;
     padding-bottom: none;
     padding-top: none;
}

.social-links a:hover {
    transform: scale(1.2);
}
.video-container{
    width:100%;
    max-width:900px;
    margin:30px auto;
    text-align:center;
}

.video-container video{
    width:100%;
    max-width:800px;
    border:2px solid #ff0000;
    box-shadow:0 0 20px rgba(255,0,0,0.4);
}

/*===============================
INDEX========================*/
/* ==========================
   PAGE D'ACCUEIL
========================== */

.hero-home{
    position:relative;
    min-height:100dvh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    overflow:hidden;
}

/* ==========================
   VIDÉO
========================== */

.hero-video{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:140%;
    height:100%;
    object-fit:cover;
    z-index:1;
}

/* ==========================
   LOGO AU CHARGEMENT
========================== */

.hero-lcp{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:clamp(180px,25vw,350px);
    height:auto;
    z-index:5;
    transition:opacity 1.2s ease;
}

.hero-video{
    opacity:1;
    transition:opacity 1.2s ease;
}

.hero-home.loaded .hero-lcp{
    opacity:0;
}

/* ==========================
   OVERLAY
========================== */

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
    z-index:2;
}

/* ==========================
   CONTENU
========================== */

.hero-center{
    position:relative;
    z-index:10;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
    color:white;

    width:min(90vw,450px);
}

/* ==========================
   TITRES
========================== */

.hero-center h1{
    margin:0;
    font-family:'Rock Salt',cursive;
    letter-spacing:8px;
    font-size:x-large;

}

.hero-center h2{
    margin:10px 0;
    font-family:'Rock Salt',cursive;
    letter-spacing:4px;
    font-size:clamp(1rem,2vw,1.8rem);
}

/* ==========================
   MENU
========================== */

.hero-menu{
    display:flex;
    flex-direction:column;
    gap:12px;
    width:100%;
    margin:20px 0;
    
}

.hero-btn{
    display:block;
    padding:12px 20px;
    border-radius:30px;
    text-decoration:none;
    font-family:'Rock Salt',cursive;
    transition:.25s;
    border:2px solid;
}

.hero-btn.red{
    color:#000000;
    border-color:#00ff00;
    background:#fff;
    box-shadow:0 0 20px #00ff00;
}

.hero-btn.green{
    color:#00ff00;
    border-color:#ff0000;
    background:#000;
    box-shadow:0 0 20px #ff0000;
}

.hero-btn:hover{
    transform:scale(1.05);
}

/* ==========================
   PETITS ÉCRANS
========================== */

@media (max-height:750px){

    .hero-home{
        padding:15px;
    }

    .hero-lcp{
        width:180px;
    }

    .hero-center h1{
        font-size:2rem;
        letter-spacing:4px;
    }

    .hero-center h2{
        font-size:1rem;
        margin:6px 0;
    }

    .hero-menu{
        gap:8px;
        margin:12px 0;
    }

    .hero-btn,
    #soundBtn{
        padding:8px 14px;
        font-size:.85rem;
    }

}