@import url('https://fonts.googleapis.com/css2?family=Lato&family=Playfair+Display:wght@700&display=swap');

:root {
  --scale: 0.1;
  --space: 8vmin;
  --font-primary: 'Lato', sans-serif;
  --font-heading: 'Playfair Display', serif;
}

@media (prefers-reduced-motion) {
  :root {
    --scale: 0;
  }
}

* {
  box-sizing: border-box;
}

body {
  color: hsl(0, 0%, 95%);
  background-color: hsl(5, 15%, 5%);
  font-size: clamp(1.2rem, 5vw, 1.5rem);
  font-family: var(--font-primary);
  line-height: 1.6;
  margin: 0;
}

.page-title {
  text-align: center;
}

.page-title::after {
  content: '↓';
  display: block;
  font-size: 2em;
  opacity: 0;
  transform: translateY(-24px);
  animation: fadein 800ms 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.header,
.footer {
  display: grid;
  place-items: left;
  height: auto;
}

.header-nav {
  display: block;
}

.video-mobilefirst {
  background-size: cover;
  max-width: 100vw;
}

.video-desktop {
  display: none;
}

.header-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  height: 4rem;
  z-index: 9999;
  position: fixed;
}
.header-title{
  text-align: center;
  padding:1rem 1vh;
  margin: 2.3rem 0.2em 0 0.2em;
}

.header-title>img {
  height: 30%;
  width: 10rem
}

.acceuil{
  width: auto;
  height: calc(100vh - 96px);
}

.float {
  float: left;
  padding-right: 3%;
  width: 35%;
}
  

.section {
  transform-origin: center top;
  transform: scaleY(calc(1 - var(--scale)));
}

.section > * {
  transform-origin: center top;
  transform: scaleY(calc(1 / (1 - var(--scale))));
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: bold;
  line-height: 1.125;
}

.byline {
  display: block;
  font-size: 0.6em;
  margin: calc(var(--space) / 1.35) 0;
}

.content {
  position: relative;
  margin: -85vh auto 0;
  padding: var(--space);
  max-width: 55ch;
  width: calc(100% - var(--space));
  background: hsla(5, 15%, 5%, 0.9);
}

.content > * + * {
  margin-top: 2rem;
}

.image-container {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  margin: 0;
}

.image-container img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to bottom,
    hsla(5, 15%, 5%, 0) 0%,
    hsla(5, 15%, 5%, 0.013) 8.1%,
    hsla(5, 15%, 5%, 0.049) 15.5%,
    hsla(5, 15%, 5%, 0.104) 22.5%,
    hsla(5, 15%, 5%, 0.175) 29%,
    hsla(5, 15%, 5%, 0.259) 35.3%,
    hsla(5, 15%, 5%, 0.352) 41.2%,
    hsla(5, 15%, 5%, 0.45) 47.1%,
    hsla(5, 15%, 5%, 0.55) 52.9%,
    hsla(5, 15%, 5%, 0.648) 58.8%,
    hsla(5, 15%, 5%, 0.741) 64.7%,
    hsla(5, 15%, 5%, 0.825) 71%,
    hsla(5, 15%, 5%, 0.896) 77.5%,
    hsla(5, 15%, 5%, 0.951) 84.5%,
    hsla(5, 15%, 5%, 0.987) 91.9%,
    hsl(5, 15%, 5%) 100%
  );
}

