/* style.css */
@font-face {
    font-family: 'Subjectivity';
    src: url('/fonts/Subjectivity-Regular.woff2') format('woff2'),
        url('/fonts/Subjectivity-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Subjectivity Serif';
    src: url('/fonts/SubjectivitySerif-Regular.woff2') format('woff2'),
        url('/fonts/SubjectivitySerif-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.sarala-regular {
  font-family: "Sarala", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sarala-bold {
  font-family: "Sarala", sans-serif;
  font-weight: 700;
  font-style: normal;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 900px) {
  main{
    gap: 2rem;
  }

  main h1, main h3, main h5{
    font-size: 2rem;
  }

  main h1, main h2, main h3{
    margin: 1vh 1vw;
  }

  main h2{
    font-size: 2.5rem;
  }

  main h4{
    font-size: 1.7rem;
  }

  main h5{
    margin: 38vw 6vw 0vw;
  }

  main p{
    font-size: 1.5rem;
    margin: 3vh 2vw 8vh;
  }

  main ul{
    margin: 0vh 8vw;
    width: 84vw;
    text-align: left;
  }

  main li{
    font-size: 1.2rem;
  }

  header{
    height: 18vw;
    margin: 5vw;
  }

  #logo{
    height: 16vh;
  }

  .acliquer{
    font-size: 2rem;
  }

  /*---Menu---*/
  .liens{
    display: none;
  }

  .liens_mob{
    display: flex;
    flex-direction: column;
  }

  .liens_mob.active{
    height: 100vh;
  }

  .liens button, .lien-actif a{
    font-size: 1.6rem;
    padding: 1vh 2vw;
  }

  .lien-actif a{
    box-shadow: 0.2em 0.2em #FEFCFA;
  }

  .contains-liens{
    justify-content: space-evenly;
    height: 80vh;
  }

  .contains-liens.active{
    max-height: 70vh;
    transition: max-height 1s ease-in-out;
  }

  .sticky{
    width: 100%;
    transition: background-color 1s ease-in-out;
  }

  .sticky.active{
    background-color: #31000F6E;
    transition: background-color 1s ease-in-out;
    height: 100vh;
  }

  .sticky-element{
    transition: background-color 1s ease-in-out;
  }

  /*---Index---*/
  .first{
    background-attachment: local;
  }
  
  .first h1{
    font-size: 5rem;
  }

  #logo_first {
    height: 25vh;
    top: 3vh;
  }

  #envolee{
    width: 65vw;
    top: 97vh;
    right: 0;
  }
  
  #mante{
    width: 59vw;
  }

  #cricket{
    height: 25vh;
    top: 129vh;
    left: 1vw;
    rotate: 1.02rad;
  }
  
  #adress svg{
    width: 6vw;
  }

  .scroll-img{
    background-attachment: local;
  }

  .playlists {
    flex-direction: column;
    height: 40vh;
    justify-content: space-around;
  }

  .playlists a{
    padding: 1.5vh 4vw;
    align-self: center;
  }

  .playlists img{
    height: 6vh;
  }

  .insta-icon, .tiktok-icon {
    height: 7vh;
  }

  .social-media{
    flex-direction: column;
  }

  .social-media a ul li{
    font-size: 1.7rem;
  }

  .social-media ul{
    width: 80vw;
  }

  .photos {
    grid-template-columns: repeat(2, 50vw);
    grid-template-rows: repeat(3, 37vh);
    grid-template-areas:
      "portrait1 portrait6"
      "portrait5 portrait2"
      "portrait3 portrait4";
  } 

  .portrait1,.portrait3, .portrait4, .portrait2, .portrait5, .portrait6{
    width: 50vw;
    height: 37vh;
  }

  /*---A Propos---*/
  .presentation{
    flex-direction: column;
    height: 60vh;
  }

  .lieu{
    height: 50vh;
  }

  .presentation, .lieu {
    background-attachment: local;
  }

  .presentation h1, .lieu h1 {
    text-shadow: 0.1rem 0.1rem #31000F;
  }

  .mat, .constr-bar, .lineup{
    width: 90vw;
    height: 50vh;
  }

  .bar, .scene, .entree{
    width: 90vw;
    height: 25vh;
  }

  /*---Boutique---*/
  .billetweb{
    width: 94vw;
  }

  /*---Line Up---*/ 
  .grid-jour{
    grid-template-columns: repeat(2,43vw);
    gap: 2vh 3vw;
    justify-content: space-evenly;
  }

  .grid-jour h4{
    margin: 1vh 1vw;
    padding: 0;
    font-size: 1rem;
  }

  .grid-artist {
    border-radius: 1.5vh;
  }

  .grid-artist img{
    width: 43vw;
  }

  /*---Artistes---*/
  .artist-title{
    position: absolute;
    color: #F05730;
  }
  
  .artist-title h2{
    font-size: 1.5rem;
  }
  
  .artist-top{
    flex-direction: column;
    justify-content: space-between;
  }

  .artist-pic{
    width: 100vw;
    height: 69vh;
    position: relative;
    display: flex;
    padding: 0;
    margin: 0;
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .artist-liens{
    display: flex;
    flex-direction: column;
    width: 100vw;
    align-items: center;
    margin: 2vh 0;
  }

  .artist-socials{
    width: 98vw;
    margin: 5vh 1vw;
    justify-content: space-evenly;
  }

  .artist-socials a{
    font-size: 1.5rem;
  }

  .artist-socials img{
    width: 12vw;
    margin: 0 1vw;
    border: solid 0.1em;
  }

  .artist-son{
    display: block;
    width: 90vw;
  }

  .artist-playlist{
    display: none;
  }

  .artist-grid{
    flex-direction: column;
    width: 100vw;
  }

  .artist-grid-pic{
    width: 100vw;
  }

  .artist-grid-pic img{
    height: fit-content;
    width: fit-content;
  }

  #retour {
    top: 11vh;
    left: 4vw;
    height: 4.5vh;
    fill: #F05730;
  }

  .prev, .next{
    font-size: 1.5rem;
    color: #F05730;
  }

  /*---Infos---*/
  .content-infos{
    justify-content: space-evenly;
  }

  .content-infos.active{
    max-height: fit-content;
    margin: 0vh 0 2vh;
    transition: max-height 1s ease-in-out;
  }

  .collapsible{
    padding: 1vh 2vw;
    font-size: 1.5rem;
  }
  
  /*---Form---*/
  form{
    margin: 0;
  }
  
  input{
    width: 80vw;
    height: 2vh;
  }

  textarea, input{
    border-radius: 0.25rem;
    border: 0.1em solid #66ab46;
  }

  form button{
    width: 40vw;
    font-size: 1.5rem;
    border: 0.01em solid #66ab46;
    box-shadow: 0.2em 0.2em #66ab46;
    border-radius: 0.5rem;
  }
  
  /*---Politiques---*/
  #cookies, #cgv {
    margin: 2vh 0;
  }

  /*---Footer---*/
  .footer-section h4 {
    font-size: 1.5rem;
  }

  .footer-section ul li a {
    font-size: 1.2rem;
  }

  .footer-bottom p{
    font-size: 1rem;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 900px) {
  main{
    gap: 1rem;
  }

  main h1, main h2, main h3{
    margin: 3vh 6vw;
  }

  main h1, main h5{
    font-size: 6rem;
  }

  main h2{
    font-size: 4.5rem;
  }

  main h3{
    font-size: 3rem;
  }

  main h4{
    font-size: 2.8rem;
  }

  main h5{
    margin: 13vw 6vw 0vw;;
  }

  main p{
    font-size: 2.5rem;
  }
  
  main ul{
    margin: 0vh 6vw;
    width: 88vw;
    text-align: left;
  }

  main li{
    font-size: 2rem;
  }

  header{
    margin: 3vw 5vw 1vw;
  }

  #logo a{
    height: 20vh;
  }

  #logo{
    height: 27vh;
  }

  .acliquer {
    font-size: 2rem;
  }

  .dates {
    font-size: 2.5rem;
    top: 2vh;
    right: 4vw;
    position: absolute;
  }

  /*---Menu---*/
  .liens{
    flex-direction: row;
    justify-content: space-evenly;
    display: flex;
    align-items: center;
    width: 100vw;
  }

  .liens_mob{
    display: none;
  }

  .liens button, .lien-actif a{
    font-size: 1.4rem;
    padding: 1vh 1vw;
  }

  .lien-actif a{
    box-shadow: 0.2em 0.2em #31000F;
  }

  .sticky-element {
    background: transparent;
    transition: background-color 0.3s ease;
  }

  .sticky {
    margin: 2vh;
  }

  /*---Index---*/
  .first, .lieu, .presentation, .scroll-img{
    background-attachment: fixed;
  }

  .first h1{
    font-size: 7rem;
  }

  #logo_first {
    height: 30vh;
    top: 5vh;
  }

  .acliquer{
    font-size: 3rem;
  }

  #envolee{
    width: 526px;
    height: 351px;
    top: 94vh;
    left: 70vw;
  }
  
  #mante{
    width: 33vw;
  }

  #cricket{
    height: 30vh;
    top: 120vh;
    left: 3vw;
    rotate: 1rad;
  }
  
  .playlists{
    flex-direction: row;
    width: 90vw;
  }
  
  .playlists a{
    padding: 1vh 2vw;
    border: #F05730 solid 0.01em;
    box-shadow: 0.2em 0.2em #F05730;
  }

  .playlists img{
    width: 16vw;
    height: auto;
  }
  
  .insta-icon, .tiktok-icon {
    height: 9vh;
  }

  .social-media a{
    margin: 0 0 4vh;
  }

  .social-media ul{
    width: 40vw;
  }

  .photos {
    grid-template-columns: repeat(3, 33.4vw);
    grid-template-rows: repeat(2, 82vh);
    grid-template-areas:
      "portrait1 portrait5 portrait3"
      "portrait4 portrait2 portrait6";
  } 

  .portrait1, .portrait2, .portrait3, .portrait4, .portrait5, .portrait6{
    width: 33.4vw;
    height: 82vh;
  }

  /*---A Propos---*/
  .presentation{
    flex-direction: row;
    height: 100vh;
  }

  .lieu{
    height: 70vh;
  }

  .presentation h1, .lieu h1 {
    text-shadow: 0.2rem 0.2rem #31000F;
  }

  .mozaik#process{
    flex-direction: row;
  }

  .mozaik#result{
    flex-direction: column;
  }
  
  /*---Line Up---*/ 
  .grid-jour{
    grid-template-columns: repeat(3,28vw);
    gap: 3rem;
  }

  .grid-jour h4{
    margin: 1vh 1vw;
    padding: 0;
    font-size: 2rem;
  }

  .grid-artist, .artist-grid-pic img{
    border-radius: 2vh
  }

  .grid-artist img{
    width: 28vw;
  }

  /*---Artistes---*/
  .artist-title{
    position: relative;
    height: fit-content;
  }

  .artist-title h1{
    font-size: 6rem;
    margin: 0;
  }

  .artist-title h2{
    font-size: 2rem;
    margin: 0;
  }

  .artist-top{
    flex-direction: row;
    justify-content: space-evenly;
    margin: 4vh 2vw;
  }

  .artist-pic{
    width: 30vw;
    height: 75vh;
    display: flex;
    padding: 0;
    margin: 0;
    border-radius: 2vh
  }

  .artist-liens {
    width: 50vw;
    align-items: center;
    justify-content: end;
    display: flex;
    flex-direction: column;
  }

  .artist-liens .artist-socials{
    width: 40vw;
    justify-content: space-between;
  }

  .artist-liens p{
    margin: 1rem;
    font-size: 1.7rem;
    text-align: justify;
    text-justify: distribute;
    width: 40vw;
  }

  .artist-socials{
    width: 94vw;
    margin: 2vh 3vw;
    height: 15vh;
    justify-content: space-around;
  }

  .artist-socials img{
    height: 7vh;
    border: solid 0.05em;
    margin: 0 1vh;
  }

  .artist-socials a{
    font-size: 3rem;
  }

  .artist-grid{
    flex-direction: row;
    width: 96vw;
    justify-content: space-evenly;
    align-items: center;
    margin: 1vh 2vw;
  }

  .artist-grid-pic{
    width: 30svw;
  }

  .artist-grid-pic img{
    width: inherit;
  }

  #artist-pic-mob{
    display: none;
  }

  .artist-pic{
    background-position: center;
    background-size: cover;
  }

  .artist-son{
    display: none;
  }

  .artist-playlist{
    display: block;
    width: 40vw;
  }

  #retour {
    top: 14vh;
    left: 2vw;
    height: 5.5vh;
    fill: #31000F;
  }

  .prev, .next{
    font-size: 2rem;
  }

  /*---Contact---*/
  form label{
    font-size: 2rem;
  }

  input{
    height: 3vh;
    width: 60vw;
  }

  form button{
    width: fit-content;
    font-size: 2rem;
    font-weight: bold;
    border: 0.01em solid #66ab46;
    box-shadow: 0.2em 0.2em #66ab46;
    border-radius: 0.5rem;
  }

  textarea, input{
    border-radius: 0.25rem;
    border: 0.1em solid #66ab46;
  }

  /*---CGV---*/
  #cgv {
    margin: 5vh 0;
  }

  /*---Footer---*/
  footer h4{
    font-size: 2.2rem;
  }

  .footer-section a, .footer p {
    font-size: 1.5rem;
  }
}

html{
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow-x: hidden;
  scrollbar-width: none;
  font-family: 'Sarala';
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  background-color: #FEFCFA;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-size: contain;
  opacity: 0.15;
  z-index: -1;
  overflow-x: hidden;
}

main {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  flex-grow: 1;
  padding: 0;
  margin: 0;
  width: 100vw;
  align-items: center;
  color: #31000F;
}

main a{
  color: #CF294B;
  text-decoration: none;
  cursor: pointer;
}

main img{
  max-width: 100vw;
  align-self: center;
}

main h1, main h2, main h3{
  font-family: 'Subjectivity', sans-serif;
  text-align: center;
  position: relative;
}

main h4{
  font-family: 'Subjectivity', sans-serif;
  margin: 3vh 6vw;
  text-align: left;
}

main h5{
  font-family: 'Subjectivity', sans-serif;
  text-align: center;
  display: flex;
}

main p{
  font-family: 'Sarala';
  margin: 3vh 6vw;
  text-align: center;
  position: relative;
}

main ul{
  list-style: none;
  padding: 0;
}

main li{
  margin: 1vh 0;
}

.acliquer{
  width: fit-content;
  font-family: 'Subjectivity', sans-serif;
  font-weight: bold;
  background-color: #FEFCFA;
  border-radius: 1vh;
  align-self: center;
  border: solid 0.01em #66AB46;
  box-shadow: 0.2em 0.2em #66AB46;
  padding: 1vh 2vw;
  margin-bottom: 2vh;
  z-index: 2;
}