@keyframes fadein {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.newsbox {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}


.card-news {
border-radius: 10px;
  width: 200px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.card-img-news {
  border-radius: 10px 10px 0 0;
  background-size: cover;
  background-position: center;
  background-image: url("http://placekitten.com/200/300");
  height: 200px;
  width: 100%;
}
.card-body-news {
  padding: 10px 20px;
}
.card-body-news h2 {
  margin: 10px 0px;
}
.card-button {
  border: none;
  border-radius: 10px;
  height: 50px;
  background-color: lightblue;
  width: 100%;
}
/*Disco CSS section*/
.disco {
  min-width: 80%; 
  color : black; 
  display : grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 10px;
  font-weight: bold;
  text-shadow: #C3E48D 2px 2px 0px, #9C9C9C 4px 4px 0px;  
}

.song {    
  background-color: white;
  border-radius: 10px 10px 10px 10px;
  display : grid;  
  grid-gap: 1px;
  grid-template-columns: 8fr 2fr;
  grid-template-rows: 1fr 1fr;
  background-repeat:repeat;
}
.ghibli {
  background-size: cover;
  background-position: center;
  background-repeat:repeat;
}


.song-title , .song-date, .song-part{
  padding: 0px;
  margin: 0px;
}
.song-title {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.song-date {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

.song-part {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  display :flex ;
  align-items: center;
  vertical-align: center;
}
.song-part img {
  height : 50%; 
  width : 50%;
  cursor: pointer;
}

/*Fenetre Modal---------------------------------------*/
/*.modal-btn {
  padding: 10px 14px;
  font-size: 18px;
  margin: 100px auto;
  display: block;
  min-width: 150px;
  cursor: pointer;
}*/
.modal-btn{
  width: 100%;
  height: 100%;
  background-color: transparent;
  cursor: pointer;
}
.modal-container {
  /* display: none; */
  visibility: hidden;
  position: fixed;
  /*top: 0;*/
  width: 100%;
  height: 100%;
  transition: visibility 0.4s;
}
.modal-container.active {
  /* display: block; */
  visibility: visible;
}

.overlay {
  box-sizing: content-box;
  opacity: 0;
  position: fixed;
  left: 0;
  right:0;
  width: 100%;
  height: 100%;
  background: #333333d3;
  transition: opacity 0.4s 0.2s ease-out;
}
.modal-container.active .overlay {
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

.modal {
  opacity: 0;
  width: 95%;
  max-width: 800px;
  min-width: 320px;
  padding: 30px;
  margin-top: 5%;
  background: #fff;
  border-radius: 5px;
  position: absolute;
  top: 40%;
  left: 45%;  
  transform: translate(-50%, calc(-50% - 50px));
  transition: opacity 0.4s ease-out,
  transform 0.4s ease-out;
}

.modal-container.active .modal {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s 0.2s ease-out,
  transform 0.4s 0.2s ease-out;
}

.close-modal {
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  background: #ff365e;
  color: #fff;
}
.modal h1 {
  margin-bottom: 10px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  color: black;
}
.modal p {
  line-height: 1.4;
  margin-bottom: 5px;
}
/*Fin Fenetre Modal---------------------------------------------*/

/*Fin Disco CSS section*/

/*Rewards CSS section*/
table {
  border-collapse: collapse;
  border-radius: 1em;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: sans-serif;
  min-width: 320px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  color : black;
}

thead tr {
  background-color: rgba(44, 135, 66, 0.5);
  color: #ffffff;
  text-align: left; 
}

th, td {
    padding: 12px 15px;
   
}

tbody tr {
  border-bottom: 1px solid #dddddd;  
}

tbody tr:nth-of-type(even) {
  background-color:rgba(44, 135, 66, 0.3);  
  color: white;
}

tbody tr:nth-of-type(odd) {
  background-color:rgba(250, 250, 250, 0.8)
}

tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}
/*Fin Rewards CSS section*/

/*---------------------------------------------------------------------------*/
.newsbox {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}


.card-news {
border-radius: 10px;
  width: 20rem;
  margin: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.card-img-news {
  border-radius: 10px 10px 0 0;
  background-size: cover;
  background-position: center;
  background-image: src("/assets/img/news3.jpg");
  height: 200px;
  width: 100%;
}
.card-body-news {
  padding: 10px 20px;
}
.card-body-news h2 {
  /* margin: 10px 0px; */
  text-align: center;
}
/* .card-button {
  border: none;
  border-radius: 10px;
  height: 50px;
  background-color: lightblue;
  width: 100%;
} */
/*--*/

.card-button {
  background: #00ac0345;
  border: 1px solid #00ac0359;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 16px;
  min-height: 40px;
  outline: 0;
  padding: 12px 14px;
  text-align: center;
  text-rendering: geometricprecision;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
}

.footer{
 height:4rem; 
}
@media screen and (min-width : 768px) {
  

.card-button:hover,
.card-button:active {
  background-color: initial;
  background-position: 0 0;
  color: #00ac0359;
}

.card-button:active {
  opacity: .5;
}

}