.acliquer:hover{
  box-shadow: 0.2em 0.2em #F05730;
}

/*------------------------ Optimisation de chargement */
.lazy {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.lazy.loaded {
  opacity: 1;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FEFCFA;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* état caché */
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Spinner animation */
.spinner {
  border: 6px solid #FEFCFA;
  border-top: 6px solid #31000F;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

/*---------------------------HEADER-----------*/
header {
  display: flex;
  position: absolute;
  width: 90vw;
}

#logo{
  background-image: url(/images/logos/LOGO_PRINCIPALE_ROSE.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  align-content: center;
  align-self: center;
  position: relative;
  margin: 2vh 0 0;
  aspect-ratio: 648/712;
}
/*---------------MENU-------------*/
#menu {
  text-align: center;
  border-radius: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90vw;
  border: #F05730 solid 0.01em;
  box-shadow: 0.2em 0.2em #F05730;
  background-color: #FEFCFA;
  color: #31000F;
  font-weight: bold;
  font-family: 'Subjectivity', sans-serif;
  margin: 1vh 2vw;
  padding: 1vh 2vw;
  font-size: 1.5rem;
}

#menu.active, #menu:hover {
  background-color: #31000F;
  color: #FEFCFA;
  box-shadow: 0.2em 0.2em;
  border: solid 0.01em;
}

.sticky-element {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sticky {
  position: fixed;
  top: 0;
  z-index: 10;
}

.contains-liens {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: 1em;
  max-height: 0;
  transition: max-height 1s ease-in-out;
}

.contains-liens .lien, .liens button{
  align-self: center;
  font-family: 'Subjectivity', sans-serif;
  font-weight: bold;
  width: fit-content;
  background-color: #FEFCFA;
  border-radius: 2vh;
  border: #F05730 solid 0.01em;
  box-shadow: 0.2em 0.2em #F05730;
}

.contains-liens .lien{
  font-size: 1.6rem;
  padding: 1vh 2vw;
  margin: 1vh 5vw;
}

.lien-actif a{
  border: #31000F solid 0.01em;
  background-color: #CF294B;
  color: #FEFCFA;
  border-radius: 2vh;
  width: fit-content;
  align-self: center;
  font-family: 'Subjectivity', sans-serif;
  font-weight: bold;
  text-decoration: none;
}

/*------------- INDEX -------------*/
.first{
  background-image: url(/images/IMG_5532.webp); 
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  position: relative;
  display: flex;
  text-align: left;
  flex-direction: column;
  padding: 0;
  margin: 0;
  align-items: left;
  justify-content: end;
}

.first h1{
  color: #CF294B;
}

.first h3{
  color: #66ab46;
}

.first h1, .first h3{
  text-align: left;
}

.first .acliquer{
  box-shadow: 0.15em 0.15em #66AB46;
  z-index: 80;
  color: #CF294B;
}

#logo_first {
  background-image: url(/images/logos/LOGO_PRINCIPALE_BLANC.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  align-content: center;
  align-self: center;
  justify-self: center;
  aspect-ratio: 438/481;
}

.adress{
  width: 100vw;
  background-image: url(/images/adress.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 0.1rem dotted #F05730;
  margin: 0 auto;
}

#envolee {
  position: absolute;
  aspect-ratio: 526/351;
  background: linear-gradient(0deg, #2B99DD 0%, #2B99DD 100%), url("/images/icons/envolee.jpg") lightgray 0px 0px / 100% 100% no-repeat;
  background-blend-mode: lighten, normal;
  mix-blend-mode: multiply;
  overflow: hidden;
}

#mante {
  position: relative;
  aspect-ratio: 3/2;
  background: url("/images/icons/sauterelle.jpg") lightgray 0px 0px / 100% 100% no-repeat;
  mix-blend-mode: multiply;
}

#cricket{
  aspect-ratio: 9/12;
  align-content: left;
  background: linear-gradient(0deg, #66AB46 0%, #66AB46 100%), url('/images/cricket.jpg') lightgray 0px 0px / 100% 100% no-repeat;
  background-blend-mode: lighten, normal;
  mix-blend-mode: multiply;
  position: absolute;
}

.img-wrap{
  width: 100vw;
  height: 60vh;
}

.scroll-img{
  height: 100%;
  background-image: url(/images/Festoche-001.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.social-media, .partners-logos, .playlists, #partners1, #partners2 {
  display: flex;
}

.contact {
  padding: 5vh 2vw;
  display: flex;
  flex-direction: column;
}

.playlists {
  justify-content: space-around;
}

.playlists a{
  align-content: center;
  border-radius: 13px;
  display: flex;
  background-color: #31000F;
}

.playlists a:hover{
  background-color: #F05730;
  padding: 1vh 2vw;
  border: #31000F solid 0.01em;
  box-shadow: 0.2em 0.2em #31000F;
}

.partners-logos, #partners1, #partners2 {
  justify-content: space-evenly;
  align-items: center;
}

#partners1, #partners2{
  flex-direction: row;
}  

.partners-logos img {
  height: auto;
}

.social-media ul{
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  display: flex;
}

.social-media img{
  height: 7vh;
  margin: 0 2vw;
}

.social-media a:hover {
  font-weight: bold;
}

.insta-icon, .tiktok-icon {
  fill: #31000F;
}

/*---------------- A PROPOS --------------*/
.presentation, .lieu {
  display: flex;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
}

.presentation h1, .lieu h1 {
  align-items: end;
  display: flex;
  color: #FEFCFA;
  margin: 1vh 5vw;
}

.presentation{
  background-image: url(/images/groupe.webp);
}

.lieu{
  background-image: url(/images/lac.webp);
}

.mozaik {
  display: flex;  
  justify-content: center;
  align-content: center;
  align-items: center;
  position: relative;
  width: 90vw;
  gap: 2rem;
  flex-direction: column;
  align-self: center;
}

.mozaik h3, .mozaik p {
  background-color: #ffffffbd;
  border-radius: 2vw;
  padding: 1vh 1vw;
  width: 90vw;
  text-align: center;
  font-family: 'Subjectivity Serif', serif;
  font-weight: normal;
}

.mozaik img {
  height: 100%;
  width: auto;
}

.photos {  
  display: grid;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  position: relative; 
} 

.portrait1, .portrait2, .portrait3, .portrait4, .portrait5, .portrait6 { 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.paysage1, .paysage2{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.portrait1{
  grid-area: portrait1;
  background-image: url(/images/Festoche-192.webp);
}

.portrait2{
  grid-area: portrait2;
  background-image: url(/images/Festoche-056.webp);
}

.portrait3{
  grid-area: portrait3;
  background-image: url(/images/Festoche-110.webp);
}

.portrait4{
  grid-area: portrait4;
  background-image: url(/images/Festoche-191.webp);
}

.portrait5{
  grid-area: portrait5;
  background-image: url(/images/Festoche-140.webp);
}

.portrait6{
  grid-area: portrait6;
  background-image: url(/images/Festoche-058.webp);
}


/*------------- A PROPOS -----------*/
.mat, .constr-bar, .lineup, .bar, .scene, .entree {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 1rem;
  overflow: hidden;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 0.1em solid;
}

.mat, .constr-bar, .lineup, .bar, .scene{
  background-position: center;
}

.entree{
  background-image: url(/images/entree.webp);
  background-position: bottom;
}

.bar{
  background-image: url(/images/bar.webp);
}

.scene{
  background-image: url(/images/scene.webp);
}

.mat{
  background-image: url(/images/mat.webp);
}

.constr-bar{
  background-image: url(/images/construction_bar.webp);
}

.lineup{
  background-image: url(/images/lineup.webp);
}


/*---------------------- BOUTIQUE ---------------------*/
#boutique{
  display: flex;
  width: 92vw;
}

/*---------------------- LINEUP ------------------*/
.grid-lineup {
  text-align: center;
  align-self: center;
}

.grid-jour{
  display: grid;
  margin: 2vh 0 7vh;
}

.grid-jour a{
  margin: 0;
  padding: 0;
}

.grid-jour h4{
  margin: 1vh 1vw;
  padding: 0;
  text-align: center;
}

.grid-artist{
  background-color: #31000F;
  border: 0.1rem solid rgba(255, 255, 255, 0.17);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  max-height: 60vh;
}

.grid-artist:hover{
  border: 0.1rem solid #F05730;
}

.grid-artist img{
  height: auto;
}

.lineup-text p{
  margin: 0 1vw;
}

#jam {
  background-color: #b271ff91;
  border: 0.1rem solid #31000F;
  overflow: clip;
  max-width: 90vw;
  height: initial;
  padding: 3vh 2vw;
  border-radius: 2vh;
  display: inline flow-root list-item;
}

/*---------------------- ARTISTES ---------------------*/
.artiste{
  display: none;
  overflow-x: hidden;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;
}

.artist-grid{
  display: flex;
}

.artist-title{
  z-index: 1;
  top: 0;
  width: 100vw;
  text-align: center;
}

.artist-top{
  display: flex;
}

.artist-pic{
  overflow: hidden;
  position: relative;
  display: flex;
  text-align: center;
  flex-direction: column;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: end;
}

.artist-socials{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.artist-socials img {
  border-radius: 1rem;
  box-shadow: 0.15rem 0.15rem;
}

.artist-son{
  margin: 2rem;
} 

.artist-playlist{
  margin: 2rem 2rem 0;
}

#retour {
  position: fixed;
  border: none;
  background: none;
  z-index: 45;
}

.prev, .next {
  position: fixed;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  font-weight: bold;
  transition: 0.6s ease;
  border-radius: 3px;
  user-select: none;
}

.next {
  right: 0;
}

.prev{
  left: 0;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/*--------- INFOS PRATIQUES --------*/
.collapsible{
  cursor: pointer;
  display: flex;
  border: none;
  font-weight: bold;
  font-family: 'Subjectivity', sans-serif;
  text-align: left;
  align-items: left;
  justify-content: left;
  width: 80vw;
  margin: 0vh 6vw;
  border-bottom: 0.05em solid #31000F66;
}

.collapsible.active,.collapsible:hover{
  color: #F05730;
}

.contains-infos{
  display: flex;
  width: 90vw;
  height: fit-content;
  background-color: #31000F36;
  border-radius: 2vh;
  flex-direction: column;
  padding: 2vh 0;
  position: relative;
}

.contains-infos p{
  text-align: left;
}


.content-infos {
  max-height: 0;
  overflow: hidden;
  border-radius: 1em;
  transition: max-height 1s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  height: fit-content;
}

.content-infos img{
  max-height: 40vh;
  border-radius: 2vh;
}

/*--------------ECOLO-------------*/




/*--------------- Contact ------------*/
form{
  gap: 2vh;
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
}

form label{
  text-align: left;
  padding-left: 1vw;
}

form button {
  cursor: pointer;
  align-self: center;
  margin: 2vh 0 0;
  font-family: 'Subjectivity', sans-serif;
  background-color: #FEFCFA;
  color: #31000F;
  padding: 1vh 1vw;
  font-weight: bold;
}

form button:hover{
  color: #F05730;
}

textarea{
  resize: none;
}

/*------------- COOKIES ------------*/
ul li a:hover{
  text-decoration: none;
  font-weight: bold;
}

/*------------- FOOTER ------------*/
footer {
  width: 96vw;
  margin: 4vw 0 0;
  text-align: center;
  color: #31000F;
}

footer h4 {
  font-weight: bold;
  font-family: 'Subjectivity', sans-serif;
}

.footer-section {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-weight: bold;
}

.footer-section a {
  color: #31000F;
  text-decoration: none;
  align-content: center;
}

.footer-section a:hover {
  color: #F05730;
}